/* grows420 - minimalist flat design | build: 20260720a */
:root {
    --accent: #00996a;
    --accent-hover: #00b980;
    --accent-muted: #9a9a9a33;
    --radius: 8px;
    --radius-lg: 12px;
    --transition: 0.2s ease;
    --sidebar-width: 240px;
    /* Rail = eingeklappte Breite; Iconsmittig darin (zu- und aufgeklappt identisch) */
    --sidebar-rail: 72px;
    --sidebar-width-collapsed: var(--sidebar-rail);
    --sidebar-current-width: var(--sidebar-width);
    /* Sidebar Topbar/Main gemeinsam (sonst springt die Topbar vor dem Slide) */
    --sidebar-anim: 0.22s ease;
    --sidebar-icon-size: 20px;
    --sidebar-logo-size: 40px;
    /* Abstand Icon -> Menue-text */
    --sidebar-label-gap: 12px;
    --sidebar-icon-inset: calc((var(--sidebar-rail) - var(--sidebar-icon-size)) / 2);
    --sidebar-logo-inset: calc((var(--sidebar-rail) - var(--sidebar-logo-size)) / 2);
    --topbar-height: 72px;
    /* Gesamt-hoehe der Topbar inkl. Safe-Area (fixed + Content-Offset) */
    --topbar-offset: calc(var(--topbar-height) + var(--safe-top));
    /* Content-Spalte: Topbar-Inhalt daran ausrichten */
    --content-max: 1280px;
    --content-pad-x: 32px;
    --content-pad-y: 24px;
    --content-pad-bottom: 16px;
    --bottom-nav-height: 64px;
    /* System-UI (Notch / Statusleiste / Home-Indicator) - Browser oft 0 */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --bottom-nav-total: calc(var(--bottom-nav-height) + var(--safe-bottom));
    --font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/*
* Capacitor-App (WebView, oft edge-to-edge): env() liefert auf Android
* manchmal 0 - dann Mindest-Insets, damit Statusleiste/Nav-Leiste nichts verdecken.
*/
html.capacitor-native {
    /* Echte Safe-Area; Mindest-Inset nur auf Touch-Handy (nicht Desktop-Fenster). */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --bottom-nav-total: calc(var(--bottom-nav-height) + var(--safe-bottom));
    /* Extra Abstand Topbar -> erster Content */
    --content-top-gap: 14px;
}

/* Sidebar-Logo unter der Statusleiste */
html.capacitor-native .sidebar-header {
    padding-top: calc(14px + var(--safe-top));
    padding-bottom: 14px;
    height: calc(var(--topbar-height) + var(--safe-top));
    min-height: calc(var(--topbar-height) + var(--safe-top));
    max-height: calc(var(--topbar-height) + var(--safe-top));
}

/* Content: mehr Luft unter der Topbar */
html.capacitor-native .content {
    padding-top: var(--content-top-gap, 14px);
}

html.capacitor-native {
    --topbar-offset: calc(var(--topbar-height) + var(--safe-top));
}

/* Android-WebView: env() oft 0. Nicht im verkleinerten Desktop-Fenster. */
@media (max-width: 767px) and (hover: none) and (pointer: coarse) {
    html.capacitor-native {
        --safe-top: max(env(safe-area-inset-top, 0px), 36px);
        --safe-bottom: max(env(safe-area-inset-bottom, 0px), 16px);
        --bottom-nav-total: calc(var(--bottom-nav-height) + var(--safe-bottom));
        --topbar-offset: calc(var(--topbar-height) + var(--safe-top));
    }
}

/* Giessen u. a. Fullscreen-Modal: Safe-Area nur am Shell, Footer nicht doppelt anheben */
html.capacitor-native .modal.modal-full-mobile {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

html.capacitor-native .modal.modal-full-mobile .modal-header {
    /* kein zweites safe-top - Shell hat es schon */
    padding-top: 16px;
}

html.capacitor-native .modal.modal-full-mobile .modal-footer {
    /* nur normaler Innenabstand; System-Nav steckt schon im Modal-Padding */
    padding-bottom: 16px;
}

/* Sheet-Modals (von unten): Footer knapp ueber der System-Nav */
html.capacitor-native .modal:not(.modal-full-mobile) .modal-footer {
    padding-bottom: max(14px, var(--safe-bottom));
}

html.sidebar-collapsed {
    --sidebar-current-width: var(--sidebar-width-collapsed);
}

/* Reload: eingeklappte Sidebar ohne sichtbares Zuklappen */
html.sidebar-no-anim .sidebar,
html.sidebar-no-anim .main,
html.sidebar-no-anim .topbar,
html.sidebar-no-anim .equip-inventory-pin-bar.is-pinned {
    transition: none !important;
}

[data-theme="dark"] {
    --bg: #0A0A0A;
    --bg-elevated: #141414;
    --bg-card: #121212;
    --bg-hover: #1a1a1a;
    --border: rgb(252 252 252 / 5%);
    --text: #efefef;
    --text-secondary: #999;
    --text-muted: #555;
    --placeholder: #a8a8a8;
    --shadow: none;
    --overlay: rgba(0, 0, 0, 0.7);
    /* Kalender: dezent, passend zu bg-card + Accent */
    --calendar-day-bg: #161616;
    --calendar-day-hover: #1c2420;
    --calendar-day-content-bg: #1a2a24;
    --calendar-day-content-text: #efefef;
}

[data-theme="light"] {
    --bg: #f7f7f7;
    --bg-elevated: #f9f9f9;
    --bg-card: #ffffff;
    --bg-hover: #ebebeb;
    --border: #dfdfdf;
    --text: #1a1a1a;
    --text-secondary: #333333;
    --text-muted: #333333;
    --placeholder: #8a8a8a;
    --shadow: none;
    --overlay: rgba(0, 0, 0, 0.4);
    --calendar-day-bg: #ffffff;
    --calendar-day-hover: #D5E9D5;
    --calendar-day-content-bg: #D5E9D5;
    --calendar-day-content-text: #ffffff;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Thumbs: Ausrichtung steckt in den Pixeln */
.gallery-item img, .grow-card-cover img, .grow-detail-cover img, .calendar-thumb, .calendar-photo-item img, .journal-thumb, .grow-cover-preview img {
    image-orientation: none;
}

/* Original in der Lightbox: EXIF des Vollbilds beachten */
.lightbox-img {
    image-orientation: from-image;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-gutter: stable;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    /* Landscape / Mobile: Viewport nicht horizontal ueberlaufen */
    height: 100%;
    /* Android WebView: kein blauer Touch-Flash */
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100dvh;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;
}
@media (hover: none) and (pointer: coarse) {

    body {
        -webkit-user-select: none;
        user-select: none;
        -webkit-touch-callout: none;
    }

    input,
    textarea,
    select,
    [contenteditable="true"] {
        -webkit-user-select: text;
        user-select: text;
        -webkit-touch-callout: default;
    }

    /* Buttons, Menue, Links: kein System-Highlight (blau) */
    button,
    a,
    .btn,
    .menu-btn,
    [role="button"],
    summary,
    .filter-chip,
    .bottom-nav-item {
        -webkit-tap-highlight-color: transparent;
        -webkit-touch-callout: none;
    }
}

/* UI-SchaltFlaechen: Text nicht markierbar (Desktop + Handy) */
button,
.btn,
.add-fab,
.menu-btn,
.filter-chip,
.bottom-nav-item,
.native-media-sheet,
.native-media-opt,
.native-media-cancel,
.native-media-sheet-title,
.native-media-opt-title,
.native-media-opt-hint,
.sidebar a,
.sidebar button,
[role="button"],
summary {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}
a {
    color: inherit;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea {
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    font-size: inherit;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

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

/* Layout */
#app {
    display: flex;
    min-height: 100dvh;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    /* X clippen; Y visible, sonst bricht sticky (Inventar-Header Desktop) */
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
}

.sidebar {
    position: fixed;
    top: 0;
    left: 0;
    width: var(--sidebar-width);
    height: 100dvh;
    background: var(--bg-card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform var(--transition), width var(--sidebar-anim);
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent) transparent;
}

.sidebar.open {
    transform: translateX(0);
}

/* Handy: Sidebar ueber Bottom-Nav, Theme-Button am unteren Rand */
@media (max-width: 767px) {
    .sidebar {
        z-index: 120;
        height: 100dvh;
        max-height: 100dvh;
        box-sizing: border-box;
        /* nur Home-Indicator, kein Abstand fuer Bottom-Nav */
        padding-bottom: 0;
    }

    .sidebar-nav {
        flex: 1 1 auto;
        min-height: 0;
    }

    .sidebar-footer {
        flex-shrink: 0;
        margin-top: auto;
        padding: 0;
    }

    .sidebar-backdrop {
        z-index: 115;
    }

    /* Offenes Menue Bottom-Nav ausblenden, Theme sitzt am Screen-Rand */
    body.mobile-menu-open .bottom-nav {
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
    }
}

/*
* Sidebar-Layout (auf- und zugeklappt identische Icon-Position):
* [ inset | icon | gap | label ]
* inset = (72 - iconSize) / 2 -> Icon mittig in der Rail
* gap = 12px zum Menue-text
*/
.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 16px 10px 16px 0;
    border-bottom: 1px solid var(--border);
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    max-height: var(--topbar-height);
    box-sizing: border-box;
}

.logo {
    display: flex;
    align-items: center;
    padding-left: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size) + var(--sidebar-label-gap));
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    min-width: 0;
    flex: 1;
    color: var(--accent);
}

.logo-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
}

/* (nur Akzentfarbe) */
.logo-accent {
    color: var(--accent);
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

.auth-brand h1 .logo-accent {
    font-size: 1em;
    font-weight: inherit;
    letter-spacing: inherit;
}

.sidebar-collapse-btn, .sidebar-expand-btn {
    display: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}

.sidebar-collapse-btn:hover, .sidebar-expand-btn:hover {
    background: var(--bg-hover);
    color: #ffffff;
}

[data-theme="light"] .sidebar-collapse-btn,
[data-theme="light"] .sidebar-expand-btn,
[data-theme="light"] .sidebar-collapse-btn:hover,
[data-theme="light"] .sidebar-expand-btn:hover {
    color: #1a1a1a;
}

.sidebar-collapse-btn svg, .sidebar-expand-btn svg {
    width: 18px;
    height: 18px;
}

.sidebar-nav {
    flex: 1 1 auto;
    min-height: 0;
    /* Oben mehr Luft unter dem Sidebar-Header (Uebersicht) */
    padding: 12px 0 4px;
    display: flex;
    flex-direction: column;
    /* Abstand nur zwischen Items; Gruppen-Abstand kommt vom .nav-group-sep */
    gap: 1px;
    overflow-y: auto;
    overflow-x: hidden;
}

/*
* Gruppen-Abstand: eigene Zeile zwischen Gruppen.
* Nicht margin am ersten .nav-item - sonst ungleich hohe erste Eintraege.
*/
.sidebar-nav .nav-group-sep {
    flex: 0 0 10px;
    height: 10px;
    min-height: 10px;
    max-height: 10px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    pointer-events: none;
    /* gap davor/danach abziehen: optisch ~8-10px Luecke zwischen Gruppen */
    box-sizing: border-box;
}

/* Nav-Zeile: alle gleich hoch (auf- und zugeklappt dieselben Masse) */
.nav-item {
    --nav-item-inset-x: 8px;
    position: relative;
    display: grid;
    grid-template-columns: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size)) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sidebar-label-gap);
    flex: 0 0 36px;
    height: 36px;
    min-height: 36px;
    max-height: 36px;
    padding: 0 10px 0 0;
    margin: 0;
    border-radius: var(--radius);
    color: var(--text-secondary);
    /* Hintergrund auf ::before (mit Randabstand), nicht full-bleed */
    background: transparent;
    transition: color var(--transition);
    white-space: nowrap;
    box-sizing: border-box;
    overflow: hidden; /* Icon-Ueberstand (z. B. Cannabis) nicht in Nachbarzeilen */
    z-index: 0;
}

/* Hover/Active: Abstand links/rechts zum Sidebar-Rand */
.nav-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--nav-item-inset-x);
    right: var(--nav-item-inset-x);
    border-radius: var(--radius);
    background: transparent;
    z-index: -1;
    transition: background var(--transition);
    pointer-events: none;
}

.nav-item svg {
    grid-column: 1;
    width: var(--sidebar-icon-size);
    height: var(--sidebar-icon-size);
    max-width: var(--sidebar-icon-size);
    max-height: var(--sidebar-icon-size);
    margin-left: var(--sidebar-icon-inset);
    margin-right: 0;
    margin-top: 0;
    margin-bottom: 0;
    justify-self: start;
    align-self: center;
    flex-shrink: 0;
    overflow: hidden;
    color: inherit;
    stroke: currentColor;
    display: block;
    box-sizing: content-box;
}

.nav-item svg.nav-icon-cannabis {
    overflow: hidden;
}

.nav-item > span {
    grid-column: 2;
    min-width: 0;
    padding: 0;
    margin: 0;
    line-height: 34px;
    font-size: 0.97rem;
}

.nav-item:hover {
    background: transparent;
    color: #ffffff;
}

.nav-item:hover::before {
    background: var(--bg-hover);
}

.nav-item.active {
    background: transparent;
    color: #ffffff;
}

.nav-item.active::before {
    background: var(--accent-muted);
}

.nav-item.active:hover::before {
    background: var(--accent-muted);
}

.sidebar-footer {
    flex-shrink: 0;
    margin-top: auto;
    /* Kein Abstand unter Profil - Hover bis zum unteren Rand */
    padding: 0;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Expand wird absolut ueber dem Footer positioniert */
    position: relative;
}

/* Home-Indicator: feste Profil-hoehe + safe-area, zu- und aufgeklappt gleich */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .sidebar-footer .sidebar-avatar-btn {
        height: calc(var(--sidebar-logo-size) + 28px + env(safe-area-inset-bottom, 0px));
        min-height: calc(var(--sidebar-logo-size) + 28px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
}

/*
* Theme-Toggle: Sonne + Mond in DIESER Grid-Zelle stapeln,
* sonst landet das zweite SVG in der Text-Spalte und springt.
* Feste hoehe (Icon + 14+14) - zu- und aufgeklappt gleich.
*/
.theme-toggle {
    display: grid;
    grid-template-columns: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size)) minmax(0, 1fr);
    align-items: center;
    column-gap: var(--sidebar-label-gap);
    width: 100%;
    height: calc(var(--sidebar-icon-size) + 28px);
    min-height: calc(var(--sidebar-icon-size) + 28px);
    padding: 0 12px 0 0;
    line-height: 0;
    border-radius: 0;
    color: #ffffff;
    transition: background var(--transition), color var(--transition);
    border: none;
    /* Trenner ohne border-box-Offset */
    box-shadow: inset 0 -1px 0 var(--border);
    background: transparent;
    cursor: pointer;
    font: inherit;
    box-sizing: border-box;
}

.theme-toggle:hover {
    background: var(--bg-hover);
    color: #ffffff;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    grid-column: 1;
    grid-row: 1;
    display: block;
    width: var(--sidebar-icon-size);
    height: var(--sidebar-icon-size);
    margin-left: var(--sidebar-icon-inset);
    margin-right: 0;
    justify-self: start;
    align-self: center;
    color: var(--text-secondary);
    stroke: currentColor;
}

.theme-toggle .theme-label {
    grid-column: 2;
    grid-row: 1;
    color: var(--text-secondary);
    min-width: 0;
    text-align: left;
    line-height: 1.25;
    font-size: 1rem;
}

/* Hell-Theme: Sidebar-Text/Icons dunkel (lesbar auf hellem Hintergrund) */
[data-theme="light"] .nav-item,
[data-theme="light"] .nav-item:hover,
[data-theme="light"] .theme-toggle,
[data-theme="light"] .theme-toggle:hover {
    color: var(--text-secondary);
}

[data-theme="light"] .nav-item.active {
    color: var(--accent);
}

/* Light: Sidebar-Icons etwas feinere Linie */
[data-theme="light"] .sidebar-nav .nav-item svg:not(.nav-icon-cannabis),
[data-theme="light"] .theme-toggle svg,
[data-theme="light"] .sidebar-collapse-btn svg,
[data-theme="light"] .sidebar-expand-btn svg {
    stroke-width: 1.6;
}

[data-theme="dark"] .icon-sun {
    display: block;
}

[data-theme="dark"] .icon-moon {
    display: none;
}

[data-theme="light"] .icon-sun {
    display: none;
}

[data-theme="light"] .icon-moon {
    display: block;
}

.main {
    flex: 1;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
    min-height: 100svh;
    width: 100%;
    max-width: 100%;
    min-width: 0; /* Flex: Landscape-Ueberlauf verhindern */
    /*
* Nur X clippen Y explizit visible, sonst machen Browser aus clip+visible
* oft overflow-y:auto und sticky (Inventar-Header) bleibt stecken.
*/
    overflow-x: clip;
    overflow-y: visible;
    box-sizing: border-box;
    transition: margin-left var(--sidebar-anim), width var(--sidebar-anim), max-width var(--sidebar-anim);
    /* Platz fuer fixed Topbar, damit Content nicht darunter startet */
    padding-top: var(--topbar-offset);
}

/* Custom tooltips (Theme-Variablen: Dark dunkel, Light hell) */
.app-tooltip {
    position: fixed;
    z-index: 10000;
    max-width: min(320px, calc(100vw - 24px));
    padding: 8px 12px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--bg-elevated) 92%, var(--text));
    color: var(--text);
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.4;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    white-space: pre-line;
    word-break: break-word;
}

.app-tooltip.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Formular-Validierung (statt nativem fuelle dieses Feld aus.) */
.app-tooltip.is-validation {
    background: color-mix(in srgb, #e57373 22%, var(--bg-elevated));
    border-color: color-mix(in srgb, #e57373 55%, var(--border));
    color: var(--text);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.32);
}

/* Light: helle Flaeche, dunkler Text (nicht invertiert dunkel) */
[data-theme="light"] .app-tooltip {
    background: #ffffff;
    color: #1a1a1a;
    border-color: #d8d8d8;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .app-tooltip.is-validation {
    background: #fff5f5;
    color: #8b1e1e;
    border-color: #e8a0a0;
    box-shadow: 0 6px 20px rgba(192, 57, 43, 0.12);
}

.topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    /* Shell: volle Main-Breite (Hintergrund/Border). Inhalt = .topbar-inner */
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    max-height: var(--topbar-height);
    flex-shrink: 0;
    display: block;
    padding: 0;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease;
}

html.topbar-hidden .topbar {
    opacity: 0;
    pointer-events: none;
}

/* Zuordnen offen: Topbar + Pin-Leiste bleiben beim Scrollen */
html.equip-assign-lock-chrome.topbar-hidden .topbar {
    opacity: 1;
    pointer-events: auto;
}

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

    .equip-inventory-pin-bar.is-pinned {
        transition: left var(--sidebar-anim);
    }
}

/*
* Topbar-Inhalt = gleiche Spalte wie .content:
* max 1280px, zentriert, gleiches horizontales Padding (32px).
*/
.topbar-inner {
    display: flex;
    align-items: center;
    gap: 1px;
    box-sizing: border-box;
    width: min(100%, var(--content-max));
    max-width: var(--content-max);
    min-width: 0;
    height: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: max(var(--content-pad-x), var(--safe-left));
    padding-right: max(var(--content-pad-x), var(--safe-right));
}

/* Topbar-Kinder vertikal zentriert (ohne extra min-height - sonst doppelt hoch) */
.topbar-inner > .page-title,
.topbar-inner > .topbar-actions {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    min-height: 0;
    height: 100%;
}

.topbar-inner > .topbar-actions {
    justify-content: flex-end;
    margin-left: auto;
}

/* Hamburger: nur Handy - Desktop-Regel setzt display:none (Spezifit aet beachten) */
.menu-btn {
    display: none;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    min-height: 40px;
    max-height: 40px;
    padding: 0;
    margin: 0 2px 0 0;
    line-height: 0;
    box-sizing: border-box;
    border-radius: var(--radius);
    color: var(--text-secondary);
    flex-shrink: 0;
    -webkit-tap-highlight-color: transparent;
}

.menu-btn:hover {
    background: var(--bg-hover);
}

.menu-btn svg {
    width: 22px;
    height: 22px;
}

.page-title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.14em;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-transform: uppercase;
    /* Einblenden weich Ausblenden sofort (kein Flash beim Reload) */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

/* Titel in Topbar ausgeblendet, solange Content-Ueberschrift sichtbar (Desktop + Handy) */
.page-title.is-scroll-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: none;
}

.page-title.is-replaced,
body.topbar-grow-filters-on .page-title {
    display: none;
}

.topbar-grow-filters {
    display: none;
    flex: 1 1 auto;
    min-width: 0;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 12px), transparent 100%);
}

.topbar-grow-filters:not([hidden]) {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: 100%;
}

.topbar-grow-filters::-webkit-scrollbar {
    display: none;
}

.topbar-grow-filters .filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.topbar-grow-filters .filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border);
}

.topbar-grow-filters .filter-chip.active {
    background: var(--accent-muted);
    color: var(--accent);
    border-color: var(--border);
    box-shadow: none;
}

.topbar-grow-filters .filter-chip.active:hover {
    border-color: var(--accent);
}

.topbar-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
}

.topbar-actions-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    align-items: center;
}

/* Minimierte Termine: Badges links neben dem Topbar-Button */
.topbar-open-tasks {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    margin-right: 10px;
}

.topbar-open-tasks-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    color: inherit;
    font: inherit;
    line-height: 1;
    min-height: 32px;
    cursor: pointer;
}

.topbar-open-tasks-btn:hover,
.topbar-open-tasks-btn:focus,
.topbar-open-tasks-btn:focus-visible {
    background: transparent;
    border: none;
    box-shadow: none;
    outline: none;
}

.topbar-open-tasks-btn:focus-visible .open-tasks-count {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Uebersicht: viele Topbar-Buttons. Titel auf schmalen Screens ausblenden */
@media (max-width: 720px) {
    body.topbar-compact .page-title {
        display: none;
    }

    body.topbar-compact .topbar-actions {
        flex: 1;
        min-width: 0;
        justify-content: flex-end;
        gap: 2px;
        /* rechter Rand: Giessen nicht abschneiden */
        padding-right: 2px;
        box-sizing: border-box;
        overflow: hidden;
    }

    body.topbar-compact .topbar-actions-row {
        gap: 2px;
        max-width: 100%;
        width: 100%;
        justify-content: flex-end;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        box-sizing: border-box;
        /* etwas Innenabstand rechts, damit letzter Button voll sichtbar */
        padding-right: 1px;
    }

    body.topbar-compact .topbar-actions-row::-webkit-scrollbar {
        display: none;
    }

    /* Kompakt: engere Buttons, damit alle 4 inkl. Giessen Platz haben */
    body.topbar-compact .topbar-actions-row .btn {
        flex-shrink: 0;
        min-height: 36px;
        padding: 7px 9px;
        font-size: 0.78rem;
        line-height: 1.15;
    }

    body.topbar-compact .topbar-actions-row .btn-icon {
        padding: 7px 8px;
        min-width: 36px;
    }
    
    .topbar {
        gap: 2px;
    }

    body.topbar-compact .menu-btn {
        width: 40px;
        height: 40px;
        margin-right: 0;
    }
}

/* App (Capacitor): Safe-Area + Hamburger - gilt auch Landscape (breite Viewports) */
html.capacitor-native .topbar {
    height: calc(var(--topbar-height) + var(--safe-top));
    min-height: calc(var(--topbar-height) + var(--safe-top));
    max-height: calc(var(--topbar-height) + var(--safe-top));
    padding-top: var(--safe-top);
}

html.capacitor-native .topbar-inner {
    height: var(--topbar-height);
    min-height: var(--topbar-height);
    max-height: var(--topbar-height);
}

html.capacitor-native .topbar-inner > .page-title,
html.capacitor-native .topbar-inner > .topbar-actions,
html.capacitor-native .topbar-inner > .topbar-grow-filters {
    min-height: 0;
    height: 100%;
    align-self: stretch;
}

html.capacitor-native .topbar-inner > .menu-btn {
    align-self: center;
    height: 40px;
    min-height: 40px;
    max-height: 40px;
}

/*
* Capacitor: Hamburger nur im echten Mobile-Layout (ohne permanente Sidebar).
* Ab 768px ist die Sidebar immer sichtbar Hamburger waere wirkungslos.
*/
html.capacitor-native .menu-btn,
html.capacitor-native .topbar-inner > .menu-btn {
    display: flex !important;
}

@media (min-width: 768px) {
    html.capacitor-native .menu-btn,
    html.capacitor-native .topbar-inner > .menu-btn {
        display: none !important;
    }
}

/* Handy: Topbar inkl. Safe-Area, Hamburger sichtbar, Buttons fingerfreundlich */
@media (max-width: 767px) {
    .topbar {
        height: calc(var(--topbar-height) + var(--safe-top));
        min-height: calc(var(--topbar-height) + var(--safe-top));
        max-height: calc(var(--topbar-height) + var(--safe-top));
        padding-top: var(--safe-top);
        cursor: pointer;
    }

    .topbar-actions,
    .topbar-grow-filters {
        cursor: auto;
    }

    .topbar-inner {
        height: var(--topbar-height);
        min-height: var(--topbar-height);
        max-height: var(--topbar-height);
    }

    .topbar-inner > .page-title,
    .topbar-inner > .topbar-actions {
        min-height: 0;
        height: 100%;
        align-self: stretch;
    }

    .menu-btn,
    .topbar-inner > .menu-btn {
        display: flex;
        align-self: center;
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        max-height: 44px;
        padding: 0;
        line-height: 0;
    }

    .topbar-actions {
        gap: 6px;
    }

    body:not(.topbar-compact) .topbar-actions .btn,
    body:not(.topbar-compact) .topbar-actions-row .btn {
        min-height: 40px;
        padding: 10px 16px;
        font-size: 0.875rem;
        line-height: 1.2;
    }

    body:not(.topbar-compact) .topbar-actions .btn-sm,
    body:not(.topbar-compact) .topbar-actions-row .btn-sm {
        min-height: 40px;
        padding: 9px 14px;
        font-size: 0.85rem;
    }

    body:not(.topbar-compact) .topbar-actions .btn-icon,
    body:not(.topbar-compact) .topbar-actions-row .btn-icon {
        min-width: 42px;
        min-height: 40px;
        padding: 9px 11px;
    }
}

/* Desktop: kompaktere Topbar-Buttons */
@media (min-width: 768px) {
    .topbar-actions {
        gap: 6px;
    }

    .topbar-actions-row {
        gap: 6px;
    }

    .topbar-actions .btn,
    .topbar-actions-row .btn {
        min-height: 34px;
        padding: 6px 12px;
        font-size: 0.82rem;
        line-height: 1.2;
    }

    .topbar-actions .btn-sm,
    .topbar-actions-row .btn-sm {
        min-height: 34px;
        padding: 6px 10px;
        font-size: 0.8rem;
    }

    .topbar-actions .btn-icon,
    .topbar-actions-row .btn-icon {
        min-width: 34px;
        min-height: 34px;
        padding: 6px 8px;
    }
}

.content {
    flex: 1;
    /* Gleiche Spalte wie .topbar-inner (max 1280, zentriert, pad 24/32) */
    box-sizing: border-box;
    width: min(100%, var(--content-max));
    max-width: var(--content-max);
    min-width: 0;
    margin-left: auto;
    margin-right: auto;
    padding: var(--content-pad-y) var(--content-pad-x);
    padding-bottom: var(--content-pad-bottom);
    /* X clippen, Y visible sticky Inventar-Header sticky zum Viewport */
    overflow-x: clip;
    overflow-y: visible;
}

.content > :last-child,
.grow-detail-page > :last-child,
.env-detail-page > :last-child {
    margin-bottom: 0;
}

/* Landscape (Handy): kompakte Topbar + Logo-Leiste exakt gleiche hoehe */
@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --topbar-height: 44px;
        --sidebar-logo-size: 28px;
    }

    html, body, #app {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Inneres Graph-Scrollen darf nicht von html/body overflow-x: hidden sterben */
    html.chart-detail-open,
    html.chart-detail-open body,
    html.chart-detail-open #app {
        overflow-x: visible;
    }

    /*
* Topbar und Sidebar-Logo: gleiche Gesamthoehe
* = Content-Zeile ( - topbar-height) + Safe-Area
*/
    .topbar,
    html.capacitor-native .topbar {
        height: calc(var(--topbar-height) + var(--safe-top));
        min-height: calc(var(--topbar-height) + var(--safe-top));
        max-height: calc(var(--topbar-height) + var(--safe-top));
        padding-top: var(--safe-top);
        padding-bottom: 0;
        box-sizing: border-box;
    }

    .topbar-inner {
        height: var(--topbar-height);
        min-height: var(--topbar-height);
        max-height: var(--topbar-height);
        align-items: center;
    }

    .topbar-inner > .page-title,
    .topbar-inner > .topbar-actions,
    html.capacitor-native .topbar-inner > .page-title,
    html.capacitor-native .topbar-inner > .topbar-actions {
        min-height: 0;
        height: 100%;
        align-self: center;
    }

    .menu-btn,
    .topbar-inner > .menu-btn,
    html.capacitor-native .topbar-inner > .menu-btn,
    body.topbar-compact .menu-btn {
        align-self: center;
        width: 34px;
        height: 34px;
        min-width: 34px;
        min-height: 34px;
        max-height: 34px;
        padding: 0;
        line-height: 0;
    }

    .menu-btn svg {
        width: 20px;
        height: 20px;
    }

    .topbar-actions .btn,
    .topbar-actions-row .btn,
    body:not(.topbar-compact) .topbar-actions .btn,
    body:not(.topbar-compact) .topbar-actions-row .btn,
    body.topbar-compact .topbar-actions-row .btn {
        min-height: 32px;
        padding: 5px 9px;
        font-size: 0.78rem;
    }

    .topbar-actions .btn-icon,
    .topbar-actions-row .btn-icon,
    body:not(.topbar-compact) .topbar-actions .btn-icon,
    body.topbar-compact .topbar-actions-row .btn-icon {
        min-width: 32px;
        min-height: 32px;
        padding: 5px 7px;
    }

    /* Sidebar-Logo-Leiste = exakt Topbar-hoehe */
    .sidebar-header,
    html.capacitor-native .sidebar-header,
    html.sidebar-collapsed .sidebar-header {
        height: calc(var(--topbar-height) + var(--safe-top));
        min-height: calc(var(--topbar-height) + var(--safe-top));
        max-height: calc(var(--topbar-height) + var(--safe-top));
        padding-top: var(--safe-top);
        padding-bottom: 0;
        padding-left: 0;
        padding-right: 8px;
        gap: 6px;
        box-sizing: border-box;
        align-items: center;
    }

    .logo {
        font-size: 1rem;
    }

    html.capacitor-native .content {
        padding-top: max(6px, calc(var(--content-top-gap, 14px) * 0.45));
    }

    .content {
        padding-left: max(8px, var(--safe-left));
        padding-right: max(8px, var(--safe-right));
        padding-bottom: calc(var(--bottom-nav-total) + 8px);
    }

    .modal {
        max-height: min(96dvh, 100svh);
        max-width: min(960px, calc(100vw - 12px));
    }

    .modal.modal-wide,
    .modal.modal-chart-detail {
        max-width: calc(100vw - 12px);
        max-height: min(98dvh, 100svh);
        width: calc(100vw - 12px);
    }

    .modal-overlay:has(.modal.modal-chart-detail) {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .modal.modal-chart-detail {
        width: 100%;
        max-width: none;
        height: min(100dvh, 100svh);
        max-height: min(100dvh, 100svh);
        min-height: min(100dvh, 100svh);
        border-radius: 0;
    }

    /*
* Dialoge Landscape: wenig Abstand Titel oberer Rand.
* Portrait nutzt min. 36px safe-top im Querformat oft unnoetig (Notch seitlich).
*/
    html.capacitor-native .modal.modal-full-mobile,
    .modal.modal-full-mobile {
        padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
    }

    .modal-header {
        padding: 6px 12px !important;
        padding-left: max(12px, var(--safe-left)) !important;
        padding-right: max(8px, var(--safe-right)) !important;
        min-height: 0 !important;
    }

    .modal.modal-full-mobile .modal-header,
    html.capacitor-native .modal.modal-full-mobile .modal-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .modal-title {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .modal-close {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        min-height: 32px !important;
    }

    .modal-close svg {
        width: 18px;
        height: 18px;
    }

    .modal-body {
        padding: 10px 14px;
    }

    .modal-footer {
        padding: 8px 12px;
    }

    .env-chart-detail-plot .env-chart-svg,
    .env-chart-detail-plot .env-chart-svg-detail {
        min-height: 0;
        max-height: none;
        height: 100%;
    }

    .env-chart-detail {
        gap: 8px;
    }

    .env-chart-detail-hero {
        gap: 4px;
    }

    .env-chart-detail-hero-main {
        gap: 8px;
    }

    .env-chart-detail-kicker {
        font-size: 0.68rem;
        margin: 0;
    }

    .env-chart-detail-value strong {
        font-size: 1.25rem;
        line-height: 1.1;
    }

    .env-chart-detail-value span {
        font-size: 0.8rem;
    }

    .env-chart-detail-swatch {
        width: 10px;
        height: 10px;
        margin-top: 4px;
    }

    .env-chart-detail-meta {
        gap: 4px;
    }

    .env-chart-meta-chip {
        padding: 6px 8px;
    }

    .env-chart-meta-chip-label {
        font-size: 0.62rem;
    }

    .env-chart-meta-chip-value {
        font-size: 0.88rem;
    }

    .env-chart-detail-stats {
        gap: 4px;
    }

    .env-chart-stat {
        padding: 6px 8px;
        gap: 0;
    }

    .env-chart-stat-label {
        font-size: 0.62rem;
    }

    .env-chart-stat-value {
        font-size: 0.88rem;
    }

    .env-chart-detail-toolbar {
        gap: 6px;
    }

    .env-chart-detail-range-select,
    .env-chart-detail-zoom {
        height: 32px;
    }

    .env-chart-zoom-btn {
        min-width: 28px;
        height: 28px;
        padding: 0 6px;
        font-size: 1rem;
    }

    .env-chart-zoom-label {
        min-width: 44px;
        font-size: 0.75rem;
        padding: 0 4px;
    }

    .modal.modal-chart-detail .modal-header {
        padding-top: 10px;
        padding-bottom: 8px;
        min-height: 0;
    }

    .modal.modal-chart-detail .modal-title {
        font-size: 1rem;
    }

    .modal.modal-chart-detail .modal-body {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
        overflow: hidden;
        padding-top: 8px;
        padding-bottom: 6px;
    }

    .modal.modal-chart-detail .env-chart-detail {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
    }

    .modal.modal-chart-detail .env-chart-detail-frame {
        flex: 1 1 auto;
        min-height: 80px;
        display: flex;
        flex-direction: column;
    }

    .modal.modal-chart-detail .env-chart-detail-scroll {
        flex: 1 1 auto;
        min-height: 0;
        height: 100%;
        overflow-x: scroll;
        overflow-y: hidden;
        touch-action: pan-x pinch-zoom;
        -webkit-overflow-scrolling: touch;
    }

    .modal.modal-chart-detail .env-chart-detail-plot {
        height: 100% !important;
    }

    .modal.modal-chart-detail .modal-footer {
        padding-top: 10px;
        padding-bottom: 10px;
        border-top: none;
    }
}
@media (max-width: 767px) {
    :root {
        --content-pad-x: 16px;
        --content-pad-y: 16px;
        --content-pad-bottom: 16px;
    }

    .content {
        padding: var(--content-pad-y) var(--content-pad-x);
        /* Platz fuer Bottom-Nav */
        padding-bottom: calc(var(--bottom-nav-total) + 16px);
    }
}

@media (max-width: 480px) {
    :root {
        --content-pad-x: 12px;
        --content-pad-y: 12px;
    }

    .content {
        max-width: 100%;
        padding: var(--content-pad-y) var(--content-pad-x);
        padding-bottom: calc(var(--bottom-nav-total) + 16px);
    }
}

/* Desktop: Nach oben - erscheint nach etwas Scroll */
.back-to-top {
    display: none;
}

@media (min-width: 768px) {
    .back-to-top {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 24px;
        bottom: 24px;
        z-index: 80;
        width: 44px;
        height: 44px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid var(--border);
        background: var(--bg-elevated);
        color: var(--text-secondary);
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(10px);
        transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease,
            background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    }

    .back-to-top[hidden] {
        display: inline-flex !important;
    }

    .back-to-top.is-visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .back-to-top:hover {
        background: var(--bg-hover);
        color: var(--accent);
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    }

    .back-to-top:focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
    }

    .back-to-top svg {
        width: 22px;
        height: 22px;
    }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
    .back-to-top {
        transition: none;
        transform: none;
    }
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    /* Gesamt-hoehe inkl. Safe-Area - sonst zerquetschen Icons (nur Text sichtbar) */
    height: var(--bottom-nav-total);
    min-height: var(--bottom-nav-total);
    background: var(--bg-elevated);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: flex-start;
    z-index: 100;
    padding-bottom: var(--safe-bottom);
    box-sizing: border-box;
    /* nicht von System-UI ueberdecken lassen */
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease;
}

html.topbar-hidden .bottom-nav {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .bottom-nav {
        transition: none;
    }
}

.bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    /* Feste Inhaltszeile oberhalb der Safe-Area */
    height: var(--bottom-nav-height);
    min-height: var(--bottom-nav-height);
    max-height: var(--bottom-nav-height);
    padding: 6px 4px 8px;
    box-sizing: border-box;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.15;
    text-decoration: none;
    transition: color var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.bottom-nav-item svg {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    flex-shrink: 0;
    display: block;
}

.bottom-nav-item > span {
    display: block;
    flex-shrink: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bottom-nav-item.active {
    color: var(--accent);
}

/* Floating Hinzufuegen (accent) */
.add-fab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    position: fixed;
    right: max(16px, var(--safe-right));
    bottom: calc(var(--bottom-nav-total) + 16px);
    z-index: 120;
    width: 56px;
    height: 56px;
    min-width: 56px;
    min-height: 56px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    font-size: 1.02rem;
    font-weight: 750;
    letter-spacing: 0.01em;
    box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 42%, rgba(0, 0, 0, 0.28));
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.22s ease, background 0.15s ease, box-shadow 0.15s ease, bottom 0.22s ease;
}

.add-fab svg {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
}

.add-fab:hover,
.add-fab:focus-visible {
    background: var(--accent-hover);
    outline: none;
}

.add-fab:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 38%, transparent),
        0 6px 22px color-mix(in srgb, var(--accent) 42%, rgba(0, 0, 0, 0.28));
}

.add-fab:active {
    transform: scale(0.97);
}

.add-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
}

html.auth-gate .add-fab,
body.auth-mode .add-fab,
body.welcome-mode .add-fab {
    display: none;
}

body.report-mode .add-fab {
    bottom: calc(16px + var(--safe-bottom));
}



@media (max-width: 767px) {
    html.topbar-hidden .add-fab {
        bottom: calc(16px + var(--safe-bottom));
    }

    /* Ueber Backdrop (115) und Sidebar (120), sonst kein Long-Press zum Schliessen */
    body.mobile-menu-open .add-fab {
        z-index: 125;
    }
}

@media (min-width: 768px) {
    .add-fab {
        right: 28px;
        bottom: 28px;
    }

    body.report-mode .add-fab {
        bottom: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .add-fab {
        transition: none;
    }
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--radius);
    font-weight: 500;
    font-size: 0.9rem;
    transition: background var(--transition), opacity var(--transition);
    white-space: nowrap;
    line-height: 1.2;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.btn svg {
    width: 18px;
    height: 18px;
}

.btn-primary {
    background: var(--accent);
    color: #fff;
}

.btn-primary:hover {
    background: var(--accent-hover);
}

/* Speichern: Mehrfachklick-Schutz + Ladezustand */
.btn.is-saving,
.btn:disabled.is-saving {
    opacity: 0.85;
    cursor: wait;
    pointer-events: none;
    position: relative;
}

.btn-primary.is-saving {
    background: color-mix(in srgb, var(--accent) 75%, #000);
}

.btn.is-saving::after {
    content: '';
    width: 0.85em;
    height: 0.85em;
    margin-left: 0.35em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    vertical-align: -0.1em;
    animation: btn-save-spin 0.65s linear infinite;
    flex-shrink: 0;
}

@keyframes btn-save-spin {
    to { transform: rotate(360deg); }
}

.btn-secondary {
    background: var(--bg);
    color: var(--text-secondary);
    border: 1px solid var(
    --border);
}

.btn-secondary:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.btn-danger {
    background: #c0392b;
    color: #fff;
}

.btn-danger:hover {
    background: #a93226;
}

/* Sanfteres Rot (z.B. Giessanwendung loeschen) - wie Modal-Delete, nicht knallrot */
.btn-danger-soft {
    background: color-mix(in srgb, #e57373 18%, var(--bg-elevated));
    color: #e57373;
    border: 1px solid color-mix(in srgb, #e57373 40%, var(--border));
}

.btn-danger-soft:hover {
    background: color-mix(in srgb, #e57373 28%, var(--bg-elevated));
    color: #ef5350;
    border-color: color-mix(in srgb, #ef5350 50%, var(--border));
}

.btn-ghost {
    color: var(--text-secondary);
    padding: 8px 12px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.btn-ghost:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.btn-sm {
    padding: 6px 12px;
    font-size: 0.8rem;
}

.btn-icon {
    padding: 8px;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px;
}

.card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.card-title {
    font-size: 1rem;
    font-weight: 600;
}

/* Grow cards grid */
.grows-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.grow-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), opacity var(--transition);
    overflow: hidden;
}

/* Ohne Cover: nur Body-hoehe der Infos von Karten mit Bild) */
.grow-card.grow-card-no-cover {
    height: auto;
    align-self: end;
}

.grow-card:hover {
    border-color: var(--accent);
}

.grow-card.dragging {
    opacity: 0.45;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.grow-card.drag-over {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px var(--accent-muted);
}

/* Desktop: ganze Kachel ziehen; Handy: Long-Press (kein Griff-Symbol) */
.grow-card.is-desktop-draggable {
    cursor: grab;
}

.grow-card.is-desktop-draggable:active {
    cursor: grabbing;
}

.grow-card.is-touch-sortable {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.grow-card.touch-drag-source {
    opacity: 0.92;
    transform: scale(1.02);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    z-index: 3;
    position: relative;
}

.is-touch-sorting {
    touch-action: none;
}

.is-touch-sorting .grow-card {
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.dashboard-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-bottom: 16px;
    text-align: center;
}

.grow-card-body {
    padding: 16px;
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Gleiche Infobereich-Mindesthoehe: Pflanzen- und Umgebungskarten */
.grow-card:not(.grow-card-no-cover) .grow-card-body,
.dash-env-card-body {
    min-height: 15rem;
}

.grow-card-no-cover .grow-card-body {
    flex: 0 0 auto;
}

.grow-card-cover {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--bg);
    overflow: hidden;
    flex-shrink: 0;
}

 .grow-detail-cover {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--bg);
    overflow: hidden;
    flex-shrink: 0;
    max-height: 200px;
}

.grow-detail-cover.is-clickable {
    cursor: zoom-in;
}

.grow-detail-cover.is-clickable:hover {
    opacity: 0.96;
}

.grow-detail-cover.is-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.env-hero-media.is-clickable {
    cursor: zoom-in;
}

.env-hero-media.is-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.grow-card-cover img, .grow-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grow-cover-placeholder {
    display: flex;
    background: linear-gradient(135deg, var(--bg-hover), var(--accent-muted));
    justify-content: center;
    align-items: center;
}

.grow-cover-placeholder span, .grow-cover-placeholder-icon {
    font-size: 2.5rem;
    opacity: 0.4;
}

.app-plant-logo {
    display: inline-block;
    object-fit: contain;
    flex-shrink: 0;
    pointer-events: none;
    user-select: none;
}

.app-plant-logo-inline {
    width: 1.65em;
    height: 1.65em;
    vertical-align: -0.12em;
    opacity: 0.9;
    margin-top: -5px;
    margin: -5px -3px 0px -2px;
}

.app-plant-logo-cover {
    width: 42%;
    max-width: fit-content;
    height: auto;
    opacity: 0.45;
}

.app-plant-logo-lg {
    width: 56px;
    height: 56px;
    opacity: 0.55;
}

.grow-cover-placeholder .app-plant-logo,
.grow-cover-placeholder-icon.app-plant-logo {
    opacity: 0.45;
}

img.app-plant-logo.app-plant-logo-cover {
    margin-bottom: 40px;
}

.dash-env-stat-grows,
.env-chip-grows {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
}

.empty-state-icon-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: inherit;
}

.grow-detail-cover,
.env-detail-cover {
    border-radius: var(--radius-lg);
    margin-bottom: 20px;
    border: 1px solid var(--border);
}

.env-detail-cover {
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--bg);
    overflow: hidden;
    flex-shrink: 0;
    max-height: 200px;
}

.env-detail-cover.is-clickable {
    cursor: zoom-in;
}

.env-detail-cover.is-clickable:hover {
    opacity: 0.96;
}

.env-detail-cover.is-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.env-detail-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.grow-cover-upload {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.grow-cover-preview {
    width: 160px;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    overflow: hidden;
    background: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.grow-cover-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.grow-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 8px;
}

/* Name + Sorte + Breeder immer gleiche Blockhoehe (auch ohne Angaben) */
.grow-card-title-block {
    min-width: 0;
    flex: 1;
}

.grow-card-name {
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
    min-height: 1.3em;
}

.grow-card-strain {
    font-size: 0.85rem;
    line-height: 1.3;
    min-height: 1.3em;
    color: var(--text-secondary);
    margin-top: 2px;
}

.grow-card-breeder {
    font-size: 0.8rem;
    line-height: 1.3;
    min-height: 1.3em;
    color: var(--text-muted);
    margin-top: 2px;
}

.grow-card-strain.is-empty,
.grow-card-breeder.is-empty {
    visibility: hidden; /* Platz behalten, ohne sichtbaren Platzhalter */
}

.grow-card-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
}

.grow-card-archived {
    opacity: 0.94;
    filter: saturate(0.88);
}

.grow-card-archived .grow-card-day-value {
    color: var(--text-secondary);
}

.grow-card-archived .stage-badge.is-archived-stage {
    opacity: 0.9;
}

.archive-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 20px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    vertical-align: middle;
    max-width: 100%;
    white-space: nowrap;
}

.grow-detail-name .archive-badge {
    font-size: 0.75rem;
    margin-left: 8px;
    position: relative;
    top: -2px;
}

.dashboard-hint-link {
    color: var(--accent);
    text-decoration: none;
}

.dashboard-hint-link:hover {
    text-decoration: underline;
}

/* Offene Termine (Dashboard / Grow-Detail) */
.open-tasks {
    /* Einheitliche Rahmenstaerke (Header + Eintraege) */
    --open-tasks-side-border: 1px;
    --open-tasks-frame: var(--border);
    margin-bottom: 24px;
    touch-action: pan-y;
}

.open-tasks-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    margin: 0 0 0;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: border-color var(--transition), background var(--transition),
        width var(--transition), padding var(--transition), transform 0.15s ease, opacity var(--transition),
        margin-bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Minimiert: nur Anzahl-Kreise, ganz rechts im Content/Grid */
.open-tasks.is-minimized {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: 0;
    line-height: 1;
}

/* Fold aus dem Layout nehmen - sonst verschiebt er die hoehe gegenueber der Ueberschrift */
.open-tasks.is-minimized .open-tasks-fold {
    display: none !important;
}

.open-tasks.is-minimized .open-tasks-toggle {
    width: auto;
    max-width: 100%;
    margin: 0 0 0 auto;
    justify-content: center;
    align-items: center;
    gap: 0;
    min-height: 32px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.open-tasks.is-minimized .open-tasks-toggle .section-title {
    display: inline-flex !important;
    padding: 0;
    gap: 0;
}
.open-tasks.is-minimized .open-tasks-title-text,
.open-tasks.is-minimized .open-tasks-chevron {
    display: none !important;
}

.open-tasks.is-minimized .open-tasks-header-right {
    gap: 0;
    align-items: center;
}

/* Kein grauer Kachel-Hover im minimierten Zustand - nur die Zahlen-Badges */
.open-tasks.is-minimized .open-tasks-toggle:hover,
.open-tasks.is-minimized .open-tasks-toggle:focus-visible {
    background: transparent;
    border: none;
    box-shadow: none;
}

.open-tasks.is-minimized .open-tasks-toggle:focus-visible .open-tasks-count {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.open-tasks.is-swiping .open-tasks-toggle {
    transition: none;
}

.open-tasks-toggle:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

/* Zugeklappt: kein gruener Rahmen, Hintergrund wie Card */
.open-tasks.is-collapsed:not(.is-minimized) .open-tasks-toggle:hover,
.open-tasks.is-collapsed:not(.is-minimized) .open-tasks-toggle:focus,
.open-tasks.is-collapsed:not(.is-minimized) .open-tasks-toggle:focus-visible {
    border-color: var(--border);
    background: var(--bg-card);
    outline: none;
}

.open-tasks-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Aufgeklappt: Header + Liste als eine Connected-Einheit */
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-width: 1px;
    border-bottom-color: transparent;
    border-left-color: var(--open-tasks-frame);
    border-right-color: var(--open-tasks-frame);
    border-top-color: var(--open-tasks-frame);
    position: relative;
    z-index: 2;
    /* Hell: weiss; Dark: Card-Flaeche */
    background: #ffffff;
}

.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:hover,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:focus-visible {
    background: #ffffff;
    border-top-color: var(--open-tasks-frame);
    border-left-color: var(--open-tasks-frame);
    border-right-color: var(--open-tasks-frame);
    border-bottom-color: transparent;
}

[data-theme="dark"] .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle,
[data-theme="dark"] .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:hover,
[data-theme="dark"] .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:focus-visible {
    background: var(--bg-card);
}

/* Aufgeklappte Eintraege: gleiche Rahmenfarbe + Staerke */
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list .open-task-card,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-group-list .open-task-card {
    border-left-width: var(--open-tasks-side-border);
    border-right-width: var(--open-tasks-side-border);
    border-left-color: var(--open-tasks-frame);
    border-right-color: var(--open-tasks-frame);
}

.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list .open-task-card:hover,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-group-list .open-task-card:hover {
    border-left-color: var(--open-tasks-frame);
    border-right-color: var(--open-tasks-frame);
}

/* Letzter Eintrag: unterer Rand gleiche Farbe + Dicke */
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:last-child,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:last-child .open-tasks-group-list > .open-task-card:last-child,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-group-list .open-task-card:last-child {
    border-bottom: var(--open-tasks-side-border) solid var(--open-tasks-frame);
}

.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:last-child:hover,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:last-child .open-tasks-group-list > .open-task-card:last-child:hover,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-group-list .open-task-card:last-child:hover {
    border-bottom-color: var(--open-tasks-frame);
}

/* Erste Karte / erste Gruppen-Karte schliesst an den Header an */
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:first-child,
.open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:first-child .open-tasks-group-list > .open-task-card:first-child {
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    margin-top: 0;
}

/* Gruppen-Titel: Padding/Rahmen auch beim Zuklappen behalten, sonst rutscht der Text nach links */
.open-tasks .open-tasks-list > .open-tasks-group:first-child {
    margin-top: 0;
}

.open-tasks .open-tasks-list > .open-tasks-group:first-child .open-tasks-group-title {
    margin: 0;
    padding: 10px 14px 8px;
    border-left: var(--open-tasks-side-border) solid var(--open-tasks-frame);
    border-right: var(--open-tasks-side-border) solid var(--open-tasks-frame);
    background: var(--bg-card);
}

.open-tasks .open-tasks-group .open-tasks-group-title {
    border-left: var(--open-tasks-side-border) solid var(--open-tasks-frame);
    border-right: var(--open-tasks-side-border) solid var(--open-tasks-frame);
}

/* Slide auf-/zuklappen */
.open-tasks-fold {
    display: grid;
    grid-template-rows: 1fr;
    opacity: 1;
    transition:
        grid-template-rows 0.36s cubic-bezier(0.22, 1, 0.36, 1),
        opacity 0.28s ease;
}

.open-tasks.is-collapsed .open-tasks-fold,
.open-tasks.is-minimized .open-tasks-fold {
    grid-template-rows: 0fr;
    opacity: 0;
    pointer-events: none;
}

.open-tasks-fold > .open-tasks-list {
    min-height: 0;
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .open-tasks-fold {
        transition: none;
    }

    .open-tasks-toggle {
        transition: border-color var(--transition), background var(--transition),
            width var(--transition), padding var(--transition);
    }
}

.open-tasks-toggle .section-title {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding-left: 5px;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.open-tasks-toggle .section-title .meta-sep {
    margin: 0 0.35em;
}

.open-tasks-header-left {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    flex: 0 1 auto;
    width: auto;
    max-width: 100%;
}

.open-tasks-header-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.open-tasks-badges {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.open-tasks-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 26px;
    height: 26px;
    padding: 0 8px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.open-tasks-count.is-open {
    background: var(--bg-hover);
    color: var(--accent);
}

.open-tasks-count.is-today {
    background: color-mix(in srgb, var(--accent) 28%, transparent);
    color: var(--accent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent);
    font-weight: 800;
}

.open-tasks-count.is-overdue {
    background: rgba(231, 76, 60, 0.18);
    color: #e74c3c;
    box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.35);
    animation: open-tasks-overdue-pulse 2.2s ease-in-out infinite;
}

.open-tasks-group {
    margin-bottom: 14px;
}

.open-tasks-group:last-child {
    margin-bottom: 0;
}

.open-tasks-group-title {
    margin: 0 0 8px;
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.03em;
    color: var(--text);
}

.open-tasks-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.open-tasks-focus .open-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

@keyframes open-tasks-overdue-pulse {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(231, 76, 60, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 0 7px rgba(231, 76, 60, 0);
        transform: scale(1.06);
    }
}

@media (prefers-reduced-motion: reduce) {
    .open-tasks-count.is-overdue {
        animation: none;
    }
}

.open-tasks-chevron {
    display: inline-flex;
    color: var(--text-muted);
    transition: transform 0.2s ease;
}

.open-tasks-chevron svg {
    width: 18px;
    height: 18px;
}

.open-tasks:not(.is-collapsed) .open-tasks-chevron {
    transform: rotate(180deg);
}

.open-tasks-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.open-task-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    border-left: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
    border-right: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
    transition: border-color var(--transition), background var(--transition);
    cursor: pointer;
}

.open-task-card:hover {
    border-color: var(--open-tasks-frame, var(--accent));
    background: var(--bg-hover);
}

.open-task-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.open-task-card.is-overdue {
    /* Rahmen bleibt einheitlich; Status ueber Badge */
    border-left-color: var(--open-tasks-frame, var(--accent));
    border-right-color: var(--open-tasks-frame, var(--accent));
}

.open-task-icon {
    font-size: 1.5rem;
    line-height: 1;
    flex-shrink: 0;
    width: 2rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Einfarbige Aktions-Icons (Umtopfen, Sonstiges, */
.event-action-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    color: var(--text-secondary);
    vertical-align: -0.12em;
    flex-shrink: 0;
}

.event-action-icon-svg svg {
    width: 100%;
    height: 100%;
    display: block;
}

.open-task-icon .event-action-icon-svg {
    width: 1.85rem;
    height: 1.85rem;
}

.calendar-badge-icon .event-action-icon-svg {
    width: 1.5rem;
    height: 1.5rem;
    margin-bottom: 0.12em;
}

.event-icon .event-action-icon-svg {
    width: 1.85rem;
    height: 1.85rem;
    color: var(--text-secondary);
}

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

.open-task-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.open-task-title-text {
    min-width: 0;
}

.open-task-title .open-badge,
.open-task-title .overdue-badge {
    flex-shrink: 0;
    margin-left: 0;
}

.open-task-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 4px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    line-height: 1.4;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.open-task-when,
.open-task-meta-rest {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

.overdue-badge .meta-sep,
.open-badge .meta-sep {
    margin: 0 0.3em;
}

.open-task-status {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.open-task-status .open-badge, .open-task-status .overdue-badge {
    margin-left: 0;
}

.open-task-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.open-badge, .overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 8px 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
    margin-left: 6px;
    line-height: 1;
    border: 1px solid transparent;
}

.open-badge {
    background: var(--accent-muted);
    color: var(--accent);
    border-color: var(--border);
}

.open-badge::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    flex-shrink: 0;
}

.open-tasks .open-badge::before,
.calendar-events .open-badge::before {
    content: none;
    display: none;
}

.overdue-badge {
    background: #e74c3c;
    color: white;
    border-color: rgba(231, 76, 60, 0.4);
}

.overdue-badge::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid #fff;
    color: #e74c3c;
    font-size: 0.85rem;
    font-weight: 800;
    flex-shrink: 0;
    line-height: 1;
    display: none;
}

.stage-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-hover);
    color: var(--text-secondary);
    vertical-align: middle;
    margin-left: 6px;
}

.event-item-open {
    border-left: 3px solid var(--accent);
}

.event-item-overdue {
    border-left-color: #e74c3c;
    background: rgba(231, 76, 60, 0.06);
}

/* Fokus nach Klick auf Termin-Benachrichtigung */
.event-item.is-notif-focus,
.open-task-card.is-notif-focus,
.calendar-day.is-notif-focus {
    outline: 2px solid var(--accent, #6fcf6f);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(111, 207, 111, 0.25);
    border-radius: var(--radius, 8px);
    transition: outline 0.2s ease, box-shadow 0.2s ease;
}

.event-item-overdue:hover {
    border-color: #e74c3c;
}

.calendar-events .event-item-editable {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 12px;
}

/* Termin-Zeile: gesamter Eintrag klickbar (Bearbeiten), Done-Button separat */
.event-item-editable.event-item-open-edit,
.event-item-open-edit {
    cursor: pointer;
}

.event-item-open-edit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.event-item-open-edit .event-actions {
    cursor: default;
}

.calendar-events .event-item-editable .event-content {
    min-width: 0;
}

.calendar-events .event-item-editable .event-title, .calendar-events .event-item-editable .event-meta {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.event-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-meta-when {
    display: block;
}

.event-meta-rest {
    display: block;
}

.calendar-events .event-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.calendar-events .event-done-btn {
    white-space: nowrap;
}

.calendar-filters {
    margin-bottom: 12px;
}

.calendar-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 12px;
    width: 100%;
}

.calendar-view-toggle {
    display: inline-flex;
    gap: 4px;
    padding: 3px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    margin: 0 auto;
}

.calendar-view-toggle .filter-chip {
    margin: 0;
    border: none;
    min-height: 32px;
}

.calendar-view-toggle .filter-chip.active {
    background: var(--accent-muted);
    color: var(--accent);
}

.calendar-grid.calendar-grid-week {
    grid-template-rows: auto minmax(160px, 1fr);
    grid-auto-rows: minmax(160px, 1fr);
    min-height: 180px;
}

.calendar-grid.calendar-grid-week .calendar-weekday {
    height: 28px;
}

.calendar-grid.calendar-grid-week .calendar-day {
    height: auto;
    min-height: 160px;
    max-height: none;
    padding: 8px;
}
@media (max-width: 480px) {
.calendar-grid.calendar-grid-week .calendar-day {
    height: auto;
    min-height: 160px;
    max-height: none;
    padding: 5px;
}
}
.calendar-grid.calendar-grid-week .calendar-day-num {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.calendar-grid.calendar-grid-week .calendar-day-media {
    --cal-chip: 30px;
    --cal-chip-radius: 9px;
}

.calendar-grid.calendar-grid-week .calendar-thumb,
.calendar-grid.calendar-grid-week .calendar-badge,
.calendar-grid.calendar-grid-week .calendar-more,
.calendar-grid.calendar-grid-week .calendar-badge-more {
    width: var(--cal-chip);
    height: var(--cal-chip);
    min-width: var(--cal-chip);
    border-radius: var(--cal-chip-radius);
}

.calendar-grid.calendar-grid-week .calendar-badge-icon {
    font-size: 0.95rem;
}

.calendar-grid.calendar-grid-week .calendar-badge-count {
    min-width: 11px;
    height: 11px;
    line-height: 11px;
    font-size: 0.52rem;
    right: -3px;
    bottom: -3px;
}

@media (max-width: 480px) {
	.calendar-grid.calendar-grid-week .calendar-day-media {
	    --cal-chip: 28px;
	}
	.calendar-grid.calendar-grid-week .calendar-badge-icon {
	    font-size: 0.85rem;
	}
	.calendar-grid.calendar-grid-week .calendar-badge-count {
	    min-width: 10px;
	    height: 10px;
	    line-height: 10px;
	    font-size: 0.5rem;
	}
}

.stage-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--accent-muted);
    color: var(--accent);
}

.stage-badge.seed {
    background: rgba(139, 195, 74, 0.15);
    color: #8bc34a;
}

.stage-badge.seedling {
    background: rgba(129, 199, 132, 0.15);
    color: #66bb6a;
}

.stage-badge.clone {
    background: rgba(38, 166, 154, 0.15);
    color: #26a69a;
}

.stage-badge.veg {
    background: var(--accent-muted);
    color: var(--accent);
    border: 1px solid var(--border);
}

.stage-badge.flower {
    background: rgba(255, 152, 0, 0.15);
    color: #ff9800;
}

.stage-badge.harvest {
    background: rgba(156, 39, 176, 0.15);
    color: #9c27b0;
}

.stage-badge.curing {
    background: rgba(121, 85, 72, 0.15);
    color: #795548;
}

.grow-card-days {
    display: flex;
    /* Oben buendig: Tage-Zahl und Phasentag auf einer Linie (nicht flex-end) */
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 10px;
}

/* Desktop: Start/Ernte leicht abgesetzt, Abstand an Handy angeglichen (weniger als frueher) */
@media (min-width: 768px) {
    .grow-card-days {
        margin-bottom: 4px;
    }

    .grow-card-meta {
        margin-top: auto;
        padding-top: 4px;
        margin-bottom: 4px;
        align-items: flex-end;
    }

    .grow-card-env-pill {
        margin-bottom: 1px;
        padding-top: 0.28rem;
        padding-bottom: 0.18rem;
    }
}

.grow-card-day-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.grow-card-day-stat-phase {
    min-width: 0;
    overflow: visible;
}

/*
* Phasentag-Zeile: nur die Zahl bestimmt die hoehe (wie Tage).
* Wochen-Badge absolut rechts daneben sonst drueckt der Badge das Label nach unten.
*/
.grow-card-day-phase-row {
    position: relative;
    display: block;
    width: fit-content;
    max-width: 100%;
    line-height: 1.1;
}

.grow-card-day-phase-row .grow-card-day-value {
    display: inline-block;
    vertical-align: top;
}

.grow-card-day-phase-row .phase-week-badge {
    position: absolute;
    left: calc(100% + 14px);
    top: 50%;
    transform: translateY(-50%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: var(--bg-card);
    border-width: 1.5px;
    z-index: 1;
}

[data-theme="light"] .grow-card-day-phase-row .phase-week-badge {
    background: var(--bg-card);
}

.grow-card-day-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
    min-width: 38px;
}

.grow-card-day-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.2;
}

/* Phasenwoche-Badge */
.phase-week-badge {
    --week-progress: 0;
    position: relative;
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    padding: 0.2em 0.65em 0.25em;
    border-radius: 999px;
    background: var(--accent-muted);
    border: 1px solid var(--border);
    color: var(--accent);
    line-height: 1.15;
    white-space: nowrap;
    vertical-align: middle;
    box-shadow: 0 1px 0 rgba(92, 184, 92, 0.08);
    flex-shrink: 0;
    overflow: hidden;
    isolation: isolate;
}

/* Leichter Fortschritts-HG: Anteil der aktuellen Woche (Tag 1-7). Links pill-rund, rechts gerade (kein Border-Radius) */
.phase-week-badge-fill {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: calc(var(--week-progress, 0) * 100%);
    background: color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 999px 0 0 999px;
    pointer-events: none;
    z-index: 0;
    transition: width 0.25s ease;
}

.phase-week-badge-label {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.9;
}

.phase-week-badge-num {
    position: relative;
    z-index: 1;
    font-size: 0.9rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.phase-week-badge--md {
    padding: 0.28em 0.8em 0.32em;
    gap: 0.35em;
}

.phase-week-badge--md .phase-week-badge-label {
    font-size: 1rem;
}

.phase-week-badge--md .phase-week-badge-num {
    font-size: 1.1rem;
}

.phase-week-badge--lg {
    padding: 0.28em 0.75em 0.32em;
    gap: 0.35em;
    border-width: 1.5px;
    box-shadow: 0 2px 8px rgba(92, 184, 92, 0.12);
}

.phase-week-badge--lg .phase-week-badge-label {
    font-size: 1rem;
}

.phase-week-badge--lg .phase-week-badge-num {
    font-size: 1.15rem;
}

[data-theme="light"] .phase-week-badge {
    background: rgba(92, 184, 92, 0.12);
    border-color: rgba(76, 174, 76, 0.35);
    box-shadow: 0 1px 2px rgba(76, 174, 76, 0.08);
}

[data-theme="light"] .phase-week-badge-fill {
    background: color-mix(in srgb, var(--accent) 18%, transparent);
}

[data-theme="light"] .phase-week-badge--lg {
    background: rgba(92, 184, 92, 0.14);
    box-shadow: 0 2px 10px rgba(76, 174, 76, 0.12);
}

.grow-card-meta {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-bottom: 4px;
    min-width: 0;
    margin-top: 12px;
}

.grow-card-meta > span:first-child {
    flex-shrink: 0;
    min-width: min(23%, 8rem);
}

/* Desktop: Label + Datum in einer Zeile */
.grow-card-meta-item {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 0.35em;
    min-width: 0;
    line-height: 1.3;
}

/* Kein Doppelpunkt hinter Start / Ernte / Archiviert */
.grow-card-meta-label::after {
    content: none;
}

.grow-card-meta-date {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/*
* Handy / App: Start + Datum und Ernte + Datum jeweils in einer Zeile
* (nicht Label/Datum untereinander). Umgebung-Chip aus, damit es passt.
* Etwas Abstand ueber der Datumszeile (aehnlich Desktop).
*/
@media (max-width: 767px) {
    .grow-card-meta {
        align-items: center;
        gap: 6px 12px;
        flex-wrap: nowrap;
        margin-top: 10px;
        padding-top: 2px;
    }

    .grow-card-meta > span:first-child {
        min-width: 0;
    }

    .grow-card-meta-item {
        display: inline-flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: baseline;
        gap: 0 0.3em;
        line-height: 1.3;
        flex-shrink: 0;
    }

    .grow-card-meta-label::after {
        content: none;
    }

    .grow-card-env-pill {
        display: none;
    }
}

html.capacitor-native .grow-card-meta {
    align-items: center;
    gap: 6px 10px;
    flex-wrap: nowrap;
    margin-top: 10px;
    padding-top: 2px;
}

html.capacitor-native .grow-card-meta > span:first-child {
    min-width: 0;
}

html.capacitor-native .grow-card-meta-item {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0 0.3em;
    line-height: 1.3;
    flex-shrink: 0;
}

html.capacitor-native .grow-card-meta-label::after {
    content: none;
}

html.capacitor-native .grow-card-env-pill {
    display: none;
}

.grow-card-env-pill {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    max-width: min(25%, 15rem);
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #5b9bd5;
    background: color-mix(in srgb, #5b9bd5 14%, transparent);
    border: 1px solid color-mix(in srgb, #5b9bd5 32%, transparent);
    flex-shrink: 1;
    min-width: 0;
    padding-top: 0.2rem;
}

.grow-card-env-pill.is-outdoor {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border);
}

.grow-card-env-pill.is-indoor {
    color: var(--text-secondary);
    background: var(--bg-elevated);
    border-color: var(--border);
}

/* Dashboard: Umgebungs-Kacheln */
.dashboard-env-section {
    margin-top: 20px;
}

.dashboard-env-header {
    margin-bottom: 10px;
}

.dashboard-env-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.dashboard-env-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.dashboard-env-dnd-hint {
    margin-top: 12px;
    margin-bottom: 0;
}

/* Desktop-Hinweise nur Desktop, Handy-Hinweise nur Handy */
.dashboard-hint-mobile {
    display: none !important;
}

.dashboard-hint-desktop {
    display: flex !important;
}

@media (max-width: 767px) {
    .dashboard-env-dnd-hint,
    .dashboard-hint-desktop {
        display: none !important;
    }

    .dashboard-hint-mobile {
        display: flex !important;
    }
}

/* Pflanzen-Sortier-Hinweis unter den Karten */
.plants-drag-tip.form-tip--page {
    margin: 0;
    margin-top: 16px;
    padding-top: 12px;
}

.dashboard-env-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: stretch;
}

.dash-env-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    color: inherit;
    text-align: left;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition);
}

.dash-env-card:hover {
    border-color: var(--accent);
    background: var(--bg-card);
}

.dash-env-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.dash-env-card.is-drop-target {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.dash-env-card.is-drop-over {
    border-style: solid;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: scale(1.01);
}

.dash-env-card.is-drop-over .dash-env-drop-hint {
    opacity: 1;
    transform: translateY(0);
}

.dash-env-drop-hint {
    position: absolute;
    inset: 0;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 700;
    color: #fff;
    background: color-mix(in srgb, var(--accent) 78%, rgba(0, 0, 0, 0.55));
    border-radius: inherit;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
}

.is-grow-env-dragging .dash-env-card {
    cursor: copy;
}

.dash-env-card-media {
    position: relative;
    aspect-ratio: 16 / 9;
    width: 100%;
    background: var(--bg);
    overflow: hidden;
    flex-shrink: 0;
}

.dash-env-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.dash-env-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.4rem;
    background: linear-gradient(135deg, var(--bg-hover), var(--accent-muted));
}

.dash-env-card.is-outdoor .dash-env-card-placeholder {
    background: linear-gradient(135deg, color-mix(in srgb, #e67e22 18%, var(--bg-hover)), var(--bg-hover));
}

.dash-env-card-badges {
    margin: 0 0 0 auto;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.dash-env-card-badges .env-kind-badge {
    position: static;
    background: var(--accent-muted);
    color: var(--accent);
}

.dash-env-card-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    flex: 1;
    min-width: 0;
}

.dash-env-card-head-right {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.dash-env-card-head-right .env-kind-badge {
    position: static;
}

.dash-env-card-head,
.env-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
    width: 100%;
}

.dash-env-card-head .env-hero-badges,
.env-card-head .env-hero-badges {
    margin-bottom: 0;
}

.dash-env-card-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.dash-env-light {
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Nacht / Licht aus: nur die Sonne greyscale */
.dash-env-light.is-lights-off .env-light-sun,
.env-chip.is-lights-off .env-light-sun {
    filter: grayscale(1);
    opacity: 0.72;
}

.env-light-sun {
    display: inline-block;
}

.dash-env-metrics {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

/* 3 Werte: erste Reihe 2, zweite 1 zentriert-ish via full row not needed */
.dash-env-metrics-n3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dash-env-metrics-n2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dash-env-metrics-n1 {
    grid-template-columns: 1fr;
}

/* 2 Zeilen: Wert + Einheit / Label */
.dash-env-metric {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 3px;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-hover);
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

.dash-env-metric-value {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 3px 4px;
    min-width: 0;
    max-width: 100%;
    line-height: 1;
    overflow: hidden;
}

.dash-env-trend {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    margin-left: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.05em;
    transform: translateY(-0.08em);
}
.dash-env-trend.is-up {
    color: #2ecc71;
}
.dash-env-trend.is-down {
    color: #e74c3c;
}
.dash-env-trend.is-flat {
    color: var(--text-muted);
    opacity: 0.75;
}

.dash-env-metric-num {
    font-size: clamp(0.95rem, 2.8vw, 1.15rem);
    font-weight: 600;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--c, var(--text));
    white-space: nowrap;
    line-height: 1;
    opacity: 1;
}

.dash-env-metric-unit {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--c, var(--accent));
    white-space: nowrap;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    opacity: 1;
}

.dash-env-metric-label {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--c);
    white-space: nowrap;
    line-height: 1.2;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 1;
}

.dash-env-metrics-empty {
    padding: 12px;
    border-radius: 12px;
    border: 1px dashed var(--border);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
}

.dash-env-when {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    font-variant-numeric: tabular-nums;
    padding-left: 4px;
    padding: 3px;
}

.dash-env-footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 0px;
    border-top: 0px solid var(--border);
}

.dash-env-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--text-secondary);
    padding: 0px 4px 4px;
}

.dash-env-stat-hints {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: 0.01em;
}

.dash-env-stat-hints.has-warn {
    color: #e67e22;
}

.dash-env-grows {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 1.5em;
}

.dash-env-grows-empty {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
    padding: 2px 0 2px 0px;
}

.dash-env-grow-chip {
    display: inline-flex;
    max-width: 120px;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.82rem;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--text);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    letter-spacing: 0.02em;
}

.dash-env-grow-more {
    display: inline-flex;
    align-items: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .dashboard-env-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* Handy / App: Messwert-Chips connected, 2 Zeilen (Wert+Einheit / Label) */
@media (max-width: 767px) {
    .dash-env-metrics,
    .dash-env-metrics-n1,
    .dash-env-metrics-n2,
    .dash-env-metrics-n3,
    .dash-env-metrics-n4 {
        gap: 0;
    }

    .dash-env-metrics-n4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .dash-env-metrics-n3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dash-env-metrics-n2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .dash-env-metric {
        gap: 2px;
        padding: 10px 8px;
        border-radius: 0;
        border-right-width: 0;
        background: var(--bg-elevated, var(--bg-hover));
    }

    .dash-env-metric:first-child {
        border-radius: 10px 0 0 10px;
    }

    .dash-env-metric:last-child {
        border-radius: 0 10px 10px 0;
        border-right-width: 1px;
    }

    .dash-env-metric:only-child {
        border-radius: 10px;
        border-right-width: 1px;
    }

    .dash-env-metric-value {
        gap: 3px;
    }

    .dash-env-metric-num {
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: -0.02em;
    }

    .dash-env-metric-unit {
        font-size: 0.72rem;
        font-weight: 700;
    }

    .dash-env-metric-label {
        font-size: 0.68rem;
        letter-spacing: 0.03em;
    }
}

html.capacitor-native .dash-env-metrics,
html.capacitor-native .dash-env-metrics-n1,
html.capacitor-native .dash-env-metrics-n2,
html.capacitor-native .dash-env-metrics-n3,
html.capacitor-native .dash-env-metrics-n4 {
    gap: 0;
}

html.capacitor-native .dash-env-metric {
    gap: 2px;
    padding: 10px 8px;
    border-radius: 0;
    border-right-width: 0;
    background: var(--bg-elevated, var(--bg-hover));
}

html.capacitor-native .dash-env-metric:first-child {
    border-radius: 10px 0 0 10px;
}

html.capacitor-native .dash-env-metric:last-child {
    border-radius: 0 10px 10px 0;
    border-right-width: 1px;
}

html.capacitor-native .dash-env-metric:only-child {
    border-radius: 10px;
    border-right-width: 1px;
}

html.capacitor-native .dash-env-metric-num {
    font-size: 0.98rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

html.capacitor-native .dash-env-metric-unit {
    font-size: 0.72rem;
    font-weight: 700;
}

html.capacitor-native .dash-env-metric-label {
    font-size: 0.68rem;
    letter-spacing: 0.03em;
}

/* Umgebungskarten: offene Sidebar unter 900px 1 Spalte */
@media (min-width: 768px) {
    .dashboard-env-grid {
        grid-template-columns: 1fr;
    }

    html.sidebar-collapsed .dashboard-env-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 900px) {
    .dashboard-env-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    /* Eingeklappte Sidebar: genug Content-Breite fuer 3 Spalten frueher */
    html.sidebar-collapsed .dashboard-env-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    /* 3 Umgebungs-Spalten: Messwerte bleiben 2er-Raster */
    .dash-env-metric-num {
        font-size: 0.9rem;
    }

    .dash-env-metric-unit {
        font-size: 0.9rem;
    }
}

@media (min-width: 1200px) {
    .dashboard-env-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Sehr breit: 4 Messwerte nebeneinander nur wenn Kacheln genug Platz haben */
@media (min-width: 1280px) {
    .dash-env-metrics-n4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Stage progress */
.stage-progress {
    display: flex;
    gap: 4px;
    margin-top: 8px;
}

.stage-step {
    flex: 1;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    transition: background var(--transition);
}

.stage-step.done {
    background: var(--accent);
}

.stage-step.current {
    background: var(--accent);
    opacity: 0.6;
}

.stage-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
}

.stage-label {
    font-size: 0.9rem;
    color: var(--text-muted);
    text-align: center;
    flex: 1;
    min-width: 0;
}

.stage-label.active {
    color: var(--accent);
    font-weight: 600;
}

.stage-label-name {
    display: block;
}

/* Desktop: voller Phasename; Handy/App: Kurzform (z. B. Aush.) */
.stage-label-short {
    display: none;
}
.stage-label-full {
    display: inline;
}

.stage-labels-detailed {
    align-items: flex-start;
    gap: 4px;
    margin-top: 10px;
}

.stage-labels-detailed .stage-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.stage-label-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    line-height: 1.25;
}

.stage-label-meta-empty {
    color: var(--text-muted);
    opacity: 0.55;
    font-size: 0.9rem;
    font-weight: 500;
}
@media (min-width: 768px) {
    .stage-label-meta-empty {
        font-size: 1.1rem;
    }
}
.stage-label-days {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.stage-label-week {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.stage-label.active .stage-label-days {
    color: var(--text);
}

.stage-label.active .stage-label-week {
    color: var(--accent);
}

/* Loading */
.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    color: var(--text-secondary);
}

.spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--border);
    border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    margin-bottom: 16px;
}

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

.empty-state code {
    background: var(--bg-hover);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.85em;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--text-secondary);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 16px;
    opacity: 0.5;
}

.empty-state-icon-svg {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    opacity: 0.55;
}

.empty-state-icon-svg .ui-icon-svg {
    width: 2.55rem;
    height: 2.55rem;
    display: block;
    color: var(--text-muted);
}

.empty-state-icon-svg .ui-icon-svg-cannabis {
    width: 2.7rem;
    height: 2.7rem;
    overflow: hidden;
}

.empty-state h3 {
    font-size: 1.1rem;
    color: var(--text);
    margin-bottom: 8px;
}

.empty-state p {
    font-size: 0.9rem;
    margin-bottom: 24px;
}

/* Verbindungsfehler - dezent, professionell */
.connection-error {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: min(52vh, 420px);
    padding: 32px 20px;
}

.connection-error-card {
    width: 100%;
    max-width: 380px;
    text-align: center;
    padding: 28px 22px 24px;
    border-radius: var(--radius-lg, 14px);
    border: 1px solid var(--border);
    background: var(--bg-elevated, var(--bg-card));
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.connection-error-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin: 0 auto 14px;
    border-radius: 50%;
    color: var(--text-secondary);
    background: var(--bg-hover);
}

.connection-error-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
    font-weight: 650;
    color: var(--text);
    letter-spacing: -0.01em;
}

.connection-error-text {
    margin: 0 0 10px;
    font-size: 0.9rem;
    line-height: 1.45;
    color: var(--text-secondary);
}

.connection-error-detail {
    margin: 0 0 12px;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--text-muted);
    word-break: break-word;
}

.connection-error-countdown {
    margin: 0 0 18px;
    font-size: 0.82rem;
    color: var(--text-muted);
}

.connection-error-countdown strong {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.connection-error-actions {
    display: flex;
    justify-content: center;
}

/* Forms */
.form-group {
    margin-bottom: 16px;
}

#growForm .form-row {
    margin-bottom: 16px;
}

#growForm .form-row > .form-group {
    margin-bottom: 0;
}

.modal-body form > .form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

/* Pflichtfeld-Stern: gut sichtbar in Akzentfarbe */
.form-required,
.form-label .form-required,
label .form-required {
    color: var(--accent);
    font-weight: 700;
    margin-left: 0.12em;
}

.form-label-sub {
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 4px;
    opacity: 0.9;
}

form.nutrient-water-form > div.form-group > label.form-label {
        display: none !important;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    transition: border-color var(--transition);
    color-scheme: dark;
}

[data-theme="light"] .form-input,
[data-theme="light"] .form-select,
[data-theme="light"] .form-textarea {
    color-scheme: light;
}

.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

/* Placeholder klar als leer erkennbar (Firefox sonst opacity 0.54) */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

/* Dark Mode: normale Felder */
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-textarea {
    border-color: var(--border);
    background-color: var(--bg-card);
    color: var(--text);
}

[data-theme="dark"] .form-input::placeholder,
[data-theme="dark"] .form-textarea::placeholder {
    color: var(--placeholder);
    opacity: 1;
}

[data-theme="dark"] .form-select:has(> option[value=""]:checked) {
    color: var(--placeholder);
}

/* Autofill: Browser malt oft weissen Rahmen (besonders nach Light-Dark). Border transparent + Hintergrund/Rand nur per inset box-shadow. */
[data-theme="dark"] .form-input:-webkit-autofill,
[data-theme="dark"] .form-input:-webkit-autofill:hover,
[data-theme="dark"] .form-input:-webkit-autofill:focus,
[data-theme="dark"] .form-input:-webkit-autofill:active,
[data-theme="dark"] .form-textarea:-webkit-autofill,
[data-theme="dark"] .form-select:-webkit-autofill {
    -webkit-text-fill-color: #efefef !important;
    caret-color: #efefef !important;
    color: #efefef !important;
    border: 1px solid transparent !important;
    border-color: transparent !important;
    outline: none !important;
    background-color: transparent !important;
    background-image: none !important;
    /* 1. Ring (Rahmen) oben, 2. VollFlaeche - feste Farben, WebKit mag keine vars */
    -webkit-box-shadow:
        inset 0 0 0 1px rgb(252 252 252 / 10%),
        inset 0 0 0 100vmax #0a0a0a !important;
    box-shadow:
        inset 0 0 0 1px rgb(252 252 252 / 10%),
        inset 0 0 0 100vmax #0a0a0a !important;
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}

[data-theme="light"] .form-input:-webkit-autofill,
[data-theme="light"] .form-input:-webkit-autofill:hover,
[data-theme="light"] .form-input:-webkit-autofill:focus,
[data-theme="light"] .form-input:-webkit-autofill:active,
[data-theme="light"] .form-textarea:-webkit-autofill,
[data-theme="light"] .form-select:-webkit-autofill {
    -webkit-text-fill-color: #1a1a1a !important;
    caret-color: #1a1a1a !important;
    color: #1a1a1a !important;
    border: 1px solid transparent !important;
    border-color: transparent !important;
    outline: none !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-box-shadow:
        inset 0 0 0 1px #dfdfdf,
        inset 0 0 0 100vmax #ffffff !important;
    box-shadow:
        inset 0 0 0 1px #dfdfdf,
        inset 0 0 0 100vmax #ffffff !important;
    transition: background-color 99999s ease-out 0s, color 99999s ease-out 0s;
}

[data-theme="dark"] .form-input:disabled,
[data-theme="dark"] .form-input[readonly] {
    background: var(--bg-elevated);
    background-color: var(--bg-elevated);
    color: var(--text-secondary);
    border-color: var(--border);
    opacity: 1;
    -webkit-text-fill-color: var(--text-secondary);
}

/* Profil/Account: Inputs dunkler als Kachel */
[data-theme="dark"] .account-page .form-input,
[data-theme="dark"] .account-page .form-select,
[data-theme="dark"] .account-page .form-textarea {
    background: var(--bg);
    background-color: var(--bg);
    border-color: var(--border);
}

[data-theme="dark"] .account-page .form-input:-webkit-autofill,
[data-theme="dark"] .account-page .form-input:-webkit-autofill:hover,
[data-theme="dark"] .account-page .form-input:-webkit-autofill:focus,
[data-theme="dark"] .account-page .form-input:-webkit-autofill:active {
    -webkit-text-fill-color: #efefef !important;
    border: 1px solid transparent !important;
    border-color: transparent !important;
    outline: none !important;
    background-color: transparent !important;
    background-image: none !important;
    -webkit-box-shadow:
        inset 0 0 0 1px rgb(252 252 252 / 10%),
        inset 0 0 0 100vmax #0a0a0a !important;
    box-shadow:
        inset 0 0 0 1px rgb(252 252 252 / 10%),
        inset 0 0 0 100vmax #0a0a0a !important;
}

/* Select: geschlossen - App-Design; Desktop: Custom-Panel (siehe .custom-select-panel) */
.form-select {
    color-scheme: dark;
    background-color: var(--bg-card);
    color: var(--text);
    cursor: pointer;
}

.form-select:hover {
    border-color: color-mix(in srgb, var(--accent) 35%, var(--border));
}

.form-select.is-custom-open {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/* Fallback native Optionen (Touch / ohne Custom-UI) */
.form-select option,
.form-select optgroup {
    background-color: var(--bg-elevated, var(--bg-card));
    color: var(--text);
    padding: 10px 12px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.form-select option:checked,
.form-select option:hover,
.form-select option:focus {
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--accent) 28%, var(--bg-elevated, var(--bg-card))),
        color-mix(in srgb, var(--accent) 28%, var(--bg-elevated, var(--bg-card)))
    );
    color: var(--text);
}

.form-select optgroup {
    font-weight: 700;
    font-style: normal;
    color: var(--text-secondary);
    background-color: var(--bg-card);
}

[data-theme="light"] .form-select {
    color-scheme: light;
}

[data-theme="light"] .form-select option,
[data-theme="light"] .form-select optgroup {
    background-color: #ffffff;
    color: var(--text);
}

[data-theme="light"] .form-select option:checked,
[data-theme="light"] .form-select option:hover {
    background: linear-gradient(
        0deg,
        color-mix(in srgb, var(--accent) 18%, #fff),
        color-mix(in srgb, var(--accent) 18%, #fff)
    );
    color: var(--text);
}

/* ueber Auth/Welcome (2000) und Modal (400), unter Lightbox (10000) */
.custom-select-panel {
    position: fixed;
    z-index: 2500;
    margin: 0;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg-elevated, var(--bg-card));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.12),
        0 16px 40px rgba(0, 0, 0, 0.28);
    color: var(--text);
    font-family: var(--font);
    font-size: 0.92rem;
    line-height: 1.35;
    animation: customSelectIn 0.12s ease;
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent) transparent;
}

@keyframes customSelectIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.custom-select-panel::-webkit-scrollbar {
    width: 8px;
}

.custom-select-panel::-webkit-scrollbar-track {
    background: transparent;
}

.custom-select-panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.custom-select-group {
    padding: 10px 12px 4px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
    user-select: none;
}

.custom-select-option {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 0.92rem;
    font-weight: 500;
    padding: 10px 12px;
    /* Mitte: eckig; erstes/letztes Option-Element mit Radius (Panel-Ecken) */
    border-radius: 0;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}

.custom-select-panel > .custom-select-option:first-of-type {
    border-radius: 8px 8px 0 0;
}

.custom-select-panel > .custom-select-option:last-of-type {
    border-radius: 0 0 8px 8px;
}

.custom-select-panel > .custom-select-option:only-of-type {
    border-radius: 8px;
}

.custom-select-option:hover,
.custom-select-option:focus-visible {
    outline: none;
    background: var(--accent-muted);
    color: var(--text);
}

.custom-select-option.is-selected {
    background: var(--accent-muted);
    color: var(--accent);
    font-weight: 650;
    box-shadow: none;
}

.custom-select-option.is-selected:hover,
.custom-select-option.is-selected:focus-visible {
    background: var(--accent-muted);
    color: var(--accent);
}

.custom-select-option.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.custom-select-option.is-disabled:hover {
    background: transparent;
}

[data-theme="light"] .custom-select-panel {
    background: #fff;
    border-color: #d8d8d8;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 18px 40px rgba(0, 0, 0, 0.12);
}

[data-theme="light"] .custom-select-option:hover,
[data-theme="light"] .custom-select-option:focus-visible {
    background: var(--accent-muted);
}

[data-theme="light"] .custom-select-option.is-selected {
    background: var(--accent-muted);
    color: var(--accent);
}

/* Zahlenfelder: native Pfeile aus, Custom-Stepper (App-Design) */
.form-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.form-input[type="number"]::-webkit-outer-spin-button, .form-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.number-field {
    position: relative;
    display: block;
    width: 100%;
}

.number-field > .form-input {
    width: 100%;
    padding-right: 2.35rem;
}

.number-field-controls {
    position: absolute;
    top: 4px;
    right: 4px;
    bottom: 4px;
    width: 22px;
    display: flex;
    flex-direction: column;
    border-radius: 4px;
    overflow: hidden;
    border: none;
    background: transparent;
    box-shadow: none;
}

.number-field-btn {
    flex: 1 1 50%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: #111;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.12s ease, color 0.12s ease;
}

.number-field-btn + .number-field-btn {
    border-top: none;
}

.number-field-btn:hover {
    background: transparent;
    color: #000;
    opacity: 1;
}

.number-field-btn:active {
    background: transparent;
    opacity: 0.85;
}

/* Darkmode: abged aempfte Pfeile (grau, nicht reinwei ) */
[data-theme="dark"] .number-field-btn {
    color: var(--text-secondary);
    opacity: 0.85;
}

[data-theme="dark"] .number-field-btn:hover {
    color: var(--text-secondary);
    opacity: 1;
    background: transparent;
}

[data-theme="dark"] .number-field-btn:active {
    color: var(--text-secondary);
    opacity: 0.95;
    background: transparent;
}

.number-field-btn svg {
    width: 11px;
    height: 11px;
    display: block;
    pointer-events: none;
    stroke-width: 2.6;
}

.number-field:focus-within .number-field-controls {
    border-color: transparent;
}

.number-field .form-input:disabled + .number-field-controls, .number-field .form-input[readonly] + .number-field-controls {
    opacity: 0.35;
    pointer-events: none;
}

/* Select / Pulldown: Scrollbalken + Dark/Light-Schema r native Listen */
.form-select {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent) transparent;
}

.form-select::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.form-select::-webkit-scrollbar-track {
    background: transparent;
    margin: 4px 0;
}

.form-select::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.form-select::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-secondary) 65%, transparent);
    background-clip: padding-box;
}

[data-theme="dark"] .form-select {
    color-scheme: dark;
}

[data-theme="light"] .form-select {
    color-scheme: light;
    scrollbar-color: color-mix(in srgb, #666 40%, transparent) transparent;
}

[data-theme="light"] .form-select::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #666 35%, transparent);
    background-clip: padding-box;
}

[data-theme="light"] .form-select::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, #444 50%, transparent);
    background-clip: padding-box;
}

/* Picker-Symbole */
.form-input[type="date"]::-webkit-calendar-picker-indicator,
.form-input[type="time"]::-webkit-calendar-picker-indicator,
.form-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
.form-input[type="month"]::-webkit-calendar-picker-indicator,
.form-input[type="week"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.9;
    width: 1.2rem;
    height: 1.2rem;
    padding: 0;
    margin: 0;
}

/* Dark Mode: natives Icon oft schwarz -> eigenes graues SVG (wie - text-secondary #888) */
[data-theme="dark"] .form-input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] .form-input[type="week"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    filter: none !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.15rem 1.15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
}

[data-theme="dark"] .form-input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    filter: none !important;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 1.15rem 1.15rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E");
}

[data-theme="light"] .form-input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .form-input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .form-input[type="datetime-local"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .form-input[type="month"]::-webkit-calendar-picker-indicator,
[data-theme="light"] .form-input[type="week"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 0.85;
    background-image: none;
}

.form-input[type="date"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="time"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="datetime-local"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="month"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="week"]:hover::-webkit-calendar-picker-indicator,
.form-input[type="file"]:hover {
    opacity: 1;
}

/* Overlay ueber natives Picker-Symbol: App-Tooltip statt Chrome-DE-Text */
.picker-field {
    position: relative;
    width: 100%;
}
.picker-field-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    width: 1.35rem;
    height: 1.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}
.picker-field-btn:hover {
    opacity: 1;
    color: var(--text);
}
.picker-field-btn svg {
    width: 1.15rem;
    height: 1.15rem;
    display: block;
    pointer-events: none;
}
.picker-field .form-input::-webkit-calendar-picker-indicator {
    opacity: 0 !important;
    pointer-events: none;
    background-image: none !important;
}

.form-textarea {
    resize: vertical;
    min-height: 100px;
}

.grow-combo-field .grow-combo-custom {
    margin-top: 8px;
}

.grow-combo-field .grow-combo-custom[hidden] {
    display: none !important;
}

.form-hint {
    display: block;
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-top: 4px;
    transition: color .2s .2s;
    margin-bottom: 12px;
}

/* Hinweis: Ziel-pH/EC aus Duengeplan (Termin / Journal Giessen) */
.water-plan-targets-hint,
.water-plan-mode-banner {
    color: var(--accent);
    margin-top: 8px;
    margin-bottom: 4px;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--accent-muted);
    border-left: 0px solid var(--accent);
    font-weight: 600;
}

div#nutrientGrowMulti .form-hint, p#nutrientLinkedEventsHint {
    display: none;
}

.form-hint:hover {
    color: var(--text);
}

/* Ausblendbare Hilfetexte */
.form-tip {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 6px 0 12px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.85rem;
    line-height: 1.4;
    animation: form-tip-attention-pulse 1.8s ease-in-out 4;
}

.form-tip--inline {
    margin-top: 6px;
    margin-bottom: 0;
}

.form-tip--page {
    margin: 0 0 12px;
}

/* auffaellige Animation, bis der Hinweis gelesen und weggeklickt wird */
@keyframes form-tip-attention-pulse {
    0%, 100% {
        border-color: var(--border);
        box-shadow: 0 0 0 0 transparent;
        background: var(--bg-elevated);
    }
    40% {
        border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
        background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
    }
    70% {
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
        box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .form-tip {
        animation: none;
        border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    }
}

.form-tip-text {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    line-height: 1.45;
}

.form-tip-dismiss {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    margin: -7px -6px 0px 0;
    padding: 0;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.form-tip-dismiss:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.form-tip-dismiss:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 1px;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* Auf schmalen Screens untereinander (z. B. Duengeplan + Plan-Schritt beim Giessen) */
@media (max-width: 767px) {
    .form-row.form-row-stack-sm {
        grid-template-columns: 1fr;
        gap: 0px;
    }
}

/* Termin-Serie */
.event-series {
    margin-top: 4px;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 45%, var(--bg-card));
}

.event-series-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
}

.event-series-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.event-series-body {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* display:flex darf das HTML-Attribut hidden nicht aushebeln */
.event-series-body[hidden] {
    display: none !important;
}

.event-series-preview {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--accent-muted);
    border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

.event-series-preview strong {
    color: var(--accent);
    font-weight: 700;
}

.event-series-preview-error {
    color: #e74c3c;
    font-weight: 600;
}

.event-series-phase-hint {
    margin: 0;
}

.nutrient-grow-multi {
    margin-top: 2px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.nutrient-grow-picks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

.nutrient-grow-picks .filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.nutrient-grow-picks .filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border);
}

.nutrient-grow-picks .filter-chip.active {
    background: var(--accent-muted);
    color: var(--accent);
    border-color: var(--border);
}

.nutrient-grow-picks .filter-chip.active:hover {
    border-color: var(--accent);
}


/* Unter Alle aktiven Pflanzen: Pflanzen linkbuendig, nebeneinander in einer Zeile */
.nutrient-grow-multi .event-grow-checks.nutrient-grow-checks,
.nutrient-grow-multi .nutrient-grow-checks {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    align-content: flex-start;
    gap: 8px 12px;
    max-height: none;
    overflow: visible;
    /* Checkbox fluchtet mit - lle aktiven a : 1px Border + 10px Padding */
    padding: 4px 0 2px 11px;
    width: 100%;
    box-sizing: border-box;
}

/* Einzelpflanze: kein Chip-Rahmen, kein gruener Hintergrund - nur Checkbox accent */
.nutrient-grow-multi .event-grow-check {
    display: inline-flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    white-space: nowrap;
    width: auto;
    max-width: 100%;
    padding: 4px 2px 4px 0;
    margin: 0;
    border: none;
    border-radius: 0;
    background: transparent;
    color: var(--text);
    transition: color 0.15s ease;
}

.nutrient-grow-multi .event-grow-check:hover {
    background: transparent;
}

.nutrient-grow-multi .event-grow-check:has(input:checked) {
    border: none;
    background: transparent;
    color: var(--text);
}

.nutrient-grow-multi .event-grow-check input {
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.nutrient-grow-multi .event-grow-check span {
    line-height: 1.2;
    text-align: left;
}

/* Multi-Pflanzen-Aufteilung unter der Dosierungsliste */
.nutrient-split-hint {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0 0;
    padding: 16px 16px 18px;
    border: none;
    border-radius: var(--radius-lg);
    background: var(--nutrient-panel-bg, #111D19);
    color: var(--text);
    line-height: 1.3;
    min-width: 0;
    overflow-x: hidden;
}

.nutrient-split-hint-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.nutrient-split-hint-count {
    font-size: 1.55rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--accent);
    line-height: 1;
}

.nutrient-split-hint-label {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-secondary);
    letter-spacing: 0.01em;
}

.nutrient-split-hint-stats {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 18px;
}

.nutrient-split-stat {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    white-space: nowrap;
}

.nutrient-split-stat-value {
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    color: var(--accent);
    line-height: 1.15;
    white-space: nowrap;
}

.nutrient-split-stat-unit {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--accent);
}

.nutrient-split-stat-label {
    font-size: 0.92rem;
    font-weight: 650;
    color: var(--text-secondary);
    white-space: nowrap;
}

.nutrient-split-stat-sep {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--text-secondary);
    align-self: center;
    opacity: 0.7;
}

[data-theme="light"] .nutrient-split-hint-label {
    color: var(--text);
}

/* Experte: Wasser je Pflanze editierbar */
.nutrient-split-hint-lead {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.35;
}

.nutrient-split-plant-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 3 Spalten: Name | Wasserml| Duengermlmins klein genug fuer Handy */
.nutrient-split-plant-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(5.5rem, auto) minmax(0, auto);
    align-items: center;
    column-gap: 10px;
    padding: 12px 0;
    border-radius: 0;
    background: none;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    min-width: 0;
    overflow: hidden;
}

.nutrient-split-plant-row:last-child {
    border-bottom: none;
}

.nutrient-split-plant-name {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-secondary);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="light"] .nutrient-split-plant-name {
    color: var(--text);
}

/* Felder fuellen die restlichen Grid-Spalten (nicht umbrechen) */
.nutrient-split-plant-fields {
    display: contents;
}

/* Wasser je Pflanze: kompakt, Zahl + ml in einer Zeile */
.nutrient-split-water-field {
    width: 100%;
    max-width: 6.5rem;
    justify-self: start;
    min-width: 0;
}

.nutrient-split-water-field .form-input {
    width: 100%;
    text-align: right;
    padding: 8px 2.15rem 8px 8px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    font-size: 0.95rem;
}

.nutrient-split-water-field .nutrient-ec-field-unit {
    right: 8px;
    font-size: 0.72rem;
    color: var(--accent);
    font-weight: 700;
    white-space: nowrap;
}

.nutrient-split-plant-fert {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    min-width: 0;
    align-items: center;
    align-content: center;
    flex-wrap: wrap;
}

/* Zahl + ml in einer Zeile, beide gruen */
.nutrient-split-plant-fert-line {
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.2em;
    white-space: nowrap;
    color: var(--accent);
    line-height: 1.15;
}

.nutrient-split-plant-fert-value {
    font-size: 1.1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    white-space: nowrap;
}

.nutrient-split-plant-fert-unit {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--accent);
    white-space: nowrap;
}

.nutrient-split-plant-fert-label {
    font-size: 0.9rem;
    font-weight: 650;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.15;
    align-items: baseline;
}

/* Handy: Duenger unter die ml-Zahl, damit nichts ueber den Modalrand ragt */
@media (max-width: 767px) {
    .nutrient-split-hint {
        padding-left: 12px;
        padding-right: 12px;
        overflow-x: hidden;
    }

    .nutrient-split-plant-row {
        grid-template-columns: minmax(0, 1fr) minmax(5.25rem, 5.75rem) minmax(6rem, auto);
        column-gap: 10px;
    }

    .nutrient-split-water-field {
        max-width: 5.75rem;
    }

    .nutrient-split-plant-fert {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-end;
        justify-content: center;
        gap: 1px;
        min-width: 6rem;
    }

    .nutrient-split-plant-fert-value {
        font-size: 1rem;
    }

    .nutrient-split-plant-fert-unit {
        font-size: 0.82rem;
    }

    .nutrient-split-plant-fert-label {
        font-size: 0.72rem;
    }
}

.event-grow-multi {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* - lle aktiven Pflanzen a : Rahmen bleibt, Flaeche nicht gruen - nur Checkbox accent */
.event-grow-all {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    user-select: none;
    padding: 8px 10px;
    border-radius: var(--radius);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    color: var(--text);
    transition: background 0.15s ease, border-color 0.15s ease;
}

.event-grow-all:hover {
    background: var(--bg-hover);
}

.event-grow-all:has(input:checked) {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.event-grow-all input,
.event-grow-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
    flex-shrink: 0;
}

.event-grow-checks {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 200px;
    overflow-y: auto;
    /* Checkbox fluchtet mit - lle aktiven a : 1px Border + 10px Padding */
    padding: 4px 0 4px 11px;
    box-sizing: border-box;
}

/* Einzelpflanze: kein Border/Chip, kein gruener Hintergrund */
.event-grow-check {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 4px 2px 4px 0;
    border: none;
    border-radius: 0;
    background: transparent;
    transition: none;
}

.event-grow-check:hover {
    background: transparent;
}

.event-grow-check:has(input:checked) {
    background: transparent;
    border: none;
}

.event-grow-summary {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--accent);
    min-height: 1.2em;
}

.calendar-detail-heading {
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.calendar-open-section {
    margin-top: 8px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Abstand: Aufgaben-Bloecke -> erstes Tagesdetail */
.calendar-open-section + .calendar-day-panel {
    margin-top: 4px;
}

.calendar-open-section .section-header {
    margin-bottom: 10px;
}

.calendar-task-block .section-title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.calendar-task-list,
.calendar-day-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Wie Uebersicht-Terminzeile: Giessen-Button vertikal mittig */
.calendar-task-list .event-item {
    align-items: center;
}

.calendar-task-list .event-actions {
    display: flex;
    align-items: center;
    align-self: center;
    flex-shrink: 0;
}

/* Tagesdetail: Termine / Journal / Phasen - einklappbar, connected wie open-tasks */
.calendar-day-fold {
    --cal-fold-frame: var(--border);
    --cal-fold-side-border: 1.5px;
    margin: 0 0 10px;
    border: var(--cal-fold-side-border) solid var(--cal-fold-frame);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
    transition: border-color var(--transition);
}

/* Termine: Rahmen wie die anderen Folds (kein gruener Fokus) */
.calendar-day-fold-appointments[open],
.calendar-day-fold-appointments:hover,
.calendar-day-fold-appointments:not([open]):hover {
    --cal-fold-frame: var(--border);
    border-color: var(--border);
}

.calendar-day-fold:last-child {
    margin-bottom: 0;
}

.calendar-day-fold-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--bg-card);
    /* Kein border-bottom: zugeklappt sonst Doppelrahmen (Summary + outer border) */
    border-bottom: none;
}

.calendar-day-fold-summary::-webkit-details-marker {
    display: none;
}

/* Aufgeklappt: Header schliesst nahtlos an den ersten Eintrag an */
.calendar-day-fold[open] > .calendar-day-fold-summary {
    border-bottom: none;
    margin-bottom: 0;
}

/* Zugeklappt: nur der aeussere Rahmen (kein zweiter Strich unten) */
.calendar-day-fold:not([open]) > .calendar-day-fold-summary {
    border-bottom: none;
}

/* Kalender-Folds: kompakter Titel, kein (Anzahl), kein wildes Letter-Spacing */
.calendar-day-fold-summary .section-title.calendar-day-fold-title,
.calendar-day-fold-summary .calendar-day-fold-title,
.calendar-day-fold-summary .section-title {
    margin: 0 !important;
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.03em !important;
    text-transform: none !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2 !important;
}

@media (max-width: 900px) {
    .calendar-day-fold-summary {
        padding: 10px 12px;
        gap: 8px;
    }

    .calendar-day-fold-summary .section-title.calendar-day-fold-title,
    .calendar-day-fold-summary .calendar-day-fold-title,
    .calendar-day-fold-summary .section-title {
        font-size: 0.8rem !important;
        font-weight: 600 !important;
        letter-spacing: 0.02em !important;
        text-transform: none !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .calendar-day-panel-head {
        flex-wrap: nowrap;
        gap: 6px 8px;
        padding: 12px 12px;
        align-items: center;
    }

    .calendar-day-panel-weekday {
        font-size: 0.9rem;
        flex-shrink: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-day-panel-date {
        font-size: 0.78rem;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .calendar-month.calendar-month-week {
        font-size: 0.78rem !important;
    }
}

.calendar-day-fold-chevron {
    flex-shrink: 0;
    display: flex;
    width: 18px;
    height: 18px;
    color: var(--text-secondary);
    transition: transform 0.15s ease;
}

.calendar-day-fold-chevron svg {
    width: 100%;
    height: 100%;
}

.calendar-day-fold[open] .calendar-day-fold-chevron {
    transform: rotate(180deg);
}

/* Kein Innenabstand Liste haengt am Header (connected) */
.calendar-day-fold-body {
    padding: 0;
}

.calendar-day-fold-body .calendar-day-list,
.calendar-day-fold-body .calendar-photo-grid,
.calendar-day-fold-body .journal-list {
    margin: 0;
    gap: 0;
}

/* Eintraege im Fold: verbunden, gruene Seiten (outer frame am details) */
.calendar-day-fold[open] .calendar-day-list > .event-item,
.calendar-day-fold[open] .calendar-events > .event-item,
.calendar-day-fold[open] .journal-list > .event-item {
    margin-bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--border);
    box-shadow: none;
    background: var(--bg-card);
}

/* Erster Eintrag: kein oberer Radius unter dem Header */
.calendar-day-fold[open] .calendar-day-list > .event-item:first-child,
.calendar-day-fold[open] .calendar-events > .event-item:first-child,
.calendar-day-fold[open] .journal-list > .event-item:first-child,
.calendar-day-fold[open] .calendar-photo-grid {
    border-top: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.calendar-day-fold[open] .calendar-day-list > .event-item:last-child,
.calendar-day-fold[open] .calendar-events > .event-item:last-child,
.calendar-day-fold[open] .journal-list > .event-item:last-child {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.calendar-day-fold-body .calendar-photo-grid {
    padding: 10px;
}

.calendar-open-rest {
    margin: 0;
}

/* Termine + optional KW/Monat: sauber gestapelt, Anzahl nur im Badge-Kreis */
.calendar-open-rest .open-tasks-toggle .section-title.cal-open-rest-title,
.calendar-open-rest .open-tasks-toggle .section-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 2px;
    flex: 0 1 auto;
    min-width: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: inherit;
    font-weight: inherit;
}

.calendar-open-rest .cal-open-rest-label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
    line-height: 1.2;
}

.calendar-open-rest .cal-open-rest-period {
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
    color: var(--text-muted);
    line-height: 1.25;
    max-width: 100%;
}

@media (max-width: 767px) {
    .calendar-open-rest .cal-open-rest-label {
        font-size: 0.8rem;
        letter-spacing: 0.03em;
    }

    .calendar-open-rest .cal-open-rest-period {
        font-size: 0.68rem;
        /* Lange KW-Zeile darf umbrechen, ohne dass Termine mitbricht */
        white-space: normal;
        word-break: break-word;
    }
}

/* Kein Abstand Header Liste connected wie Pflanzen-Detail */
.calendar-open-rest .open-tasks-list,
.calendar-open-rest .open-tasks-list.calendar-task-list {
    margin-top: 0;
    gap: 0;
}

/*
* Kalender Termine (open-rest): event-items statt open-task-cards
* gruener Connected-Frame analog Pflanzen-Detail open-tasks.
*/
.calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item {
    margin-bottom: 0;
    border-radius: 0;
    border: 1px solid var(--border);
    border-bottom: none;
    border-left-width: var(--open-tasks-side-border, 1.5px);
    border-right-width: var(--open-tasks-side-border, 1.5px);
    border-left-color: var(--open-tasks-frame, var(--accent));
    border-right-color: var(--open-tasks-frame, var(--accent));
    box-shadow: none;
    background: var(--bg-card);
}

.calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:first-child {
    border-top: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
}

.calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:last-child {
    border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:only-child {
    border-top: none;
    border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
    border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:hover {
    border-left-color: var(--open-tasks-frame, var(--accent));
    border-right-color: var(--open-tasks-frame, var(--accent));
    border-bottom-color: transparent;
    background: var(--bg-hover);
    z-index: 1;
}

.calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:last-child:hover {
    border-bottom-color: var(--open-tasks-frame, var(--accent));
}

/* Grow detail */
.grow-detail-page,
.env-detail-page {
    max-width: var(--content-max);
}

.grow-detail-page.has-entity-swipe-nav,
.env-detail-page.has-entity-swipe-nav {
    touch-action: pan-y;
}

.grow-detail-header {
    margin-bottom: 0px;
}

.grow-detail-name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.grow-detail-name {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    flex: 1;
    min-width: 0;
}

.detail-entity-pager {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    flex-shrink: 0;
}

.detail-entity-pager .btn-icon {
    min-width: 36px;
    min-height: 36px;
}

.env-detail-pager-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 0 0 8px;
}

.env-detail-header {
    margin-bottom: 12px;
}

.env-detail-header .grow-detail-name {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 10px;
}

.env-detail-name-text {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.env-detail-name-badges {
    margin-bottom: 0;
    margin-left: 0;
    flex: 0 0 auto;
}

.env-detail-name-badges .env-kind-badge {
    position: static;
    background: var(--accent-muted);
    color: var(--accent);
}

.grow-detail-edit-btn,
.grow-detail-report-btn {
    flex-shrink: 0;
    margin-top: 0.2em;
    background: var(--bg-hover);
}

.grow-detail-report-btn {
    font-weight: 650;
}

/* Handy: Ghost-Buttons mit Rahmen, ohne Hintergrund - Report + Bearbeiten nebeneinander */
@media (max-width: 767px) {
    .btn-ghost {
        background: transparent;
        border: 1px solid var(--border);
    }

    .btn-ghost:hover {
        background: transparent;
        border-color: color-mix(in srgb, var(--text-secondary) 55%, var(--border));
        color: var(--text);
    }

    .grow-detail-name-actions {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 6px;
    }

    .grow-detail-edit-btn,
    .grow-detail-report-btn {
        margin-top: 0;
        background: transparent;
        border: 1px solid var(--border);
    }

    .grow-detail-edit-btn:hover,
    .grow-detail-report-btn:hover {
        background: transparent;
        border-color: color-mix(in srgb, var(--text-secondary) 55%, var(--border));
        color: var(--text);
    }
}

.grow-detail-strain {
    color: var(--text-secondary);
    font-size: 1.05rem;
    margin-top: 6px;
}

.grow-detail-breeder {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-top: 4px;
}

.grow-detail-lineage {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.35;
}

.grow-detail-lineage.is-collapsible {
    cursor: pointer;
    user-select: none;
}

.grow-detail-lineage-main,
.grow-detail-lineage-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em 0.55em;
    min-width: 0;
    width: 100%;
}

.grow-detail-lineage.is-collapsed .grow-detail-lineage-extra {
    display: none;
}

.grow-detail-lineage-hint {
    font-weight: 600;
    letter-spacing: 0.02em;
}

.grow-detail-lineage-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    color: #fff;
    opacity: 0.85;
    transition: transform 0.22s ease;
}

.grow-detail-lineage-chevron svg {
    width: 14px;
    height: 14px;
    display: block;
}

.grow-detail-lineage.is-collapsed .grow-detail-lineage-chevron {
    transform: rotate(-90deg);
}

[data-theme="light"] .grow-detail-lineage-chevron {
    color: #000;
}

.grow-detail-lineage-part {
    min-width: 0;
    cursor: help;
}

.grow-detail-lineage.is-collapsible .grow-detail-lineage-part {
    cursor: pointer;
}

.grow-detail-lineage-part:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 3px;
}

/* Trennpunkt Sativa - Indica / Sortenzeile: immer hell auf dunkel */
.grow-detail-lineage-sep,
.meta-sep {
    color: #ffffff;
    opacity: 1;
    font-weight: 700;
    user-select: none;
}

.meta-sep {
    margin: 0 0.35em;
}

[data-theme="light"] .grow-detail-lineage-sep,
[data-theme="light"] .meta-sep {
    color: #000000;
}

/* Handy: Meta-Chips etwas groesser (Medium, Topf, ), gut lesbar */
@media (max-width: 640px) {
    .grow-detail-page .grow-detail-meta-chips {
        gap: 7px;
        margin-top: 12px;
    }

    .grow-detail-page .grow-meta-chip {
        gap: 6px;
        padding: 8px 11px;
        border-radius: 11px;
    }

    .grow-detail-page .grow-meta-chip-body {
        gap: 1px;
        line-height: 1.2;
    }

    .grow-detail-page .grow-meta-chip-label {
        font-size: 0.66rem;
        letter-spacing: 0.04em;
    }

    .grow-detail-page .grow-meta-chip-value {
        font-size: 0.92rem;
        font-weight: 600;
    }

    .grow-detail-page .grow-meta-chip-icon {
        width: 26px;
        height: 26px;
        font-size: 1rem;
        border-radius: 7px;
    }
}

/* Handy Portrait: Topfart & Bewaesserung ausblenden (Platz sparen) */
@media (max-width: 640px) and (orientation: portrait) {
    .grow-detail-page .grow-meta-chip-pot-type,
    .grow-detail-page .grow-meta-chip-irrigation {
        display: none;
    }
}

.grow-detail-meta-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
    margin-top: 14px;
}

.grow-detail-meta-chips .grow-meta-chip-env {
    margin-left: auto;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    border-color: color-mix(in srgb, #5b9bd5 35%, var(--border));
    /* background: linear-gradient(145deg, color-mix(in srgb, #5b9bd5 14%, var( - bg-card)) 0%, var( - bg-card) 70%); */
}

.grow-detail-meta-chips .grow-meta-chip-env:hover {
    border-color: color-mix(in srgb, #5b9bd5 50%, var(--border));
    background: color-mix(in srgb, #5b9bd5 16%, var(--bg-card));
}

@media (max-width: 640px) {
  .grow-detail-meta-chips .grow-meta-chip-env {
    margin-left: 0;
    width: auto;
  }
}

.grow-detail-name-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

@media (max-width: 600px) {
    .grow-detail-name-actions {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: row;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
    }
}

.calendar-multi-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: -4px 0 12px;
    text-align: center;
    display: none;
}

@media (max-width: 767px) {
    .calendar-multi-hint {
        display: block;
    }
}

.calendar-day.select-anchor {
    /* box-shadow: inset 0 0 0 2px color-mix(in srgb, var( - accent) 55%, transparent); */
}

.calendar-multi-day-heading {
    margin-top: 8px;
    margin-bottom: 4px;
}

.calendar-multi-day-heading .section-title {
    font-size: 0.95rem;
}

.grow-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 12px;
    border-radius: 14px;
    border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
    background: var(--bg);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    min-width: 0;
}

.grow-meta-chip-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-hover));
    flex-shrink: 0;
    display: none;
}

.grow-meta-chip-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    line-height: 1.2;
}

.grow-meta-chip-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.grow-meta-chip-value {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.grow-meta-chip-pot {
    border-color: color-mix(in srgb, #e67e22 30%, var(--border));
    /* background: linear-gradient(145deg, color-mix(in srgb, #e67e22 12%, var( - bg-card)) 0%, var( - bg-card) 70%); */
}

.grow-meta-chip-pot .grow-meta-chip-icon {
    /* background: color-mix(in srgb, #e67e22 18%, var( - bg-hover)); */
}

[data-theme="light"] .grow-meta-chip {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.grow-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 28px;
}

/* Detail: 3 Spalten Desktop, 1 Spalte Handy (volle Zeile) */
.grow-stats.grow-stats-grid,
.grow-detail-page .grow-stats.grow-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 28px;
}

@media (max-width: 767px) {
    /*
* Pflanzen-Detail Handy:
* Zeile 1: Tage | Phase
* Zeile 2: Journal | Termine
* Zeile 3: Medien | + Medien
* Zeile 4: Stats (volle Breite)
* Zeile 5: Strom (volle Breite)
* Zeile 6: Duenger (volle Breite)
*/
    .grow-stats.grow-stats-grid,
    .grow-detail-page .grow-stats.grow-stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-bottom: 10px;
    }

    .grow-detail-page .grow-open-tasks-anchor > .open-tasks {
        margin-top: 0;
    }

    /* Genetik (Sorte, Breeder, ) kompakter */
    .grow-detail-page .grow-detail-lineage {
        font-size: 0.84rem;
        line-height: 1.3;
        gap: 4px;
    }

    .grow-detail-page .grow-detail-lineage-part {
        font-size: inherit;
    }

    .grow-detail-page .grow-detail-lineage-chevron {
        width: 1em;
        height: 1em;
    }

    .grow-detail-page .grow-detail-lineage-chevron svg {
        width: 12px;
        height: 12px;
    }

    /* Timeline Handy: lesbar, aber kompakter als Desktop */
    .grow-detail-page .timeline-item {
        gap: 12px;
        padding-bottom: 16px;
    }

    .grow-detail-page .timeline-item::before {
        left: 14px;
        top: 32px;
        width: 2px;
    }

    .grow-detail-page .timeline-dot {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
        border-width: 1.5px;
    }

    .grow-detail-page .timeline-dot.active {
        box-shadow: 0 0 0 4px rgb(0 153 106 / 14%);
    }

    .grow-detail-page .timeline-stage-row {
        margin-bottom: 0;
    }

    .grow-detail-page .timeline-stage {
        font-size: 0.98rem;
        font-weight: 650;
        letter-spacing: -0.01em;
        line-height: 1.25;
    }

    .grow-detail-page .timeline-date {
        font-size: 0.85rem;
        line-height: 1.3;
        margin-top: 0;
    }

    .grow-detail-page .timeline-duration {
        font-size: 0.8rem;
        margin-top: 4px;
        gap: 6px;
    }

    .grow-detail-page .timeline-duration-text {
        line-height: 1.3;
    }

    .grow-detail-page .timeline-edit-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
    }

    .grow-detail-page .timeline-edit-btn svg {
        width: 15px;
        height: 15px;
    }
}

/*
* + Medien: neben Medien (Handy 2er-Grid, Desktop 3er-Grid).
* Stats (Start/Ernte/Giessen) immer eigene volle Zeile darunter.
* Wichtig: .grow-stats-large .stat-card setzt display:flex daher !important.
*/
.grow-detail-page .grow-stats-large .stat-card.stat-card-add-media,
.grow-detail-page .stat-card.stat-card-add-media {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.grow-detail-page .stat-card-add-media .stat-value-add {
    font-size: 1.75rem;
    font-weight: 600;
    line-height: 1;
    color: var(--accent);
}

.grow-detail-page .stat-card-add-media .stat-label {
    font-size: 0.78rem;
    line-height: 1.2;
    text-align: center;
    max-width: 9.5em;
}

.grow-detail-page .stat-card.is-drop-over {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}

/*
* Stats (Start/Ernte) + Strom + Duenger: Desktop nebeneinander.
* Handy: jede dieser Kacheln volle Breite (eigene Zeile).
*/
.grow-detail-page .grow-stats.grow-stats-grid > .stat-card-dates,
.grow-detail-page .grow-stats.grow-stats-grid > .stat-card-energy,
.grow-detail-page .grow-stats.grow-stats-grid > .stat-card-nutrient {
    grid-column: auto;
    min-width: 0;
}

/* Handy: Stats, Strom und Duenger jeweils volle Breite */
@media (max-width: 767px) {
    .grow-detail-page .grow-stats.grow-stats-grid > .stat-card-dates,
    .grow-detail-page .grow-stats.grow-stats-grid > .stat-card-energy,
    .grow-detail-page .grow-stats.grow-stats-grid > .stat-card-nutrient {
        grid-column: 1 / -1;
    }

    .grow-detail-page .stat-card-dates,
    .grow-detail-page .stat-card-energy,
    .grow-detail-page .stat-card-nutrient {
        padding: 14px 16px;
    }

    .grow-detail-page .stat-dates-table {
        font-size: 0.88rem;
    }

    .grow-detail-page .stat-dates-table th {
        white-space: normal;
        flex: 1 1 auto;
        min-width: 0;
        padding-right: 8px;
    }

    .grow-detail-page .stat-dates-table td {
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .grow-detail-page .stat-card-nutrient .stat-dates-table td {
        flex: 1 1 auto;
        min-width: 0;
        white-space: normal;
        word-break: break-word;
    }
}

/* Placeholder bis deferred kWh-Karte kommt */
.grow-detail-page .grow-stats.grow-stats-grid > .stat-card-energy-host:empty {
    display: none;
}

/* Strom- / Duenger-Kachel: gleiche Typo wie Stats (Start/Ernte) */
.grow-detail-page .grow-stats.grow-stats-grid > .stat-card-energy,
.grow-detail-page .grow-stats.grow-stats-grid > .stat-card-nutrient {
    text-align: left;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .grow-detail-page .stat-card-add-media .stat-value-add {
        font-size: 2rem;
    }

    .grow-detail-page .stat-card-add-media .stat-label {
        font-size: 0.9rem;
        max-width: none;
    }
}

.stat-card-dates,
.stat-card-energy,
.stat-card-nutrient {
    text-align: left;
    padding: 16px 18px;
    align-items: center !important;
    justify-content: center !important;
}

.stat-card-nutrient .stat-dates-table td {
    white-space: normal;
    word-break: break-word;
}

.stat-card-energy,
.stat-card-energy * {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}

.stat-dates-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    font-size: 0.82rem;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
}

.stat-dates-table tbody {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 0 1 auto;
    gap: 6px;
    min-height: 0;
}

.stat-dates-table tr {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    width: 100%;
}

.stat-dates-table th {
    text-align: left;
    font-weight: 500;
    color: var(--text-secondary);
    padding: 2px 0;
    white-space: nowrap;
}

.stat-dates-table td {
    text-align: right;
    font-weight: 650;
    color: var(--text);
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}

.grow-card-list-page,
.grow-card-list-page.is-desktop-draggable {
    cursor: pointer !important;
}

.grow-card-harvest {
    /* color: var( - accent); */
    /* font-weight: 600; */
}

.form-media-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.journal-media-multi-hint {
    margin: 0;
    color: var(--text-secondary);
}

.journal-media-multi-hint[hidden] {
    display: none !important;
}

/* Leerer Dateiname nicht anzeigen; Dateiname nur nach Auswahl */
.file-field-name:not(.has-file) {
    display: none;
}

#envCsvFileName:not(.has-file) {
    display: block;
}

.form-media-block.is-multi-grow-locked .file-field-btn {
    pointer-events: none;
    cursor: not-allowed;
    opacity: 0.45;
    color: var(--text-muted);
    background: var(--bg-hover);
    border-color: var(--border);
}

.form-media-block.is-multi-grow-locked .file-field-btn:hover,
.form-media-block.is-multi-grow-locked .file-field-btn:active {
    border-color: var(--border);
    background: var(--bg-hover);
    color: var(--text-muted);
}

.form-media-block.is-multi-grow-locked .file-field-icon {
    color: var(--text-muted);
    opacity: 0.65;
}

.form-media-preview-wide {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-media-preview-wide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.form-media-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.form-media-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Journal-Filter: Suche + pro Seite immer sichtbar; Pulldowns per Fokus aufklappen */
.journal-entry-filters-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 4px;
    margin-bottom: 14px;
}

.journal-filter-primary {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
}

.journal-filter-search-grow {
    flex: 1 1 auto;
    min-width: 0;
}

.journal-filter-search-grow .form-input {
    width: 100%;
}

.journal-filter-pagesize-outside {
    flex: 0 0 auto;
    width: auto;
    min-width: 7.5rem;
    max-width: 11rem;
}

.stat-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 20px 16px;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.stat-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1.1;
}

.stat-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-secondary);
    margin-top: 8px;
    line-height: 1.3;
}

.grow-stats-large .stat-value {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.grow-stats-large .stat-label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
}

.grow-stats-large .stat-sublabel {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent);
    margin-top: 4px;
    display: none;
}

.stat-week {
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

/* Phasen-Kachel: Wochen-Chip am oberen Rand zentriert - Zahlen mit anderen Kacheln fluchten */
.stat-card-phase {
    position: relative;
}

.stat-card-phase .stat-week {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 2;
    pointer-events: auto;
}

/* Abstand zwischen Meta-Chips (Umgebung usw.) und dem Wochen-Badge */
.grow-detail-page .grow-detail-stack > .grow-stats {
    padding-top: 20px;
}

.grow-detail-page .grow-detail-meta-chips {
    margin-bottom: 6px;
}

.stat-card-phase .stat-week .phase-week-badge {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    background: var(--bg-card);
}

[data-theme="light"] .stat-card-phase .stat-week .phase-week-badge {
    background: var(--bg-card);
}

.grow-stats-large .stat-card {
    padding: 24px 18px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Phase-Karte: gleiche Innenstruktur wie die reinen Zahlen-Kacheln */
.grow-stats-large .stat-card-phase {
    /* Badge sitzt absolute am Rand - Content wie die anderen Kacheln zentrieren */
    justify-content: center;
}

.stat-card-highlight {
    /* border-color: var( - accent); */
    /* background: var( - accent-muted); */
}

.stat-card-clickable {
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.stat-card-clickable, .stat-card-clickable * {
    cursor: pointer;
}

.stat-card-link .stat-link-hint {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--accent);
    margin-top: 6px;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}

.stat-card-clickable:hover, .stat-card-clickable:focus-visible {
    border-color: var(--accent);
    background: var(--bg-hover);
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.18);
    transform: translateY(-2px);
}

[data-theme="light"] .stat-card-clickable:hover, [data-theme="light"] .stat-card-clickable:focus-visible {
    background: #e8f5e9;
    box-shadow: 0 6px 20px rgba(92, 184, 92, 0.12);
}

.stat-card-clickable:hover .stat-link-hint, .stat-card-clickable:focus-visible .stat-link-hint {
    opacity: 1;
}

.stat-card-clickable:hover .stat-value, .stat-card-clickable:focus-visible .stat-value {
    color: var(--accent-hover);
}

.stat-card-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.grow-detail-page .section-title {
    font-size: 0.9rem;
}

.grow-detail-page .stage-step {
    height: 6px;
}

.grow-detail-page .stage-label {
    font-size: 0.8rem;
}

.grow-detail-page .stage-label.active {
    font-size: 1rem;
}
@media (min-width: 768px) {
    .grow-detail-page .stage-label.active {
        font-size: 1rem;
    }
}
/* Handy + Capacitor-App: kleinere Phasen-Namen/Tage/Wochen, */
@media (max-width: 767px) {
    .grow-detail-page .stage-label,
    .grow-detail-page .stage-label.active {
        font-size: 0.75rem;
    }
    .grow-detail-page .stage-label-name {
        font-size: 0.75rem;
        letter-spacing: -0.01em;
    }
    .grow-detail-page .stage-label-days {
        font-size: 0.65rem;
    }
    .grow-detail-page .stage-label-week {
        font-size: 0.62rem;
    }
    .grow-detail-page .stage-label-meta-empty {
        font-size: 0.65rem;
    }
    .stage-label-short {
        display: inline;
    }
    .stage-label-full {
        display: none;
    }
}
html.capacitor-native .grow-detail-page .stage-label,
html.capacitor-native .grow-detail-page .stage-label.active {
    font-size: 0.75rem;
}
html.capacitor-native .grow-detail-page .stage-label-name {
    font-size: 0.75rem;
}
html.capacitor-native .grow-detail-page .stage-label-days {
    font-size: 0.65rem;
}
html.capacitor-native .grow-detail-page .stage-label-week {
    font-size: 0.62rem;
}
html.capacitor-native .grow-detail-page .stage-label-meta-empty {
    font-size: 0.65rem;
}
html.capacitor-native .stage-label-short {
    display: inline;
}
html.capacitor-native .stage-label-full {
    display: none;
}
.grow-detail-page .stage-label-days {
    font-size: 0.75rem;
}

.grow-detail-page .stage-label-week {
    font-size: 0.9rem;
}

.grow-detail-page .stage-progress-card {
    padding-bottom: 20px;
}

.stage-timeline {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 8px;
}

.timeline-item {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 28px;
}

.timeline-item:last-child {
    padding-bottom: 0;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 19px;
    top: 44px;
    bottom: 0;
    width: 3px;
    background: var(--border);
    border-radius: 2px;
}

.timeline-item:last-child::before {
    display: none;
}

.timeline-dot {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bg-card);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    flex-shrink: 0;
    z-index: 1;
}

.timeline-dot.active {
    border-color: var(--accent);
    background: var(--accent-muted);
    box-shadow: 0 0 0 6px rgb(0 153 106 / 14%);
}

.timeline-dot.done {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
}

.timeline-content {
    flex: 1;
    padding-top: 1px;
    min-width: 0;
}

.timeline-stage-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 0px;
}

.timeline-edit-btn {
    flex-shrink: 0;
}

.timeline-stage {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.timeline-date {
    font-size: 0.95rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.timeline-duration {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--accent);
    margin-top: 6px;
}

.timeline-duration-text {
    white-space: normal;
    line-height: 1.35;
}

.grow-detail-page .card {
    padding: 24px;
}

/* Calendar */
.calendar-swipe-area {
    /* pan-y: Seite vertikal scrollen; horizontaler Wisch markiert Tage */
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
    position: relative;
}

.calendar-swipe-area .calendar-grid {
    touch-action: pan-y;
}

.calendar-grid.is-range-picking {
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
}

/* Handy: kein klebender :hover (gruener Schein ohne echte Auswahl) */
@media (hover: none) {
    .calendar-day:not(.other-month):not(.selected):hover,
    .calendar-day.has-content:not(.other-month):not(.selected):hover {
        background: var(--calendar-day-bg);
        border-color: var(--border);
        color: var(--text);
        z-index: auto;
    }

    .calendar-day.has-content:not(.other-month):not(.selected):hover {
        background: var(--calendar-day-bg);
        border-color: var(--border);
    }

    [data-theme="dark"] .calendar-day.has-content:not(.other-month):not(.selected):hover {
        background: color-mix(in srgb, var(--accent) 8%, var(--calendar-day-bg));
        border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
        color: var(--text);
    }

    .calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment):hover {
        background: color-mix(in srgb, var(--accent) 16%, var(--calendar-day-bg)) !important;
        border-color: color-mix(in srgb, var(--accent) 45%, transparent);
        color: var(--text);
    }

    [data-theme="light"] .calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment):hover {
        background: rgb(92 184 92 / 28%) !important;
        border-color: rgb(92 184 92 / 45%);
    }

    .calendar-day.has-overdue-appointment:not(.other-month):not(.selected):hover {
        background: rgba(231, 76, 60, 0.28) !important;
        border-color: rgba(231, 76, 60, 0.55);
        color: var(--text);
    }

    [data-theme="light"] .calendar-day.has-overdue-appointment:not(.other-month):not(.selected):hover {
        background: rgba(231, 76, 60, 0.16) !important;
        border-color: rgba(200, 60, 48, 0.45);
    }
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    touch-action: pan-y;
    -webkit-user-select: none;
    user-select: none;
}

@media (max-width: 767px) {
    .calendar-header {
        padding: 4px 0;
        margin-left: -4px;
        margin-right: -4px;
    }
}

.calendar-month {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Wochenansicht: KW 33 auf Handy etwas kleiner (langer Text) */
.calendar-month.calendar-month-week {
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    line-height: 1.25;
    padding: 0 4px;
}

@media (max-width: 767px) {
    .calendar-month.calendar-month-week {
        font-size: 0.78rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        line-height: 1.2;
    }
}

.calendar-nav {
    display: flex;
    gap: 4px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    /* Erste Reihe (Wochentage) schmal, Tage mit fester H */
    grid-template-rows: auto;
    grid-auto-rows: 112px;
    /* Tage verbunden: kein Gap zwischen Kacheln */
    column-gap: 0;
    row-gap: 0;
}

.calendar-weekday {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 0;
    min-height: 0;
    height: 28px;
    /* Wie Tageskacheln: verbunden, innen eckig */
    border-radius: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: none;
    /* Gemeinsame Kanten mit Nachbarn und erster Tageszeile */
    margin-right: -1px;
    margin-bottom: -1px;
}

/* Gesamtes Kalender-Raster: nur aeussere Ecken oben (Wochentage) */
.calendar-grid .calendar-weekday:first-child {
    border-top-left-radius: 12px;
}
.calendar-grid .calendar-weekday:nth-child(7) {
    border-top-right-radius: 12px;
}

.calendar-grid.calendar-grid-week .calendar-weekday,
.calendar-grid .calendar-weekday {
    height: 28px;
    padding: 0 2px;
}

.calendar-day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 6px;
    /* Verbundenes Raster: innen keine Rundung */
    border-radius: 0;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition);
    height: 112px;
    min-height: 112px;
    max-height: 112px;
    border: 1px solid var(--border);
    overflow: hidden;
    background: transparent;
    /* Gemeinsame Kanten (kein Doppel-Strich) */
    margin-right: -1px;
    margin-bottom: -1px;
}

/*
* Erste Tageszeile: oben eckig (schliesst an Wochentage an).
* Untere Ecken nur an der letzten Tageszeile.
*/
.calendar-day.cal-row-first.cal-col-first,
.calendar-day.cal-row-first.cal-col-last {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.calendar-day.cal-row-last.cal-col-first {
    border-bottom-left-radius: 12px;
}
.calendar-day.cal-row-last.cal-col-last {
    border-bottom-right-radius: 12px;
}

/* Letzte Monatswoche nur mit next-month: flache Zeile (nur Tag-Nr.) */
.calendar-grid.has-trailing-other-row:not(.calendar-grid-week) {
    /* Wochentage + 5 volle Wochen + 1 flache trailing-Zeile */
    grid-template-rows: auto repeat(5, 112px) 28px;
    grid-auto-rows: 112px;
}

.calendar-grid.has-trailing-other-row:not(.calendar-grid-week) .calendar-day.other-month-compact {
    height: 28px;
    min-height: 28px;
    max-height: 28px;
    padding: 2px 4px;
    justify-content: center;
    border-radius: 0;
}
/* Flache trailing-Zeile: untere Ecken des Rasters */
.calendar-grid.has-trailing-other-row:not(.calendar-grid-week)
    .calendar-day.other-month-compact.cal-row-last.cal-col-first {
    border-bottom-left-radius: 12px;
}
.calendar-grid.has-trailing-other-row:not(.calendar-grid-week)
    .calendar-day.other-month-compact.cal-row-last.cal-col-last {
    border-bottom-right-radius: 12px;
}

.calendar-grid.has-trailing-other-row:not(.calendar-grid-week) .calendar-day.other-month-compact .calendar-day-num {
    font-size: 0.75rem;
    line-height: 1;
    text-align: center;
}

.calendar-grid.has-trailing-other-row:not(.calendar-grid-week) .calendar-day.other-month-compact .calendar-day-media {
    display: none;
}

.calendar-day:not(.other-month):not(.selected):not(.has-content) {
    background: var(--calendar-day-bg);
    color: var(--text);
    border-color: var(--border);
}

.calendar-day:not(.other-month):not(.selected):hover {
    background: var(--calendar-day-hover);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    z-index: 1;
}

.calendar-grid .calendar-day.other-month, .calendar-grid .calendar-day.other-month:hover, .calendar-grid .calendar-day.other-month.today, .calendar-grid .calendar-day.other-month.selected, .calendar-grid .calendar-day.other-month.has-content {
    background: var(--bg);
    /* Im verbundenen Raster Rahmen behalten (sonst Loecher im Grid) */
    border-color: var(--border);
    color: var(--text-muted);
    cursor: default;
}

.calendar-day.has-content:not(.other-month):not(.selected) {
    background: var(--calendar-day-bg);
    border-color: var(--border);
}

.calendar-day.has-content:not(.other-month):not(.selected):hover {
    background: var(--calendar-day-hover);
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
}

/* Heute: dezentes Accent, kein knalliges gruen-Feld */
.calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment) {
    font-weight: 700;
    background: color-mix(in srgb, var(--accent) 16%, var(--calendar-day-bg)) !important;
    border-color: color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--text);
}

.calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment):hover {
    background: color-mix(in srgb, var(--accent) 24%, var(--calendar-day-bg)) !important;
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
    color: var(--text);
}

[data-theme="light"] .calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment) {
    background: rgb(92 184 92 / 28%) !important;
    border-color: rgb(92 184 92 / 45%);
    color: var(--text);
}

[data-theme="light"] .calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment):hover {
    background: rgba(92, 184, 92, 0.34) !important;
}

.calendar-day.selected {
    background: var(--calendar-day-content-bg);
    color: var(--calendar-day-content-text);
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Letzter markierter Tag (vor einer nicht markierten Zelle): rechter Rahmen sichtbar */
.calendar-day.selected:has(+ .calendar-day:not(.selected)) {
    z-index: 2;
    border-right-color: color-mix(in srgb, var(--accent) 55%, transparent);
    box-shadow: 1px 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Dark: Auswahl weich, lesbar, kein grelles Feld */
[data-theme="dark"] .calendar-day.selected {
    background: color-mix(in srgb, var(--accent) 22%, #141414);
    color: var(--text);
    border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}

[data-theme="dark"] .calendar-day.selected:has(+ .calendar-day:not(.selected)) {
    border-right-color: color-mix(in srgb, var(--accent) 50%, transparent);
    box-shadow: 1px 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent);
}

[data-theme="dark"] .calendar-day.selected .calendar-day-num {
    background: var(--accent);
    color: #fff;
}

[data-theme="dark"] .calendar-day.has-content:not(.other-month):not(.selected) {
    background: color-mix(in srgb, var(--accent) 8%, var(--calendar-day-bg));
    border-color: color-mix(in srgb, var(--accent) 18%, var(--border));
}

[data-theme="dark"] .calendar-day.has-content:not(.other-month):not(.selected):hover {
    background: color-mix(in srgb, var(--accent) 14%, var(--calendar-day-bg));
    color: var(--text);
}

[data-theme="dark"] .calendar-weekday {
    background: var(--bg-elevated);
    color: var(--text-muted);
    border-color: var(--border);
}

.calendar-day-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 8px;
    line-height: 1;
    font-size: 0.8rem;
    font-weight: 700;
    align-self: flex-start;
    letter-spacing: -0.02em;
}

.calendar-day.today:not(.selected):not(.other-month):not(.has-overdue-appointment) .calendar-day-num {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 1px 4px rgba(92, 184, 92, 0.25);
}

.calendar-day.selected .calendar-day-num {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

[data-theme="light"] .calendar-day.selected .calendar-day-num {
        background: rgba(255, 255, 255, 0.7);
        color: #222222;
}
.calendar-day.has-appointment:not(.other-month):not(.selected):not(.has-overdue-appointment) {
    box-shadow: inset 0 0 0 0px --var(--border);
}

.calendar-day.has-overdue-appointment:not(.other-month):not(.selected) {
    box-shadow: none;
    border-color: rgba(231, 76, 60, 0.55);
    background: rgba(231, 76, 60, 0.28) !important;
    color: var(--text);
}

.calendar-day.has-overdue-appointment:not(.other-month):not(.selected):hover {
    background: rgba(231, 76, 60, 0.4) !important;
    border-color: rgba(231, 76, 60, 0.7);
    color: var(--text);
}

[data-theme="light"] .calendar-day.has-overdue-appointment:not(.other-month):not(.selected) {
    background: rgba(231, 76, 60, 0.16) !important;
    border-color: rgba(200, 60, 48, 0.45);
    color: var(--text);
}

[data-theme="light"] .calendar-day.has-overdue-appointment:not(.other-month):not(.selected):hover {
    background: rgba(231, 76, 60, 0.26) !important;
}

.calendar-day.has-overdue-appointment:not(.other-month):not(.selected) .calendar-day-num {
    background: #e74c3c;
    color: #fff;
}

.calendar-day-overdue-flag {
    position: absolute;
    top: 3px;
    right: 4px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #e74c3c;
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
    z-index: 2;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
}

.calendar-day.selected .calendar-day-overdue-flag {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

.calendar-day-media {
    --cal-chip: 30px;
    --cal-chip-radius: 9px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-top: 4px;
    min-height: 0;
    overflow: hidden;
}

.calendar-thumbs {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    overflow: hidden;
    flex-shrink: 0;
    pointer-events: none;
}

.calendar-thumb {
    width: var(--cal-chip);
    height: var(--cal-chip);
    border-radius: var(--cal-chip-radius);
    object-fit: cover;
    flex-shrink: 0;
    pointer-events: none;
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
    image-orientation: none;
    box-sizing: border-box;
}

.calendar-day:not(.has-content):not(.selected) .calendar-thumb {
    border-color: var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.calendar-day.has-content:not(.other-month):not(.selected) .calendar-thumb {
    border-color: rgba(255, 255, 255, 0.28);
}

.calendar-day.selected .calendar-thumb {
    border-color: rgba(255, 255, 255, 0.55);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.calendar-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cal-chip);
    height: var(--cal-chip);
    min-width: var(--cal-chip);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0;
    border-radius: var(--cal-chip-radius);
    background: rgba(0, 0, 0, 0.22);
    color: var(--text-secondary);
    line-height: 1;
    flex-shrink: 0;
    border: 1px solid transparent;
    box-sizing: border-box;
}

.calendar-day.has-content:not(.other-month):not(.selected) .calendar-more {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.calendar-day.selected .calendar-more {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.calendar-badges {
    display: flex;
    gap: 4px;
    flex-wrap: nowrap;
    align-items: center;
    overflow: visible;
    flex-shrink: 0;
    padding: 3px;
}

@media (max-width: 480px) {
.calendar-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    align-items: center;
    overflow: visible;
    flex-shrink: 0;
    padding: 3px 1px;
    /* flex-direction: column; */
}
}
.calendar-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cal-chip, 30px);
    height: var(--cal-chip, 30px);
    padding: 0;
    margin: 0;
    border: none;
    border-radius: var(--cal-chip-radius, 9px);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    flex-shrink: 0;
    color: inherit;
    cursor: default;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    overflow: visible;
}

.calendar-badge-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 1.05rem;
    line-height: 1;
    /* Emoji optisch zentrieren */
    transform: translateY(0.5px);
}

/* Kleine Anzahl an der Ecke Symbol bleibt sichtbar */
.calendar-badge-count {
    position: absolute;
    right: -3px;
    bottom: -3px;
    z-index: 2;
    min-width: 11px;
    height: 11px;
    padding: 0 2px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    font-size: 0.55rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 11px;
    text-align: center;
    box-sizing: border-box;
    pointer-events: none;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
}

.calendar-appointment-badge.is-overdue .calendar-badge-count {
    background: #c0392b;
}

.calendar-day.has-content:not(.other-month):not(.selected) .calendar-badge-count,
.calendar-day.selected .calendar-badge-count {
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4);
}

[data-theme="light"] .calendar-badge-count {
    background: #1a1a1a;
    color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
}

.calendar-journal-btn {
    cursor: pointer;
}

.calendar-journal-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 3px 10px rgba(92, 184, 92, 0.25);
    border-color: var(--accent);
    background: var(--accent-muted);
}

.calendar-appointment-badge {
    background: linear-gradient(145deg, rgba(92, 184, 92, 0.28), rgba(92, 184, 92, 0.12));
    border-color: rgba(92, 184, 92, 0.65);
    box-shadow: 0 2px 8px rgba(92, 184, 92, 0.2);
    overflow: visible;
}

.calendar-appointment-badge.is-open {
    border-color: var(--accent);
}

.calendar-appointment-badge.is-overdue {
    background: linear-gradient(145deg, rgba(231, 76, 60, 0.35), rgba(231, 76, 60, 0.15));
    border-color: #e74c3c;
    box-shadow: 0 2px 10px rgba(231, 76, 60, 0.3);
}

.calendar-appointment-dot {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
    border: 0px solid var(--bg-elevated);
    box-shadow: 0 0 0 1px rgba(92, 184, 92, 0);
}

.calendar-appointment-badge.is-overdue .calendar-appointment-dot {
    background: #e74c3c;
    border-color: var(--bg-elevated);
    box-shadow: 0 0 0 1px rgba(231, 76, 60, 0.5);
    animation: calendar-overdue-pulse 1.4s ease-in-out infinite;
}

@keyframes calendar-overdue-pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.calendar-stage-badge {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent);
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.15);
    opacity: 0.95;
}

.calendar-day:not(.has-content) .calendar-stage-badge {
    border-color: var(--border);
    background: var(--bg-card);
}

.calendar-day.has-content:not(.other-month):not(.selected) .calendar-badge {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.16);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

[data-theme="light"].calendar-day.has-content:not(.other-month):not(.selected) .calendar-appointment-badge {
    background: darkslategrey;
    border-color: var(--accent-hover);
}

.calendar-day.has-content:not(.other-month):not(.selected) .calendar-appointment-badge.is-overdue {
    background: linear-gradient(145deg, rgba(231, 76, 60, 0.45), rgba(231, 76, 60, 0.2));
    border-color: #ff6b5b;
}

[data-theme="light"].calendar-day.has-content:not(.other-month):not(.selected) .calendar-appointment-dot {
    border-color: var(--border));
}

.calendar-day.selected .calendar-badge {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.calendar-day.selected .calendar-appointment-badge {
    background: rgba(255, 255, 255, 0.28);
    border-color: #fff;
}

.calendar-day.selected .calendar-appointment-badge.is-overdue {
    background: rgba(231, 76, 60, 0.55);
    border-color: #ffb4ab;
}

.calendar-day.selected .calendar-appointment-dot {
    border-color: var(--accent);
}

.calendar-badge-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--cal-chip, 30px);
    height: var(--cal-chip, 30px);
    min-width: var(--cal-chip, 30px);
    font-size: 0.68rem;
    font-weight: 700;
    padding: 0;
    border-radius: var(--cal-chip-radius, 9px);
    background: var(--bg-hover);
    color: var(--text-secondary);
    border: 1px solid var(--border);
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

.calendar-day.has-content:not(.other-month):not(.selected) .calendar-badge-more {
    background: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.92);
    border-color: rgba(255, 255, 255, 0.18);
}

.calendar-day.selected .calendar-badge-more {
    background: rgba(255, 255, 255, 0.22);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
}

.calendar-day.selected .calendar-journal-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.calendar-events {
    margin-top: 20px;
}

.calendar-detail-section {
    margin-bottom: 16px;
}

.calendar-detail-section:last-child {
    margin-bottom: 0;
}

/* Tagesdetail: flache Termin/Phasen-Liste ohne Ueberschrift */
.calendar-detail-section .calendar-day-list.calendar-events,
.calendar-detail-section .calendar-day-list {
    margin-top: 0;
}

.calendar-day-events-section {
    margin-top: 0;
}

/* Pro Tag: Header (Wochentag + Datum) + gemeinsamer Hintergrund */
.calendar-day-panel {
    margin: 0 0 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-card);
}

.calendar-day-panel-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px 12px;
    padding: 14px 16px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    min-width: 0;
}

/* Mehrfachauswahl: Tag-Header als Summary (Zu-/Aufklappen) */
details.calendar-day-panel > summary.calendar-day-panel-head {
    list-style: none;
    cursor: pointer;
    user-select: none;
}

details.calendar-day-panel > summary.calendar-day-panel-head::-webkit-details-marker {
    display: none;
}

details.calendar-day-panel:not([open]) > summary.calendar-day-panel-head {
    border-bottom: none;
}

.calendar-day-panel-end {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-shrink: 0;
}

.calendar-day-panel-chevron {
    margin-left: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 0.18s ease;
}

.calendar-day-panel-chevron svg {
    width: 18px;
    height: 18px;
}

details.calendar-day-panel[open] > summary .calendar-day-panel-chevron {
    transform: rotate(180deg);
}

/* Badge vor Chevron platzieren */
details.calendar-day-panel .calendar-day-panel-badge {
    margin-left: 0;
}

.calendar-day-panel.is-today .calendar-day-panel-head {
    background: var(--bg-card);
}

.calendar-day-panel-weekday {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    text-transform: capitalize;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.calendar-day-panel-date {
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.2;
}

.calendar-day-panel-badge {
    margin-left: 0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-radius: 999px;
    padding: 3px 9px;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

.calendar-day-panel-body {
    padding: 14px 14px 16px;
    background: var(--bg-card);
}

.calendar-day-panel-empty {
    padding: 12px 4px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    text-align: center;
}

[data-theme="dark"] .calendar-day-panel {
    background: var(--bg-card);
    border-color: var(--border);
}

[data-theme="dark"] .calendar-day-panel-head,
[data-theme="dark"] .calendar-day-panel.is-today .calendar-day-panel-head,
[data-theme="dark"] .calendar-day-panel-body {
    background: var(--bg-card);
}

.calendar-events .event-icon, .journal-events .event-icon {
    font-size: 1.3rem;
    min-width: 1.3rem;
    width: 1.8rem;
    line-height: 1.2;
    display: flex;
    justify-content: center;
    flex-shrink: 0;
    align-items: baseline;
    /* margin-top: 1px; */
}

.calendar-events .event-title, .journal-events .event-title {
    font-size: 1rem;
}

.calendar-events .event-meta, .journal-events .event-meta {
    font-size: 0.8rem;
}

/* Journal/Kalender-Meta: Desktop in einer Zeile mit Trenner */
.journal-events .event-meta,
.calendar-events .event-meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0;
    margin-top: 2px;
    color: var(--text-secondary);
}

.event-meta-when,
.event-meta-rest {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
}

/* Desktop: Trenner zwischen Uhrzeit-Block und Name/Phase */
.journal-events .event-meta-when + .event-meta-rest::before,
.calendar-events .event-meta-when + .event-meta-rest::before {
    content: "\00b7";
    margin: 0 0.35em;
    font-weight: 600;
    color: #fff;
}

[data-theme="light"] .journal-events .event-meta-when + .event-meta-rest::before,
[data-theme="light"] .calendar-events .event-meta-when + .event-meta-rest::before {
    color: #000;
}

/* Handy: Datum/Uhrzeit eigene Zeile, Name Phase eigene Zeile */
@media (max-width: 767px) {
    .journal-events .event-meta,
    .calendar-events .event-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .journal-events .event-meta-when + .event-meta-rest::before,
    .calendar-events .event-meta-when + .event-meta-rest::before {
        content: none;
        margin: 0;
    }
}

.calendar-events .event-preview, .journal-events .event-preview {
    font-size: 0.8rem;
}

.calendar-events .event-item, .journal-events .event-item {
    padding: 14px;
    gap: 12px;
    align-items: flex-start;
}

.calendar-events .event-item-editable {
    display: grid;
    grid-template-columns: 2rem 1fr auto;
    align-items: start;
}

.calendar-events .event-item-editable .event-content {
    min-width: 0;
}

.journal-events .journal-measurements-preview {
    margin-top: 10px;
}

.journal-events .journal-entry-images {
    margin-top: 10px;
}

.event-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.event-edit-btn {
    flex-shrink: 0;
    color: var(--text-secondary);
}

.event-edit-btn svg {
    width: 16px;
    height: 16px;
}

.calendar-photo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

.calendar-photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.calendar-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.calendar-photo-item:hover img {
    transform: scale(1.05);
}

.event-item-clickable {
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.event-item-clickable:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.event-preview {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 4px;
    line-height: 1.5;
    padding-top: 5px;
}

.journal-action-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 6px;
    margin-top: 8px;
}

/* Aktion + Messwerte in einem gemeinsamen Chip-Fluss */
.journal-entry-chips {
    margin-top: 8px;
}

.journal-action-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--bg-hover);
    border: 1px solid transparent;
    min-width: 0;
    flex: 0 0 auto;
}

.event-item:hover .journal-action-chip,
.event-item-clickable:hover .journal-action-chip {
    background: var(--bg-elevated);
}

.journal-action-chip-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.journal-action-chip-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
    white-space: nowrap;
}

.calendar-events .journal-action-chip-value, .journal-events .journal-action-chip-value {
    font-size: 0.95rem;
}

/* Handy: etwas engerer Chip-Abstand, Schrift nahe Desktop ohne Strecken */
@media (max-width: 767px) {
    .journal-events .journal-action-chips,
    .journal-events .journal-entry-chips {
        gap: 5px;
        margin-top: 6px;
    }

    .journal-events .journal-action-chip {
        padding: 5px 8px;
        border-radius: 7px;
        gap: 1px;
        flex: 0 0 auto;
    }

    .journal-events .journal-action-chip-label {
        font-size: 0.66rem;
        letter-spacing: 0.01em;
    }

    .journal-events .journal-action-chip-value,
    .calendar-events .journal-action-chip-value {
        font-size: 0.9rem;
    }

    /* Eintraege ohne Chips/Vorschau/Medien: engerer Abstand zur Trennlinie */
    .journal-events .event-item:not(:has(.journal-entry-chips)):not(:has(.journal-action-chips)):not(:has(.event-preview)):not(:has(.journal-entry-images)) {
        padding-bottom: 12px;
    }
}

.journal-action-detail {
    margin-top: 4px;
}

.journal-action-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-card);
}

.journal-action-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.journal-action-detail-row:last-child {
    border-bottom: none;
}

.journal-action-detail-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.journal-action-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    text-align: right;
}

.event-item {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    margin-bottom: 8px;
    background: var(--bg-card);
}

/* Desktop: Listen als zusammenhaengende Gruppe - erster Eintrag: Radius oben - mittlere: direkt dran - letzter: Radius unten + unterer Border */
@media (min-width: 768px) {
    .journal-list.journal-events,
    .calendar-events,
    .calendar-task-list,
    .calendar-day-list,
    .open-tasks-list,
    .open-tasks-list-in-fold,
    .open-tasks-group-list,
    .nutrient-history-list,
    .nutrient-plan-list,
    .env-log-list,
    .equip-inventory-grid.cols-1,
    .seed-grid.cols-1,
    .nutrient-product-grid.cols-1 {
        gap: 0;
    }

    /* Produkte: 1-Spalten-Liste (wie Samen) */
    .nutrient-product-grid.cols-1 {
        grid-template-columns: 1fr;
    }

    /* Produkte: 3-Spalten-Raster */
    .nutrient-product-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }

    /* Samen: Spaltenwahl 1 / 3 */
    .seed-grid.cols-1 {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .seed-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 15px;
    }

    .journal-list.journal-events .event-item,
    .calendar-events .event-item,
    .calendar-task-list .event-item,
    .calendar-day-list .event-item,
    .open-tasks-list .open-task-card,
    .open-tasks-list-in-fold .open-task-card,
    .open-tasks-group-list .open-task-card,
    .nutrient-history-card,
    .nutrient-plan-card,
    .env-log-row,
    .equip-inventory-grid.cols-1 .equip-mini-card,
    .seed-grid.cols-1 .seed-card,
    .nutrient-product-grid.cols-1 .nutrient-product-card {
        margin-bottom: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        box-shadow: none;
    }

    .nutrient-product-grid.cols-3 .nutrient-product-card {
        margin-bottom: 0;
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        box-shadow: none;
    }

    .journal-list.journal-events .event-item:first-child,
    .calendar-events .event-item:first-child,
    .calendar-task-list .event-item:first-child,
    .calendar-day-list .event-item:first-child,
    .open-tasks-list-in-fold .open-task-card:first-child,
    .open-tasks-group-list .open-task-card:first-child,
    .nutrient-history-list .nutrient-history-card:first-child,
    .nutrient-plan-list .nutrient-plan-card:first-child,
    .env-log-list .env-log-row:first-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:first-child,
    .seed-grid.cols-1 .seed-card:first-child,
    .nutrient-product-grid.cols-1 .nutrient-product-card:first-child {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    /* Termine mit Header: erste Karte ohne oberen Radius */
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:first-child,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:first-child .open-tasks-group-list > .open-task-card:first-child,
    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:first-child {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    /* Kalender open-rest: event-items mit gruenem Connected-Frame (Desktop) */
    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item {
        border-left-width: var(--open-tasks-side-border, 1.5px);
        border-right-width: var(--open-tasks-side-border, 1.5px);
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:last-child {
        border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:hover {
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:last-child:hover {
        border-bottom-color: var(--open-tasks-frame, var(--accent));
    }

    /* Day-fold: erster Eintrag ohne oberen Radius (Header-Verbindung) */
    .calendar-day-fold[open] .calendar-day-list > .event-item:first-child,
    .calendar-day-fold[open] .calendar-events > .event-item:first-child,
    .calendar-day-fold[open] .journal-list > .event-item:first-child {
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        border-top: none;
    }

    .journal-list.journal-events .event-item:last-child,
    .calendar-events .event-item:last-child,
    .calendar-task-list .event-item:last-child,
    .calendar-day-list .event-item:last-child,
    .open-tasks-list .open-task-card:last-child,
    .open-tasks-list-in-fold .open-task-card:last-child,
    .open-tasks-group-list .open-task-card:last-child,
    .nutrient-history-list .nutrient-history-card:last-child,
    .nutrient-plan-list .nutrient-plan-card:last-child,
    .env-log-list .env-log-row:last-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:last-child,
    .seed-grid.cols-1 .seed-card:last-child,
    .nutrient-product-grid.cols-1 .nutrient-product-card:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .journal-list.journal-events .event-item:only-child,
    .calendar-events .event-item:only-child,
    .calendar-task-list .event-item:only-child,
    .calendar-day-list .event-item:only-child,
    .open-tasks-list .open-task-card:only-child,
    .open-tasks-list-in-fold .open-task-card:only-child,
    .open-tasks-group-list .open-task-card:only-child,
    .nutrient-history-list .nutrient-history-card:only-child,
    .nutrient-plan-list .nutrient-plan-card:only-child,
    .env-log-list .env-log-row:only-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:only-child,
    .seed-grid.cols-1 .seed-card:only-child,
    .nutrient-product-grid.cols-1 .nutrient-product-card:only-child {
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    /* Hover: Seitenraender bleiben, Hintergrund hervorheben */
    .journal-list.journal-events .event-item:hover,
    .calendar-events .event-item:hover,
    .calendar-task-list .event-item:hover,
    .calendar-day-list .event-item:hover,
    .open-tasks-list .open-task-card:hover,
    .open-tasks-list-in-fold .open-task-card:hover,
    .nutrient-history-card:hover,
    .nutrient-history-card:focus-visible,
    .nutrient-plan-card:hover,
    .env-log-row:hover,
    .equip-inventory-grid.cols-1 .equip-mini-card:hover,
    .seed-grid.cols-1 .seed-card:hover,
    .seed-grid.cols-1 .seed-card:focus-visible,
    .nutrient-product-grid.cols-1 .nutrient-product-card:hover {
        border-color: var(--border);
        border-bottom-color: transparent;
        background: var(--bg-hover);
        z-index: 1;
    }

    .journal-list.journal-events .event-item:last-child:hover,
    .calendar-events .event-item:last-child:hover,
    .calendar-task-list .event-item:last-child:hover,
    .calendar-day-list .event-item:last-child:hover,
    .open-tasks-list .open-task-card:last-child:hover,
    .open-tasks-list-in-fold .open-task-card:last-child:hover,
    .nutrient-history-list .nutrient-history-card:last-child:hover,
    .nutrient-plan-list .nutrient-plan-card:last-child:hover,
    .env-log-list .env-log-row:last-child:hover,
    .equip-inventory-grid.cols-1 .equip-mini-card:last-child:hover,
    .seed-grid.cols-1 .seed-card:last-child:hover,
    .nutrient-product-grid.cols-1 .nutrient-product-card:last-child:hover {
        border-bottom-color: var(--border);
    }

    /* 3-Spalten-Samen / Produkte: klassische Kacheln */
    .seed-grid.cols-3 .seed-card,
    .nutrient-product-grid.cols-3 .nutrient-product-card {
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        margin-bottom: 0;
    }

    .seed-grid.cols-3 .seed-card:hover,
    .seed-grid.cols-3 .seed-card:focus-visible {
        border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    }

    /* Offene Termine: einheitlicher Rahmen (Farbe + Staerke) */
    .open-tasks-list .open-task-card,
    .open-tasks-list-in-fold .open-task-card,
    .open-tasks-group-list .open-task-card {
        border-left-width: var(--open-tasks-side-border, 1.5px);
        border-right-width: var(--open-tasks-side-border, 1.5px);
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
    }

    .open-tasks-list .open-task-card:hover,
    .open-tasks-list-in-fold .open-task-card:hover,
    .open-tasks-group-list .open-task-card:hover {
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
    }

    .open-tasks-list .open-task-card.is-overdue,
    .open-tasks-list-in-fold .open-task-card.is-overdue,
    .open-tasks-group-list .open-task-card.is-overdue,
    .open-tasks-list .open-task-card.is-overdue:hover,
    .open-tasks-list-in-fold .open-task-card.is-overdue:hover,
    .open-tasks-group-list .open-task-card.is-overdue:hover {
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
    }

    /* Letzter Termin-Eintrag: unterer Rand gleiche Farbe/Staerke */
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:last-child,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:last-child .open-tasks-group-list > .open-task-card:last-child,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-group-list .open-task-card:last-child {
        border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
    }

    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:last-child:hover,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:last-child .open-tasks-group-list > .open-task-card:last-child:hover,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-group-list .open-task-card:last-child:hover {
        border-bottom-color: var(--open-tasks-frame, var(--accent));
    }
}

.event-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--accent);
    white-space: nowrap;
    min-width: 70px;
}

.event-content {
    flex: 1;
}

.event-title {
    font-weight: 500;
    font-size: 0.9rem;
}

.event-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

/* Journal */
.journal-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    justify-content: center;
}

/* Duenger-Verlauf: gleiche Chips wie Journal/Giessen, nicht zentriert (sonst rutscht Alle nach links raus) */
.nutrient-history-filters {
    margin-bottom: 14px;
    justify-content: flex-start;
    overflow: visible;
    padding-bottom: 0;
}

/* Filter zuruecksetzen: dezent inaktiv, hell/sichtbar wenn Filter aktiv */
[data-journal-filter-reset],
[data-env-log-filter-reset] {
    opacity: 0.55;
    color: var(--text-secondary);
    transition: opacity 0.15s ease, color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.has-active-filters [data-journal-filter-reset],
.has-active-filters [data-env-log-filter-reset],
[data-journal-filter-reset].is-active,
[data-env-log-filter-reset].is-active {
    opacity: 1;
    color: var(--accent);
    font-weight: 650;
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
}

.has-active-filters [data-journal-filter-reset]:hover,
.has-active-filters [data-env-log-filter-reset]:hover,
[data-journal-filter-reset].is-active:hover,
[data-env-log-filter-reset].is-active:hover {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.journal-entry-filters-bar.has-active-filters .journal-filter-primary .form-input {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.journal-filter-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 12px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 55%, var(--bg-card));
}

.journal-entry-filters-bar.is-collapsed .journal-filter-body {
    display: none;
}

.journal-filter-body .env-log-filter-meta {
    margin-top: 0;
    padding-top: 2px;
}

/* Desktop: zwei Pulldowns nebeneinander */
.journal-filter-type-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
}

.journal-filter-type-row .form-select {
    width: 100%;
    min-width: 0;
}

/* Handy: Pulldowns untereinander */
@media (max-width: 767px) {
    .journal-entry-filters-bar {
        gap: 8px;
    }

    .journal-filter-primary {
        gap: 8px;
    }

    .journal-filter-pagesize-outside {
        min-width: 6.5rem;
        max-width: 9.5rem;
        font-size: 0.85rem;
        padding-left: 8px;
        padding-right: 8px;
    }

    .journal-filter-type-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* Handy: Listen-Eintraege nur mit Trennlinie, ohne Kachel-Rahmen */
@media (max-width: 640px) {
    #journalList.journal-events .event-item,
    [data-journal-list].journal-events .event-item,
    .calendar-events .event-item,
    .grow-detail-page .open-tasks-list-in-fold .open-task-card {
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 0;
        padding: 16px 2px 22px 2px;
        gap: 10px;
        background: var(--bg-card);
        box-shadow: none;
    }

    /* Pflanzen-Detail Journal: gleiche Item-Pads wie #journalList */
    .grow-detail-page .journal-events .event-item {
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 0;
        padding: 16px 2px 22px;
        gap: 10px;
        background: var(--bg-card);
        box-shadow: none;
    }

    .grow-detail-page .journal-events .event-item:not(:has(.journal-entry-chips)):not(:has(.journal-action-chips)):not(:has(.event-preview)):not(:has(.journal-entry-images)) {
        padding-bottom: 12px;
    }

    /* Kalender Fold: Header + erster Eintrag connected (keine Luecke, kein Radius) */
    .calendar-day-fold[open] .calendar-day-list > .event-item:first-child,
    .calendar-day-fold[open] .calendar-events > .event-item:first-child,
    .calendar-day-fold[open] .journal-list > .event-item:first-child {
        border-top: none;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
        padding-top: 12px;
    }

    /* Day-fold: keine Seitenrahmen an Eintraegen (aeusserer gruener Frame) */
    .calendar-day-fold[open] .calendar-events .event-item,
    .calendar-day-fold[open] .calendar-day-list .event-item,
    .calendar-day-fold[open] .journal-list .event-item {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    /* Kalender open-rest auf schmalen Screens: gruener Frame an event-items */
    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item {
        border: 1px solid var(--border);
        border-bottom: none;
        border-radius: 0;
        border-left-width: var(--open-tasks-side-border, 1.5px);
        border-right-width: var(--open-tasks-side-border, 1.5px);
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
        margin-bottom: 0;
        padding: 14px 12px;
        background: var(--bg-card);
        box-shadow: none;
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:first-child {
        border-top: none;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:last-child {
        border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    #journalList.journal-events .event-item:last-child,
    [data-journal-list].journal-events .event-item:last-child,
    .grow-detail-page .journal-events .event-item:last-child,
    .calendar-events .event-item:last-child,
    .grow-detail-page .open-tasks-list-in-fold .open-task-card:last-child {
        border-bottom: 0;
    }

    #journalList.journal-events,
    [data-journal-list].journal-events,
    .grow-detail-page .journal-events,
    .calendar-events,
    .grow-detail-page .open-tasks-list-in-fold {
        gap: 0;
    }

    .grow-detail-page .open-tasks-list-in-fold .open-task-card:hover,
    .calendar-events .event-item:hover {
        background: transparent;
        border-color: transparent;
        border-bottom-color: var(--border);
    }

    .grow-detail-page .open-tasks-list-in-fold .open-task-card.is-overdue {
        border-left: 0;
        border-bottom: 1px solid var(--border);
    }

    .grow-detail-page .open-tasks-list-in-fold .open-task-card.is-overdue:last-child {
        border-bottom: 0;
    }

    /* Folds: weniger Seitenabstand, breiterer Inhalt */
    .grow-detail-page [data-env-section^="grow-nutrient-history-"] .env-fold-body-inner,
    .grow-detail-page [data-env-section^="grow-open-tasks-"] .env-fold-body-inner,
    [data-env-section^="equip-"] .env-fold-body-inner {
        padding-left: 6px;
        padding-right: 6px;
    }

    /* Journal-Fold: kein Extra-Padding Liste wie Journal-Seite */
    .grow-detail-page [data-env-section^="grow-journal-"]:not([data-env-section*="charts"]) .env-fold-body-inner {
        padding: 0;
    }

    /* Geraete-Seite + Umgebung -> Geraete: connected list wie Desktop */
    .equip-inventory-grid,
    .equip-inventory-grid.cols-1,
    .equip-inventory-grid.is-minimal,
    .equip-inventory-grid.cols-1.is-minimal,
    .equip-inventory-grid.cols-1.is-full,
    .equip-inventory-grid.cols-1.is-normal,
    .equip-grid,
    .equip-grid.is-minimal {
        gap: 0;
    }

    .equip-mini-card,
    .no-equip-dnd .equip-mini-card,
    .equip-inventory-grid.cols-1 .equip-mini-card,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card,
    .equip-card,
    .equip-card.is-minimal {
        margin-bottom: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        /* gleiches Padding: kein optischer Extra-Abstand zwischen Eintraegen */
        padding: 12px;
        background: var(--bg-card);
        box-shadow: none;
    }

    .equip-mini-card:first-child,
    .no-equip-dnd .equip-mini-card:first-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:first-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:first-child,
    .equip-card:first-child,
    .equip-card.is-minimal:first-child {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    .equip-mini-card:last-child,
    .no-equip-dnd .equip-mini-card:last-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:last-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:last-child,
    .equip-card:last-child,
    .equip-card.is-minimal:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .equip-mini-card:only-child,
    .no-equip-dnd .equip-mini-card:only-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:only-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:only-child,
    .equip-card:only-child,
    .equip-card.is-minimal:only-child {
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    .equip-mini-card:hover,
    .equip-inventory-grid.cols-1 .equip-mini-card:hover,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:hover,
    .equip-card:hover {
        border-color: var(--border);
        border-bottom-color: transparent;
        background: var(--bg-hover);
        box-shadow: none;
        z-index: 1;
    }

    .equip-mini-card:last-child:hover,
    .equip-inventory-grid.cols-1 .equip-mini-card:last-child:hover,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:last-child:hover,
    .equip-card:last-child:hover {
        border-bottom-color: var(--border);
    }

    .equip-mini-card.is-unassigned {
        border-style: solid;
        background: var(--bg-card);
    }

    /* Produkte (1-Spalte) + Umgebungslog: Listen ohne Kachel-BG */
    .nutrient-product-grid.cols-1,
    .env-log-list {
        gap: 0;
        grid-template-columns: 1fr;
    }

    .nutrient-product-grid.cols-1 .nutrient-product-card,
    .env-log-row {
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 0;
        padding: 12px 2px;
        background: transparent;
        box-shadow: none;
    }

    .nutrient-product-grid.cols-1 .nutrient-product-card:last-child,
    .env-log-row:last-child {
        border-bottom: 0;
    }

    .nutrient-product-grid.cols-1 .nutrient-product-card:hover,
    .nutrient-product-grid.cols-1 .nutrient-product-card.is-low,
    .env-log-row:hover {
        border-color: transparent;
        border-bottom-color: var(--border);
        background: transparent;
        box-shadow: none;
    }

    .env-log-panel-body-inner {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.filter-chip {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: all var(--transition);
}

.filter-chip:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.filter-chip.active {
    background: var(--bg);
    border-color: var(--accent);
    color: var(--accent);
}

.journal-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.journal-measurements-preview {
    margin-top: 12px;
}

.measurement-set {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.measurement-set + .measurement-set {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--border);
}

.measurement-set-num {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* Messwerte im Journal: gleiche Chips wie Aktionsdaten (.journal-action-chip) */
.measurement-chips.journal-action-chips {
    margin-top: 0;
}

/* Fallback, falls measurement-chip noch woanders verwendet wird */
.measurement-chip {
    display: inline-flex;
    flex-direction: column;
    gap: 1px;
    padding: 6px 10px;
    border-radius: 8px;
    background: var(--accent-muted);
    border: 1px solid transparent;
    min-width: 0;
}

.measurement-chip-label {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--accent);
    text-transform: none;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

.measurement-chip-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.modal-copy-btn {
    flex-shrink: 0;
    white-space: nowrap;
}

.modal-delete-btn {
    color: #e57373;
    flex-shrink: 0;
}

.modal-delete-btn:hover {
    color: #ef5350;
    background: rgba(229, 115, 115, 0.12);
}

.journal-phase-hint {
    margin: -4px 0 14px;
    font-size: 0.85rem;
}

.journal-phase-hint strong {
    color: var(--accent);
}

.journal-future-hint {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: rgba(92, 184, 92, 0.12);
    border: 1px solid rgba(92, 184, 92, 0.35);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.45;
}

.journal-future-hint strong {
    color: var(--accent);
}

.journal-future-hint[hidden] {
    display: none !important;
}

.measurements-section {
    margin-bottom: 16px;
    padding-top: 0;
    border-top: 0px solid var(--border);
}

/* Messwert-Aktionen: grosse Buttons (Desktop + Handy) */
.measurements-section > #addMeasurementBtn,
.measurement-form-actions {
    width: 100%;
    margin-bottom: 10px;
}

.measurements-section > #addMeasurementBtn {
    display: flex;
}

.measurement-row {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    margin-bottom: 10px;
}

.measurement-form-actions {
    display: flex;
    justify-content: stretch;
    align-items: center;
    margin-top: 10px;
}

.measurement-form-actions #removeMeasurementBtn {
    margin-left: 0;
}

.measurements-section .measurement-action-btn,
.measurements-section #addMeasurementBtn,
.measurements-section #removeMeasurementBtn {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    margin-left: 0;
    padding: 14px 16px;
    min-height: 48px;
    font-size: 0.95rem;
    font-weight: 600;
    white-space: normal;
    background: var(--bg-elevated);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.measurements-section .measurement-action-btn:hover,
.measurements-section #addMeasurementBtn:hover,
.measurements-section #removeMeasurementBtn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.measurement-row-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.measurement-row-title {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Messwerte: 2 Spalten (Handy), ab Tablet 3 */
.measurement-fields {
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .measurement-fields {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Einheit im Feld + kurzer Placeholder (6,2 / 1,5) - lesbar in 2 Spalten */
.measurement-fields .nutrient-ec-field .form-input,
.measurement-fields .form-input.measurement-decimal {
    padding-right: 3.2rem;
    text-overflow: clip;
}

.measurement-fields .nutrient-ec-field:has([data-ec-unit-toggle]) .form-input,
.measurement-fields .nutrient-ec-field:has(.nutrient-ec-field-unit.is-toggle) .form-input {
    padding-right: 4.2rem;
}

.measurement-fields .nutrient-ec-field-unit,
.measurement-fields .nutrient-ec-field-unit.is-toggle,
.measurement-fields button.nutrient-ec-field-unit {
    max-width: 3.8rem;
    font-size: 0.72rem;
    right: 6px;
}

.measurement-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.measurement-detail-row:last-child {
    border-bottom: none;
}

.measurement-detail-row strong {
    color: var(--text);
    min-width: 28px;
}

#eventActionFields {
    margin-bottom: 8px;
}

.journal-entry-images {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    overflow-x: auto;
}

.journal-thumb {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
    flex-shrink: 0;
    cursor: pointer;
}

/* Gallery */
.gallery-filters {
    display: flex;
    gap: 8px;
    /* Abstand unter Topbar / Seitenkopf */
    /* margin-top: 10px; */
    margin-bottom: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 14px;
}

/* Desktop: links Diashow + Medientyp | Mitte Anzahl | rechts Raster + Seitengr. */
.gallery-toolbar-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    column-gap: 10px;
    width: 100%;
    min-width: 0;
}

.gallery-toolbar-left {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    min-width: 0;
    justify-self: start;
}

.gallery-toolbar-right {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    justify-self: end;
    flex-shrink: 0;
}

.gallery-page-size-wrap {
    display: flex;
    align-items: center;
    min-width: 0;
}

.gallery-count {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    line-height: 1.2;
    text-align: center;
    justify-self: center;
    min-width: 0;
}

/* Medientyp: ein Button, Klick wechselt Alle -> Bilder -> Videos */
.gallery-media-type-cycle {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 11rem;
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ein Button: Spaltenzahl, Klick wechselt 2 -> 3 -> 4 -> 5 */
.gallery-cols-cycle {
    min-width: 2.75rem;
    width: 2.75rem;
    min-height: 44px;
    padding: 8px 0;
    font-size: 1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Seitengr oe e rechts */
.gallery-page-size {
    width: auto;
    min-width: 6.5rem;
    min-height: 44px;
    padding: 8px 12px;
    font-size: 0.9rem;
    flex-shrink: 0;
}

/* Diashow: nur Icon, ganz links - etwas groesser */
#gallerySlideshowBtn.gallery-slideshow-btn,
.gallery-slideshow-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    gap: 0;
    flex-shrink: 0;
}

#gallerySlideshowBtn.gallery-slideshow-btn svg,
.gallery-slideshow-btn svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .gallery-filters {
        margin-top: 12px;
        margin-bottom: 14px;
        gap: 8px;
    }

    .gallery-toolbar-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 8px 8px;
    }

    .gallery-toolbar-left {
        gap: 8px;
    }

    .gallery-toolbar-right {
        gap: 8px;
        margin-left: auto;
    }

    .gallery-count {
        order: 3;
        flex: 1 0 100%;
        width: 100%;
        text-align: center;
        font-size: 0.82rem;
        padding-top: 2px;
    }

    .gallery-media-type-cycle {
        max-width: 8.5rem;
        min-height: 42px;
        font-size: 0.82rem;
        padding: 8px 12px;
    }

    .gallery-cols-cycle {
        min-width: 2.6rem;
        width: 2.6rem;
        min-height: 42px;
        font-size: 0.95rem;
    }

    .gallery-page-size {
        min-width: 5.8rem;
        min-height: 42px;
        padding: 8px 10px;
        font-size: 0.85rem;
    }

    #gallerySlideshowBtn.gallery-slideshow-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    #gallerySlideshowBtn.gallery-slideshow-btn svg {
        width: 24px;
        height: 24px;
    }
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

/* Handy: engerer Abstand zwischen den Bildern */
@media (max-width: 767px) {
    .gallery-grid {
        gap: 3px;
    }
}

html.capacitor-native .gallery-grid {
    gap: 3px;
}

.gallery-grid.cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.gallery-grid.cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.gallery-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gallery-grid.cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.gallery-grid.cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.gallery-grid.cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Sehr schmale Screens: 6 Spalten als 5 anzeigen */
@media (max-width: 767px) {
    .gallery-grid.cols-6 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

.gallery-pager {
    margin-top: 16px;
    margin-bottom: 4px;
}

.gallery-footer-actions, .page-footer-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 0px solid var(--border);
    display: flex;
    justify-content: right;
}

/* Lightbox Diashow-Button aktiv: Akzent-Hintergrund (ueber .lightbox-tool-btn !important) */
#lightboxSlideshowBtn.is-active,
.lightbox.is-slideshow #lightboxSlideshowBtn,
.lightbox-tools-left #lightboxSlideshowBtn.is-active,
[data-theme="light"] #lightboxSlideshowBtn.is-active,
[data-theme="light"] .lightbox.is-slideshow #lightboxSlideshowBtn {
    color: #fff !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent),
      0 2px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}

#lightboxSlideshowBtn.is-active:hover:not(:disabled),
.lightbox.is-slideshow #lightboxSlideshowBtn:hover:not(:disabled),
[data-theme="light"] #lightboxSlideshowBtn.is-active:hover:not(:disabled) {
    color: #fff !important;
    background: var(--accent-hover, var(--accent)) !important;
    border-color: var(--accent-hover, var(--accent)) !important;
}

.gallery-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-card);
    border: 1px solid var(--border);
}

.gallery-item > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition);
}

.gallery-item:hover > img {
    transform: scale(1.05);
}

.gallery-item.is-video > img, .gallery-item.is-video .gallery-slideshow img, .calendar-photo-item.is-video img {
    filter: brightness(0.92);
}

/* Video-Thumb-Slideshow (mehrere Frames, Fade) */
.gallery-slideshow {
    position: absolute;
    inset: 0;
    background: var(--bg-card);
}

.gallery-slideshow img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
}

.gallery-slideshow img.is-active {
    opacity: 1;
    z-index: 0;
}

.gallery-item.has-slideshow:hover .gallery-slideshow img.is-active {
    transform: scale(1.05);
    transition: opacity 0.55s ease, transform var(--transition);
}

@media (prefers-reduced-motion: reduce) {
    .gallery-slideshow img {
        transition: none;
    }

    .gallery-slideshow img:not(.is-active) {
        display: none;
    }
}

.gallery-video-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.gallery-video-badge svg {
    width: 20px;
    height: 20px;
    margin-left: 2px;
}

.gallery-item-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
    padding: 8px 36px 8px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    font-size: 0.7rem;
    color: #fff;
    line-height: 1.3;
}

/* Handy + Raster 4/5: MB und Datum ausblenden (Platz) */
@media (max-width: 767px) {
    .gallery-grid.cols-4 .gallery-overlay-size,
    .gallery-grid.cols-4 .gallery-overlay-date,
    .gallery-grid.cols-5 .gallery-overlay-size,
    .gallery-grid.cols-5 .gallery-overlay-date {
        display: none;
    }
}

.gallery-item-edit {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.gallery-item-edit:hover {
    background: rgba(0, 0, 0, 0.7) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
}

/* Light-Mode: kein helles Theme-Border von .btn-ghost */
[data-theme="light"] .gallery-item-edit {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

[data-theme="light"] .gallery-item-edit:hover {
    background: rgba(0, 0, 0, 0.75) !important;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.gallery-item-edit svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* Handy: Edit in der Galerie-Uebersicht aus - Bearbeiten/Loeschen in der Lightbox */
@media (max-width: 767px) {
    .gallery-item-edit {
        display: none !important;
    }
}

.upload-zone {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 32px;
    text-align: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
    margin-bottom: 20px;
}

.upload-zone[hidden] {
    display: none !important;
}

#galleryUploadToggleBtn svg {
    flex-shrink: 0;
}

.upload-zone:hover, .upload-zone.dragover {
    border-color: var(--accent);
    background: var(--accent-muted);
}

/* Galerie: ganze Seite + Topbar als Drop-Ziel */
.gallery-page {
    position: relative;
    min-height: 40vh;
}

.gallery-page.is-drop-active {
    outline: 2px dashed var(--accent);
    outline-offset: 4px;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent-muted) 55%, transparent);
}

.gallery-page-drop-overlay {
    position: absolute;
    inset: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    color: var(--accent);
    font-weight: 700;
    font-size: 1.05rem;
    text-align: center;
    padding: 24px;
}

.gallery-page-drop-overlay[hidden] {
    display: none !important;
}

.gallery-upload-hint {
    margin: 0 0 12px;
}

.topbar.is-gallery-drop-target,
.topbar-actions.is-gallery-drop-target {
    box-shadow: inset 0 0 0 2px var(--accent);
    background: color-mix(in srgb, var(--accent-muted) 40%, var(--bg-card));
}

body.gallery-dnd-active {
    cursor: copy;
}

.upload-zone-icon {
    font-size: 2rem;
    margin-bottom: 8px;
}

.upload-zone p {
    font-size: 0.9rem;
}

.upload-zone small {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.upload-zone-limits {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin-top: 6px;
}

.upload-zone-premium-btn {
    flex-shrink: 0;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 200;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
}

.modal-overlay[hidden] {
    display: none;
}

.modal {
    background: var(--bg-elevated);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    width: 100%;
    max-width: 560px;
    max-height: 90dvh;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.25s ease;
}

/* Handy: lange Formulare full-height; kurze Dialoge (fullMobile:false) als Sheet */
@media (max-width: 767px) {
    .modal-overlay.modal-overlay-full-mobile {
        align-items: stretch;
        justify-content: stretch;
        padding: 0;
    }

    .modal.modal-full-mobile {
        width: 100%;
        max-width: none;
        height: 100dvh;
        max-height: 100dvh;
        min-height: 100dvh;
        border-radius: 0;
        padding-top: var(--safe-top);
        padding-bottom: var(--safe-bottom);
        animation: none;
        box-sizing: border-box;
    }

    .modal.modal-full-mobile .modal-header {
        /* Innenabstand Header; Safe-Top steckt am Modal-Shell */
        padding-top: 16px;
    }

    .modal.modal-full-mobile .modal-footer {
        padding-bottom: max(16px, var(--safe-bottom));
    }

    .modal.modal-full-mobile .modal-body {
        flex: 1 1 auto;
        min-height: 0;
    }

    /* Account/Einstellungen: volle Breite auf Handy */
    .modal.modal-full-mobile.modal-account {
        max-width: none;
    }

    /* Kurze Dialoge: hoehe nach Inhalt, von unten als Sheet */
    .modal-overlay:not(.modal-overlay-full-mobile) {
        align-items: flex-end;
        justify-content: center;
        padding: 0;
    }

    .modal:not(.modal-full-mobile) {
        width: 100%;
        max-width: none;
        height: auto;
        min-height: 0;
        max-height: min(90dvh, 100svh);
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        padding-bottom: var(--safe-bottom);
        box-sizing: border-box;
        animation: slideUp 0.25s ease;
    }

    .modal:not(.modal-full-mobile) .modal-body {
        flex: 0 1 auto;
        min-height: 0;
        max-height: min(70dvh, 100svh);
        overflow-y: auto;
    }

    .modal:not(.modal-full-mobile) .modal-footer {
        padding-bottom: max(14px, var(--safe-bottom));
    }
}

[data-theme="light"] .modal {
    background: #ffffff;
}

.modal.modal-wide {
    max-width: min(960px, 100%);
}

.modal.modal-account {
    max-width: min(700px, 100%);
}

.modal.modal-account .modal-footer:empty,
.modal.modal-account .modal-footer[hidden] {
    display: none;
    padding: 0;
    border: 0;
}

.modal.modal-account .modal-body {
    /* unten Platz zum Scrollen + System-Nav (Account l oeschen) */
    padding-bottom: max(28px, calc(20px + var(--safe-bottom)));
}

.modal.modal-account .account-page {
    max-width: none;
    width: 100%;
    margin: 0;
}

/* Handy: Einstellungen/Profil - Cards n aeher am Bildschirmrand */
@media (max-width: 767px) {
    .modal.modal-account {
        max-width: 100%;
    }

    .modal.modal-account .modal-body {
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: max(36px, calc(24px + var(--safe-bottom)));
    }

    .modal.modal-account .account-page {
        gap: 12px;
    }

    .modal.modal-account .account-page .account-card {
        /* letzte Karte: extra Scroll-Luft ueber Home-Indicator */
        max-width: none;
    }

    .modal.modal-account .account-page .account-card:last-child {
        margin-bottom: 8px;
    }
}

/* Native App: noch etwas enger am Rand, mehr Safe-Area unten */
html.capacitor-native .modal.modal-account .modal-body {
    padding-left: max(8px, var(--safe-left));
    padding-right: max(8px, var(--safe-right));
    padding-bottom: max(40px, calc(28px + var(--safe-bottom)));
}

html.capacitor-native .modal.modal-account .account-page .account-card:last-child {
    margin-bottom: 12px;
}

.modal.modal-chart-detail {
    max-height: 96dvh;
}

.modal.modal-chart-detail .modal-header {
    padding: 10px 16px;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(10px, var(--safe-right));
    min-height: 0;
}

.modal.modal-chart-detail .modal-title {
    font-size: 1rem;
}

.modal.modal-chart-detail .modal-body {
    padding: 10px 16px 10px;
}

.modal.modal-chart-detail .modal-footer {
    padding: 10px 16px;
    padding-left: max(16px, var(--safe-left));
    padding-right: max(16px, var(--safe-right));
    padding-bottom: 10px;
    min-height: 0;
    gap: 6px;
    border-top: none;
}

html.capacitor-native .modal.modal-chart-detail .modal-footer,
html.capacitor-native .modal.modal-full-mobile.modal-chart-detail .modal-footer,
.modal.modal-full-mobile.modal-chart-detail .modal-footer {
    padding-top: 10px;
    padding-bottom: 10px;
    border-top: none;
}

.modal.modal-chart-detail .modal-footer .btn {
    padding: 5px 14px;
    font-size: 0.82rem;
    min-height: 0;
    line-height: 1.15;
}

/* Handy: Graph fuellt den Rest bis zum Schliessen-Button */
.modal.modal-full-mobile.modal-chart-detail {
    height: 100dvh;
    max-height: 100dvh;
}

.modal.modal-full-mobile.modal-chart-detail .modal-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    padding-bottom: 6px;
}

.modal.modal-full-mobile.modal-chart-detail .env-chart-detail {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-hero,
.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-stats,
.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-toolbar {
    flex: 0 0 auto;
}

.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-frame {
    flex: 1 1 auto;
    min-height: 140px;
    display: flex;
    flex-direction: column;
}

.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-plot {
    height: 100% !important;
}

.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-plot .env-chart-svg,
.modal.modal-full-mobile.modal-chart-detail .env-chart-detail-plot .env-chart-svg-detail {
    height: 100%;
    min-height: 0;
    max-height: none;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }

    to {
        transform: translateY(0);
    }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    padding-left: max(20px, var(--safe-left));
    padding-right: max(12px, var(--safe-right));
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    box-sizing: border-box;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    min-width: 0;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.modal-header-end {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

.modal-header-actions {
    display: flex;
    align-items: center;
}

.modal-header-actions[hidden] {
    display: none !important;
}

.nutrient-mode-cycle {
    background: var(--bg-hover);
    color: var(--text);
    border: 1px solid var(--border);
    min-width: 7.25rem;
}

.nutrient-mode-cycle:hover {
    background: var(--bg-elevated);
    color: var(--text);
    border-color: var(--border);
}

.modal-header-actions .nutrient-mode-cycle {
    min-height: 36px;
    padding: 7px 12px;
    font-size: 0.8rem;
}

/* Darkmode Dialoge: reines Wei abd aempfen (Ueberschriften, Selects, Produktnamen, Icons) */
[data-theme="dark"] .modal .modal-title,
[data-theme="dark"] .modal .section-title,
[data-theme="dark"] .modal .nutrient-dose-list-head .section-title,
[data-theme="dark"] .modal .nutrient-metrics-summary,
[data-theme="dark"] .modal .nutrient-metrics-heading,
[data-theme="dark"] .modal .nutrient-notes-summary,
[data-theme="dark"] .modal .nutrient-drain-heading,
[data-theme="dark"] .modal .nutrient-split-hint-label,
[data-theme="dark"] .modal .nutrient-split-plant-name,
[data-theme="dark"] .modal .nutrient-product-name,
[data-theme="dark"] .modal .nutrient-dose-info strong,
[data-theme="dark"] .modal .event-grow-check,
[data-theme="dark"] .modal .event-grow-all,
[data-theme="dark"] .modal .nutrient-grow-multi .event-grow-check {
    color: var(--text);
}

[data-theme="dark"] .modal .form-select,
[data-theme="dark"] .modal .form-select option,
[data-theme="dark"] .modal .form-select optgroup {
    color: var(--text);
}

[data-theme="dark"] .modal .form-select:has(> option[value=""]:checked) {
    color: var(--placeholder);
}

[data-theme="dark"] .modal .modal-close,
[data-theme="dark"] .modal .modal-close svg {
    color: var(--text-secondary);
}

.modal-close {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius);
    color: var(--text-secondary);
    flex-shrink: 0;
}

.modal-close:hover {
    background: var(--bg-hover);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    flex: 1;
    /* Sch */
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--text-muted) 55%, transparent) transparent;
}

/* Sch */
.modal-body::-webkit-scrollbar {
    width: 8px;
}

.modal-body::-webkit-scrollbar-track {
    background: transparent;
    margin: 6px 0;
}

.modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--text-muted) 45%, transparent);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--text-secondary) 65%, transparent);
    background-clip: padding-box;
}

[data-theme="light"] .modal-body {
    scrollbar-color: color-mix(in srgb, #666 40%, transparent) transparent;
}

[data-theme="light"] .modal-body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, #666 35%, transparent);
    background-clip: padding-box;
}

[data-theme="light"] .modal-body::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, #444 50%, transparent);
    background-clip: padding-box;
}

.modal-footer {
    padding: 16px 20px;
    /* Buttons nicht unter System-Navigation verstecken */
    padding-bottom: max(16px, calc(12px + var(--safe-bottom)));
    padding-left: max(20px, var(--safe-left));
    padding-right: max(20px, var(--safe-right));
    border-top: 1px solid var(--border);
    display: flex;
    gap: 8px;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
    box-sizing: border-box;
}

.modal-footer-actions {
    display: flex;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.92);
    z-index: 300;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    padding: 0;
    overflow: hidden;
}

.lightbox[hidden] {
    display: none;
}

.lightbox.is-zoomed .lightbox-band,
.lightbox.is-zoomed .lightbox-footer {
    opacity: 0;
    pointer-events: none;
    /* Footer darf die Zoom-Flaeche nicht mehr in der hoehe blockieren */
    height: 0;
    min-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    margin: 0;
    overflow: hidden;
    flex: 0 0 0;
}

.lightbox.is-zoomed .lightbox-stage {
    padding-bottom: 0;
}

/* Gemeinsame Top-Leiste: X / Download / Edit / Zoom - immer ueber dem Bild */
.lightbox-close,
.lightbox-tools-left,
.lightbox-zoom-bar,
.lightbox-video-bar {
    --lightbox-top-inset: 16px;
    --lightbox-top-ctrl: 44px;
    /* Diashow: echte Bild-zu-Bild-Crossfade-Ueberblendung */
    z-index: 40;
}

.lightbox-close {
    position: absolute;
    top: var(--lightbox-top-inset, 16px);
    right: 16px;
    width: var(--lightbox-top-ctrl, 44px);
    height: var(--lightbox-top-ctrl, 44px);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: var(--radius);
    z-index: 42;
    box-sizing: border-box;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.1);
}

.lightbox-close svg {
    width: 24px;
    height: 24px;
}

/* Galerie: vorheriges / naechstes Medium */
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 4;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition), opacity var(--transition);
    -webkit-tap-highlight-color: transparent;
}

.lightbox-nav:hover,
.lightbox-nav:focus-visible {
    background: rgba(0, 0, 0, 0.55);
    border-color: rgba(255, 255, 255, 0.35);
    outline: none;
}

.lightbox-nav[hidden] {
    display: none !important;
}

.lightbox-nav svg {
    width: 22px;
    height: 22px;
}

.lightbox-nav-prev {
    left: max(10px, env(safe-area-inset-left, 0px));
}

.lightbox-nav-next {
    right: max(10px, env(safe-area-inset-right, 0px));
}

.lightbox.is-zoomed .lightbox-nav {
    opacity: 0.35;
}

@media (max-width: 767px) {
    .lightbox-nav {
        width: 42px;
        height: 42px;
        /* Auf dem Handy eher dezent; Swipe ist primaer */
        opacity: 0.75;
    }
}

/* Untere Infoleiste: Mute/Volume | Zaehler | Meta | Hilfetext */
.lightbox-footer {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    padding: 8px 14px max(12px, env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    z-index: 4;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

/* YouTube-Layout: Zeile 1 = Fortschritt, Zeile 2 = Controls */
.lightbox-seek-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: min(100%, 860px);
    max-width: 100%;
    margin: 0;
    padding: 0 4px;
    pointer-events: auto;
    z-index: 6;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.lightbox-seek-row[hidden] {
    display: none !important;
}

.lightbox-seek-track {
    position: relative;
    width: 100%;
    height: 20px;
    display: flex;
    align-items: center;
    cursor: pointer;
    touch-action: none;
    outline: none;
}

.lightbox-seek-track:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}

.lightbox-seek-rail,
.lightbox-seek-buffered,
.lightbox-seek-progress {
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 999px;
    pointer-events: none;
    transition: height 0.12s ease;
}

.lightbox-seek-rail {
    width: 100%;
    background: rgba(255, 255, 255, 0.28);
}

.lightbox-seek-buffered {
    width: 0%;
    background: rgba(255, 255, 255, 0.45);
}

.lightbox-seek-progress {
    /* width 100% + scaleX: GPU-freundlicher, fluessiger Fortschritt */
    width: 100%;
    transform: scaleX(var(--seek-p, 0));
    transform-origin: left center;
    background: var(--accent);
    z-index: 1;
    will-change: transform;
}

.lightbox-seek-thumb {
    position: absolute;
    left: 0;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-left: -7px;
    margin-top: -7px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    transform: scale(0.6);
    /* left ohne Transition rAF steuert die Position fluessig */
    transition: opacity 0.12s ease, transform 0.12s ease;
}

/* Beim Ziehen: sofort ohne Rest-Interpolation */
.lightbox-seek-row.is-seeking .lightbox-seek-progress {
    will-change: auto;
}

/* Hover / Drag: dickere Leiste + sichtbarer Thumb (wie YouTube) */
.lightbox-seek-track:hover .lightbox-seek-rail,
.lightbox-seek-track:hover .lightbox-seek-buffered,
.lightbox-seek-track:hover .lightbox-seek-progress,
.lightbox-seek-row.is-seeking .lightbox-seek-rail,
.lightbox-seek-row.is-seeking .lightbox-seek-buffered,
.lightbox-seek-row.is-seeking .lightbox-seek-progress {
    height: 6px;
}

.lightbox-seek-track:hover .lightbox-seek-thumb,
.lightbox-seek-row.is-seeking .lightbox-seek-thumb,
.lightbox-seek-track:focus-visible .lightbox-seek-thumb {
    opacity: 1;
    transform: scale(1);
}

/* Handy: Thumb immer sichtbar (kein Hover) */
@media (max-width: 767px), (pointer: coarse) {
    .lightbox-seek-thumb {
        opacity: 1;
        transform: scale(1);
    }
    .lightbox-seek-rail,
    .lightbox-seek-buffered,
    .lightbox-seek-progress {
        height: 6px;
    }
    .lightbox-seek-track {
        height: 36px; /* groessere Touch-Flaeche */
    }
}

.lightbox-seek-times {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    margin-left: 6px;
    flex-shrink: 0;
    font-size: 0.78rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.2;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
    pointer-events: none;
    white-space: nowrap;
}

.lightbox-seek-times-sep {
    opacity: 0.55;
    font-weight: 500;
}

/*
* Video-Control-Zeile:
* Play/Pause Mute Volume Zeit | Fullscreen
*/
.lightbox-audio-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: min(100%, 860px);
    max-width: 100%;
    padding: 0 2px 2px;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    pointer-events: auto;
    touch-action: manipulation;
    z-index: 6;
    box-sizing: border-box;
}

.lightbox-audio-bar[hidden] {
    display: none !important;
}

.lightbox-controls-left {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.lightbox-controls-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 2px;
    flex-shrink: 0;
    margin-left: auto;
}

.lightbox-nav-counter {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    z-index: auto;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: #fff;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.12);
    pointer-events: none;
    user-select: none;
    line-height: 1.2;
}

.lightbox-nav-counter[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .lightbox-footer {
        gap: 6px;
        padding: 6px 12px max(10px, env(safe-area-inset-bottom, 0px));
    }

    .lightbox-nav-counter {
        font-size: 0.75rem;
    }
}

.lightbox-tools-left {
    position: absolute;
    top: var(--lightbox-top-inset, 16px);
    left: 16px;
    z-index: 41;
    display: flex;
    align-items: center;
    gap: 6px;
    height: var(--lightbox-top-ctrl, 44px);
    box-sizing: border-box;
}

.lightbox-tools-left .lightbox-tool-btn,
.lightbox-tools-left .btn-icon {
    width: var(--lightbox-top-ctrl, 44px);
    height: var(--lightbox-top-ctrl, 44px);
    min-width: var(--lightbox-top-ctrl, 44px);
    min-height: var(--lightbox-top-ctrl, 44px);
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Diashow-Intervall in der Lightbox */
.lightbox-slideshow-seconds {
    height: var(--lightbox-top-ctrl, 44px);
    min-height: var(--lightbox-top-ctrl, 44px);
    min-width: 3.6rem;
    padding: 0 8px;
    margin: 0;
    border-radius: var(--radius, 8px);
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 0.82rem;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    box-sizing: border-box;
    appearance: auto;
}

.lightbox-slideshow-seconds:hover:not(:disabled),
.lightbox-slideshow-seconds:focus-visible {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.28);
    outline: none;
}

.lightbox-slideshow-seconds:disabled {
    opacity: 0.35;
    cursor: default;
}

.lightbox-slideshow-seconds option {
    color: #111;
    background: #fff;
}

[data-theme="light"] .lightbox-slideshow-seconds {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    color: #fff !important;
}

[data-theme="light"] .lightbox-slideshow-seconds:hover:not(:disabled) {
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.lightbox-tools-left .lightbox-edit-btn {
    position: static;
    top: auto;
    left: auto;
}

/* .btn { display:inline-flex } ueberschreibt sonst das HTML-Attribut [hidden] */
#lightboxEditBtn[hidden],
#lightboxDownloadBtn[hidden],
#lightboxSlideshowBtn[hidden],
.lightbox-tools-left .lightbox-tool-btn[hidden],
.lightbox-tools-left .btn[hidden] {
    display: none !important;
}

/* Video: Wiederholen zentriert oben (allein, ohne Chip-Rahmen) */
.lightbox-video-bar {
    position: absolute;
    top: var(--lightbox-top-inset, 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 40;
    display: none;
    pointer-events: auto;
    height: var(--lightbox-top-ctrl, 44px);
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    box-shadow: none;
    max-width: calc(100vw - 24px);
}

.lightbox-video-bar[hidden] {
    display: none !important;
}

.lightbox.is-video .lightbox-video-bar:not([hidden]) {
    display: flex !important;
}

.lightbox-video-ctrl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #fff; /* nie Akzent/gruen */
    cursor: pointer;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-video-ctrl-btn:hover,
.lightbox-video-ctrl-btn:active,
.lightbox-video-ctrl-btn.is-playing,
.lightbox-video-ctrl-btn.is-muted {
    color: #fff;
    background: rgba(255, 255, 255, 0.12);
}

.lightbox-video-ctrl-btn:hover,
.lightbox-video-ctrl-btn:active {
    background: rgba(255, 255, 255, 0.12);
}

.lightbox-video-ctrl-btn.is-playing,
.lightbox-video-ctrl-btn.is-muted {
    background: transparent;
}

.lightbox-video-ctrl-btn svg {
    width: 22px;
    height: 22px;
    display: block;
    color: inherit;
    fill: currentColor;
}

/* Play/Pause: Icon-Wechsel per State-Klasse (zuverlaessiger als nur [hidden]) */
.lightbox-video-ctrl-btn .lightbox-play-icon {
    display: block;
}
.lightbox-video-ctrl-btn .lightbox-pause-icon {
    display: none;
}
.lightbox-video-ctrl-btn.is-playing .lightbox-play-icon {
    display: none !important;
}
.lightbox-video-ctrl-btn.is-playing .lightbox-pause-icon {
    display: block !important;
}

/* Mute/Unmute: Icon-Wechsel */
.lightbox-video-ctrl-btn .lightbox-mute-icon-on {
    display: block;
}
.lightbox-video-ctrl-btn .lightbox-mute-icon-off {
    display: none;
}
.lightbox-video-ctrl-btn.is-muted .lightbox-mute-icon-on {
    display: none !important;
}
.lightbox-video-ctrl-btn.is-muted .lightbox-mute-icon-off {
    display: block !important;
}

.lightbox-video-ctrl-btn svg[hidden] {
    display: none !important;
}

/* Fullscreen-Button: Icon-Wechsel */
.lightbox-video-ctrl-btn .lightbox-fs-icon-enter {
    display: block;
}
.lightbox-video-ctrl-btn .lightbox-fs-icon-exit {
    display: none;
}
.lightbox-video-ctrl-btn.is-fs .lightbox-fs-icon-enter {
    display: none !important;
}
.lightbox-video-ctrl-btn.is-fs .lightbox-fs-icon-exit {
    display: block !important;
}
.lightbox-video-ctrl-btn .lightbox-fs-icon-enter,
.lightbox-video-ctrl-btn .lightbox-fs-icon-exit {
    fill: none;
    stroke: currentColor;
}

.lightbox-volume-wrap {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    flex: 0 1 92px;
    width: 92px;
    max-width: 120px;
    padding: 0 4px;
    border: none;
    background: transparent;
    touch-action: none;
}

.lightbox-volume-slider {
    width: 100%;
    min-width: 56px;
    height: 36px;
    margin: 0;
    padding: 0;
    accent-color: var(--accent);
    cursor: pointer;
    touch-action: none;
    background: transparent;
    border: none;
    /* Groesserer Touch-Target auf Android */
    -webkit-appearance: none;
    appearance: none;
    /* Kein Fokus-Rahmen (Tastatur steuert Volume global, nicht den Range) */
    outline: none !important;
    box-shadow: none !important;
}

.lightbox-volume-slider:focus,
.lightbox-volume-slider:focus-visible,
.lightbox-volume-slider:active {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
}

.lightbox-volume-wrap:focus,
.lightbox-volume-wrap:focus-within {
    outline: none !important;
    box-shadow: none !important;
}

/* Desktop: Volume-Slider etwas breiter (wie YT) */
@media (hover: hover) and (pointer: fine) {
    .lightbox-volume-wrap {
        flex: 0 1 110px;
        width: 110px;
        max-width: 140px;
    }
}

.lightbox-volume-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.lightbox-volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -8px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.lightbox-volume-slider::-moz-range-track {
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.28);
}

.lightbox-volume-slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid #fff;
}

.lightbox-loop-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius, 8px);
    border: none;
    background: transparent;
    color: #fff;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: color 0.15s ease, background 0.15s ease;
    flex-shrink: 0;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.lightbox-loop-toggle:hover {
    background: rgba(255, 255, 255, 0.1);
}

.lightbox-loop-toggle svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.lightbox-loop-toggle.is-active {
    color: var(--accent);
    background: transparent;
}

.lightbox-loop-toggle.is-active:hover {
    background: rgba(255, 255, 255, 0.1);
    color: var(--accent);
}

/* Screenreader-only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 767px) {
    .lightbox-video-bar {
        /* unter der Tool-Zeile, zentriert allein */
        top: calc(var(--lightbox-top-inset, 12px) + var(--lightbox-top-ctrl, 40px) + 6px);
        z-index: 40;
    }

    .lightbox-seek-row,
    .lightbox-audio-bar {
        width: 100%;
        max-width: 100%;
    }

    .lightbox-seek-row {
        padding: 0 2px;
    }

    .lightbox-seek-track {
        height: 28px;
    }

    .lightbox-seek-times {
        font-size: 0.72rem;
        margin-left: 4px;
    }

    .lightbox-audio-bar {
        gap: 4px;
        padding: 0 0 2px;
    }

    .lightbox-controls-left {
        gap: 0;
        flex: 1 1 auto;
        min-width: 0;
    }

    /* Reihenfolge: Play Mute Volume Zeit | Fullscreen (DOM + explizit) */
    #lightboxPlayBtn {
        order: 1;
    }

    #lightboxMuteBtn {
        order: 2;
    }

    .lightbox-volume-wrap {
        order: 3;
        flex: 1 1 auto;
        width: auto;
        min-width: 72px;
        max-width: none;
        padding: 0 6px 0 2px;
    }

    .lightbox-seek-times {
        order: 4;
        margin-left: 4px;
        margin-right: 2px;
    }

    .lightbox-volume-slider {
        min-width: 0;
        width: 100%;
        height: 40px;
    }

    .lightbox-video-ctrl-btn {
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
    }
}

/* Landscape Handy: gleiche Control-Reihenfolge, Volume bleibt flexibel breit */
@media (orientation: landscape) and (max-height: 520px) {
    .lightbox-controls-left {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0;
    }

    #lightboxPlayBtn {
        order: 1;
    }

    #lightboxMuteBtn {
        order: 2;
    }

    .lightbox-volume-wrap {
        order: 3;
        flex: 1 1 auto;
        width: auto;
        min-width: 64px;
        max-width: none;
        padding: 0 6px 0 2px;
    }

    .lightbox-seek-times {
        order: 4;
        margin-left: 4px;
        margin-right: 2px;
        flex-shrink: 0;
    }

    .lightbox-controls-right {
        flex-shrink: 0;
        margin-left: 4px;
        margin-right: 0;
    }

    #lightboxFsBtn {
        flex-shrink: 0;
        pointer-events: auto;
        position: relative;
        z-index: 5;
    }

    /*
* Video-Footer: links/rechts Safe-Area + Mindest-Inset,
* sonst liegt FS halb unter der nativen Nav-Leiste.
*/
    .lightbox.is-video .lightbox-footer,
    .lightbox.is-video.is-video-fs .lightbox-footer,
    .lightbox.is-video:fullscreen .lightbox-footer,
    .lightbox.is-video:-webkit-full-screen .lightbox-footer {
        padding-left: max(12px, var(--safe-left));
        padding-right: max(48px, var(--safe-right));
        padding-bottom: max(8px, var(--safe-bottom));
        box-sizing: border-box;
    }

    .lightbox.is-video .lightbox-audio-bar,
    .lightbox.is-video .lightbox-seek-row {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    html.capacitor-native .lightbox.is-video .lightbox-footer,
    html.capacitor-native .lightbox.is-video.is-video-fs .lightbox-footer,
    html.capacitor-native .lightbox.is-video:fullscreen .lightbox-footer,
    html.capacitor-native .lightbox.is-video:-webkit-full-screen .lightbox-footer {
        padding-right: max(52px, var(--safe-right));
        padding-left: max(16px, var(--safe-left));
    }
}

.lightbox-zoom-bar {
    position: absolute;
    top: var(--lightbox-top-inset, 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 41;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--lightbox-top-ctrl, 44px);
    pointer-events: none;
    box-sizing: border-box;
}

/* Handy Portrait: linke Tools (Download/Diashow/Sekunden) kollidieren mit zentriertem Zoom (-/+) */
@media (max-width: 767px) {
    .lightbox-close,
    .lightbox-tools-left,
    .lightbox-zoom-bar,
    .lightbox-video-bar {
        /* var( - safe-*) nutzt Capacitor-Fallbacks (env() oft 0 im WebView) */
        --lightbox-top-inset: max(12px, var(--safe-top));
        --lightbox-top-ctrl: 40px;
    }

    .lightbox-tools-left {
        left: max(10px, var(--safe-left));
        right: auto;
        max-width: calc(100% - 56px);
        height: auto;
        min-height: var(--lightbox-top-ctrl, 40px);
        flex-wrap: wrap;
        gap: 5px;
        z-index: 41;
    }

    .lightbox-tools-left .lightbox-tool-btn,
    .lightbox-tools-left .btn-icon {
        width: var(--lightbox-top-ctrl, 40px);
        height: var(--lightbox-top-ctrl, 40px);
        min-width: var(--lightbox-top-ctrl, 40px);
        min-height: var(--lightbox-top-ctrl, 40px);
    }

    .lightbox-slideshow-seconds {
        height: var(--lightbox-top-ctrl, 40px);
        min-height: var(--lightbox-top-ctrl, 40px);
        min-width: 3.2rem;
        font-size: 0.78rem;
        padding: 0 6px;
    }

    .lightbox-close {
        right: max(10px, var(--safe-right));
        z-index: 42;
        pointer-events: auto;
    }

    /* Zoom unter die linke Tool-Zeile, damit Diashow nicht vom - ueberdeckt wird */
    .lightbox-zoom-bar {
        top: calc(var(--lightbox-top-inset, 12px) + var(--lightbox-top-ctrl, 40px) + 10px);
        z-index: 41;
    }

    .lightbox-video-bar {
        top: calc(var(--lightbox-top-inset, 12px) + var(--lightbox-top-ctrl, 40px) + 10px);
        z-index: 41;
    }

    /* Wenn Zoom unter der 1. Zeile liegt und Tools umbrechen: etwas mehr Abstand */
    .lightbox:not(.is-video) .lightbox-zoom-bar {
        top: calc(var(--lightbox-top-inset, 12px) + var(--lightbox-top-ctrl, 40px) + 10px);
    }
}

/*
* Handy Landscape: X liegt sonst in Status-Icons / Nav-Leiste / Cutout
* (Android Querformat: System-UI oft rechts + oben Taps greifen nicht).
*/
@media (orientation: landscape) and (max-height: 520px) {
    .lightbox-close,
    .lightbox-tools-left,
    .lightbox-zoom-bar,
    .lightbox-video-bar {
        --lightbox-top-inset: max(8px, var(--safe-top));
        --lightbox-top-ctrl: 40px;
    }

    .lightbox-close {
        top: max(8px, var(--safe-top));
        /* Nav-Leiste ~48dp / Status-Ecke: mind. aus der toten Zone */
        right: max(48px, var(--safe-right));
        z-index: 60;
        pointer-events: auto;
    }

    .lightbox-tools-left {
        top: max(8px, var(--safe-top));
        left: max(16px, var(--safe-left));
        right: auto;
        z-index: 50;
        pointer-events: auto;
    }

    html.capacitor-native .lightbox-close {
        top: max(10px, var(--safe-top));
        right: max(52px, var(--safe-right));
    }

    html.capacitor-native .lightbox-tools-left {
        left: max(20px, var(--safe-left));
    }
}

.lightbox-zoom-bar .lightbox-zoom-controls {
    pointer-events: auto;
}

.lightbox-tool-btn {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.lightbox-tool-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.2) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
}

.lightbox-tool-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.lightbox-tool-btn svg {
    width: 20px;
    height: 20px;
}

.lightbox-zoom-controls {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: var(--lightbox-top-ctrl, 44px);
    min-height: var(--lightbox-top-ctrl, 44px);
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 24px;
    /* Immer dunkle Leiste - unabhaengig vom Theme */
    background: rgba(0, 0, 0, 0.62);
    border: 1px solid rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(8px);
    color: #fff;
}

/* Zoom - / + : eigene Klasse, kein .btn-ghost (Light-Mode-Konflikt) */
.lightbox-zoom-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    padding: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.lightbox-zoom-btn:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
}

.lightbox-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.lightbox-zoom-btn svg {
    width: 20px;
    height: 20px;
    display: block;
    stroke: currentColor;
}

/* 100% Label - immer hell auf dunkler Leiste */
.lightbox-zoom-label {
    min-width: 52px;
    height: 36px;
    min-height: 36px;
    padding: 0 8px;
    margin: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: #fff;
    font: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    box-shadow: none;
}

.lightbox-zoom-label:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.lightbox-zoom-label:disabled {
    opacity: 0.45;
    cursor: default;
}

/* Light-Mode: Lightbox bleibt dunkel - Borders nicht aus Theme (sonst zu hell/weiss) */
[data-theme="light"] .lightbox-close {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.35);
}

[data-theme="light"] .lightbox-close:hover {
    background: rgba(0, 0, 0, 0.5);
    border-color: rgba(255, 255, 255, 0.16);
}

[data-theme="light"] .lightbox-tools-left .btn-ghost,
[data-theme="light"] .lightbox-tool-btn {
    border-color: rgba(255, 255, 255, 0.12) !important;
    background: rgba(0, 0, 0, 0.4) !important;
    box-shadow: none;
}

[data-theme="light"] .lightbox-tools-left .btn-ghost:hover,
[data-theme="light"] .lightbox-tool-btn:hover:not(:disabled) {
    border-color: rgba(255, 255, 255, 0.2) !important;
    background: rgba(0, 0, 0, 0.55) !important;
}

[data-theme="light"] .lightbox-zoom-controls {
    background: rgba(0, 0, 0, 0.68);
    border-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

[data-theme="light"] .lightbox-zoom-btn,
[data-theme="light"] .lightbox-zoom-label {
    color: #fff;
    background: transparent;
}

[data-theme="light"] .lightbox-zoom-btn:hover:not(:disabled),
[data-theme="light"] .lightbox-zoom-label:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

[data-theme="light"] .lightbox-nav {
    background: rgba(0, 0, 0, 0.45);
    border-color: rgba(255, 255, 255, 0.12);
}

[data-theme="light"] .lightbox-nav:hover,
[data-theme="light"] .lightbox-nav:focus-visible {
    background: rgba(0, 0, 0, 0.6);
    border-color: rgba(255, 255, 255, 0.2);
}

[data-theme="light"] .lightbox-loop-toggle {
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(0, 0, 0, 0.55);
}

.lightbox-stage {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Unten weniger Padding: Infos sitzen in .lightbox-footer */
    padding: 64px 12px 12px;
}

.lightbox-viewport {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    overflow: hidden;
    border-radius: 0;
    touch-action: none;
    /* Desktop: Plus-Lupe (zoom-in) */
    cursor: zoom-in;
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    will-change: transform, opacity;
    transition: none;
    opacity: 1;
}

/* Diashow: Viewport-Fade (Video / Fallback) */
.lightbox.is-slideshow .lightbox-viewport.is-slideshow-fade-out {
    opacity: 0;
    transition: opacity 0.38s ease;
}

.lightbox.is-slideshow .lightbox-viewport.is-slideshow-fade-in {
    opacity: 1;
    transition: opacity 0.42s ease;
}

/* Diashow: echte Bild-zu-Bild-Crossfade-Ueberblendung */
.lightbox-viewport.is-crossfading {
    /* Stack liegt ueber dem Hauptbild */
}

.lightbox-viewport.is-crossfading > .lightbox-img.is-crossfade-hidden {
    opacity: 0 !important;
    transition: none !important;
}

.lightbox-crossfade-stack {
    position: absolute;
    inset: 0;
    z-index: 6;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    overflow: hidden;
}

.lightbox-crossfade-stack.is-done {
    opacity: 0;
    transition: opacity 0.08s ease;
}

.lightbox-crossfade-layer {
    position: absolute;
    max-width: min(100%, 1200px);
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--radius-lg);
    opacity: 0;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity;
    user-select: none;
    -webkit-user-drag: none;
}

.lightbox-crossfade-layer.is-from {
    z-index: 1;
}

.lightbox-crossfade-layer.is-to {
    z-index: 2;
}

.lightbox-crossfade-layer.is-visible {
    opacity: 1;
}

.lightbox-crossfade-layer.is-hiding {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
    .lightbox.is-slideshow .lightbox-viewport.is-slideshow-fade-out,
    .lightbox.is-slideshow .lightbox-viewport.is-slideshow-fade-in {
        transition: none;
        opacity: 1;
    }

    .lightbox-crossfade-layer {
        transition: none;
    }
}

.lightbox-viewport.is-dragging {
    cursor: grabbing;
}

/* Handy-Galerie: Bild folgt dem Swipe, dann Commit/Zurueckfedern */
.lightbox-viewport.is-swiping {
    transition: none !important;
    cursor: grabbing;
}

.lightbox-viewport.is-swipe-animating {
    transition: transform 0.26s cubic-bezier(0.22, 0.9, 0.3, 1),
                opacity 0.26s ease-out;
}

.lightbox-viewport.is-swipe-commit {
    transition: transform 0.26s cubic-bezier(0.2, 0.85, 0.25, 1),
                opacity 0.22s ease-in;
}

.lightbox-img {
    max-width: min(100%, 1200px);
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    object-fit: contain;
    display: block;
    transform-origin: center center;
    transition: none;
    will-change: width, height, transform;
    pointer-events: none;
    flex-shrink: 0;
}

/* Smooth linear Zoom bei Linksklick (Desktop) */
.lightbox-img.is-zoom-animating {
    transition: width 0.28s linear, height 0.28s linear, transform 0.28s linear;
}

.lightbox.is-zoomed .lightbox-img {
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
}

.lightbox-viewport.is-dragging .lightbox-img {
    transition: none !important;
}

/* Sichtbares Video (Canvas-Ansatz entfernt Seek/Desktop stabil) */
.lightbox-video {
    max-width: min(100%, 1200px);
    max-height: min(80dvh, 100%);
    width: auto;
    height: auto;
    border-radius: var(--radius-lg);
    background: #000;
    display: block;
    outline: none;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    -webkit-touch-callout: default;
    transform-origin: center center;
    transition: none;
    will-change: width, height, transform;
    flex-shrink: 0;
}

.lightbox-video.is-zoom-animating {
    transition: width 0.28s linear, height 0.28s linear, transform 0.28s linear;
}

.lightbox.is-zoomed .lightbox-video {
    max-width: none !important;
    max-height: none !important;
    border-radius: 0;
}

.lightbox-viewport.is-dragging .lightbox-video {
    transition: none !important;
}

/* Canvas ungenutzt (Fallback-DOM, immer versteckt) */
.lightbox-video-canvas {
    display: none !important;
}

/* Native Browser-Video-Controls komplett aus (eigene UI: Play/Mute/Vol/FS) */
.lightbox.is-video .lightbox-video::-webkit-media-controls,
.lightbox.is-video .lightbox-video::-webkit-media-controls-enclosure,
.lightbox.is-video .lightbox-video::-webkit-media-controls-panel,
.lightbox.is-video .lightbox-video::-webkit-media-controls-start-playback-button,
.lightbox.is-video .lightbox-video::-webkit-media-controls-overlay-play-button,
.lightbox.is-video .lightbox-video::-webkit-media-controls-play-button,
.lightbox.is-video .lightbox-video::-webkit-media-controls-timeline,
.lightbox.is-video .lightbox-video::-webkit-media-controls-current-time-display,
.lightbox.is-video .lightbox-video::-webkit-media-controls-time-remaining-display,
.lightbox.is-video .lightbox-video::-webkit-media-controls-mute-button,
.lightbox.is-video .lightbox-video::-webkit-media-controls-volume-slider,
.lightbox.is-video .lightbox-video::-webkit-media-controls-fullscreen-button {
    display: none !important;
    -webkit-appearance: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 0 !important;
    height: 0 !important;
    max-height: 0 !important;
}

/* Bis Playback: schwarzes Cover ueber dem Video (Android Play-Flash) */
.lightbox.is-video.is-awaiting-play .lightbox-viewport {
    background: #000 !important;
    position: relative;
}

.lightbox.is-video.is-awaiting-play .lightbox-video,
.lightbox-video.is-awaiting-play {
    opacity: 0 !important;
}

.lightbox-video-cover {
    position: absolute;
    inset: 0;
    z-index: 50;
    background: #000;
    pointer-events: none;
}
.lightbox-video-cover[hidden] {
    display: none !important;
}

.lightbox-video[hidden],
.lightbox-img[hidden] {
    display: none !important;
}

.lightbox:not(.is-video) .lightbox-video {
    display: none !important;
}

.lightbox:not(.is-video) .lightbox-video {
    display: none !important;
}

.lightbox.is-video .lightbox-img {
    display: none !important;
}

.lightbox.is-video .lightbox-viewport {
    cursor: zoom-in;
    touch-action: none; /* Rad/Pan an JS, kein Seiten-Scroll */
    /* Stage/Viewport empfangen Rad; Klicks weiter am Video */
    pointer-events: auto;
    overflow: hidden;
}

/* Gezoomtes Video: pan-faehig, Overflow clippen */
.lightbox.is-video.is-zoomed .lightbox-viewport {
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
}

.lightbox.is-video.is-zoomed .lightbox-viewport.is-dragging {
    cursor: grabbing;
}

.lightbox.is-video .lightbox-video {
    pointer-events: auto;
    z-index: 3;
    /* Volle verfuegbare Flaeche Controls skalieren das Video nicht */
    max-height: min(100%, calc(100dvh - 72px));
}

.lightbox.is-video.is-zoomed .lightbox-video {
    max-height: none;
    cursor: grab;
}

.lightbox.is-video.is-zoomed .lightbox-viewport.is-dragging .lightbox-video {
    cursor: grabbing;
}

/*
* Video-Controls (Play/Mute/Vol/FS) als Overlay wie X/Download oben:
* aus dem Flex-Flow nehmen, Video behaelt volle Stage-hoehe.
*/
.lightbox.is-video .lightbox-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    flex: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px max(14px, env(safe-area-inset-bottom, 0px));
    background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 55%, transparent 100%);
    z-index: 40;
    pointer-events: none;
    box-sizing: border-box;
}

/* Seek + Controls volle Breite, zentriert wie YT-Player-Chrome */
.lightbox.is-video .lightbox-seek-row,
.lightbox.is-video .lightbox-audio-bar {
    align-self: center;
}

/* Video: kein 1/n-Zaehler */
.lightbox.is-video .lightbox-nav-counter {
    display: none !important;
}

/* Video: Info-Badge (Grow/Datum/) zentriert unter den Controls */
.lightbox.is-video .lightbox-meta {
    align-self: center;
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: min(100%, 860px);
    margin: 4px auto 0;
    text-align: center;
}

.lightbox.is-video .lightbox-meta-inner {
    margin: 0 auto;
}

.lightbox.is-video .lightbox-audio-bar {
    pointer-events: auto;
    margin-bottom: 0;
    width: min(100%, 860px);
}

.lightbox.is-video .lightbox-seek-row {
    pointer-events: auto;
    width: min(100%, 860px);
    /* Ueber Cover/Stage greifbar */
    position: relative;
    z-index: 60;
}

.lightbox.is-video.is-video-fs .lightbox-seek-row,
.lightbox.is-video:fullscreen .lightbox-seek-row,
.lightbox.is-video:-webkit-full-screen .lightbox-seek-row,
.lightbox.is-video.is-video-fs .lightbox-audio-bar,
.lightbox.is-video:fullscreen .lightbox-audio-bar,
.lightbox.is-video:-webkit-full-screen .lightbox-audio-bar {
    width: min(100%, 960px);
}

.lightbox.is-video .lightbox-stage {
    /* nur oben Platz fuer X/Tools; unten kein Reserved-Padding fuer Controls */
    padding: 64px 12px 12px;
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .lightbox.is-video .lightbox-stage {
        padding: 56px 8px 8px;
    }

    .lightbox.is-video .lightbox-video {
        max-height: min(100%, calc(100dvh - 56px));
        width: 100%;
        max-width: 100%;
    }

    .lightbox.is-video .lightbox-footer {
        padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px));
    }
}

.lightbox.is-video .lightbox-zoom-bar {
    display: none;
}

/*
* Video-Chrome aus: Tap auf VideoFlaeche versteckt alle UI-Elemente
* (X, Tools, Nav, Play/Mute/Vol/FS, Loop, Band, Zaehler).
* Nochmal Tippen wieder einblenden.
*/
.lightbox.is-video.is-chrome-hidden .lightbox-close,
.lightbox.is-video.is-chrome-hidden .lightbox-tools-left,
.lightbox.is-video.is-chrome-hidden .lightbox-nav,
.lightbox.is-video.is-chrome-hidden .lightbox-footer,
.lightbox.is-video.is-chrome-hidden .lightbox-video-bar,
.lightbox.is-video.is-chrome-hidden .lightbox-band,
.lightbox.is-video.is-chrome-hidden .lightbox-nav-counter,
.lightbox.is-video.is-chrome-hidden .lightbox-meta {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

.lightbox.is-video .lightbox-close,
.lightbox.is-video .lightbox-tools-left,
.lightbox.is-video .lightbox-nav,
.lightbox.is-video .lightbox-footer,
.lightbox.is-video .lightbox-video-bar,
.lightbox.is-video .lightbox-band {
    transition: opacity 0.18s ease, visibility 0.18s ease;
}

/* Video-Vollbild: echtes Fullscreen-Layout (Portrait + Landscape) */
.lightbox.is-video.is-video-fs,
.lightbox.is-video:fullscreen,
.lightbox.is-video:-webkit-full-screen {
    background: #000;
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100dvh;
    inset: 0;
    /* CSS-only FS (ohne API): ueber alles legen */
    position: fixed;
    z-index: 10000;
}

/* Im FS: Chrome oben aus (X/Download/Nav) Exit ueber FS-Button oder System-Zurueck */
.lightbox.is-video.is-video-fs .lightbox-close,
.lightbox.is-video:fullscreen .lightbox-close,
.lightbox.is-video:-webkit-full-screen .lightbox-close,
.lightbox.is-video.is-video-fs .lightbox-tools-left,
.lightbox.is-video:fullscreen .lightbox-tools-left,
.lightbox.is-video:-webkit-full-screen .lightbox-tools-left,
.lightbox.is-video.is-video-fs .lightbox-nav,
.lightbox.is-video:fullscreen .lightbox-nav,
.lightbox.is-video:-webkit-full-screen .lightbox-nav {
    display: none !important;
}

.lightbox.is-video.is-video-fs .lightbox-stage,
.lightbox.is-video:fullscreen .lightbox-stage,
.lightbox.is-video:-webkit-full-screen .lightbox-stage {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.lightbox.is-video.is-video-fs .lightbox-viewport,
.lightbox.is-video:fullscreen .lightbox-viewport,
.lightbox.is-video:-webkit-full-screen .lightbox-viewport {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox.is-video.is-video-fs .lightbox-video,
.lightbox.is-video:fullscreen .lightbox-video,
.lightbox.is-video:-webkit-full-screen .lightbox-video {
    width: 100%;
    height: 100%;
    max-width: 100vw;
    max-height: 100%;
    border-radius: 0;
    object-fit: contain;
    background: #000;
}

.lightbox.is-video.is-video-fs .lightbox-band,
.lightbox.is-video:fullscreen .lightbox-band,
.lightbox.is-video:-webkit-full-screen .lightbox-band,
.lightbox.is-video.is-video-fs .lightbox-meta,
.lightbox.is-video:fullscreen .lightbox-meta,
.lightbox.is-video:-webkit-full-screen .lightbox-meta,
.lightbox.is-video.is-video-fs .lightbox-zoom-hint,
.lightbox.is-video:fullscreen .lightbox-zoom-hint,
.lightbox.is-video:-webkit-full-screen .lightbox-zoom-hint,
.lightbox.is-video.is-video-fs .lightbox-video-bar,
.lightbox.is-video:fullscreen .lightbox-video-bar,
.lightbox.is-video:-webkit-full-screen .lightbox-video-bar,
.lightbox.is-video.is-video-fs .lightbox-nav-counter,
.lightbox.is-video:fullscreen .lightbox-nav-counter,
.lightbox.is-video:-webkit-full-screen .lightbox-nav-counter {
    display: none !important;
}

/* FS: Footer bleibt Overlay (gleiche Basis wie .is-video .lightbox-footer) */
.lightbox.is-video.is-video-fs .lightbox-footer,
.lightbox.is-video:fullscreen .lightbox-footer,
.lightbox.is-video:-webkit-full-screen .lightbox-footer {
    z-index: 50;
    padding: 8px 12px max(12px, env(safe-area-inset-bottom, 0px));
}

.lightbox.is-video.is-video-fs .lightbox-audio-bar,
.lightbox.is-video:fullscreen .lightbox-audio-bar,
.lightbox.is-video:-webkit-full-screen .lightbox-audio-bar {
    pointer-events: auto;
}

/* Landscape: Video volle Flaeche, Controls weiter Overlay */
@media (orientation: landscape) {
    .lightbox.is-video .lightbox-stage {
        padding: 48px 8px 8px;
    }

    .lightbox.is-video .lightbox-video {
        max-height: 100dvh;
        max-width: 100vw;
    }

    .lightbox.is-video .lightbox-footer {
        padding-top: 6px;
        padding-bottom: max(8px, var(--safe-bottom));
        padding-left: max(16px, var(--safe-left));
        padding-right: max(16px, var(--safe-right));
    }

    .lightbox.is-video.is-video-fs .lightbox-stage,
    .lightbox.is-video:fullscreen .lightbox-stage,
    .lightbox.is-video:-webkit-full-screen .lightbox-stage {
        padding: 0;
    }

    .lightbox.is-video.is-video-fs .lightbox-video,
    .lightbox.is-video:fullscreen .lightbox-video,
    .lightbox.is-video:-webkit-full-screen .lightbox-video {
        width: 100vw;
        height: 100dvh;
        max-width: 100vw;
        max-height: 100dvh;
        object-fit: contain;
    }
}

html.lightbox-video-fs-active,
html.lightbox-video-fs-active body {
    overflow: hidden !important;
    overscroll-behavior: none;
    background: #000;
}

@media (max-width: 767px) {
    .lightbox.is-video.is-video-fs .lightbox-stage,
    .lightbox.is-video:fullscreen .lightbox-stage,
    .lightbox.is-video:-webkit-full-screen .lightbox-stage {
        padding: 0;
    }

    .lightbox.is-video.is-video-fs .lightbox-video,
    .lightbox.is-video:fullscreen .lightbox-video,
    .lightbox.is-video:-webkit-full-screen .lightbox-video {
        width: 100%;
        height: 100%;
        max-width: 100vw;
        max-height: 100dvh;
    }
}

.lightbox-zoom-hint {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 0;
    padding: 0;
    max-width: min(96vw, 560px);
    z-index: auto;
    pointer-events: auto;
}

.lightbox-zoom-hint[hidden] {
    display: none !important;
}

.lightbox-zoom-hint .form-tip {
    margin: 0;
    max-width: 100%;
}

@media (max-width: 480px) {
    .lightbox-zoom-hint {
        max-width: 96%;
    }
}

.lightbox-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 28px 20px 18px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.55) 55%, transparent 100%);
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
    pointer-events: none;
}

.lightbox-band-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.lightbox-band-desc {
    margin-top: 6px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.5;
    white-space: pre-wrap;
}

.lightbox-meta {
    position: static;
    transform: none;
    left: auto;
    bottom: auto;
    margin: 0;
    max-width: min(96vw, 640px);
    z-index: auto;
    transition: opacity 0.18s ease;
    pointer-events: none;
}

.lightbox-meta[hidden] {
    display: none !important;
}

.lightbox-meta-inner {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 999px;
    background: linear-gradient(
      165deg,
      rgba(28, 28, 30, 0.72) 0%,
      rgba(12, 12, 14, 0.82) 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
      0 8px 28px rgba(0, 0, 0, 0.45),
      0 1px 0 rgba(255, 255, 255, 0.06) inset;
    backdrop-filter: blur(14px) saturate(1.2);
    -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.lightbox-meta-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.25;
    white-space: nowrap;
}

.lightbox-meta-size {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, rgba(255, 255, 255, 0.06));
    border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent);
    box-shadow: none;
}

.lightbox-meta-grow {
    color: rgba(255, 255, 255, 0.95);
}

.lightbox-meta-stage {
    color: rgba(220, 235, 255, 0.9);
}

.lightbox-meta-date,
.lightbox-meta-info {
    color: rgba(255, 255, 255, 0.78);
    font-weight: 600;
}

/* Keine Mittelpunkte/Dots zwischen Meta-Chips (z. B. vor/nach Groesse) */
.lightbox-meta-dot {
    display: none !important;
}

@media (max-width: 480px) {
  .lightbox-meta-inner {
    padding: 7px 10px;
    gap: 4px 1px;
  }

  .lightbox-meta-chip {
    font-size: 0.72rem;
    padding: 3px 8px;
  }
}

/* Toast */
.toast-container {
    position: fixed;
    bottom: calc(var(--bottom-nav-total) + 16px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 400;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}

.toast {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 20px;
    font-size: 0.9rem;
    animation: fadeIn 0.2s ease;
    pointer-events: auto;
}

/* Medien hinzufuegen: cool / minimal (wie Pflanzen-Detail-Kacheln) */
.native-media-sheet {
    position: fixed !important;
    inset: 0 !important;
    z-index: 99999 !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: center;
    pointer-events: auto !important;
    box-sizing: border-box;
    padding: 0 max(12px, var(--safe-left)) 0 max(12px, var(--safe-right));
}

.native-media-sheet-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    opacity: 0;
    transition: opacity 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.native-media-sheet.is-visible .native-media-sheet-backdrop {
    opacity: 1;
}

.native-media-sheet-panel {
    position: relative;
    z-index: 1;
    width: min(100%, 400px);
    margin: 0 0 max(12px, var(--safe-bottom));
    padding: 12px 12px 10px;
    border-radius: var(--radius-lg, 12px);
    /* Wie .stat-card auf der Pflanzen-Detailseite */
    background: var(--bg-card);
    border: 1px solid var(--border);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.18);
    box-sizing: border-box;
    color: var(--text);
    transform: translateY(110%);
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    touch-action: none;
}

.native-media-sheet.is-visible .native-media-sheet-panel {
    transform: translateY(0);
}

.native-media-sheet.is-closing .native-media-sheet-backdrop {
    opacity: 0;
}

.native-media-sheet.is-closing .native-media-sheet-panel {
    transform: translateY(110%);
}

/* + Button: nur einblenden, kein Hochschieben */
.native-media-sheet.native-media-sheet--fade .native-media-sheet-panel {
    transform: none;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.native-media-sheet.native-media-sheet--fade.is-visible .native-media-sheet-panel {
    transform: none;
    opacity: 1;
}
.native-media-sheet.native-media-sheet--fade.is-closing .native-media-sheet-panel {
    transform: none;
    opacity: 0;
}

.native-media-sheet-handle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0;
    padding: 8px 0 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
}

.native-media-sheet-handle {
    width: 36px;
    height: 4px;
    margin: 0;
    border-radius: 999px;
    background: var(--border);
    pointer-events: none;
}

.native-media-sheet-head {
    margin: 0 4px 10px;
}

.native-media-sheet-title {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
    line-height: 1.3;
}

.native-media-sheet-opts {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    overflow: hidden;
    background: var(--bg-card);
}

.native-media-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 0;
    padding: 14px 14px;
    border: none;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    background: var(--bg-card);
    color: var(--text);
    text-align: left;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    transition: background 0.15s ease;
}

.native-media-opt:last-of-type {
    border-bottom: none;
}

.native-media-opt:hover,
.native-media-opt:focus-visible {
    background: var(--bg-hover);
    outline: none;
}

.native-media-opt:active {
    background: var(--bg-hover);
}

.native-media-opt-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    box-shadow: none;
}

.native-media-opt:hover .native-media-opt-icon,
.native-media-opt:focus-visible .native-media-opt-icon {
    color: var(--accent);
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.native-media-opt-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
}

.native-media-opt-title {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.25;
}

.native-media-opt-hint {
    font-size: 0.75rem;
    color: var(--text-muted, var(--text-secondary));
    line-height: 1.3;
    font-weight: 400;
}

.native-media-opt-chevron {
    flex-shrink: 0;
    color: var(--text-muted, var(--text-secondary));
    opacity: 0.55;
    display: inline-flex;
}

.native-media-sheet-gap {
    height: 10px;
    flex-shrink: 0;
    pointer-events: none;
}

.native-media-cancel {
    display: block;
    width: 100%;
    margin-top: 0;
    background: transparent !important;
    border: 1px solid var(--border) !important;
    color: var(--text-secondary) !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

.native-media-cancel:hover,
.native-media-cancel:focus-visible {
    background: var(--bg-hover) !important;
    border-color: var(--border) !important;
    color: var(--text) !important;
}

[data-theme="light"] .native-media-sheet-panel {
    background: var(--bg-card);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .native-media-opt {
    background: var(--bg-card);
}

@media (orientation: landscape) and (max-height: 520px) {
    .native-media-sheet-panel {
        margin-bottom: max(8px, var(--safe-bottom));
        padding: 8px 10px 8px;
        max-height: min(92dvh, 100svh);
        overflow-y: auto;
    }

    .native-media-opt {
        padding: 10px 12px;
    }

    .native-media-opt-icon {
        width: 32px;
        height: 32px;
        border-radius: 8px;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section headers Titel und Aktion (z.B. Alle anzeigen) immer eine Zeile */
.section-header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .section-header {
        margin-bottom: 8px;
    }
}

.section-header-actions {
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: nowrap;
    flex-shrink: 0;
    min-height: 32px;
    min-width: 0;
    gap: 8px;
}

.section-header > .btn,
.section-header > a.btn {
    flex-shrink: 0;
    align-self: center;
}

/* Handy: Aktions-Buttons rechtsbuendig in einer Zeile (Duengeplaene u. a.) */
@media (max-width: 767px) {
    .section-header {
        flex-wrap: nowrap;
        gap: 8px;
    }

    .section-header .section-title {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .section-header-actions {
        flex: 0 0 auto;
        flex-wrap: nowrap;
        justify-content: flex-end;
        gap: 6px;
        margin-left: auto;
    }

    .section-header-actions .btn,
    .section-header-actions .btn-sm {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Duengeplaene / Plan-Detail: etwas kompaktere Buttons */
    .nutrient-plans-header .section-header-actions .btn-sm,
    .nutrient-plan-detail-header .section-header-actions .btn-sm,
    .modal .nutrient-plan-detail-header .section-header-actions .btn-sm {
        padding: 7px 10px;
        font-size: 0.78rem;
        min-height: 36px;
    }
}

.section-title {
    font-size: 1rem;
    font-weight: 400;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    line-height: 1.25;
    min-width: 0;
    flex: 1 1 auto;
}

/* Uebersicht + Pflanzen: identischer Content-Start, kein Pixel-Sprung */
.home-like-page {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Offene Termine + Pflanzen-Ueberschrift */
.home-page-top {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 0;
    width: 100%;
}

.home-page-top > .open-tasks {
    margin-bottom: 16px;
}

.home-page-top > .section-header {
    margin-top: 0;
    margin-bottom: 16px;
}

/* Minimiert: Block aus der Seite, Badges sitzen in der Topbar */
.home-page-top > .open-tasks.is-minimized {
    display: none !important;
    margin: 0;
}

.home-like-page > .home-plants-empty {
    margin-top: 0;
}

/* Overlay for mobile sidebar */
.sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 99;
    display: none;
}

.sidebar-backdrop.visible {
    display: block;
}

/* Mobile */
@media (max-width: 767px) {
    /* Offene Termine: Text volle Breite, Aktionen darunter in Flucht mit Titel */
    .open-task-card {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        grid-template-areas: "icon body" ". actions";
        align-items: start;
        gap: 10px 12px;
        padding: 14px;
    }

    /* Schrift wie Journal-Eintraege (.event-title / .event-meta) */
    .open-task-title {
        font-size: 0.9rem;
        font-weight: 500;
        line-height: 1.3;
    }

    .open-task-meta {
        font-size: 0.8rem;
        margin-top: 2px;
    }

    .open-task-icon {
        font-size: 1.3rem;
    }

    .open-task-icon .event-action-icon-svg {
        width: 1.3rem;
        height: 1.3rem;
    }

    /* Termine aufgeklappt: connected list (Header oben + Radius unten am letzten) */
    .open-tasks-list,
    .open-tasks-group-list,
    .open-tasks-focus .open-tasks-list {
        gap: 0;
    }

    .open-tasks-list .open-task-card,
    .open-tasks-group-list .open-task-card {
        margin-bottom: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        border-left-width: var(--open-tasks-side-border, 1.5px);
        border-right-width: var(--open-tasks-side-border, 1.5px);
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
        box-shadow: none;
        background: var(--bg-card);
    }

    /* Ohne Header-Verbindung (z. B. nur Group-List): Radius oben am ersten */
    .open-tasks-group-list .open-task-card:first-child {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    /* Mit Header: erste Karte der Gesamtliste ohne oberen Radius (schliesst an Toggle an) */
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:first-child,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:first-child .open-tasks-group-list > .open-task-card:first-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .open-tasks-list .open-task-card:last-child,
    .open-tasks-group-list .open-task-card:last-child {
        border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    /* Letzte Karte der gesamten aufgeklappten Liste */
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:last-child,
    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-tasks-group:last-child .open-tasks-group-list > .open-task-card:last-child {
        border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .open-tasks-list .open-task-card:only-child,
    .open-tasks-group-list .open-task-card:only-child {
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .open-task-card:only-child {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    .open-tasks-list .open-task-card.is-overdue,
    .open-tasks-group-list .open-task-card.is-overdue {
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
    }

    .open-tasks-list .open-task-card:hover,
    .open-tasks-group-list .open-task-card:hover {
        border-color: var(--open-tasks-frame, var(--accent));
        border-bottom-color: transparent;
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
        background: var(--bg-hover);
        z-index: 1;
    }

    .open-tasks-list .open-task-card.is-overdue:hover,
    .open-tasks-group-list .open-task-card.is-overdue:hover {
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
    }

    .open-tasks-list .open-task-card:last-child:hover,
    .open-tasks-group-list .open-task-card:last-child:hover {
        border-bottom-color: var(--open-tasks-frame, var(--accent));
    }

    /* Pflanzen-Detail + Kalender: Listen wie Journal (Strich, kein Rahmen) */
    .grow-detail-page .open-tasks-list-in-fold .open-task-card {
        padding: 12px 2px;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        background: transparent;
        box-shadow: none;
    }

    .grow-detail-page .open-tasks-list-in-fold .open-task-card:last-child {
        border-bottom: 0;
    }

    .grow-detail-page .open-tasks-list-in-fold .open-task-card:hover,
    .grow-detail-page .open-tasks-list-in-fold .open-task-card.is-overdue {
        border-left: 0;
        background: transparent;
    }

    .grow-detail-page .nutrient-history-list {
        gap: 0;
    }

    /* Kalender-Tagesliste: connected unter Fold-Header, aeusserer gruener Frame */
    .calendar-day-fold .calendar-events .event-item,
    .calendar-day-fold .calendar-day-list .event-item,
    .calendar-day-fold .journal-list .event-item {
        margin-bottom: 0;
        border-radius: 0;
        border: 0;
        border-bottom: 1px solid var(--border);
        box-shadow: none;
        background: var(--bg-card);
    }

    .calendar-day-fold[open] .calendar-events .event-item:first-child,
    .calendar-day-fold[open] .calendar-day-list .event-item:first-child,
    .calendar-day-fold[open] .journal-list .event-item:first-child {
        border-top: none;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .calendar-day-fold .calendar-events .event-item:last-child,
    .calendar-day-fold .calendar-day-list .event-item:last-child,
    .calendar-day-fold .journal-list .event-item:last-child {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    /* Kalender open-rest: event-items mit gruenem Connected-Frame (wie Pflanzen-Detail) */
    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item {
        border-left-width: var(--open-tasks-side-border, 1.5px);
        border-right-width: var(--open-tasks-side-border, 1.5px);
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
        border-radius: 0;
        margin-bottom: 0;
        background: var(--bg-card);
        border-bottom: none;
        border-top: 1px solid var(--border);
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:first-child {
        border-top: none;
        border-top-left-radius: 0 !important;
        border-top-right-radius: 0 !important;
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:last-child {
        border-bottom: var(--open-tasks-side-border, 1.5px) solid var(--open-tasks-frame, var(--accent));
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .calendar-open-rest:not(.is-collapsed):not(.is-minimized) .open-tasks-list > .event-item:hover {
        border-left-color: var(--open-tasks-frame, var(--accent));
        border-right-color: var(--open-tasks-frame, var(--accent));
        background: var(--bg-hover);
    }

    .grow-detail-page [data-env-section^="grow-nutrient-history-"] .env-fold-body-inner,
    .grow-detail-page [data-env-section^="grow-open-tasks-"] .env-fold-body-inner,
    [data-env-section^="equip-"] .env-fold-body-inner {
        padding-left: 8px;
        padding-right: 8px;
    }

    .grow-detail-page [data-env-section^="grow-journal-"]:not([data-env-section*="charts"]) .env-fold-body-inner {
        padding: 0;
    }

    /* Geraete-Seite + Umgebung -> Geraete: connected list wie Desktop */
    .equip-inventory-grid,
    .equip-inventory-grid.cols-1,
    .equip-inventory-grid.is-minimal,
    .equip-inventory-grid.cols-1.is-minimal,
    .equip-inventory-grid.cols-1.is-full,
    .equip-inventory-grid.cols-1.is-normal,
    .equip-grid,
    .equip-grid.is-minimal {
        gap: 0;
    }

    .equip-mini-card,
    .no-equip-dnd .equip-mini-card,
    .equip-inventory-grid.cols-1 .equip-mini-card,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card,
    .equip-card,
    .equip-card.is-minimal {
        margin-bottom: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        padding: 12px;
        background: var(--bg-card);
        box-shadow: none;
    }

    .equip-mini-card:first-child,
    .no-equip-dnd .equip-mini-card:first-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:first-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:first-child,
    .equip-card:first-child,
    .equip-card.is-minimal:first-child {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    .equip-mini-card:last-child,
    .no-equip-dnd .equip-mini-card:last-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:last-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:last-child,
    .equip-card:last-child,
    .equip-card.is-minimal:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .equip-mini-card:only-child,
    .no-equip-dnd .equip-mini-card:only-child,
    .equip-inventory-grid.cols-1 .equip-mini-card:only-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:only-child,
    .equip-card:only-child,
    .equip-card.is-minimal:only-child {
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    .equip-mini-card:hover,
    .equip-inventory-grid.cols-1 .equip-mini-card:hover,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:hover,
    .equip-card:hover {
        border-color: var(--border);
        border-bottom-color: transparent;
        background: var(--bg-hover);
        box-shadow: none;
        z-index: 1;
    }

    .equip-mini-card:last-child:hover,
    .equip-inventory-grid.cols-1 .equip-mini-card:last-child:hover,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:last-child:hover,
    .equip-card:last-child:hover {
        border-bottom-color: var(--border);
    }

    .equip-mini-card.is-unassigned {
        border-style: solid;
        background: var(--bg-card);
    }

    .open-task-icon {
        grid-area: icon;
        padding-top: 2px;
    }

    .open-task-body {
        grid-area: body;
        min-width: 0;
    }

    /* Unter dem Body (nicht unter dem Icon), Button nur so breit wie der Text */
    .open-task-actions {
        grid-area: actions;
        justify-self: start;
        width: max-content;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        gap: 8px;
    }

    .open-task-actions .open-task-done, .open-task-actions .btn {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        white-space: nowrap;
    }

    .open-task-actions .open-task-edit {
        flex: 0 0 auto;
    }

    /* Kalender-Tagesdetail: gleiches Prinzip */
    .calendar-events .event-item-editable {
        display: grid;
        grid-template-columns: 2rem minmax(0, 1fr);
        grid-template-areas:
            "icon content"
            ". actions";
        gap: 10px 10px;
    }

    .calendar-events .event-item-editable .event-icon {
        grid-area: icon;
    }

    .calendar-events .event-item-editable .event-content {
        grid-area: content;
        min-width: 0;
    }

    .calendar-events .event-item-editable .event-actions {
        grid-area: actions;
        justify-self: start;
        width: max-content;
        max-width: 100%;
        margin-left: 0;
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
    }

    .calendar-events .event-item-editable .event-done-btn, .calendar-events .event-item-editable .event-actions .btn {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
        white-space: nowrap;
    }

    .grow-detail-page .grow-detail-name {
        font-size: 1.9rem;
    }

    .grow-detail-page .grow-detail-strain {
        font-size: 1.1rem;
    }

    /* Genetik kompakter (nicht wieder vergroessern) */
    .grow-detail-page .grow-detail-lineage {
        font-size: 0.84rem;
        line-height: 1.3;
    }

    .grow-detail-page .grow-stats-large .stat-value {
        font-size: 2.5rem;
    }

    .grow-detail-page .grow-stats-large .stat-label {
        font-size: 1.05rem;
    }

    .grow-detail-page .grow-stats-large .stat-sublabel {
        font-size: 0.95rem;
    }

    .grow-detail-page .section-title {
        font-size: 0.95rem;
    }

    /* Timeline Handy: etwas groesser; kein Abstand Phasenname Datum */
    .grow-detail-page .timeline-stage-row {
        margin-bottom: 0 !important;
    }

    .grow-detail-page .timeline-stage {
        font-size: 0.98rem !important;
        font-weight: 650;
        line-height: 1.25;
    }

    .grow-detail-page .timeline-date {
        font-size: 0.85rem !important;
        line-height: 1.3;
        margin-top: 0 !important;
    }

    .grow-detail-page .timeline-duration {
        font-size: 0.8rem !important;
        margin-top: 4px;
    }

    .grow-detail-page .timeline-duration-text {
        font-size: inherit;
        line-height: 1.3;
    }

    .grow-detail-page .timeline-dot {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
        border-width: 1.5px;
    }

    .grow-detail-page .timeline-dot.active {
        box-shadow: 0 0 0 4px rgb(0 153 106 / 14%);
    }

    .grow-detail-page .timeline-item {
        gap: 12px;
        padding-bottom: 16px;
    }

    .grow-detail-page .timeline-item::before {
        left: 14px;
        top: 32px;
        width: 2px;
    }

    .grow-detail-page .timeline-edit-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
        padding: 0;
    }

    .grow-detail-page .timeline-edit-btn svg {
        width: 15px;
        height: 15px;
    }

    .grow-detail-page .stage-label,
    .grow-detail-page .stage-label.active {
        font-size: 0.75rem;
    }

    .grow-detail-page .stage-label-name {
        font-size: 0.75rem;
    }

    .grow-detail-page .stage-label-days {
        font-size: 0.65rem;
    }

    .grow-detail-page .stage-label-week {
        font-size: 0.62rem;
    }

    .grow-detail-page .stage-label-meta-empty {
        font-size: 0.65rem;
    }

    /*
* Letzte Journal-Eintraege (Pflanzen-Detail): gleiche Abstaende/Groessen wie Journal-Seite.
* (Frueher hier groessere Fonts + weniger Padding wirkte anders als #journalList.)
*/
    .grow-detail-page [data-env-section^="grow-journal-"]:not([data-env-section*="charts"]) .env-fold-body-inner {
        padding: 0;
    }

    .grow-detail-page [data-env-section^="grow-journal-"] .journal-list.journal-events {
        gap: 0;
    }

    .grow-detail-page .journal-events .event-item {
        /* Wie Journal-Seite (#journalList): wenig Seiten-Padding 3 Giess-Chips nebeneinander */
        padding: 16px 2px 22px;
        gap: 10px;
        border: 0;
        border-radius: 0;
        border-bottom: 1px solid var(--border);
        margin-bottom: 0;
        background: var(--bg-card);
        box-shadow: none;
        align-items: flex-start;
    }

    .grow-detail-page .journal-events .event-content {
        min-width: 0;
        flex: 1 1 auto;
    }

    .grow-detail-page .journal-events .event-item:last-child {
        border-bottom: 0;
    }

    .grow-detail-page .journal-events .event-item:hover,
    .grow-detail-page .journal-events .event-item-clickable:hover {
        background: var(--bg-hover);
        border-color: transparent;
        border-bottom-color: var(--border);
    }

    .grow-detail-page .journal-events .event-item:last-child:hover {
        border-bottom-color: transparent;
    }

    .grow-detail-page .journal-events .event-icon {
        font-size: 1.3rem;
        min-width: 1.3rem;
        width: 1.8rem;
        line-height: 1.2;
    }

    .grow-detail-page .journal-events .event-title {
        font-size: 1rem;
    }

    .grow-detail-page .journal-events .event-meta {
        font-size: 0.8rem;
        margin-top: 2px;
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .grow-detail-page .journal-events .event-meta-when + .event-meta-rest::before {
        content: none;
        margin: 0;
    }

    .grow-detail-page .journal-events .event-preview {
        font-size: 0.8rem;
        line-height: 1.5;
        margin-top: 4px;
        padding-top: 5px;
    }

    .grow-detail-page .journal-events .journal-measurements-preview,
    .grow-detail-page .journal-events .journal-entry-images {
        margin-top: 10px;
    }

    .grow-detail-page .journal-events .journal-action-chips,
    .grow-detail-page .journal-events .journal-entry-chips {
        margin-top: 6px;
        gap: 5px;
        flex-wrap: wrap;
    }

    .grow-detail-page .journal-events .journal-action-chip {
        flex: 0 0 auto;
        min-width: 0;
    }

    /* Ohne Werte: weniger Luft bis zur Border */
    .grow-detail-page .journal-events .event-item:not(:has(.journal-entry-chips)):not(:has(.journal-action-chips)):not(:has(.event-preview)):not(:has(.journal-entry-images)) {
        padding-bottom: 12px;
    }

    .grow-detail-page .card {
        padding: 18px;
    }

    .grow-detail-page .section-header .btn-primary {
        padding: 8px 14px;
        font-size: 0.9rem;
    }
}

/* Desktop */
@media (min-width: 768px) {
    .sidebar {
        transform: translateX(0);
        width: var(--sidebar-current-width);
    }

    /*
* Main-Spalte = Viewport minus Sidebar.
* Darin zentrieren .content und .topbar-inner beide max 1280px.
*/
    .main {
        margin-left: var(--sidebar-current-width);
        width: calc(100% - var(--sidebar-current-width));
        max-width: calc(100% - var(--sidebar-current-width));
    }

    .topbar,
    html.capacitor-native .topbar {
        left: var(--sidebar-current-width);
        right: auto;
        width: calc(100% - var(--sidebar-current-width));
        height: var(--topbar-height);
        min-height: var(--topbar-height);
        max-height: var(--topbar-height);
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        /* Gleicher Takt wie Sidebar-Breite sonst springt die Leiste vor dem Slide */
        transition: left var(--sidebar-anim), width var(--sidebar-anim), opacity 0.22s ease;
    }

    .topbar-inner {
        gap: 12px;
        width: min(100%, var(--content-max));
        max-width: var(--content-max);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--content-pad-x);  /* 32px, wie .content */
        padding-right: var(--content-pad-x);
    }

    .topbar-inner > .page-title,
    .topbar-inner > .topbar-actions {
        min-height: 0;
        height: 100%;
    }

    .calendar-thumb {
        width: var(--cal-chip, 30px);
        height: var(--cal-chip, 30px);
    }

    .calendar-photo-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 8px;
    }

    /* Hamburger nur mobil auch Capacitor (Sidebar ist permanent sichtbar) */
    .menu-btn,
    .topbar-inner > .menu-btn,
    html.capacitor-native .menu-btn,
    html.capacitor-native .topbar-inner > .menu-btn {
        display: none !important;
    }

    .bottom-nav {
        display: none;
    }

    .sidebar-collapse-btn {
        display: inline-flex;
    }

    html.sidebar-collapsed .sidebar-collapse-btn {
        display: none;
    }

    /*
* Expand absolut UEBER dem Footer - nimmt keinen Platz im Flex-Flow
*/
    html.sidebar-collapsed .sidebar-expand-btn {
        display: grid;
        grid-template-columns: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size));
        align-items: center;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 100%;
        width: 100%;
        height: calc(var(--sidebar-icon-size) + 28px);
        min-height: 0;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        justify-content: start;
        box-sizing: border-box;
        line-height: 0;
        font-size: 0;
        background: var(--bg-card);
    }

    html.sidebar-collapsed .sidebar-expand-btn svg {
        display: block;
        width: var(--sidebar-icon-size);
        height: var(--sidebar-icon-size);
        margin-left: var(--sidebar-icon-inset);
    }

    /*
* Eingeklappt: nur Labels ausblenden.
* Icon-Inset, Zeilenhoehe und Paddings bleiben wie aufgeklappt -> kein Springen.
*/
    html.sidebar-collapsed .sidebar-header {
        justify-content: flex-start;
        /* gleiches Padding wie aufgeklappt (.sidebar-header) */
        padding: 16px 10px 16px 10px;
    }

    html.sidebar-collapsed .logo {
        padding-left: 0;
        justify-content: center;
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        overflow: visible;
    }

    html.sidebar-collapsed .logo-word {
        display: none;
    }

    html.sidebar-collapsed .nav-item > span,
    html.sidebar-collapsed .theme-label,
    html.sidebar-collapsed .sidebar-user-meta {
        display: none !important;
    }

    html.sidebar-collapsed .nav-item {
        /* nur Text-Spalte weg - hoehe/Padding/Icon-margin-left wie .nav-item */
        grid-template-columns: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size));
        column-gap: 0;
        /* padding, flex, height, min/max-height: von .nav-item erben */
    }

    html.sidebar-collapsed .nav-item svg {
        margin-left: var(--sidebar-icon-inset);
    }

    /*
* Theme: Label weg, Icon-Inset/hoehe/Padding wie aufgeklappt.
*/
    html.sidebar-collapsed .theme-toggle {
        grid-template-columns: calc(var(--sidebar-icon-inset) + var(--sidebar-icon-size));
        column-gap: 0;
        /* padding: 0 12px 0 0 von .theme-toggle behalten */
    }

    html.sidebar-collapsed .theme-toggle svg.icon-sun,
    html.sidebar-collapsed .theme-toggle svg.icon-moon {
        margin-left: var(--sidebar-icon-inset);
    }

    html.sidebar-collapsed .sidebar-avatar-btn {
        grid-template-columns: calc(var(--sidebar-logo-inset) + var(--sidebar-logo-size));
        column-gap: 0;
        /* gleiches Padding/hoehe wie aufgeklappt */
    }

    html.sidebar-collapsed .sidebar-avatar {
        margin-left: var(--sidebar-logo-inset);
    }

    html.sidebar-collapsed .sidebar-footer {
        padding: 0;
        /* border-top bleibt - trennt Expand (dar ueber) von Theme */
    }

    html.sidebar-collapsed .sidebar {
        cursor: pointer;
    }

    html.sidebar-collapsed .sidebar a, html.sidebar-collapsed .sidebar button {
        cursor: pointer;
    }

    .content {
        padding: 24px 32px;
        padding-bottom: 96px;
    }

    /* Offene Sidebar: unter 900px 1 Spalte; eingeklappt ab 768 schon 2 */
    .grows-grid {
        grid-template-columns: 1fr;
    }

    html.sidebar-collapsed .grows-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .grow-card-day-value {
        font-size: 1.75rem;
    }

    .grow-card-day-phase-row {
        gap: 14px;
    }

    .phase-week-badge--lg {
        padding: 0.32em 0.85em 0.36em;
    }

    .phase-week-badge--lg .phase-week-badge-label {
        font-size: 1rem;
    }

    .phase-week-badge--lg .phase-week-badge-num {
        font-size: 1.15rem;
    }

    .grow-stats:not(.grow-stats-grid) {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .grow-stats.grow-stats-grid,
    .grow-detail-page .grow-stats.grow-stats-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 16px;
    }

    .grow-stats-large .stat-value {
        font-size: 2.75rem;
    }

    .grow-stats-large .stat-label {
        font-size: 1.05rem;
    }

    .grow-stats-large .stat-sublabel {
        font-size: 0.95rem;
    }

    .grow-detail-name {
        font-size: 2rem;
    }

    .timeline-stage {
        font-size: 1.2rem;
    }

    .timeline-date {
        font-size: 1rem;
    }

    .timeline-duration {
        font-size: 0.95rem;
    }

    .grow-detail-page .stage-label {
        font-size: 1rem;
    }

    .grow-detail-page .stage-label-days {
        font-size: 1rem;
    }

    .grow-detail-page .stage-label-week {
        font-size: 1rem;
    }

    .gallery-grid {
        gap: 12px;
    }

    .gallery-grid:not([class*="cols-"]) {
        grid-template-columns: repeat(3, 1fr);
    }

    .modal-overlay {
        align-items: center;
        padding: 20px;
    }

    .modal {
        border-radius: var(--radius-lg);
        animation: fadeIn 0.2s ease;
    }

    .toast-container {
        bottom: 24px;
    }
}

/*
* Handy Landscape: Topbar/Logo nach Desktop-Regeln (min-width 768) erneut
* auf exakt gleiche hoehe setzen sonst greifen 72px Desktop-Topbar.
*/
@media (orientation: landscape) and (max-height: 520px) {
    :root {
        --topbar-height: 44px;
        --sidebar-logo-size: 28px;
    }

    .topbar,
    html.capacitor-native .topbar {
        height: calc(var(--topbar-height) + var(--safe-top)) !important;
        min-height: calc(var(--topbar-height) + var(--safe-top)) !important;
        max-height: calc(var(--topbar-height) + var(--safe-top)) !important;
        padding-top: var(--safe-top) !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
    }

    .topbar-inner {
        height: var(--topbar-height) !important;
        min-height: var(--topbar-height) !important;
        max-height: var(--topbar-height) !important;
    }

    .topbar-inner > .page-title,
    .topbar-inner > .topbar-actions,
    html.capacitor-native .topbar-inner > .page-title,
    html.capacitor-native .topbar-inner > .topbar-actions {
        min-height: 0 !important;
        height: 100% !important;
        align-self: center !important;
    }

    .topbar-inner > .menu-btn,
    html.capacitor-native .topbar-inner > .menu-btn {
        align-self: center !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .sidebar-header,
    html.capacitor-native .sidebar-header,
    html.sidebar-collapsed .sidebar-header {
        height: calc(var(--topbar-height) + var(--safe-top)) !important;
        min-height: calc(var(--topbar-height) + var(--safe-top)) !important;
        max-height: calc(var(--topbar-height) + var(--safe-top)) !important;
        padding-top: var(--safe-top) !important;
        padding-bottom: 0 !important;
        box-sizing: border-box !important;
        align-items: center !important;
    }

    html.capacitor-native .content {
        padding-top: max(6px, calc(var(--content-top-gap, 14px) * 0.45));
    }

    /* Dialog-Header Landscape: flach, kein doppeltes Safe-Top */
    html.capacitor-native .modal.modal-full-mobile,
    .modal.modal-full-mobile {
        padding-top: max(2px, env(safe-area-inset-top, 0px)) !important;
    }

    .modal-header {
        padding: 6px 12px !important;
        padding-left: max(12px, var(--safe-left)) !important;
        padding-right: max(8px, var(--safe-right)) !important;
        min-height: 0 !important;
    }

    .modal.modal-full-mobile .modal-header,
    html.capacitor-native .modal.modal-full-mobile .modal-header {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    .modal-title {
        font-size: 0.95rem !important;
        line-height: 1.2 !important;
    }

    .modal-close {
        width: 32px !important;
        height: 32px !important;
    }
}

/* Offene Sidebar: ab 900px 2 Spalten */
@media (min-width: 900px) {
    .grows-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    /* Eingeklappte Sidebar: 3 Spalten frueher */
    html.sidebar-collapsed .grows-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery-grid:not([class*="cols-"]) {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Offene Sidebar: 3 Spalten erst ab 1200px */
@media (min-width: 1200px) {
    .grows-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.env-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.env-card {
    display: grid;
    grid-template-columns: 96px 1fr auto;
    gap: 14px;
    align-items: center;
    padding: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), transform var(--transition), box-shadow var(--transition);
    text-align: left;
    width: 100%;
    color: inherit;
    position: relative;
}

.env-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.env-card:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Drag&Drop: Umgebung als Drop-Ziel */
.env-card.is-drop-target {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
}

.env-card.is-drop-over {
    border-style: solid;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, var(--bg-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
    transform: scale(1.01);
}

.env-card.is-drop-over .env-card-drop-hint {
    opacity: 1;
    transform: translateY(0);
}

.env-card-drop-hint {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    text-align: center;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: #fff;
    background: color-mix(in srgb, var(--accent) 78%, rgba(0, 0, 0, 0.55));
    border-radius: inherit;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.15s ease, transform 0.15s ease;
    pointer-events: none;
    z-index: 3;
}

.is-equip-dragging .env-card {
    cursor: copy;
}

.env-card-media {
    position: relative;
    width: 96px;
    height: 72px;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg-hover);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .env-card-media {
        height: 108px;
    }
}

.env-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.env-card-placeholder, .env-hero-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    background: linear-gradient(145deg, rgba(92, 184, 92, 0.15), rgba(92, 184, 92, 0.02));
}

.env-card.is-outdoor .env-card-placeholder, .env-hero.is-outdoor .env-hero-placeholder {
    background: linear-gradient(145deg, rgba(100, 160, 220, 0.2), rgba(100, 160, 220, 0.04));
}

.env-card.is-greenhouse .env-card-placeholder, .env-hero.is-greenhouse .env-hero-placeholder,
.dash-env-card.is-greenhouse .dash-env-card-placeholder {
    background: linear-gradient(145deg, rgba(140, 200, 100, 0.22), rgba(140, 200, 100, 0.04));
}

.env-kind-badge {
    position: absolute;
    left: 6px;
    bottom: 6px;
    padding: 4px 9px 4px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    letter-spacing: 0.02em;
}

.env-card-body {
    min-width: 0;
}

.env-card-title {
    font-size: 1.05rem;
    font-weight: 650;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
}

.env-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.env-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    background: var(--accent-muted);
    color: var(--text-secondary);
}

.env-card-arrow {
    font-size: 1.5rem;
    color: var(--text-muted);
    padding-right: 4px;
}

.env-back-btn {
    margin-bottom: 14px;
}

.env-hero {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    overflow: hidden;
}

.env-hero.is-outdoor {
    background: radial-gradient(ellipse at top right, rgba(100, 160, 220, 0.14), transparent 55%), var(--bg-card);
}

.env-hero-main {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.env-hero-media {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--bg-hover);
    display: flex;
    align-items: center;
    justify-content: center;
}

.env-hero-media img {
    width: 100%;
    height: 100%;
    /* 1:1 und andere Formate vollstaendig und mittig (kein Cover-Crop) */
    object-fit: contain;
    object-position: center center;
}

.env-hero-title-row {
    display: flex;
    align-items: center;
    gap: 10px 12px;
    margin-bottom: 8px;
    min-width: 0;
}

.env-hero-title-row .env-hero-title {
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.env-hero-badges {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.env-hero-title-row .env-hero-badges {
    margin-bottom: 0;
    margin-left: auto;
    flex: 0 0 auto;
}

.env-hero-badges .env-kind-badge {
    position: static;
    background: var(--accent-muted);
    color: var(--accent);
}

.env-hero-title {
    margin: 0 0 8px;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.env-hero-title-edit {
    cursor: pointer;
    border-radius: 6px;
    width: fit-content;
    max-width: 100%;
    transition: color var(--transition);
}

.env-hero-title-edit:hover {
    color: var(--accent);
}

.env-hero-title-edit:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.env-hero-notes {
    margin: 0 0 14px;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: pre-wrap;
}

.env-stat-tent {
    min-width: 0;
}

.env-stat-tent strong.env-stat-tent-name {
    font-size: 0.85rem;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    display: block;
    padding-bottom: 5px;
}

.env-stat-tent-metrics {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--text-secondary);
}

.env-hero-stats {
    display: flex;
    gap: 12px;
}

/* Handy: 2er-Grid; Zelt volle Breite; Strom-Kacheln wie die anderen Stats */
@media (max-width: 640px) {
    .env-hero-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .env-hero-stats .env-stat-tent {
        grid-column: 1 / -1;
    }
}

/* Aktuelle Werte (letztes Log) unter den Stat-Kacheln */
.env-hero-body .env-live {
    margin-top: 14px;
}

.env-live {
    padding: 25px 0px 0px 0px;
    border-radius: var(--radius);
    /* border: 1px solid var( - border); */
    /* background: color-mix(in srgb, var( - bg) 70%, transparent); */
}

.env-live-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: 6px 8px;
    margin-bottom: 10px;
    width: 100%;
}

.env-live-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.env-live-when {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Spinner direkt hinter Titel + Datum/Uhrzeit */
.env-live-loading {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 2px;
    flex-shrink: 0;
    line-height: 0;
    color: var(--text-muted);
}
.env-live-loading .spinner {
    color: var(--accent);
}
.env-live-loading[hidden] {
    display: none !important;
}
.env-live-wrap.is-live-loading .env-live-loading {
    display: inline-flex !important;
}
.env-live-loading--dash {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    z-index: 1;
}
.dash-env-live {
    position: relative;
}
.dash-env-live.is-live-loading {
    opacity: 0.72;
}
.spinner.spinner-xs {
    width: 14px;
    height: 14px;
    border-width: 2px;
    margin: 0;
}

.env-live-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.env-live-metric {
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(
    --bg-elevated);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    container-type: inline-size;
    container-name: env-metric;
}

/* Handy: Tap auf Werte-Kachel zeigt empfohlene Range (App-Tooltip) */
@media (hover: none) and (pointer: coarse) {
    .env-live-metric[data-tip],
    .grow-env-metric[data-tip],
    .env-stat-power[data-tip],
    .env-stat-energy[data-tip],
    .stat-card-energy[data-tip] {
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    .env-live-metric[data-tip]:active,
    .grow-env-metric[data-tip]:active,
    .env-stat-power[data-tip]:active,
    .env-stat-energy[data-tip]:active,
    .stat-card-energy[data-tip]:active {
        filter: brightness(1.08);
    }
}

.env-live-metric-label {
    font-size: 0.7rem;
    font-weight: 700;
    /* color: var( - c); */
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    color: var(--c);
    opacity: 1;
}

.env-live-metric-label-short {
    display: none;
}

.env-live-metric-label-full,
.env-live-metric-label-short {
    white-space: nowrap;
}

/* Narrow chip: Luftfeuchtigkeit -> RH, so value stays one line */
@container env-metric (max-width: 136px) {
    .env-live-metric-label[data-has-short] .env-live-metric-label-full {
        display: none;
    }
    .env-live-metric-label[data-has-short] .env-live-metric-label-short {
        display: inline;
    }
}

.env-live-metric-value-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    gap: 6px;
    min-width: 0;
    line-height: 1;
}

.env-live-metric-value {
    font-size: 1.05rem;
    font-weight: 750;
    color:  var(--c);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 0.22em;
    min-width: 0;
    white-space: nowrap;
    opacity: 1;
}

.env-live-metric-num {
    line-height: 1;
    font-variant-numeric: tabular-nums;
    opacity: 1;
}

.env-live-metric-unit {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    opacity: 1;
}

.env-live-trend {
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1;
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 1.05em;
    transform: translateY(-0.08em);
    opacity: 0.9;
    font-variant-numeric: tabular-nums;
    /* kein eigener Hit-Bereich ueber die ganze Kachel */
    pointer-events: none;
    user-select: none;
}
.env-live-trend.is-up {
    color: #2ecc71;
}
.env-live-trend.is-down {
    color: #e74c3c;
}
.env-live-trend.is-flat {
    color: var(--text-muted);
    opacity: 0.75;
}

.env-live-empty {
    font-size: 0.88rem;
    color: var(--text-secondary);
    padding: 4px 0;
}

.env-hero-grows {
    padding-top: 0px;
    border-top: 0px solid var(--border);
}

.env-hero-grows-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 5px;
}

.env-hero-grows-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
}

.env-hero-grows-empty {
    font-size: 0.88rem;
    color: var(--text-secondary);
}

.env-grows-in-hero {
    margin: 0;
}

/* Handy: Pflanzen- und Werte-Kacheln gleiche Breite, 3er-Raster */
@media (max-width: 640px) {
    .env-grows-in-hero.env-grows-grid,
    .env-hero-live .env-live-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .env-grows-in-hero .env-grow-chip,
    .env-hero-live .env-live-metric {
        min-width: 0;
        width: 100%;
        padding: 10px 8px;
        box-sizing: border-box;
    }

    /* 3-col phones: always use short labels (container query fallback) */
    .env-hero-live .env-live-metric-label[data-has-short] .env-live-metric-label-full {
        display: none;
    }
    .env-hero-live .env-live-metric-label[data-has-short] .env-live-metric-label-short {
        display: inline;
    }

    .env-hero-live .env-live-metric-value {
        font-size: 0.95rem;
        white-space: nowrap;
    }

    .env-hero-live .env-live-metric-num {
        font-size: 0.95rem;
    }

    .env-hero-live .env-live-metric-unit {
        font-size: 0.68rem;
    }

    .env-grows-in-hero .env-grow-chip-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.88rem;
    }

    .env-grows-in-hero .env-grow-chip-meta {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.72rem;
    }
}

/* Einklappbare Bereiche: Log, Ausr */
.env-fold {
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
}

.env-fold-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border-bottom: 1px solid transparent;
    background: #ffffff;
    transition: border-color 0.25s ease;
}

.env-fold:not(.is-collapsed) .env-fold-bar {
    border-bottom-color: var(--border);
}

.env-fold-toggle {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border: none;
    background: #ffffff;
    color: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: var(--radius);
}

/* Nie grau: auch beim Schliessen / Hover / Active weiss */
.env-fold-toggle:hover,
.env-fold-toggle:focus-visible,
.env-fold-toggle:active {
    background: #ffffff;
}

.env-fold-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

[data-theme="dark"] .env-fold-bar,
[data-theme="dark"] .env-fold-toggle,
[data-theme="dark"] .env-fold-toggle:hover,
[data-theme="dark"] .env-fold-toggle:focus-visible,
[data-theme="dark"] .env-fold-toggle:active {
    background: var(--bg-card);
}

.env-fold-chevron {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    background: var(--bg-hover);
    transition: transform 0.32s ease;
}

.env-fold-chevron svg {
    width: 16px;
    height: 16px;
}

.env-fold.is-collapsed .env-fold-chevron {
    transform: rotate(-90deg);
}

.env-fold-title {
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

/* Umgebung-Detail: Termine wie Umgebungslog (Header-Leiste inkl. + Termin) */
.env-open-tasks-anchor .open-tasks {
    margin-bottom: 16px;
}

.env-open-tasks-anchor .open-tasks--fold {
    overflow: visible;
    border: none;
    background: transparent;
}

.env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 4px 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: #ffffff;
    box-sizing: border-box;
}

[data-theme="dark"] .env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-bar {
    background: var(--bg-card);
}

.env-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-bar {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom-color: var(--border);
}

.env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-toggle,
.env-open-tasks-anchor .open-tasks.is-collapsed:not(.is-minimized) .open-tasks-toggle,
.env-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle,
.env-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:hover,
.env-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:focus-visible,
.env-open-tasks-anchor .open-tasks--fold .open-tasks-toggle {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    margin: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 12px 10px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    box-shadow: none;
    box-sizing: border-box;
}

.env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-header-right {
    display: contents;
}

.env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-toggle .section-title {
    padding-left: 0;
    font-weight: 700;
}

.env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-chevron {
    order: -1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    background: var(--bg-hover);
    transition: transform 0.32s ease;
}

.env-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-chevron svg {
    width: 16px;
    height: 16px;
}

.env-open-tasks-anchor .open-tasks.is-collapsed:not(.is-minimized) .open-tasks-chevron {
    transform: rotate(-90deg);
}

.env-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-chevron {
    transform: none;
}

.env-open-tasks-anchor .open-tasks-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 6px;
}

.env-open-tasks-anchor .open-tasks.is-minimized .open-tasks-bar,
.env-open-tasks-anchor .open-tasks.is-swiping.is-minimized .open-tasks-bar {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    justify-content: flex-end;
}

.env-open-tasks-anchor .open-tasks.is-minimized .open-tasks-header-actions {
    display: none;
    padding: 0;
}

/* Pflanzen-Detail: Termine analog Umgebung (gruener Rahmen, kein extra Kachel-HG) */
.grow-open-tasks-anchor .open-tasks {
    margin-bottom: 16px;
}

.grow-open-tasks-anchor .open-tasks--fold {
    margin-bottom: 0;
    overflow: visible;
    border: none;
    background: transparent;
}

.grow-open-tasks-anchor .open-tasks-bar {
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    background: transparent;
}

.grow-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-bar {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    transition: border-color var(--transition), background var(--transition);
}

.grow-open-tasks-anchor .open-tasks:not(.is-minimized) .open-tasks-bar:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.grow-open-tasks-anchor .open-tasks.is-collapsed:not(.is-minimized) .open-tasks-bar,
.grow-open-tasks-anchor .open-tasks.is-collapsed:not(.is-minimized) .open-tasks-bar:hover {
    border-color: var(--border);
    background: var(--bg-card);
}

.grow-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-bar,
.grow-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-bar:hover {
    margin-bottom: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-width: 1px;
    border-bottom-color: transparent;
    border-left-color: var(--open-tasks-frame);
    border-right-color: var(--open-tasks-frame);
    border-top-color: var(--open-tasks-frame);
    background: #ffffff;
    position: relative;
    z-index: 2;
}

[data-theme="dark"] .grow-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-bar,
[data-theme="dark"] .grow-open-tasks-anchor .open-tasks:not(.is-collapsed):not(.is-minimized) .open-tasks-bar:hover {
    background: var(--bg-card);
}

.grow-open-tasks-anchor .open-tasks--fold .open-tasks-toggle {
    flex: 1;
    min-width: 0;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 16px 10px 16px 14px;
    min-height: 60px;
    box-sizing: border-box;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.grow-open-tasks-anchor .open-tasks--fold .open-tasks-toggle:hover,
.grow-open-tasks-anchor .open-tasks--fold .open-tasks-toggle:focus-visible,
.grow-open-tasks-anchor .open-tasks--fold:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle,
.grow-open-tasks-anchor .open-tasks--fold:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:hover,
.grow-open-tasks-anchor .open-tasks--fold:not(.is-collapsed):not(.is-minimized) .open-tasks-toggle:focus-visible {
    border: none;
    background: transparent;
    box-shadow: none;
}

.grow-open-tasks-anchor .open-tasks--fold .open-tasks-toggle .section-title {
    padding-left: 0;
    font-weight: 700;
}

.grow-open-tasks-anchor .open-tasks--fold .open-tasks-chevron {
    order: -1;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
    background: var(--bg-hover);
    transition: transform 0.32s ease;
}

.grow-open-tasks-anchor .open-tasks--fold .open-tasks-chevron svg {
    width: 16px;
    height: 16px;
}

.grow-open-tasks-anchor .open-tasks--fold.is-collapsed .open-tasks-chevron {
    transform: rotate(-90deg);
}

.grow-open-tasks-anchor .open-tasks--fold:not(.is-collapsed) .open-tasks-chevron {
    transform: none;
}

.grow-open-tasks-anchor .open-tasks-header-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 10px;
}

.grow-open-tasks-anchor .open-tasks.is-minimized .open-tasks-bar,
.grow-open-tasks-anchor .open-tasks.is-swiping.is-minimized .open-tasks-bar {
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    justify-content: flex-end;
}

.grow-open-tasks-anchor .open-tasks.is-minimized .open-tasks-header-actions {
    display: none;
    padding: 0;
}

.grow-open-tasks-anchor .open-tasks-empty {
    background: var(--bg-card);
    padding: 14px 16px;
    color: var(--text-secondary);
    font-size: 0.9rem;
    border-left: 1px solid var(--open-tasks-frame);
    border-right: 1px solid var(--open-tasks-frame);
    border-bottom: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.env-fold-actions {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    padding-right: 14px;
}

/* Cycle-Buttons: Farben wie Ausruestung, Masse wie .btn-sm (+ Log / + Geraet) */
.env-fold-actions .equip-density-btn {
    height: auto;
    min-height: 0;
    min-width: 0;
    padding: 6px 12px;
    font-size: 0.8rem;
    line-height: 1.2;
}

.env-fold-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.env-fold.is-collapsed .env-fold-body {
    grid-template-rows: 0fr;
}

.env-fold-body-inner {
    overflow: hidden;
    min-height: 0;
    padding: 14px;
    opacity: 1;
    transition: opacity 0.28s ease, padding 0.38s ease;
}

.env-fold.is-collapsed .env-fold-body-inner {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

@media (prefers-reduced-motion: reduce) {
    .env-fold-body, .env-fold-body-inner, .env-fold-chevron {
        transition: none;
    }
}

.env-stat {
    flex: 1;
    padding: 12px 14px;
    border-radius: var(--radius);
    background: var(    --bg-elevated);
    border: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.env-stat strong {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--accent);
}

.env-stat span {
    font-size: 0.78rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.env-stat .env-stat-tent-metrics span {
    font-size: 0.7rem;
}

/* Energie = gleiche Basis wie .env-stat / Strom aktuell (keine Extra-Groessen) */
.env-stat-energy {
    min-width: 0;
}

.env-stat-energy strong,
.env-stat-power strong {
    font-variant-numeric: tabular-nums;
}

.env-stat-power {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.env-stat-power::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--power-fill, 0%);
    background: var(--accent-muted);
    pointer-events: none;
    z-index: 0;
}

.env-stat-power > * {
    position: relative;
    z-index: 1;
}

.env-stat-power-max {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-muted);
    margin-top: 1px;
    text-transform: none;
    letter-spacing: 0;
}

.env-power-hint {
    margin: 0 0 10px;
    line-height: 1.35;
}

.equip-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}

.equip-card {
    display: grid;
    /* Form wie Zwischenansicht, etwas kleiner -deg 3 Info-Zeilen */
    grid-template-columns: 72px 1fr;
    gap: 14px;
    padding: 12px 14px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
    text-align: left;
    color: inherit;
    align-items: start;
}

[data-theme="dark"] .equip-card {
    border-color: var(--border);
}

.equip-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.equip-card.is-minimal {
    padding: 12px 14px;
    gap: 12px;
    align-items: center;
    grid-template-columns: 56px 1fr;
}

.equip-card.is-minimal .equip-card-icon {
    width: 56px;
    height: 56px;
    font-size: 1.55rem;
    border-radius: 12px;
}

.equip-card.is-minimal .equip-card-name {
    font-size: 0.98rem;
    margin-bottom: 1px;
    margin-top: 1px;
}

.equip-card.is-minimal .equip-card-brand {
    margin-bottom: 0;
}

.equip-grid.is-minimal {
    gap: 10px;
}

#envEquipDensityCycle {
    margin-right: 2px;
}

/* Voll/Minimal und Graphen-Zeitraum nur bei aufgeklapptem Abschnitt */
.env-fold.is-collapsed #envEquipDensityCycle,
.env-fold.is-collapsed #envChartHoursCycle {
    display: none;
}

/* Liste: Form wie Zwischenansicht, ~hoehe von Name+Marke+Typ */
.equip-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 14px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.85rem;
    line-height: 1;
    background: var(--accent-muted);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Geraete-SVG: optisch mittig in der Icon-Flaeche */
.equip-type-svg {
    display: block;
    width: 58%;
    height: 58%;
    margin: 0 auto;
    color: var(--accent);
    flex-shrink: 0;
}

.equip-mini-icon .equip-type-svg,
.equip-card-icon .equip-type-svg {
    width: 52%;
    height: 52%;
}

.equip-detail-type-icon .equip-type-svg {
    width: 56%;
    height: 56%;
}

/* Gleiche Gr oe e/Rundung wie Icon; Bild deckt den Bereich ab */
.equip-card-icon.has-photo {
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.equip-card-icon.has-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.equip-form-preview {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
    margin-top: 10px;
    border: 1px solid var(--border);
    background: var(--accent-muted);
}

.equip-form-preview.is-clickable {
    cursor: zoom-in;
}

.equip-form-preview.is-clickable:hover {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.equip-form-preview.is-clickable:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.seed-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.seed-grid.cols-1 {
    grid-template-columns: 1fr;
}

.seed-grid.cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Samen: Spalten-Cycle nur Desktop */
#seedColsCycle {
    display: none;
}

@media (min-width: 768px) {
    #seedColsCycle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* Handy: immer 1 Spalte (Umschalter ausgeblendet) */
@media (max-width: 767px) {
    .seed-grid,
    .seed-grid.cols-1,
    .seed-grid.cols-3 {
        grid-template-columns: 1fr;
    }
}

.seed-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
    align-items: stretch;
}

.seed-card:hover,
.seed-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    background: var(--bg-hover);
    outline: none;
}

.seed-card-top {
    display: flex;
    gap: 16px;
    align-items: center;
    min-width: 0;
}

/* Icon + Stain erhalb der Textspalte, damit Strain-Zeile flach bleibt) */
.seed-card-media {
    position: relative;
    flex-shrink: 0;
    width: 68px;
    height: 68px;
}

.seed-card-icon {
    width: 68px;
    height: 68px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    background: var(--accent-muted);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.seed-card-icon.has-photo {
    border-radius: 14px;
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.seed-card-icon.has-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.seed-card-icon .ui-icon-svg-cannabis {
    width: 1.7rem;
    height: 1.7rem;
    display: block;
    overflow: hidden;
    color: var(--accent);
}

/* Strain hoehe (~68px) */
.seed-card-body {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: auto;
    max-height: 100%;
}

.seed-card-qty {
    position: absolute;
    right: -4px;
    bottom: -4px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.95rem;
    height: 1.45rem;
    padding: 0 6px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--accent) 22%, var(--bg-card));
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    color: var(--accent);
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}

.seed-card-qty-num {
    font-size: 0.95rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.seed-card-qty.has-reserved {
    flex-direction: row;
    height: auto;
    min-height: 1.45rem;
    padding: 3px 6px 2px;
    gap: 0;
}

.seed-card-qty-reserved {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--accent);
    line-height: 1;
    padding-left: 3px;
}

.seed-card-reserved-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--accent) 70%, var(--text-secondary));
}

.seed-detail-reserved {
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.seed-history {
    margin-top: 8px;
    padding: 14px 12px 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 50%, var(--bg-card));
}

.seed-history-intro {
    margin: 0 0 10px;
    font-size: 0.8rem;
}

.seed-history-empty {
    margin: 0;
    padding: 16px 12px !important;
    text-align: left !important;
}

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

.seed-card-history-hint {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
}

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

.seed-history-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 40%, var(--bg-card));
}

.seed-history-item-main {
    flex: 1;
    min-width: 0;
}

.seed-history-type {
    font-weight: 650;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.seed-history-delta {
    font-size: 0.8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.seed-history-delta.is-plus {
    color: color-mix(in srgb, #3dba6b 80%, var(--text));
}

.seed-history-delta.is-minus {
    color: color-mix(in srgb, #e06c6c 85%, var(--text));
}

.seed-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 6px;
    margin-top: 2px;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.seed-history-note {
    margin-top: 4px;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.seed-history-del {
    flex-shrink: 0;
    opacity: 0.7;
}

.seed-history-del:hover {
    opacity: 1;
}

/* Handy: Verlauf-Eintraege ohne Kachel-Rahmen, nur Trennstrich */
@media (max-width: 767px) {
    .seed-history-list {
        gap: 0;
    }

    .seed-history-item {
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 0;
        padding: 14px 2px;
        background: transparent !important;
        box-shadow: none;
    }

    .seed-history-item:last-child {
        border-bottom: 0 !important;
    }
}

.seed-card-strain {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 650;
    line-height: 1.15;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.seed-card-breeder {
    font-size: 0.8rem;
    line-height: 1.15;
    color: var(--text-secondary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Typ / Art / Genetik: eigene Zeile, volle Kartenbreite, linksbuendig */
.seed-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    margin: 0;
    padding: 0;
    align-self: stretch;
}

.seed-meta-chip {
    display: inline-flex;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--bg) 70%, var(--border));
    border: 1px solid var(--border);
}

.seed-card-stats,
.seed-card-date {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.seed-card-shop {
    display: inline-block;
    margin-top: 0;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.15;
    color: var(--accent);
    text-decoration: none;
    align-self: flex-start;
    display: none;
}

.seed-card-shop:hover {
    text-decoration: underline;
}

.seed-card-notes {
    display: none; /* in der Karte vorerst ausgeblendet */
    margin: 8px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}

/* Handy connected lists - NACH Basis-Styles (sonst greifen gap/radius der Kacheln). Uebersicht + Umgebungen + Pflanzen */
@media (max-width: 767px) {
    .seed-grid,
    .seed-grid.cols-1,
    .seed-grid.cols-3 {
        gap: 0 !important;
        grid-template-columns: 1fr;
    }

    .seed-grid .seed-card {
        margin: 0 !important;
        border-radius: 0 !important;
        border: 1px solid var(--border) !important;
        border-bottom: none !important;
        padding: 14px 16px;
        background: var(--bg-card) !important;
        box-shadow: none !important;
        gap: 10px;
    }

    .seed-grid .seed-card:first-child {
        border-top-left-radius: var(--radius-lg) !important;
        border-top-right-radius: var(--radius-lg) !important;
    }

    .seed-grid .seed-card:last-child {
        border-bottom: 1px solid var(--border) !important;
        border-bottom-left-radius: var(--radius-lg) !important;
        border-bottom-right-radius: var(--radius-lg) !important;
    }

    .seed-grid .seed-card:only-child {
        border-radius: var(--radius-lg) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .seed-grid .seed-card:hover,
    .seed-grid .seed-card:focus-visible {
        border-color: var(--border) !important;
        border-bottom-color: transparent !important;
        background: var(--bg-hover) !important;
        outline: none;
        z-index: 1;
        position: relative;
    }

    .seed-grid .seed-card:last-child:hover,
    .seed-grid .seed-card:last-child:focus-visible {
        border-bottom-color: var(--border) !important;
    }
}

/* Samen-Inventar: Header mit Spaltenwahl */
.seeds-inventory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.seeds-inventory-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px 14px;
    min-width: 0;
}

.seeds-inventory-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.seeds-inventory-meta {
    flex-shrink: 0;
    margin: 0;
    padding: 0;
    font-size: 0.88rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
}

/* Samen-Detail (Zwischenansicht) */
.seed-detail {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/*
* Steckbrief (Samen / Ausruestung) im Modal:
* Handy: Randabstand wie Content-Kacheln (Body-Pad 20px ausgleichen).
* Desktop: Tabelle/Notes/Historie fluchten mit Foto/Icon (gleiche linke Kante).
*/
@media (max-width: 767px) {
    .modal .seed-detail .seed-detail-list,
    .modal .seed-detail .seed-detail-notes,
    .modal .seed-detail .seed-history-list,
    .modal .seed-detail .seed-history-empty {
        margin-left: calc(var(--content-pad-x) - 20px);
        margin-right: calc(var(--content-pad-x) - 20px);
    }
}

@media (min-width: 768px) {
    .modal .seed-detail {
        gap: 12px;
        width: 100%;
    }

    .modal .seed-detail .seed-detail-hero {
        align-items: flex-start;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Linke Kante = Icon/Foto; kein Extra-Indent wie auf dem Handy */
    .modal .seed-detail .seed-detail-list,
    .modal .seed-detail .seed-detail-notes,
    .modal .seed-detail .seed-history-list,
    .modal .seed-detail .seed-history-empty {
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .modal .seed-detail .seed-detail-copy-bar {
        margin-left: 0;
        margin-right: 0;
        width: 100%;
    }
}

.seed-detail-hero {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.seed-detail-photo {
    width: 88px;
    height: 88px;
    border-radius: 16px;
    object-fit: cover;
    object-position: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: var(--accent-muted);
    display: block;
}

.seed-detail-photo.is-clickable {
    cursor: zoom-in;
}

.seed-detail-photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}

.seed-detail-photo-placeholder .ui-icon-svg-cannabis {
    width: 2.5rem;
    height: 2.5rem;
    display: block;
    overflow: hidden;
    color: var(--accent);
    opacity: 0.85;
}

.seed-detail-hero-text {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.seed-detail-strain {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.25;
    overflow-wrap: anywhere;
    color: var(--text-secondary);
}

.seed-detail-breeder {
    font-size: 0.95rem;
    color: var(--text-secondary);
}

.seed-detail-qty-badge {
    display: inline-flex;
    gap: 6px;
    margin-top: 0px;
    padding: 2px 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
    color: var(--accent);
    align-self: flex-start;
    align-items: baseline;
}

.seed-detail-qty-num {
    font-size: 1rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.seed-detail-qty-unit {
    font-size: 0.8rem;
    font-weight: 600;
    opacity: 0.9;
}

.seed-detail-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--bg);
}

.seed-detail-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

.seed-detail-row:last-child {
    border-bottom: none;
}

.seed-detail-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.seed-detail-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: right;
    overflow-wrap: anywhere;
}

.seed-detail-shop-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}

.seed-detail-shop-link:hover {
    text-decoration: underline;
}

.seed-detail-notes {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--bg);
}

/* Steckbrief kopieren / als neu: unter Infos/Hinweis, rechts */
.seed-detail-copy-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 2px;
}

.seed-detail-copy-bar .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.seed-detail-copy-bar .btn svg {
    flex-shrink: 0;
}

.seed-detail-notes-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
}

.seed-detail-notes-body {
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Ger aete-Zwischenansicht (nutzt seed-detail Layout) */
.equip-detail-type-icon {
    font-size: 2rem;
    line-height: 1;
}

/* Typ-Label in Zwischenansicht = gleiche Pill wie Inventar-Liste (voll), ohne Icon */
.equip-detail .equip-detail-type-label,
.equip-detail .equip-type-pill {
    align-self: flex-start;
    margin-top: 2px;
}

.seed-form-preview {
    display: block;
    width: 68px;
    height: 68px;
    border-radius: 14px;
    object-fit: cover;
    object-position: center;
    margin-top: 10px;
    border: 1px solid var(--border);
    background: var(--accent-muted);
}

.seed-form-preview.is-clickable {
    cursor: zoom-in;
}

.seed-form-preview.is-clickable:hover {
    outline: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: 2px;
}

.equip-card-type {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin-bottom: 0px;
}

.equip-card-name {
    margin: 1px 0 1px;
    font-size: 0.98rem;
    font-weight: 650;
}

.equip-card-brand {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.equip-card-specs {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.equip-card-notes {
    margin: 10px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.4;
    /* Nur eine Zeile in der Karte voller Text in der Zwischenansicht */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
}

.equip-inventory-header {
    align-items: center;
    gap: 12px;
    flex-wrap: nowrap;
}

/* Wrapper: Inventar-Zeile + aufklappbare Geraete-Zuordnung */
.equip-inventory-pin-bar {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.equip-inventory-pin-bar .equip-inventory-header {
    margin-bottom: 0;
}

.equip-env-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 0 0;
}

.equip-env-filters .filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equip-env-filters .filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border);
}

.equip-env-filters .filter-chip.active {
    background: var(--accent-muted);
    color: var(--accent);
    border-color: var(--border);
    box-shadow: none;
}

.equip-env-filters .filter-chip.active:hover {
    border-color: var(--accent);
}

.equip-env-filter-empty {
    margin-top: 12px;
    text-align: center;
}

/* Platzhalter, wenn Pin-Bar position:fixed (Desktop) verhindert Layout-Sprung */
.equip-inventory-header-spacer {
    display: none;
    flex-shrink: 0;
    pointer-events: none;
}

/*
* Desktop: gesamte Leiste (Header + Zuordnen) per position:fixed unter der Topbar.
* left/width/height setzt JS ueber CSS-Variablen.
*/
@media (min-width: 768px) {
    .equip-inventory-pin-bar.is-pinned {
        position: fixed;
        top: var(--topbar-offset);
        /* Wie .topbar: folgt Sidebar-Breite per CSS, nicht per Pixel-JS */
        left: var(--sidebar-current-width);
        right: 0;
        width: auto;
        z-index: 40;
        margin: 0;
        padding: 10px 0 12px;
        box-sizing: border-box;
        background: var(--bg);
        border-bottom: 1px solid var(--border);
        box-shadow: 0 6px 14px color-mix(in srgb, var(--bg) 70%, transparent);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        max-height: calc(100dvh - var(--topbar-offset) - 12px);
        /* Keine eigene Scrollbar an der Leiste (sonst 2. Balken beim Aufklappen) */
        overflow: hidden;
        transition: left var(--sidebar-anim), opacity 0.22s ease;
        opacity: 1;
        pointer-events: auto;
        align-items: stretch;
    }

    html.topbar-hidden .equip-inventory-pin-bar.is-pinned {
        opacity: 0;
        pointer-events: none;
    }

    html.equip-assign-lock-chrome.topbar-hidden .equip-inventory-pin-bar.is-pinned {
        opacity: 1;
        pointer-events: auto;
    }

    .equip-inventory-pin-bar.is-pinned > .equip-inventory-header,
    .equip-inventory-pin-bar.is-pinned > .equip-assign-panel {
        width: min(100%, var(--content-max));
        max-width: var(--content-max);
        margin-left: auto;
        margin-right: auto;
        padding-left: var(--content-pad-x);
        padding-right: var(--content-pad-x);
        box-sizing: border-box;
    }

    .equip-inventory-pin-bar.is-pinned .equip-inventory-header {
        margin-bottom: 0;
        flex-shrink: 0;
        padding-bottom: 2px;
    }

    .equip-inventory-pin-bar.is-pinned .equip-assign-panel.is-open {
        /* Nicht margin-Shorthand: sonst fallen margin-left/right:auto weg
           und die Kacheln stehen links an der Sidebar statt unter den Chips. */
        margin-top: 8px;
        margin-bottom: 2px;
        margin-left: auto;
        margin-right: auto;
    }

    /*
* Kachel-Bereich: grosszuegige max-height (1 Zeile / 2 Umgebungen sicher ohne Scroll).
* Scrollbalken nur mit .needs-scroll (JS), nicht pauschal overflow:auto.
*/
    .equip-inventory-pin-bar.is-pinned.has-assign-open:not(.is-assign-animating)
        .equip-assign-panel.is-open .equip-assign-panel-inner {
        /* Header-Zeile ~56px + Pin-Padding ~22px + kleine Luft */
        max-height: calc(100dvh - var(--topbar-offset) - 88px);
        overflow-x: hidden;
        overflow-y: hidden;
    }

    .equip-inventory-pin-bar.is-pinned.has-assign-open:not(.is-assign-animating)
        .equip-assign-panel.is-open .equip-assign-panel-inner.needs-scroll {
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }

    .equip-inventory-pin-bar.is-pinned.is-assign-animating .equip-assign-panel-inner {
        overflow: hidden !important;
        max-height: none;
    }

    /* Kompaktere Karten in der fixierten Zuordnen-Leiste 1 Zeile ohne Scroll */
    .equip-inventory-pin-bar.is-pinned .equip-assign-hint {
        margin: 0 0 8px;
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .equip-inventory-pin-bar.is-pinned .env-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        justify-content: stretch;
        align-items: stretch;
        gap: 10px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
    }

    .equip-inventory-pin-bar.is-pinned .env-card {
        flex: none;
        width: 100%;
        max-width: none;
        min-width: 0;
        padding: 10px;
        gap: 12px;
        grid-template-columns: 80px minmax(0, 1fr) auto;
    }

    .equip-inventory-pin-bar.is-pinned .env-card-media {
        width: 80px;
        height: 60px;
    }

    .equip-inventory-header-spacer.is-active {
        display: block;
        margin-top: calc(-1 * var(--content-pad-y));
        margin-bottom: 12px;
        height: var(--equip-pin-height, 56px);
    }

    [data-theme="light"] .equip-inventory-pin-bar.is-pinned {
        background: rgb(240 240 240 / 84%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    }

    [data-theme="dark"] .equip-inventory-pin-bar.is-pinned {
        background: rgb(10 10 10 / 90%);
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
    }
}

/* Mobile: normal im Fluss, kein Pin */
@media (max-width: 767px) {
    .equip-inventory-pin-bar.is-pinned {
        position: static;
        left: auto;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: transparent;
        border: none;
        box-shadow: none;
    }
    .equip-inventory-header-spacer {
        display: none !important;
    }
}

.equip-inventory-heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

.equip-inventory-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.equip-inventory-actions {
    display: flex;
    align-items: center;
    align-self: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.equip-inventory-actions .btn,
.equip-inventory-actions .equip-density-btn,
.equip-inventory-actions .equip-cols-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    min-height: 32px;
    line-height: 1;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
}

/* Spaltenwahl nicht durch .equip-cols-btn wieder einblenden (Portrait/Handy) */
.equip-inventory-actions .equip-cols-cycle {
    display: none;
}

/* Geraete zuordnen: Umgebungskacheln von oben ein-/ausklappen */
.equip-assign-panel {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    margin: 0;
    transition:
      grid-template-rows 0.35s ease,
      opacity 0.28s ease,
      margin 0.35s ease;
}

.equip-assign-panel.is-open {
    grid-template-rows: 1fr;
    opacity: 1;
    margin: 12px 0 20px;
}

.equip-assign-panel.no-anim {
    transition: none;
}

.equip-assign-panel-inner {
    min-height: 0;
    overflow: hidden;
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

.equip-assign-panel.is-open .equip-assign-panel-inner {
    overflow-x: hidden;
    overflow-y: visible;
}

.equip-assign-hint {
    margin: 0 0 10px;
}

.equip-assign-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: 16px;
}

#equipAssignToggleBtn[aria-expanded="true"] {
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 18%, var(--bg-hover));
}

/* Handy: Zuordnen per Drag-Drop entfaellt - Button ausblenden */
@media (max-width: 767px) {
    #equipAssignToggleBtn,
    #equipAssignPanel,
    .equip-dnd-hint,
    .equip-dnd-tip,
    .equip-assign-hint {
        display: none !important;
    }
}

/* Dichte / Spalten: ein Button zum Durchschalten (wie Galerie) */
.equip-density-toggle, .equip-cols-toggle {
    display: none; /* legacy Gruppen ersetzt durch Cycle-Buttons */
}

.equip-density-btn, .equip-cols-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 32px;
    min-width: 32px;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.equip-density-btn {
    padding: 0 12px;
    white-space: nowrap;
}

.equip-cols-btn {
    width: 36px;
    padding: 0;
}

/* Spalten-Cycle: Desktop */
.equip-cols-cycle {
    display: none;
}

.equip-density-btn:hover, .equip-cols-btn:hover {
    background: var(--bg-hover);
    color: var(--text);
}

.equip-density-btn.is-active, .equip-cols-btn.is-active,
.gallery-cols-btn.is-active,
.seed-cols-btn.is-active {
    background: var(--bg-hover);
    color: var(--accent);
    border-color: var(--border);
    box-shadow: none;
}
.equip-density-btn.is-active:hover, .equip-cols-btn.is-active:hover,
.gallery-cols-btn.is-active:hover,
.seed-cols-btn.is-active:hover {
    border-color: var(--accent);
}
.equip-density-btn:focus-visible, .equip-cols-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.equip-dnd-hint,
.equip-dnd-tip.form-tip--page {
    margin: -4px 0 14px;
}

.equip-dnd-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.no-equip-dnd .equip-dnd-hint,
.no-equip-dnd .equip-dnd-tip,
.no-equip-dnd .equip-mini-drag {
    display: none;
}

/* Handy ohne Drag: nur Inhalts-Spalte */
.no-equip-dnd .equip-mini-card {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    padding: 14px 14px 14px 12px;
}

.no-equip-dnd .equip-mini-head,
.no-equip-dnd .equip-mini-sub,
.no-equip-dnd .equip-mini-specs,
.no-equip-dnd .equip-mini-notes {
    grid-column: 1;
}

.equip-inventory-drop {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    padding: 0;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.equip-inventory-drop.is-drop-target {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    padding: 10px;
    background: color-mix(in srgb, var(--bg) 40%, transparent);
}

.equip-inventory-drop.is-drop-over {
    border-style: solid;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.equip-inventory-drop-hint {
    display: none;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--accent);
    padding: 6px 8px 10px;
    letter-spacing: 0.01em;
}

.is-equip-dragging .equip-inventory-drop.is-drop-target .equip-inventory-drop-hint, .equip-inventory-drop.is-drop-over .equip-inventory-drop-hint {
    display: block;
}

/* 1-spaltige Voll-Ansicht: Hinweis-Text ausblenden (Details in Zwischenansicht) */
.equip-inventory-grid.cols-1.is-full .equip-mini-notes {
    display: none;
}

.equip-inventory-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
    /* 1-Spalte / Mobile: variable H */
}

/* Explizite Spalten (Desktop-Umschalter + mobile Default 1) */
.equip-inventory-grid.cols-1 {
    grid-template-columns: 1fr;
}

.equip-inventory-grid.cols-2 {
    grid-template-columns: 1fr;
}

.equip-inventory-grid.cols-3 {
    grid-template-columns: 1fr;
}

.equip-mini-card {
    position: relative;
    display: grid;
    /* drag | inhalt */
    grid-template-columns: 16px minmax(0, 1fr);
    align-items: start;
    column-gap: 8px; /* Handy: kompakt */
    row-gap: 8px;
    width: 100%;
    height: auto;
    min-height: 0;
    padding: 14px 14px 14px 8px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: inherit;
    text-align: left;
    cursor: pointer; /* cursor: pointer - Link-Hand: Eintrag oeffnen */
    box-sizing: border-box;
    user-select: none;
    touch-action: pan-y;
    transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), opacity var(--transition), transform var(--transition);
}

/* Geraete zuordnen: Umgebungskacheln von oben ein-/ausklappen */
.equip-dnd-enabled.is-equip-assigning .equip-mini-card {
    cursor: grab;
}

.equip-dnd-enabled.is-equip-assigning .equip-mini-card:active {
    cursor: grabbing;
}

.equip-dnd-enabled.is-equip-assigning .equip-mini-card * {
    cursor: inherit;
}

.equip-mini-card-ghost {
    cursor: grabbing !important;
    border-color: var(--accent) !important;
    background: var(--bg-card) !important;
}

.equip-mini-card-ghost .equip-mini-sub,
.equip-mini-card-ghost .equip-mini-brand,
.equip-mini-card-ghost .equip-mini-specs,
.equip-mini-card-ghost .equip-mini-notes {
    display: none !important;
}

.equip-mini-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.equip-mini-card.is-unassigned {
    border-style: dashed;
    border-color: color-mix(in srgb, var(--border) 70%, var(--text-muted));
}

.equip-mini-card.is-dragging {
    opacity: 0.45;
    transform: scale(0.98);
}

.equip-mini-drag {
    grid-column: 1;
    grid-row: 1 / -1;
    align-self: center;
    width: 16px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    cursor: inherit;
    opacity: 0.65;
}

.equip-mini-card:hover .equip-mini-drag,
.equip-mini-card.is-dragging .equip-mini-drag {
    opacity: 1;
    color: var(--text-secondary);
}

.equip-dnd-enabled.is-equip-assigning .equip-mini-card.is-dragging .equip-mini-drag {
    cursor: grabbing;
}

/* Zwei Spalten: Icon | Name + Marke + Typ - Form wie Detail, ~3 Zeilen hoch */
.equip-mini-head {
    grid-column: 2;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 14px;
    align-items: center;
    min-width: 0;
}

.equip-mini-icon {
    width: 72px;
    height: 72px;
    min-height: 72px;
    align-self: center;
    border-radius: 14px;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-muted);
    font-size: 1.85rem;
    line-height: 1;
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    position: relative;
}

.equip-mini-icon,
.equip-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Gleiche Box wie Icon; Bild f uellt den Bereich */
.equip-mini-icon.has-photo {
    padding: 0;
    font-size: 0;
    line-height: 0;
}

.equip-mini-icon.has-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.equip-mini-title-block {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.equip-mini-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px 10px;
    min-width: 0;
    color: var(--text-secondary);
}

.equip-mini-name {
    margin: 0;
    flex: 1;
    min-width: 0;
    font-weight: 650;
    font-size: 0.95rem;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-right: 0;
}

/* Marke direkt unter dem Namen */
.equip-mini-brand {
    display: block;
    min-width: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Specs/Notes in der Text-Spalte (Icon bleibt vertikal mittig zur gesamten Spalte) */
.equip-mini-specs,
.equip-mini-notes {
    min-width: 0;
}

.equip-mini-title-block > .equip-mini-specs,
.equip-mini-title-block > .equip-mini-notes {
    margin-top: 2px;
}

.equip-mini-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    min-width: 0;
    min-height: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.equip-type-pill {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-secondary);
    background: var(--bg-hover);
    border: 1px solid var(--border);
    line-height: 1.3;
}

.equip-mini-specs {
    display: block;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    line-height: 1.4;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Hinweis: Voll-Ansicht */
.equip-mini-notes {
    display: none;
    margin: 0;
    padding: 0;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-muted);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Mobile (= 1 Spalte): Hinweise in Normal-Ansicht (Desktop-Layout / 1-Spalte) */
.equip-inventory-grid.is-normal .equip-mini-notes {
    display: block;
}

/* Handy: in Voll-Ansicht keinen Hinweis-Text in Listen/Karten (Details im Steckbrief) */
@media (max-width: 767px) {
    .equip-inventory-grid.is-full .equip-mini-notes,
    .equip-inventory-grid.is-normal .equip-mini-notes {
        display: none !important;
    }

    .equip-grid.is-full .equip-card-notes,
    .equip-card:not(.is-minimal) .equip-card-notes {
        display: none !important;
    }
}

.equip-env-pill {
    display: block;
    flex-shrink: 0;
    max-width: min(46%, 11rem);
    box-sizing: border-box;
    padding: 5px 8px 4px 8px;
    border-radius: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 32%, transparent);
}

/* Platzhalter h */
.equip-env-slot {
    display: none;
    flex-shrink: 0;
    width: 0;
    height: 0;
    visibility: hidden;
    pointer-events: none;
}

.equip-env-pill.is-outdoor {
    color: #e67e22;
    background: color-mix(in srgb, #e67e22 14%, transparent);
    border-color: color-mix(in srgb, #e67e22 32%, transparent);
}

.equip-env-pill.is-indoor {
    color: var(--text-secondary);
    background: var(--bg-hover);
    border-color: var(--border);
}

.equip-inventory-grid.is-minimal {
    gap: 8px;
}

/*
* Connected list NACH den Basis-gap-Regeln (sonst gewinnen gap:12px / 8px).
* Handy: immer gestapelt Desktop: nur 1-Spalte.
*/
@media (max-width: 767px) {
    /* Abstand Header (Minimal/Voll) zur ersten Karte */
    .equip-inventory-pin-bar {
        margin-bottom: 12px;
    }

    .equip-inventory-grid,
    .equip-inventory-grid.cols-1,
    .equip-inventory-grid.cols-2,
    .equip-inventory-grid.cols-3,
    .equip-inventory-grid.is-minimal,
    .equip-inventory-grid.is-full,
    .equip-inventory-grid.is-normal,
    .equip-inventory-grid.cols-1.is-minimal,
    .equip-inventory-grid.cols-1.is-full,
    .equip-inventory-grid.cols-1.is-normal,
    .equip-grid,
    .equip-grid.is-minimal,
    .equip-grid.is-full {
        gap: 0;
        row-gap: 0;
        column-gap: 0;
    }

    .equip-mini-card,
    .no-equip-dnd .equip-mini-card,
    .equip-inventory-grid .equip-mini-card,
    .equip-card,
    .equip-card.is-minimal {
        margin: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        box-shadow: none;
        /* negative margin zieht 1px-Luecken durch Subpixel/Stacking zu */
        margin-top: -1px;
    }

    .equip-mini-card:first-child,
    .no-equip-dnd .equip-mini-card:first-child,
    .equip-inventory-grid .equip-mini-card:first-child,
    .equip-card:first-child,
    .equip-card.is-minimal:first-child {
        margin-top: 0;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    .equip-mini-card:last-child,
    .no-equip-dnd .equip-mini-card:last-child,
    .equip-inventory-grid .equip-mini-card:last-child,
    .equip-card:last-child,
    .equip-card.is-minimal:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .equip-mini-card:only-child,
    .no-equip-dnd .equip-mini-card:only-child,
    .equip-inventory-grid .equip-mini-card:only-child,
    .equip-card:only-child,
    .equip-card.is-minimal:only-child {
        margin-top: 0;
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    .equip-mini-card:hover,
    .equip-inventory-grid .equip-mini-card:hover,
    .equip-card:hover {
        border-color: var(--border);
        border-bottom-color: transparent;
        z-index: 1;
    }

    .equip-mini-card:last-child:hover,
    .equip-inventory-grid .equip-mini-card:last-child:hover,
    .equip-card:last-child:hover {
        border-bottom-color: var(--border);
    }
}

/* Desktop 1-Spalte Inventar: Stack-Gruppe (nach Basis-gap, damit gap:0 greift) */
@media (min-width: 768px) {
    .equip-inventory-grid.cols-1,
    .equip-inventory-grid.cols-1.is-minimal,
    .equip-inventory-grid.cols-1.is-full,
    .equip-inventory-grid.cols-1.is-normal {
        gap: 0;
        row-gap: 0;
        column-gap: 0;
    }

    .equip-inventory-grid.cols-1 .equip-mini-card,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card {
        margin: 0;
        margin-top: -1px;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        box-shadow: none;
    }

    .equip-inventory-grid.cols-1 .equip-mini-card:first-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:first-child {
        margin-top: 0;
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    .equip-inventory-grid.cols-1 .equip-mini-card:last-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .equip-inventory-grid.cols-1 .equip-mini-card:only-child,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:only-child {
        margin-top: 0;
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    .equip-inventory-grid.cols-1 .equip-mini-card:hover,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:hover {
        border-color: var(--border);
        border-bottom-color: transparent;
    }

    .equip-inventory-grid.cols-1 .equip-mini-card:last-child:hover,
    .equip-inventory-grid.cols-1.is-minimal .equip-mini-card:last-child:hover {
        border-bottom-color: var(--border);
    }
}

.equip-inventory-grid.is-minimal .equip-mini-card {
    min-height: 0;
    padding: 10px 12px 10px 8px;
    align-items: center;
    row-gap: 0;
}

.equip-inventory-grid.is-minimal .equip-mini-head {
    align-items: center;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 16px;
}

.equip-inventory-grid.is-minimal .equip-mini-icon {
    width: 44px;
    min-height: 44px;
    height: 44px;
    font-size: 1.25rem;
    padding: 0;
    align-self: center;
    border-radius: 12px;
}

.equip-inventory-grid.is-minimal .equip-mini-icon.has-photo {
    padding: 0;
}

.equip-inventory-grid.is-minimal .equip-mini-drag {
    height: 40px;
    width: 18px;
    opacity: 0.85;
    margin-top: 0;
    align-self: center;
    grid-row: 1;
}

.equip-inventory-grid.is-minimal .equip-mini-top {
    align-items: center;
    width: 100%;
}

.equip-inventory-grid.is-minimal .equip-mini-brand,
.equip-inventory-grid.is-minimal .equip-mini-sub,
.equip-inventory-grid.is-minimal .equip-mini-specs,
.equip-inventory-grid.is-minimal .equip-mini-notes,
.equip-inventory-grid.is-minimal .equip-env-slot {
    display: none !important;
}

.equip-inventory-grid.is-minimal .equip-env-pill {
    display: block;
}

@media (min-width: 768px) {
    .equip-cols-cycle,
    .equip-inventory-actions .equip-cols-cycle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .equip-inventory-grid.cols-1 {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .equip-inventory-grid.cols-1 .equip-mini-card {
        height: auto;
        min-height: 0;
    }

    .equip-inventory-grid.cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .equip-inventory-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
    }

    .equip-inventory-grid.cols-2 .equip-mini-card,
    .equip-inventory-grid.cols-3 .equip-mini-card {
        height: 100%;
    }

    .equip-inventory-grid.cols-2.is-normal .equip-mini-card,
    .equip-inventory-grid.cols-3.is-normal .equip-mini-card,
    .equip-inventory-grid.cols-2.is-full .equip-mini-card,
    .equip-inventory-grid.cols-3.is-full .equip-mini-card {
        min-height: 96px;
    }

    /* Desktop Voll: Hinweise nur in 1-Spalte */
    .equip-inventory-grid.is-normal.cols-2 .equip-mini-notes,
    .equip-inventory-grid.is-normal.cols-3 .equip-mini-notes,
    .equip-inventory-grid.is-full.cols-2 .equip-mini-notes,
    .equip-inventory-grid.is-full.cols-3 .equip-mini-notes {
        display: none;
    }

    .equip-inventory-grid.is-normal.cols-1 .equip-mini-notes,
    .equip-inventory-grid.is-full.cols-1 .equip-mini-notes {
        display: none;
    }

    .equip-inventory-grid.cols-1 .equip-mini-top,
    .equip-inventory-grid.cols-2 .equip-mini-top {
        align-items: flex-start;
    }

    .equip-inventory-grid.cols-1 .equip-env-pill,
    .equip-inventory-grid.cols-2 .equip-env-pill {
        margin-left: auto;
    }

    .equip-inventory-grid.cols-3 .equip-mini-top {
        flex-wrap: wrap;
    }

    .equip-inventory-grid.cols-3 .equip-env-pill {
        max-width: min(100%, 11rem);
        width: fit-content;
        order: 3;
        flex-basis: auto;
        margin-left: 0;
        margin-top: 2px;
        margin-bottom: -6px;
    }

    .equip-inventory-grid.cols-3.is-minimal .equip-mini-top {
        flex-wrap: nowrap;
    }

    .equip-inventory-grid.cols-3.is-minimal .equip-env-pill {
        flex-basis: auto;
        order: 0;
        max-width: min(46%, 9rem);
        margin-top: 0;
        margin-left: auto;
    }

    /* Desktop: Icon wie Zwischenansicht, mehr Abstand zum Text */
    .equip-mini-card {
        grid-template-columns: 18px minmax(0, 1fr);
        column-gap: 10px;
        row-gap: 8px;
        padding: 16px 16px 14px 10px;
    }

    .equip-mini-head {
        grid-template-columns: 72px minmax(0, 1fr);
        column-gap: 16px;
    }

    .equip-mini-icon {
        width: 72px;
        height: 72px;
        min-height: 72px;
        font-size: 1.85rem;
        border-radius: 14px;
        padding: 0;
    }
}

@media (min-width: 1100px) {
    .equip-mini-card {
        padding: 16px 16px 14px 12px;
    }

    .equip-mini-head {
        column-gap: 16px;
    }

    .equip-mini-icon {
        width: 72px;
        height: 72px;
        min-height: 72px;
        font-size: 1.85rem;
    }

    .equip-inventory-grid.is-minimal .equip-mini-card {
        padding: 10px 14px 10px 10px;
    }

    .equip-inventory-grid.is-minimal .equip-mini-head {
        column-gap: 16px;
    }

    .equip-inventory-grid.is-minimal .equip-mini-icon {
        width: 44px;
        min-height: 44px;
        height: 44px;
        font-size: 1.25rem;
        border-radius: 12px;
        padding: 0;
    }
}

.env-grows-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.env-grow-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 12px 16px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(    --bg-elevated);
    text-decoration: none;
    color: inherit;
    min-width: 140px;
    transition: border-color var(--transition), background var(--transition);
}

[data-theme="dark"] .env-grow-chip {
    border-color: var(--border);
}

.env-grow-chip:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.env-grow-chip-name {
    font-weight: 650;
}

.env-grow-chip-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.env-grow-checks {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 8px;
    max-height: none;
    overflow: visible;
}

.env-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    flex: 0 1 auto;
    max-width: 100%;
    min-width: 0;
}

.env-check span {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}

.env-check:hover {
    border-color: var(--accent);
}

.env-empty-block {
    text-align: center;
    color: var(--text-secondary);
    padding: 28px 16px;
}

.env-form-preview {
    margin-top: 10px;
    width: 100%;
    max-height: 160px;
    object-fit: cover;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

@media (min-width: 640px) {
    .env-hero-main,
    .env-hero.no-detail-image .env-hero-main {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .env-live-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equip-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 900px) {
    .env-list {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }

    .env-live-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .equip-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Geraete zuordnen: festes Raster (2, ab 1200px / eingeklappter Sidebar 3) */
.equip-assign-panel .env-list,
#envDropList {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.equip-assign-panel .env-card,
#envDropList > .env-card {
    flex: none;
    width: 100%;
    max-width: none;
    min-width: 0;
    box-sizing: border-box;
}

@media (min-width: 1024px) {
    html.sidebar-collapsed .equip-assign-panel .env-list,
    html.sidebar-collapsed #envDropList,
    html.sidebar-collapsed .equip-inventory-pin-bar.is-pinned .env-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .equip-assign-panel .env-list,
    #envDropList,
    .equip-inventory-pin-bar.is-pinned .env-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .env-live-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1200px) {
    .env-live-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1500px) {
    .env-live-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

@media (min-width: 1800px) {
    .env-live-grid {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

/* Umgebungs-Detail: Letzte Werte unter den Pflanzen, gleiche Chip-Breite */
@media (min-width: 641px) {
    .env-hero .env-grows-in-hero.env-grows-grid,
    .env-hero-live .env-live-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        justify-content: start;
    }
}

.env-hero-live {
    width: 100%;
    min-width: 0;
    align-self: stretch;
}

.env-hero-live:has(#envLiveSnapshot:empty) {
    display: none;
}

.env-hero-live .env-live {
    padding-top: 0;
}

.env-hero-live .env-live-head {
    justify-content: flex-start;
}

.env-hero-live .env-live-metric {
    min-width: 0;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 641px) {
    .env-hero-live .env-live-metric {
        padding: 12px 16px;
    }
}

/* Umgebungslog */
.env-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.env-chart-card {
    --env-chart-dot-stroke: #1a1a1a;
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.env-chart-card:hover {
    background: color-mix(in srgb, var(--c, var(--accent)) 8%, transparent);
}
[data-theme="light"] .env-chart-card {
    --env-chart-dot-stroke: #fff;
    background: linear-gradient(165deg, color-mix(in srgb, var(--c, var(--accent)) 12%, #fff) 0%, var(--bg-card) 50%);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.env-chart-head-row {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.env-chart-head {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    width: 100%;
    min-width: 0;
    padding: 14px 14px 12px 14px;
    border: none;
    background: transparent;
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.2s ease;
}

.env-chart-head:hover {
    /* background: color-mix(in srgb, var( - c, var( - accent)) 8%, transparent); */
}

.env-chart-head:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.env-chart-plot-btn {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: transparent;
    cursor: zoom-in;
    border-radius: var(--radius);
    color: inherit;
}

.env-chart-plot-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.env-chart-plot-btn:hover .env-chart-svg {
    filter: brightness(1.04);
}

.env-chart-swatch {
    width: 12px;
    height: 12px;
    border-radius: 4px;
    flex-shrink: 0;
    background: var(--c, var(--accent));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--accent)) 40%, transparent);
}

.env-chart-title-block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.env-chart-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
    line-height: 1.25;
}

.env-chart-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 0;
}

.env-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.env-chart-legend-line {
    width: 16px;
    height: 3px;
    border-radius: 2px;
    background: var(--c, var(--accent));
}

.env-chart-legend-latest strong {
    color: var(--text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.env-chart-chevron {
    flex-shrink: 0;
    margin-left: auto;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-hover);
    transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}

.env-chart-chevron svg {
    width: 16px;
    height: 16px;
}

.env-chart-card.is-collapsed .env-chart-chevron {
    transform: rotate(-90deg);
}

.env-chart-body {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.env-chart-card.is-collapsed .env-chart-body {
    grid-template-rows: 0fr;
}

.env-chart-body-inner {
    overflow: hidden;
    min-height: 0;
    padding: 0 12px 12px;
    opacity: 1;
    transition: opacity 0.28s ease, padding 0.38s ease;
}

.env-chart-card.is-collapsed .env-chart-body-inner {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.env-chart-svg {
    width: 100%;
    height: 176px;
    display: block;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.env-chart-svg-compact .env-chart-axis {
    stroke-width: 5px;
}

.env-chart-svg-compact {
    height: 188px;
    overflow: visible;
    background: none;
}

.env-chart-svg-detail {
    height: auto;
    min-height: 240px;
    max-height: min(52dvh, 420px);
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, var(--accent)) 14%, transparent), transparent 55%), color-mix(in srgb, var(--bg) 55%, transparent);
}

[data-theme="light"] .env-chart-svg {
    background: color-mix(in srgb, #f4f4f4 80%, transparent);
}

[data-theme="light"] .env-chart-svg-compact {
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, var(--accent)) 14%, transparent), transparent 58%), color-mix(in srgb, #f4f4f4 80%, transparent);
}

[data-theme="light"] .env-chart-svg-detail {
    background: radial-gradient(120% 80% at 50% 0%, color-mix(in srgb, var(--c, var(--accent)) 12%, transparent), transparent 55%), color-mix(in srgb, #f4f4f4 80%, transparent);
}

.env-chart-hit {
    cursor: crosshair;
    touch-action: none;
}

.env-chart-detail-scroll .env-chart-hit,
.env-chart-detail-scroll .env-chart-svg {
    touch-action: pan-x pinch-zoom;
}

.env-chart-crosshair {
    stroke: color-mix(in srgb, var(--c, var(--accent)) 55%, #fff);
    stroke-width: 1.25;
    stroke-dasharray: 4 4;
    pointer-events: none;
}

[data-theme="light"] .env-chart-crosshair {
    stroke: color-mix(in srgb, var(--c, var(--accent)) 65%, #000);
}

.env-chart-focus-dot {
    pointer-events: none;
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c, var(--accent)) 55%, transparent));
}

.env-chart-axis-time {
    font-size: 9px;
    fill: #9a9a9a;
    font-weight: 500;
}

[data-theme="light"] .env-chart-axis-time {
    fill: #777;
}

.env-chart-grid {
    stroke: rgba(255, 255, 255, 0.08);
    stroke-width: 1;
}

[data-theme="light"] .env-chart-grid {
    stroke: rgba(0, 0, 0, 0.07);
}

.env-chart-grid-base {
    stroke: rgba(255, 255, 255, 0.16);
}

[data-theme="light"] .env-chart-grid-base {
    stroke: rgba(0, 0, 0, 0.12);
}

.env-chart-axis {
    fill: #e8e8e8;
    /* font-size nur per SVG-Attribut (User-Units) CSS-font-size wuerde sie wieder klein machen */
    font-weight: 600;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-variant-numeric: tabular-nums;
    paint-order: stroke fill;
    stroke: var(--bg-elevated, #141414);
    stroke-width: 4px;
    stroke-linejoin: round;
}

[data-theme="light"] .env-chart-axis {
    fill: #333;
    stroke: var(--bg-card, #fff);
}

.env-chart-axis-y {
    font-weight: 600;
}

.env-chart-axis-x {
    fill: #d0d0d0;
    white-space: nowrap;
    font-weight: 600;
}

.env-chart-axis-x-time,
.env-chart-axis-x .env-chart-axis-x-time {
    font-weight: 500;
    fill: #b0b0b0;
}

[data-theme="light"] .env-chart-axis-x {
    fill: #444;
}

[data-theme="light"] .env-chart-axis-x-time,
[data-theme="light"] .env-chart-axis-x .env-chart-axis-x-time {
    fill: #555;
}

.env-chart-line {
    vector-effect: non-scaling-stroke;
}

/* Kompakt: feine Linie ohne harten Glow wirkt weicher skaliert */
.env-chart-line-compact {
    vector-effect: non-scaling-stroke;
    opacity: 1;
    filter: saturate(1.35) brightness(1.12);
}

[data-theme="light"] .env-chart-line-compact {
    filter: none;
    opacity: 0.96;
}

.env-chart-area {
    pointer-events: none;
}

/* Light: Flaechenfuellung der Uebersicht-Graphen kraeftiger (sonst zu blass) */
.env-chart-svg-compact .env-chart-fill-stop-top {
    stop-opacity: 0.5;
}
.env-chart-svg-compact .env-chart-fill-stop-bot {
    stop-opacity: 0.1;
}

/* Punkte: farbig (Metrik-Farbe), duenner heller/dunkler Ring fuer Kontrast - kein dicker non-scaling Stroke */
.env-chart-dot {
    fill: var(--dot-c, var(--c, var(--accent)));
    stroke: var(--dot-c, var(--c, var(--accent)));
    paint-order: stroke fill;
    filter: drop-shadow(0 0 0.6px rgba(0, 0, 0, 0.45));
}

.env-chart-dot-compact {
    opacity: 1;
    /* leichter Kontrast-Rand ueber paint-order + outer stroke imitation */
    stroke-width: 1.2;
    filter:
      saturate(1.25)
      drop-shadow(0 0 0.5px var(--env-chart-dot-stroke, #1a1a1a))
      drop-shadow(0 0 2.4px color-mix(in srgb, var(--dot-c, var(--c, var(--accent))) 75%, transparent));
}

[data-theme="light"] .env-chart-dot-compact {
    filter:
      drop-shadow(0 0 0.5px var(--env-chart-dot-stroke, #fff))
      drop-shadow(0 0 1.5px color-mix(in srgb, var(--dot-c, var(--c, var(--accent))) 55%, transparent));
}

.env-chart-dot-detail {
    opacity: 0.95;
    filter: drop-shadow(0 0 0.4px var(--env-chart-dot-stroke, #1a1a1a));
}

.env-chart-footer {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-top: 8px;
    padding: 0 2px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.env-chart-range {
    color: var(--text);
    opacity: 0.9;
}

/* Graph-Detailansicht (Modal) */
.env-chart-detail {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.env-chart-detail-hero {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.env-chart-detail-hero-main {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.env-chart-detail-hero-text {
    min-width: 0;
}

.env-chart-detail-swatch {
    margin-top: 0;
    width: 10px;
    height: 10px;
    flex-shrink: 0;
}

.env-chart-detail-kicker {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0;
}

.env-chart-detail-value {
    display: flex;
    align-items: baseline;
    gap: 6px;
    line-height: 1.1;
}

.env-chart-detail-value strong {
    font-size: 1.35rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    background: linear-gradient(135deg, var(--text) 30%, color-mix(in srgb, var(--c, var(--accent)) 75%, var(--text)));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

@supports not (background-clip: text) {
    .env-chart-detail-value strong {
        color: var(--text);
        background: none;
    }
}

.env-chart-detail-value span {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c, var(--accent));
}

/* Meta-Chips: gleicher Stil wie "Letzte Werte" (.env-live-metric) */
.env-chart-detail-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
}

.env-chart-meta-chip {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    padding: 5px 8px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.env-chart-meta-chip-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
}

.env-chart-meta-chip-value {
    font-size: 0.92rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    line-height: 1.2;
    word-break: break-word;
}

@media (min-width: 560px) {
    .env-chart-detail-hero {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .env-chart-detail-meta {
        flex: 1 1 auto;
        width: auto;
        max-width: min(100%, 420px);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.env-chart-detail-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

@media (min-width: 560px) {
    .env-chart-detail-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Stats-Chips: wie "Letzte Werte" */
.env-chart-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 7px 9px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    min-width: 0;
}

.env-chart-stat-label {
    display: block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text);
}

.env-chart-stat-value {
    display: block;
    font-size: 1.05rem;
    font-weight: 750;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    line-height: 1.2;
}

.env-chart-stat-value small {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--c, var(--accent));
    opacity: 0.85;
}

.env-chart-detail-toolbar {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    min-width: 0;
}

.env-chart-detail-range {
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.env-chart-detail-range-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 6px 10px;
    font-size: 0.85rem;
    font-weight: 600;
    height: 36px;
    box-sizing: border-box;
}

.env-chart-detail-zoom {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 2px;
    padding: 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 40%, var(--bg-card));
    height: 36px;
    box-sizing: border-box;
}

.env-chart-zoom-btn {
    min-width: 34px;
    height: 32px;
    padding: 0 10px;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    border-radius: 999px;
}

.env-chart-zoom-btn:disabled {
    opacity: 0.35;
    cursor: default;
}

.env-chart-zoom-label {
    min-width: 3.4em;
    margin: 0;
    padding: 4px 6px;
    border: none;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    text-align: center;
    font-size: 0.82rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-family: inherit;
    line-height: 1.2;
}

.env-chart-zoom-label:hover {
    color: var(--text);
    background: var(--bg-hover);
}

.env-chart-zoom-label:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

/* Rahmen: scrollbarer Graph + fixe Y-Achse links */
.env-chart-detail-frame {
    position: relative;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in srgb, var(--c, var(--border)) 28%, var(--border));
    background: var(--bg-card);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
    overflow: hidden;
}

.env-chart-y-axis-fixed {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
    width: var(--env-chart-y-w, 26px);
    pointer-events: none;
    overflow: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    /* deckender Hintergrund, kein Verlauf/Transparenz */
    background: var(--bg-card);
    border-right: 1px solid color-mix(in srgb, var(--c, var(--border)) 40%, var(--border));
}

.env-chart-y-axis-inner {
    position: relative;
    width: 100%;
    height: 100%;
}

.env-chart-y-tick {
    position: absolute;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    white-space: nowrap;
    padding: 0 1px;
    box-sizing: border-box;
}

[data-theme="light"] .env-chart-y-tick {
    color: #444;
}

.env-chart-detail-scroll {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x pinch-zoom;
    border-radius: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    /* Horizontale Scrollbar doppelt so hoch (bessere Touch-/Maus-Trefferflaeche) */
    scrollbar-width: auto;
    scrollbar-color: color-mix(in srgb, var(--c, var(--text-muted)) 55%, transparent) transparent;
    cursor: grab;
    user-select: none;
}

.env-chart-detail-scroll.is-pinching,
.env-chart-detail.is-pinching {
    touch-action: none;
    cursor: grabbing;
}

.env-chart-detail.is-pinching .env-chart-detail-scroll {
    touch-action: none;
}

.env-chart-detail-scroll::-webkit-scrollbar {
    height: 16px; /* thin (~8px) verdoppelt */
}

.env-chart-detail-scroll::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--bg) 70%, var(--bg-card));
    border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}

.env-chart-detail-scroll::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--c, var(--text-muted)) 50%, var(--border));
    border-radius: 8px;
    border: 3px solid transparent;
    background-clip: padding-box;
}

.env-chart-detail-scroll::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--c, var(--accent)) 55%, var(--border));
    background-clip: padding-box;
    border: 3px solid transparent;
}

.env-chart-detail-scroll.is-dragging {
    cursor: grabbing;
}

.env-chart-detail-scroll.is-dragging .env-chart-svg {
    pointer-events: none;
}

.env-chart-detail-plot {
    position: relative;
    min-width: 100%;
    background: transparent;
    height: auto;
    will-change: transform;
}

.env-chart-detail-plot .env-chart-svg {
    border-radius: 0;
    width: 100%;
    height: auto;
    min-height: 220px;
    max-height: min(52dvh, 400px);
    display: block;
    /* meet: Kreise/Schrift/Kurve nie verzerren */
    overflow: visible;
}

.env-chart-detail-plot .env-chart-svg-detail {
    min-height: 220px;
    max-height: min(52dvh, 400px);
}

.env-chart-detail-scroll.is-pinching {
    overflow: hidden;
}

.env-chart-tooltip {
    position: absolute;
    z-index: 2;
    min-width: 128px;
    max-width: min(280px, 85vw);
    width: max-content;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--c, var(--accent)) 35%, var(--border));
    background: color-mix(in srgb, var(--bg-elevated) 92%, transparent);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
    pointer-events: none;
    /* left/top in px relativ zum Plot (von JS gesetzt) */
    transform: translate(-50%, calc(-100% - 14px));
    transition: left 0.04s linear, top 0.04s linear;
}

/* Grossansicht: am body, fixed nicht von overflow abgeschnitten */
.env-chart-tooltip.env-chart-tooltip-float {
    position: fixed;
    z-index: 10060;
    max-width: min(300px, calc(100vw - 20px));
}

.env-chart-tooltip.is-right {
    transform: translate(calc(-100% + 8px), calc(-100% - 14px));
}

.env-chart-tooltip.is-left {
    transform: translate(-8px, calc(-100% - 14px));
}

.env-chart-tooltip.is-bottom {
    transform: translate(-50%, 16px);
}

.env-chart-tooltip.is-bottom.is-right {
    transform: translate(calc(-100% + 8px), 16px);
}

.env-chart-tooltip.is-bottom.is-left {
    transform: translate(-8px, 16px);
}

.env-chart-tooltip-when {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 4px;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.env-chart-tooltip-val {
    font-size: 1.05rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    letter-spacing: -0.02em;
}

.env-chart-tooltip-val span {
    font-size: 0.8rem;
    font-weight: 600;
    color: color-mix(in srgb, var(--c, var(--accent)) 80%, var(--text-secondary));
}

.env-chart-tooltip-notes {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid color-mix(in srgb, var(--c, var(--border)) 35%, var(--border));
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 240px;
}

.env-chart-tooltip-notes[hidden] {
    display: none !important;
}

.env-chart-tooltip.has-notes {
    max-width: min(280px, 70vw);
    min-width: 148px;
}

/* Messpunkt mit Hinweis: Markierungsring */
.env-chart-dot-has-note {
    filter: drop-shadow(0 0 2px color-mix(in srgb, var(--dot-c, var(--c, var(--accent))) 70%, transparent));
}

.env-chart-dot-note-ring {
    pointer-events: none;
    stroke-dasharray: 2.5 1.8;
    opacity: 0.95;
}

.env-chart-cursor .env-chart-focus-dot.has-note {
    stroke: #fff;
    stroke-width: 2;
    filter: drop-shadow(0 0 3px color-mix(in srgb, var(--c, var(--accent)) 80%, transparent));
}

[data-theme="light"] .env-chart-cursor .env-chart-focus-dot.has-note {
    stroke: color-mix(in srgb, var(--c, var(--accent)) 40%, #111);
}

@media (prefers-reduced-motion: reduce) {
    .env-chart-body, .env-chart-body-inner, .env-chart-chevron, .env-chart-tooltip {
        transition: none;
    }
}

/* Desktop/Handy: Log-Eintraege als Gruppe / ohne Kachel-Rahmen */
.env-log-panel {
    margin-top: 4px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
    overflow: hidden;
}

.env-log-panel-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg-elevated) 80%, var(--bg-card));
}

.env-log-live-loading {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    margin-left: auto;
}

.env-log-live-loading[hidden] {
    display: none !important;
}

.env-log-panel.is-live-loading .env-log-panel-list,
.env-log-panel.is-live-loading [data-env-log-list] {
    opacity: 0.72;
    transition: opacity 0.15s ease;
}

.env-log-panel.is-collapsed .env-log-panel-bar {
    border-bottom-color: transparent;
}

.env-log-panel-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: none;
    border-radius: var(--radius);
    background: transparent;
    color: inherit;
    cursor: pointer;
    text-align: left;
    transition: background 0.2s ease;
}

.env-log-panel-toggle:hover {
    background: var(--bg-hover);
}

.env-log-panel-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.env-log-panel-chevron {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    background: var(--bg-hover);
    transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}

.env-log-panel-chevron svg {
    width: 16px;
    height: 16px;
}

.env-log-panel.is-collapsed .env-log-panel-chevron {
    transform: rotate(-90deg);
}

.env-log-panel-title-wrap, .env-log-panel-toggle {
    font: inherit;
}

.env-log-panel-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text);
}

.env-log-panel-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.75rem;
    padding: 0.15em 0.55em;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--accent);
    background: var(--bg-hover);
    border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
}

/*
* Log-Eintraege aufklappen: KEINE grid-template-rows-hoehenanimation.
* Die animiert pro Frame das Layout aller Zeilen (Filter + bis zu 30 Rows)
* und wirkt bei vielen Eintraegen auch wenn nur eine Seite gerendert ist.
* Stattdessen: sofortige Hoehhe, kurzes Opacity-Fade + Chevron.
*/
.env-log-panel-body {
    display: grid;
    grid-template-rows: 1fr;
}

.env-log-panel.is-collapsed .env-log-panel-body {
    grid-template-rows: 0fr;
}

.env-log-panel-body-inner {
    overflow: hidden;
    min-height: 0;
    padding: 12px;
    opacity: 1;
    transition: opacity 0.12s ease;
}

.env-log-panel.is-collapsed .env-log-panel-body-inner {
    opacity: 0;
    padding-top: 0;
    padding-bottom: 0;
    /* Zuklappen sofort kein Fade ueber versteckte Zeilen */
    transition: none;
}

.env-log-list .env-log-row {
    /* Offscreen-Zeilen billiger layouten (bei langen Listen / Scroll) */
    content-visibility: auto;
    contain-intrinsic-size: auto 4.5rem;
}

.env-log-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
    padding-top: 4px;
}

.env-log-pager-top {
    margin-top: 0;
    margin-bottom: 8px;
    padding-top: 0;
    padding-bottom: 4px;
}

.env-log-pager-info {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    min-width: 6.5rem;
    text-align: center;
}

.env-log-pager .btn:disabled {
    opacity: 0.4;
    cursor: default;
}

/* Wie Journal: Suche + pro Seite sichtbar; restliche Filter per Fokus aufklappen */
.env-log-filters.journal-entry-filters-bar {
    margin-top: 0;
    margin-bottom: 12px;
    padding: 0;
    border: none;
    background: transparent;
}

.env-log-filters.has-active-filters .env-log-filter-primary .form-input {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
}

.env-log-filter-body.journal-filter-body {
    margin-top: 0;
}

.env-log-filters.is-collapsed .env-log-filter-body,
.env-log-filters.is-collapsed .journal-filter-body {
    display: none;
}

.env-log-filter-search .form-input {
    width: 100%;
}

.env-log-filter-row {
    display: grid;
    gap: 10px;
    width: 100%;
}

.env-log-filter-row .form-input,
.env-log-filter-row .form-select {
    min-width: 0;
    width: 100%;
}

/* Desktop: Zeitraum + Messwert nebeneinander */
.env-log-filter-expanded-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.env-log-filter-minmax-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.env-log-filter-min:disabled, .env-log-filter-max:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.env-log-filter-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.env-log-filter-result {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.env-log-filter-empty {
    text-align: center;
    padding: 20px 14px;
    font-size: 0.9rem;
    color: var(--text-secondary);
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg) 40%, transparent);
}

.env-log-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 0;
}

.env-log-panel .env-empty-block {
    margin: 0 12px 12px;
}

/* Leerer Zustand im aufgeklappten Log-Band (0 Eintraege) */
.env-log-filter-empty.env-log-empty-state {
    display: block;
    margin: 4px 0 0;
    padding: 14px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.45;
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    background: var(--bg-card);
}

.env-log-filter-empty.env-log-empty-state[hidden] {
    display: none !important;
}

.env-log-row {
    display: block;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    color: inherit;
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

/* Handy: Pulldowns untereinander */
@media (max-width: 767px) {
    .env-log-filter-expanded-row {
        grid-template-columns: 1fr;
    }

    .env-log-filter-minmax-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .env-log-panel-body, .env-log-panel-body-inner, .env-log-panel-chevron {
        transition: none;
    }
}

.env-log-row:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

/* Desktop: Listen als zusammenhaengende Gruppe - erster Eintrag: Radius oben - mittlere: direkt dran - letzter: Radius unten + unterer Border */
@media (min-width: 768px) {
    .env-log-list {
        gap: 0;
    }

    .env-log-row {
        margin-bottom: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        box-shadow: none;
        /* background: var( - bg-card); */
    }

    .env-log-list .env-log-row:first-child {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    .env-log-list .env-log-row:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .env-log-list .env-log-row:only-child {
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    .env-log-row:hover {
        border-color: var(--border);
        border-bottom-color: transparent;
        background: var(--bg-hover);
        z-index: 1;
    }

    .env-log-list .env-log-row:last-child:hover {
        border-bottom-color: var(--border);
    }
}

/* Handy connected lists - NACH Basis-Styles (sonst greifen gap/radius der Kacheln). Uebersicht + Umgebungen + Pflanzen */
@media (max-width: 767px) {
    .env-log-list {
        gap: 0;
    }

    .env-log-row {
        border: 0 !important;
        border-radius: 0 !important;
        border-bottom: 1px solid var(--border) !important;
        margin-bottom: 0;
        padding: 12px 2px;
        background: transparent !important;
        box-shadow: none;
    }

    .env-log-row:last-child {
        border-bottom: 0 !important;
    }

    .env-log-row:hover {
        border-color: transparent !important;
        border-bottom-color: var(--border) !important;
        background: transparent !important;
    }

    .env-log-panel-body-inner {
        padding-left: 6px;
        padding-right: 6px;
    }
}

.env-log-row-when {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.env-log-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.env-log-chip {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    /* background: color-mix(in srgb, var( - chip, var( - accent)) 18%, transparent); */
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--chip, var(--accent)) 35%, transparent);
}

.env-log-row-notes {
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--text-muted);
    white-space: pre-wrap;
}

.env-log-mode-bar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.env-log-mode-bar .btn,
.env-log-mode-bar #envLogSwitchCsvBtn,
.env-log-mode-bar #envLogBleBtn {
    min-height: 44px;
    padding: 10px 18px;
    font-size: 0.95rem;
    font-weight: 600;
    flex: 1 1 auto;
    min-width: min(140px, 100%);
    justify-content: center;
}

.env-log-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

/* Messwerte: Einheit rechts im Input (wie pH/EC) */
.env-log-metric-field .form-input {
    padding-right: 3.6rem;
}

.env-log-metric-field .nutrient-ec-field-unit {
    max-width: 3.4rem;
    font-variant-numeric: tabular-nums;
}

.env-log-form .form-group {
    margin-bottom: 12px;
}

.env-log-prefill-banner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: var(--radius);
    border-left: 0px solid var(--accent);
    background: var(--accent-muted);
    color: var(--text);
    font-size: 0.88rem;
    line-height: 1.4;
}

.env-log-prefill-banner strong {
    color: var(--accent);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.env-log-notes-group {
    margin-top: 4px;
}

.env-log-notes-group .form-textarea {
    min-height: 4.5rem;
}

@media (max-width: 480px) {
    .env-log-fields {
        grid-template-columns: 1fr;
    }
}

/* CSV Import Modal */
.env-csv-import-form .form-hint {
    margin-bottom: 10px;
}

.env-csv-check {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    font-size: 0.9rem;
    cursor: pointer;
    user-select: none;
}

.env-csv-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

.env-csv-manual {
    display: block;
    margin: 12px 0;
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-hover);
}

.env-csv-manual[hidden] {
    display: none !important;
}

.env-csv-manual-title {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-secondary);
}

.env-csv-manual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 12px;
}

.env-csv-save-schema {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.env-csv-save-schema-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.env-csv-save-schema-row .form-input {
    flex: 1 1 12rem;
    min-width: 0;
}

.env-csv-save-schema-row .btn {
    flex-shrink: 0;
}

.settings-csv-schemas-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 10px;
}

.settings-csv-schemas-empty {
    margin: 0;
}

.settings-csv-schema-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}

.settings-csv-schema-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-csv-schema-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.settings-csv-schema-info strong {
    font-size: 0.95rem;
}

.settings-csv-schema-info .form-hint {
    margin: 0;
}

.settings-climate-custom {
    margin-top: 0;
}

.settings-climate-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-top: 14px;
}

.settings-climate-actions .btn-primary {
    width: 100%;
    align-self: stretch;
    justify-content: center;
    min-height: 44px;
}

.settings-climate-actions .btn-ghost {
    width: auto;
    align-self: flex-start;
}

.settings-climate-fold {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-card);
    padding: 0;
    overflow: hidden;
}

.settings-climate-fold-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    margin: 0;
    padding: 10px 12px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.settings-climate-fold-toggle::-webkit-details-marker,
.settings-climate-fold-toggle::marker {
    display: none;
    content: none;
}

.settings-climate-fold-toggle:hover {
    background: var(--bg-hover);
}

.settings-climate-fold-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.settings-climate-fold-toggle .form-label {
    margin: 0;
}

.settings-climate-fold[open] > .settings-climate-fold-toggle .account-fold-chevron {
    transform: rotate(180deg);
}

.settings-climate-fold-body {
    padding: 10px 12px 12px;
    border-top: 1px solid var(--border);
}

.settings-climate-fold-body .btn {
    margin-bottom: 8px;
}

.settings-climate-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.settings-climate-head .form-label {
    margin-bottom: 0;
}

.settings-climate-head .btn {
    flex-shrink: 0;
}

.settings-climate-custom.is-premium-locked .settings-climate-groups {
    opacity: 0.72;
}

.settings-climate-custom.is-premium-locked .form-input[readonly] {
    cursor: default;
    background: var(--bg-card);
    color: var(--text-secondary);
}

.settings-climate-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 8px 0 12px;
}

.settings-climate-group {
    margin: 0;
}

.settings-climate-phases {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.settings-climate-phase {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg-elevated);
    padding: 0 10px;
}

.settings-climate-phase > summary {
    display: flex;
    align-items: baseline;
    gap: 8px;
    cursor: pointer;
    list-style: none;
    padding: 10px 2px;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}

.settings-climate-phase-name {
    min-width: 0;
}

.settings-climate-phase-dirty {
    font-size: 0.72rem;
    font-weight: 650;
    color: var(--accent);
    letter-spacing: 0.01em;
}

.settings-climate-phase > summary::-webkit-details-marker {
    display: none;
}

.settings-climate-phase > summary::after {
    content: '';
    float: none;
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-left: auto;
    margin-top: 4px;
    border-right: 2px solid var(--text-muted);
    border-bottom: 2px solid var(--text-muted);
    transform: rotate(45deg);
}

.settings-climate-phase[open] > summary::after {
    margin-top: 6px;
    transform: rotate(-135deg);
}

.settings-climate-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 12px;
    padding: 0 0 12px;
}

.settings-climate-phase-toolbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.settings-climate-phase-toolbar .settings-climate-weeks {
    grid-column: auto;
    margin: 0;
    flex: 1 1 auto;
    min-width: 0;
}

.settings-climate-phase-toolbar .btn {
    flex-shrink: 0;
}

.settings-climate-weeks {
    grid-column: 1 / -1;
    margin: 0;
}

.settings-climate-metric {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.settings-climate-metric-label {
    font-size: 0.75rem;
    font-weight: 650;
    color: var(--text-secondary);
}

.settings-climate-metric-label small {
    font-weight: 500;
    color: var(--text-muted);
}

.settings-climate-metric-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.settings-climate-metric-inputs .form-input {
    min-width: 0;
    flex: 1;
    padding: 6px 8px;
    font-size: 0.85rem;
}

.settings-climate-metric.is-dirty .settings-climate-metric-label {
    color: var(--accent);
}

.settings-climate-metric-inputs .form-input.is-dirty,
[data-theme="dark"] .settings-climate-metric-inputs .form-input.is-dirty,
[data-theme="dark"] .account-page .settings-climate-metric-inputs .form-input.is-dirty,
[data-theme="light"] .settings-climate-metric-inputs .form-input.is-dirty {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg-card));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
    font-weight: 650;
}

.settings-climate-metric-inputs .form-input.is-dirty:focus,
[data-theme="dark"] .settings-climate-metric-inputs .form-input.is-dirty:focus,
[data-theme="dark"] .account-page .settings-climate-metric-inputs .form-input.is-dirty:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent);
}

.settings-climate-metric-sep {
    color: var(--text-muted);
    flex-shrink: 0;
}

@media (max-width: 480px) {
    .settings-climate-metrics {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .env-csv-manual-grid {
        grid-template-columns: 1fr;
    }
}

.env-csv-preview {
    margin-top: 14px;
    padding: 12px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: color-mix(in srgb, var(--accent) 6%, var(--bg-card));
}

.env-csv-preview-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 12px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.env-csv-preview-head strong {
    color: var(--text);
}

.env-csv-map-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.env-csv-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 600;
    background: color-mix(in srgb, var(--chip, var(--accent)) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--chip, var(--accent)) 32%, transparent);
    color: var(--text);
}

.env-csv-chip strong {
    font-weight: 700;
}

.env-csv-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 14px;
    margin-bottom: 10px;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.env-csv-stat strong {
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.env-csv-stat.ok strong {
    color: var(--accent);
}

.env-csv-stat.warn strong {
    color: #e67e22;
}

.env-csv-sample-wrap {
    overflow-x: auto;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
}

.env-csv-sample {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.78rem;
}

.env-csv-sample th, .env-csv-sample td {
    padding: 7px 10px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.env-csv-sample th {
    font-weight: 700;
    color: var(--text-secondary);
    background: var(--bg-hover);
    white-space: nowrap;
}

.env-csv-sample tr:last-child td {
    border-bottom: none;
}

.env-csv-sample td:first-child {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--text-secondary);
}

@media (min-width: 640px) {
    .env-charts-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .env-charts-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.nutrients-page {
    max-width: var(--content-max);
}

.nutrients-intro {
    margin: 0 0 16px;
}

.nutrient-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
}

.nutrient-tabs {
    margin-bottom: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
    overflow: visible;
    padding-bottom: 0;
    gap: 6px;
}

.nutrient-tabs .filter-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    min-width: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nutrient-tabs .filter-chip:hover {
    background: var(--bg-hover);
    color: var(--text);
    border-color: var(--border);
}

.nutrient-tabs .filter-chip.active {
    background: var(--accent-muted);
    color: var(--accent);
    border-color: var(--border);
    box-shadow: none;
}

.nutrient-tabs .filter-chip.active:hover {
    border-color: var(--accent);
}

.nutrient-product-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

.nutrient-product-grid.cols-3 {
    grid-template-columns: 1fr;
}

/* Spalten-Cycle: Desktop (wie Samen) */
#nutrientProductColsCycle {
    display: none;
}

@media (min-width: 768px) {
    #nutrientProductColsCycle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .nutrient-product-grid.cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
    }
}

/* Mobile Portrait: keine Spaltenwahl, immer 1 Spalte */
@media (orientation: portrait) and (max-width: 1024px) {
    .equip-cols-cycle,
    .equip-inventory-actions .equip-cols-cycle,
    #equipColsCycle,
    #seedColsCycle,
    #nutrientProductColsCycle {
        display: none !important;
    }

    .equip-inventory-grid,
    .equip-inventory-grid.cols-1,
    .equip-inventory-grid.cols-2,
    .equip-inventory-grid.cols-3 {
        grid-template-columns: 1fr !important;
    }

    .seed-grid,
    .seed-grid.cols-1,
    .seed-grid.cols-3 {
        grid-template-columns: 1fr !important;
    }

    .nutrient-product-grid,
    .nutrient-product-grid.cols-1,
    .nutrient-product-grid.cols-3 {
        grid-template-columns: 1fr !important;
    }
}

.nutrient-product-card {
    text-align: left;
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: inherit;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nutrient-product-card:hover {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.nutrient-product-card.is-low {
    border-color: color-mix(in srgb, #e67e22 50%, var(--border));
}

.nutrient-product-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

.nutrient-kind-badge {
    display: inline-flex;
    padding: 1px 8px 3px 8px;
    border-radius: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    background: var(--accent-muted);
    color: var(--accent);
    /* display: none; */
}

.nutrient-npk {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
}

.nutrient-product-name {
    font-weight: 500;
    font-size: 1rem;
    margin-bottom: 6px;
    letter-spacing: 0.04rem;
}

.nutrient-product-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.nutrient-stock-label {
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 4px;
}

.nutrient-stock-bar {
    height: 6px;
    border-radius: 999px;
    background: var(--border);
    overflow: hidden;
}

.nutrient-stock-bar span {
    display: block;
    height: 100%;
    background: var(--accent);
    border-radius: inherit;
}

/* Duengeplaene: connected list (Desktop + Handy) */
.nutrient-plan-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nutrient-plan-card {
    padding: 14px 16px;
    margin: 0;
    border-radius: 0;
    border: 1px solid var(--border);
    border-bottom: none;
    background: var(--bg-card);
    box-shadow: none;
}

.nutrient-plan-card.is-clickable {
    cursor: pointer;
}

.nutrient-plan-card.is-clickable:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
    outline-offset: -2px;
    z-index: 2;
    position: relative;
}

.nutrient-plan-list .nutrient-plan-card:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.nutrient-plan-list .nutrient-plan-card:last-child {
    border-bottom: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.nutrient-plan-list .nutrient-plan-card:only-child {
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--border);
}

.nutrient-plan-list .nutrient-plan-card:hover,
.nutrient-plan-list .nutrient-plan-card:focus-visible {
    background: var(--bg-hover);
    border-color: var(--border);
    border-bottom-color: transparent;
    outline: none;
    z-index: 1;
    position: relative;
}

.nutrient-plan-list .nutrient-plan-card:last-child:hover,
.nutrient-plan-list .nutrient-plan-card:last-child:focus-visible {
    border-bottom-color: var(--border);
}

.nutrient-plan-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: flex-start;
}

.nutrient-plan-name {
    font-weight: 700;
    font-size: 1.05rem;
    font-weight: 500;
}

.nutrient-plan-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.nutrient-plan-steps-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.nutrient-step-chip {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--bg-hover);
    color: var(--text-secondary);
}

/* Geoeffneter Plan: Schritte als connected list */
.nutrient-step-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/*
* Plan-Detail im Modal: Schritte-Kacheln gleicher horizontaler Abstand
* wie Duengeplan-Kacheln im Content ( - content-pad-x).
*/
.modal .nutrient-plan-detail .nutrient-step-list {
    margin-left: calc(var(--content-pad-x) - 20px);
    margin-right: calc(var(--content-pad-x) - 20px);
}

.nutrient-step-card {
    padding: 14px 16px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 0;
    margin-bottom: 0;
    background: var(--bg-card);
    transition: background 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.nutrient-step-list .nutrient-step-card:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

.nutrient-step-list .nutrient-step-card:last-child {
    border-bottom: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

.nutrient-step-list .nutrient-step-card:only-child {
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--border);
}

.nutrient-step-list .nutrient-step-card:hover {
    border-color: var(--border);
    border-bottom-color: transparent;
    background: var(--bg-hover);
    z-index: 1;
    position: relative;
}

.nutrient-step-list .nutrient-step-card:last-child:hover {
    border-bottom-color: var(--border);
}

.nutrient-step-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.nutrient-step-head-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.nutrient-step-mode-badge {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 4px 9px;
    border-radius: 999px;
    line-height: 1.2;
    border: 1px solid var(--border);
}

.nutrient-step-mode-badge--simple {
    color: var(--text-secondary);
    background: color-mix(in srgb, var(--text-muted) 14%, var(--bg-elevated));
}

.nutrient-step-mode-badge--expert {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
    border-color: color-mix(in srgb, var(--accent) 30%, var(--border));
}

.nutrient-step-mode-toggle {
    margin-top: 2px;
}

.nutrient-step-meta {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 4px 0 8px;
}

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

.nutrient-item-row {
    display: grid;
    grid-template-columns: auto 1fr minmax(88px, 7.5rem);
    gap: 10px;
    align-items: center;
    font-size: 0.9rem;
}

/*
* Plan-Schritt bearbeiten: Dosierungs-Kacheln wie Duengeplan-Liste
* (gleicher horizontaler Abstand zum Rand wie .nutrient-plan-card im Content).
*/
#nutrientStepForm .nutrient-item-list {
    gap: 0;
    /* Modal-Body-Padding (20px) ausgleichen Abstand = - content-pad-x */
    margin-left: calc(var(--content-pad-x) - 30px);
    margin-right: calc(var(--content-pad-x) - 30px);
    width: auto;
}

#nutrientStepForm .nutrient-item-row {
    margin: 0;
    padding: 12px 16px;
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: 0;
    background: var(--bg-card);
    box-sizing: border-box;
}

#nutrientStepForm .nutrient-item-row:first-child {
    border-top-left-radius: var(--radius-lg);
    border-top-right-radius: var(--radius-lg);
}

#nutrientStepForm .nutrient-item-row:last-child {
    border-bottom: 1px solid var(--border);
    border-bottom-left-radius: var(--radius-lg);
    border-bottom-right-radius: var(--radius-lg);
}

#nutrientStepForm .nutrient-item-row:only-child {
    border-radius: var(--radius-lg);
    border-bottom: 1px solid var(--border);
}

#nutrientStepForm .nutrient-item-row:has(.nutrient-item-on:checked) {
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
}

@media (max-width: 767px) {
    #nutrientStepForm .nutrient-item-list {
        margin-left: calc(var(--content-pad-x) - 20px);
        margin-right: calc(var(--content-pad-x) - 20px);
    }
}

/* Full-Mobile-Modal: gleiches Prinzip, Body-Padding kann abweichen */
@media (max-width: 767px) {
    .modal.modal-full-mobile .modal-body:has(#nutrientStepForm) {
        /* Body behaelt Padding; Liste gleicht auf Content-Pad aus */
        padding-left: 20px;
        padding-right: 20px;
    }
}

.nutrient-linked-events-hint .nutrient-linked-events-list {
    margin: 6px 0 0;
    padding-left: 1.2em;
}

.nutrient-linked-events-hint .nutrient-linked-events-list li {
    margin: 2px 0;
}

.nutrient-water-card {
    padding: 18px;
}

.nutrient-water-form,
.nutrient-water-modal,
.nutrient-water-card {
    --nutrient-panel-bg: #1e1e1e;
}

[data-theme="light"] .nutrient-water-form,
[data-theme="light"] .nutrient-water-modal,
[data-theme="light"] .nutrient-water-card {
    --nutrient-panel-bg: #ffffff;
}

[data-theme="light"] .nutrient-target-banner,
[data-theme="light"] .nutrient-dose-list-head,
[data-theme="light"] .nutrient-dose-list-hint,
[data-theme="light"] .nutrient-dose-row,
[data-theme="light"] .nutrient-dose-total,
[data-theme="light"] .nutrient-metrics-details,
[data-theme="light"] .nutrient-expert-block,
[data-theme="light"] .nutrient-dose-preview .nutrient-split-hint {
    background: #ffffff;
}

[data-theme="light"] .nutrient-dose-list {
    border: 1px solid var(--border);
}

[data-theme="light"] .nutrient-target-banner,
[data-theme="light"] .nutrient-metrics-details,
[data-theme="light"] .nutrient-expert-block,
[data-theme="light"] .nutrient-dose-preview .nutrient-split-hint {
    border: 1px solid var(--border);
}

[data-theme="light"] .nutrient-water-form .event-grow-all,
[data-theme="light"] .nutrient-water-modal .event-grow-all {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

[data-theme="light"] .nutrient-water-form .event-grow-all:has(input:checked),
[data-theme="light"] .nutrient-water-modal .event-grow-all:has(input:checked) {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

[data-theme="light"] .nutrient-water-form .event-grow-check:has(input:checked),
[data-theme="light"] .nutrient-water-modal .event-grow-check:has(input:checked) {
    background: transparent;
    border: none;
}

.nutrient-expert-block {
    margin-top: 12px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px dashed color-mix(in srgb, var(--accent) 35%, var(--border));
    background: var(--nutrient-panel-bg, #111D19);
}

/* Messwerte: immer sichtbar (nicht aufklappbar) */
.nutrient-metrics-details {
    margin-top: 12px;
    border-radius: var(--radius-lg);
    background: var(--nutrient-panel-bg, #111D19);
    overflow: hidden;
    border: none;
}

.nutrient-metrics-heading {
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-secondary);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

[data-theme="light"] .nutrient-metrics-heading {
    color: var(--text);
}

/* Legacy (falls noch details): ohne Klick-Optik */
.nutrient-metrics-summary {
    list-style: none;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    cursor: default;
}

.nutrient-metrics-summary::-webkit-details-marker {
    display: none;
}

.nutrient-metrics-optional {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
}

.nutrient-metrics-body {
    padding: 14px 14px 14px;
    background: transparent;
}

/* Notiz: aufklappbar, optional */
.nutrient-notes-details {
    margin-top: 12px;
    border-radius: var(--radius-lg);
    background: var(--nutrient-panel-bg, #111D19);
    overflow: hidden;
    border: none;
}

.nutrient-notes-summary {
    list-style: none;
    cursor: pointer;
    user-select: none;
    padding: 12px 14px;
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
}

[data-theme="light"] .nutrient-notes-summary {
    color: var(--text);
}

.nutrient-notes-summary::-webkit-details-marker {
    display: none;
}

.nutrient-notes-summary::before {
    content: '';
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid var(--text-secondary);
    border-bottom: 2px solid var(--text-secondary);
    transform: rotate(-45deg);
    transition: transform 0.15s ease;
    flex-shrink: 0;
    margin-top: -2px;
}

.nutrient-notes-details[open] > .nutrient-notes-summary::before {
    transform: rotate(45deg);
    margin-top: 0;
}

.nutrient-notes-details[open] > .nutrient-notes-summary {
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.nutrient-notes-body {
    padding: 12px 14px 14px;
}

.nutrient-notes-body .form-textarea {
    margin: 0;
    min-height: 4.5rem;
}

.nutrient-metrics-mix-row {
    margin-top: 0;
}

.nutrient-metrics-mix-row > .form-group:first-child {
    margin-top: 0;
}

.nutrient-metrics-body > .form-row:first-child,
.nutrient-metrics-body > .nutrient-metrics-mix-row:first-child {
    margin-top: 2px;
}

.nutrient-metrics-body .form-group {
    margin-bottom: 12px;
}

.nutrient-metrics-body .form-label {
    margin-bottom: 6px;
}

/* EC/PPM-Feld mit Einheit rechts im Input */
.nutrient-ec-field {
    position: relative;
    display: block;
}

.nutrient-ec-field .form-input {
    padding-right: 4.5rem;
}

/* L aengere Einheiten (m ' /h, L/Tag, mS/cm, a) - etwas mehr Platz rechts */
.nutrient-ec-field:has(.nutrient-ec-field-unit) .form-input {
    padding-right: 5rem;
}

/*
* Kurze Einheit "ml" (Giessen: Produkt-Dosis, Wasser-Aufteilung):
* Globales 5rem-Padding laesst in 7.5rem-Feldern nur ~3 Ziffern wirken.
*/
.nutrient-ec-field.nutrient-split-water-field .form-input,
.nutrient-ec-field.nutrient-dose-edit-field .form-input,
.nutrient-ec-field.nutrient-item-dose-field .form-input,
.nutrient-ec-field.nutrient-water-ml-field .form-input {
    padding-right: 2.5rem;
    overflow: visible;
    text-overflow: clip;
}

/* Form-Felder: integrierte Einheiten/Skalen in - text-secondary (nicht Wei /Akzent) */
.nutrient-ec-field.nutrient-split-water-field .nutrient-ec-field-unit,
.nutrient-ec-field.nutrient-dose-edit-field .nutrient-ec-field-unit,
.nutrient-ec-field.nutrient-water-ml-field .nutrient-ec-field-unit,
.nutrient-ec-field.nutrient-item-dose-field .nutrient-ec-field-unit,
.nutrient-ec-field.nutrient-product-ml-field .nutrient-ec-field-unit,
.nutrient-ec-field.nutrient-product-npk-field .nutrient-ec-field-unit,
.nutrient-ec-field.nutrient-product-dose-field .nutrient-ec-field-unit {
    color: var(--text-secondary);
    font-weight: 600;
}

/* Produkt-Formular: kurze Einheiten (ml, %) - weniger Padding rechts */
.nutrient-ec-field.nutrient-product-ml-field .form-input,
.nutrient-ec-field.nutrient-product-npk-field .form-input,
.nutrient-ec-field.seed-percent-field .form-input {
    padding-right: 2.5rem;
}

/* Samen-Formular: integriertes % */
.nutrient-ec-field.seed-percent-field .nutrient-ec-field-unit,
#seedForm .nutrient-ec-field-unit {
    color: var(--text-secondary);
    font-weight: 700;
    z-index: 3;
}

/* Produkt-Formular: Dosierung ml/L */
.nutrient-ec-field.nutrient-product-dose-field .form-input {
    padding-right: 3.5rem;
}

.nutrient-product-npk-row .form-group {
    min-width: 0;
}

/* Giessen-Modal-Footer: Cancel als Icon, Submit flexibel (lange Multi-Pflanzen-Labels) */
.modal-footer-actions.nutrient-water-footer {
    display: flex;
    width: 100%;
    margin-left: 0;
    gap: 8px;
    align-items: stretch;
    flex-wrap: nowrap;
    min-width: 0;
}
.nutrient-water-footer .nutrient-water-cancel {
    flex: 0 0 auto;
    width: 44px;
    min-width: 44px;
    height: auto;
    min-height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.nutrient-water-footer .nutrient-water-cancel svg {
    display: block;
    flex-shrink: 0;
}
.nutrient-water-footer #saveNutrientAppModalBtn {
    flex: 1 1 auto;
    min-width: 0;
    white-space: normal;
    line-height: 1.25;
    text-align: center;
    padding-left: 12px;
    padding-right: 12px;
}
@media (max-width: 767px) {
    .nutrient-water-footer #saveNutrientAppModalBtn {
        font-size: 0.86rem;
        padding-top: 11px;
        padding-bottom: 11px;
    }
}

/* Haupt-Wassermenge: volle Form-Breite, 4-5-stellige ml-Werte gut lesbar */
.nutrient-water-ml-field {
    width: 100%;
}

.nutrient-water-amount-short {
    display: none;
}

@media (max-width: 767px) {
    .nutrient-water-amount-full {
        display: none;
    }

    .nutrient-water-amount-short {
        display: inline;
    }
}

.nutrient-water-ml-field .form-input {
    width: 100%;
    font-variant-numeric: tabular-nums;
}

.nutrient-ec-field-wrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Integrierte Skala/Einheit im Input - immer secondary (ml, pH, mS/cm, degC, ) */
.nutrient-ec-field-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    pointer-events: none;
    letter-spacing: 0.02em;
    user-select: none;
    max-width: 5rem;
    text-align: right;
    line-height: 1.2;
    white-space: nowrap;
}

/* Produkt-Form: Einheit klar sichtbar ueber dem Input */
#nutrientProductForm .nutrient-ec-field-unit {
    z-index: 3;
    color: var(--text-secondary);
    opacity: 1;
    font-weight: 700;
}

span.nutrient-ec-field-unit:not(.is-toggle),
.nutrient-ec-field > span.nutrient-ec-field-unit {
    color: var(--text-secondary);
}

/* Einheit klickbar: EC / PPM */
button.nutrient-ec-field-unit,
.nutrient-ec-field-unit.is-toggle {
    pointer-events: auto;
    cursor: pointer;
    border: none;
    background: transparent;
    padding: 4px 2px;
    margin: 0;
    font: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--accent);
    text-decoration: none;
    border-radius: 4px;
}

button.nutrient-ec-field-unit:hover,
.nutrient-ec-field-unit.is-toggle:hover {
    color: var(--accent-hover, var(--accent));
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

button.nutrient-ec-field-unit:focus-visible,
.nutrient-ec-field-unit.is-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

[data-theme="light"] .nutrient-ec-field-unit:not(.is-toggle):not(button) {
    color: var(--text-secondary);
}

/* PPM-Skala nur bei PPM-Modus (unter dem Feld) */
.nutrient-ppm-scale-line,
.nutrient-ec-unit-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 8px;
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.35;
    color: var(--text-secondary);
}

/* - PPM 500 - rechtsb uendig unter dem Eingabefeld */
.nutrient-ppm-scale-line {
    justify-content: flex-end;
    text-align: right;
    width: 100%;
}

.nutrient-ppm-scale-line .nutrient-ppm-scale-btn {
    margin-left: auto;
}

.nutrient-ppm-scale-line[hidden] {
    display: none !important;
}

.nutrient-item-dose-field {
    flex: 0 0 auto;
    width: 7.5rem;
    min-width: 6.5rem;
}

.nutrient-item-dose-field .form-input {
    padding-right: 3.25rem;
    text-align: right;
}

.nutrient-item-dose-field .nutrient-ec-field-unit {
    font-size: 0.72rem;
    right: 8px;
}

.btn-link,
button.btn-link {
    display: inline;
    padding: 0;
    margin: 0;
    border: none;
    background: none;
    color: var(--accent);
    font: inherit;
    font-size: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.btn-link:hover,
button.btn-link:hover {
    color: var(--accent-hover, var(--accent));
}

.nutrient-drain-toggle {
    margin: 14px 0 10px;
}

.nutrient-drain-fields {
    margin-top: 4px;
    padding-top: 12px;
    border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}

.nutrient-drain-heading {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-secondary);
    margin: 0 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

[data-theme="light"] .nutrient-drain-heading {
    color: var(--text);
}

.nutrient-step-hint {
    margin: 4px 0 12px;
    width: 100%;
}

/* Hinweis: Ziel-pH/EC aus Duengeplan (Termin / Journal Giessen) */
.nutrient-target-row {
    margin-top: 10px;
    margin-bottom: 4px;
}

.nutrient-dose-preview > .nutrient-target-banner {
    margin-top: 12px;
    margin-bottom: 10px;
}

/* Messwerte im Giessen-Preview: vor Wasser-Aufteilung */
.nutrient-dose-preview > .nutrient-metrics-details {
    margin-top: 12px;
    margin-bottom: 10px;
}

.nutrient-target-banner {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
    width: 100%;
    box-sizing: border-box;
    margin: 14px 0 14px;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    border: none;
    background: var(--nutrient-panel-bg, #111D19);
    color: var(--text);
}

/* display:grid ueberschreibt sonst [hidden] -> leerer heller Kasten im Dark Mode */
.nutrient-target-banner[hidden] {
    display: none !important;
}

.nutrient-target-banner:has(.nutrient-target-item:only-child) {
    grid-template-columns: 1fr;
}

[data-theme="dark"] .nutrient-target-banner {
    border: none;
    background: var(--nutrient-panel-bg, #1e1e1e);
    box-shadow: none;
}

.nutrient-target-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

.nutrient-target-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    line-height: 1.2;
}

.nutrient-target-value {
    font-size: 2rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--accent);
}

.nutrient-dose-section {
    margin-top: 12px;
}

.nutrient-dose-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: var(--radius-lg);
}

.nutrient-dose-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 16px 16px;
    min-height: 3.25rem;
    box-sizing: border-box;
    background: var(--nutrient-panel-bg, #111D19);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}

.nutrient-dose-list-head .section-title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--text-secondary);
    line-height: 1.25;
}

[data-theme="light"] .nutrient-dose-list-head .section-title {
    color: var(--text);
}

/* Giessen: "1 ml/L" | Vorrat - etwas groesser, secondary */
.nutrient-dose-meta {
    display: block;
    margin-top: 4px;
    font-size: 0.74rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.nutrient-dose-info strong {
    color: var(--text-secondary);
    font-weight: 700;
}

[data-theme="light"] .nutrient-dose-info strong {
    color: var(--text);
}

.nutrient-dose-list-hint {
    margin: 0;
    padding: 12px 14px 14px;
    background: var(--nutrient-panel-bg, #111D19);
}

/* Hinweis ohne Wassermenge - ff aellig in Orange */
.nutrient-dose-list-hint.nutrient-dose-water-hint {
    color: #e67e22;
    font-weight: 600;
}

[data-theme="light"] .nutrient-dose-list-hint.nutrient-dose-water-hint {
    color: #c96a12;
}

.nutrient-dose-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: var(--nutrient-panel-bg, #111D19);
}

.nutrient-dose-row.is-low {
    outline: 2px solid #e67e22;
    outline-offset: -2px;
}

/* Einfach-Modus Produkte: Zahl + "ml" in Akzentfarbe (z. B. 12 ml) */
.nutrient-dose-amount {
    font-weight: 800;
    font-size: 1.55rem;
    color: var(--accent);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
    line-height: 1;
}

.nutrient-dose-amount-unit {
    font-size: 0.95rem;
    font-weight: 650;
    color: var(--accent);
    margin-left: 2px;
}

/* Experte: Dosierung mit "ml" im Feld */
.nutrient-dose-amount-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Experte: Dosierungml kompakt, 4-5 Ziffern + ml */
.nutrient-dose-edit-field {
    flex: 0 0 auto;
    width: 5.75rem;
    min-width: 5.25rem;
    max-width: 6.5rem;
}

.nutrient-dose-edit-field .form-input {
    width: 100%;
    text-align: right;
    padding: 8px 2.15rem 8px 8px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}

.nutrient-dose-edit-field .nutrient-ec-field-unit {
    right: 8px;
    font-size: 0.72rem;
    color: var(--text-secondary);
    font-weight: 700;
}

/* %-Abweichung vom Duengeplan (Produkt + Gesamt) */
.nutrient-dose-delta {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
    line-height: 1.2;
    white-space: nowrap;
}

.nutrient-dose-delta.is-match {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}

.nutrient-dose-delta.is-over {
    color: #e67e22;
    background: color-mix(in srgb, #e67e22 16%, transparent);
    border: 1px solid color-mix(in srgb, #e67e22 40%, transparent);
}

.nutrient-dose-delta.is-under {
    color: #5b9bd5;
    background: color-mix(in srgb, #5b9bd5 16%, transparent);
    border: 1px solid color-mix(in srgb, #5b9bd5 40%, transparent);
}

.nutrient-dose-delta-total {
    font-size: 0.8rem;
    padding: 3px 10px;
}

.nutrient-dose-total-main {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 14px;
}

.nutrient-dose-total-delta {
    flex-shrink: 0;
}

/* Gesamt-Dosierung: unterer Abschluss der Dose-Liste */
.nutrient-dose-total {
    margin-top: 0;
    padding: 14px 16px;
    border: none;
    border-radius: 0;
    background: var(--nutrient-panel-bg, #111D19);
}

.nutrient-dose-total-label {
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.nutrient-dose-total-value {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 8px;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.nutrient-dose-total-value strong {
    font-size: 1.55rem;
    font-weight: 800;
    color: var(--accent);
    letter-spacing: -0.02em;
}

.nutrient-dose-total-unit {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.nutrient-dose-total-sep {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.nutrient-dose-preview .nutrient-split-hint {
    margin-top: 10px;
}

.nutrient-water-form .event-grow-all,
.nutrient-water-modal .event-grow-all {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.nutrient-water-form .event-grow-all:has(input:checked),
.nutrient-water-modal .event-grow-all:has(input:checked) {
    background: var(--bg-elevated);
    border-color: var(--border);
}

.nutrient-water-form .event-grow-check,
.nutrient-water-modal .event-grow-check {
    background: transparent;
    border: none;
}

.nutrient-water-form .event-grow-check:has(input:checked),
.nutrient-water-modal .event-grow-check:has(input:checked) {
    background: transparent;
    border: none;
}

.nutrient-history-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.nutrient-history-card {
    padding: 14px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.nutrient-history-card:hover,
.nutrient-history-card:focus-visible {
    border-color: color-mix(in srgb, var(--accent, #5cb85c) 45%, var(--border));
    outline: none;
}

/* Desktop: Listen als zusammenhaengende Gruppe - erster Eintrag: Radius oben - mittlere: direkt dran - letzter: Radius unten + unterer Border */
@media (min-width: 768px) {
    .nutrient-history-list {
        gap: 0;
    }

    .nutrient-history-card {
        margin-bottom: 0;
        border-radius: 0;
        border: 1px solid var(--border);
        border-bottom: none;
        box-shadow: none;
        background: var(--bg-elevated);
    }

    .nutrient-history-list .nutrient-history-card:first-child {
        border-top-left-radius: var(--radius-lg);
        border-top-right-radius: var(--radius-lg);
    }

    .nutrient-history-list .nutrient-history-card:last-child {
        border-bottom: 1px solid var(--border);
        border-bottom-left-radius: var(--radius-lg);
        border-bottom-right-radius: var(--radius-lg);
    }

    .nutrient-history-list .nutrient-history-card:only-child {
        border-radius: var(--radius-lg);
        border-bottom: 1px solid var(--border);
    }

    .nutrient-history-card:hover,
    .nutrient-history-card:focus-visible {
        border-color: var(--border);
        border-bottom-color: transparent;
        background: var(--bg-hover);
        z-index: 1;
        outline: none;
    }

    .nutrient-history-list .nutrient-history-card:last-child:hover,
    .nutrient-history-list .nutrient-history-card:last-child:focus-visible {
        border-bottom-color: var(--border);
    }
}

/* Handy: Duenger-Verlauf + Plaene - connected list mit Karten-BG + Hover */
@media (max-width: 767px) {
    .nutrient-history-list,
    .nutrient-plan-list {
        gap: 0 !important;
    }

    .nutrient-history-list .nutrient-history-card,
    .nutrient-plan-list .nutrient-plan-card {
        margin: 0 !important;
        border-radius: 0 !important;
        border: 1px solid var(--border) !important;
        border-bottom: none !important;
        padding: 14px 16px;
        background: var(--bg-card) !important;
        box-shadow: none !important;
    }

    .nutrient-history-list .nutrient-history-card:first-child,
    .nutrient-plan-list .nutrient-plan-card:first-child {
        border-top-left-radius: var(--radius-lg) !important;
        border-top-right-radius: var(--radius-lg) !important;
    }

    .nutrient-history-list .nutrient-history-card:last-child,
    .nutrient-plan-list .nutrient-plan-card:last-child {
        border-bottom: 1px solid var(--border) !important;
        border-bottom-left-radius: var(--radius-lg) !important;
        border-bottom-right-radius: var(--radius-lg) !important;
    }

    .nutrient-history-list .nutrient-history-card:only-child,
    .nutrient-plan-list .nutrient-plan-card:only-child {
        border-radius: var(--radius-lg) !important;
        border-bottom: 1px solid var(--border) !important;
    }

    .nutrient-history-list .nutrient-history-card:hover,
    .nutrient-history-list .nutrient-history-card:focus-visible,
    .nutrient-plan-list .nutrient-plan-card:hover,
    .nutrient-plan-list .nutrient-plan-card:focus-visible {
        border-color: var(--border) !important;
        border-bottom-color: transparent !important;
        background: var(--bg-hover) !important;
        outline: none;
        z-index: 1;
        position: relative;
    }

    .nutrient-history-list .nutrient-history-card:last-child:hover,
    .nutrient-history-list .nutrient-history-card:last-child:focus-visible,
    .nutrient-plan-list .nutrient-plan-card:last-child:hover,
    .nutrient-plan-list .nutrient-plan-card:last-child:focus-visible {
        border-bottom-color: var(--border) !important;
    }

    /* Grow-Detail: gleicher connected Look */
    .grow-detail-page .nutrient-history-list .nutrient-history-card {
        padding: 14px 16px;
    }
}

.nutrient-history-head {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    margin-bottom: 4px;
    font-weight: 300;
}

.nutrient-history-head-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.nutrient-history-actions {
    display: flex;
    align-items: center;
    gap: 2px;
}

.nutrient-history-actions .btn {
    opacity: 0.75;
}

/* Edit wie Timeline */
.nutrient-history-actions .timeline-edit-btn {
    opacity: 1;
    color: var(--text-secondary);
}

.nutrient-history-actions .timeline-edit-btn svg {
    width: 16px;
    height: 16px;
}

.nutrient-history-card:hover .nutrient-history-actions .btn,
.nutrient-history-actions .btn:focus-visible {
    opacity: 1;
}

.nutrient-history-card:hover .nutrient-history-actions .timeline-edit-btn {
    color: var(--text);
}

/* Giessprotokoll: Verlaufsdiagramme (nutzt env-chart-Styles + eigene Grid) */
.nutrient-charts-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (min-width: 900px) {
    .nutrient-charts-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.nutrient-chart-card.env-chart-card {
    margin: 0;
}

.nutrient-chart-head {
    flex: 1;
    min-width: 0;
}

.nutrient-chart-plot {
    position: relative;
    width: 100%;
    border-radius: var(--radius);
    overflow: visible;
    background: color-mix(in srgb, var(--bg) 40%, transparent);
}

.nutrient-chart-plot .env-chart-svg,
.nutrient-chart-plot .env-chart-svg-compact {
    width: 100%;
    height: 176px;
    display: block;
    overflow: visible;
}

.nutrient-chart-plot .env-chart-dot {
    pointer-events: none;
}

/* Giess-Chart-Tooltip: am body, fixed - nicht abgeschnitten */
.env-chart-tooltip.nutrient-chart-tooltip-float {
    position: fixed;
    z-index: 5000;
    min-width: 120px;
    max-width: 240px;
    margin: 0;
    pointer-events: none;
}

.nutrient-chart-card .env-chart-axis {
    font-size: 11px;
    fill: var(--text-secondary);
    font-weight: 600;
}

.nutrient-chart-card .env-chart-grid {
    stroke: color-mix(in srgb, var(--border) 85%, transparent);
    stroke-width: 1;
}

.nutrient-chart-card .env-chart-grid-base {
    stroke: color-mix(in srgb, var(--border) 100%, transparent);
}

.nutrient-chart-svg {
    width: 100%;
    height: 160px;
    display: block;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--bg) 50%, transparent);
}

.nutrient-grow-card {
    padding: 14px 16px;
}

.nutrient-grow-card-clickable {
    cursor: pointer;
}

.nutrient-grow-card-clickable:hover,
.nutrient-grow-card-clickable:focus-visible {
    border-color: var(--accent);
    background: var(--bg-hover);
}

.nutrient-grow-plan {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.nutrient-grow-plan-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
}

.nutrient-catalog-box {
    margin-bottom: 14px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--accent-muted);
    background: var(--bg-card);
}

.nutrient-scheme-preview {
    margin-top: 4px;
    padding: 12px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
}

.nutrient-scheme-preview-inner .form-hint {
    margin-top: 4px;
}

@media (max-width: 560px) {
    .nutrient-item-row {
        grid-template-columns: auto 1fr;
    }

    .nutrient-item-dose,
    .nutrient-item-dose-field {
        grid-column: 1 / -1;
        width: 100%;
    }

    #nutrientStepForm .nutrient-item-row {
        padding: 12px 16px;
    }
}

/* Select-Pfeil: mehr Abstand rechts */
.form-select {
    padding-right: 2.4rem;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.8rem center;
    background-size: 1rem;
}

[data-theme="dark"] .form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.grow-meta-chip-photo {
    border-color: color-mix(in srgb, #f1c40f 30%, var(--border));
    /* background: linear-gradient(145deg, color-mix(in srgb, #f1c40f 12%, var( - bg-card)) 0%, var( - bg-card) 70%); */
}

.grow-meta-chip-photo .grow-meta-chip-icon {
    background: color-mix(in srgb, #f1c40f 18%, var(--bg-hover));
}

.grow-meta-chip-seed {
    border-color: color-mix(in srgb, #9b59b6 30%, var(--border));
    /* background: linear-gradient(145deg, color-mix(in srgb, #9b59b6 12%, var( - bg-card)) 0%, var( - bg-card) 70%); */
}

.grow-meta-chip-seed .grow-meta-chip-icon {
    background: color-mix(in srgb, #9b59b6 18%, var(--bg-hover));
}

/* Grow Detail: Archiv-Footer + Journal-Leerzustand */
.grow-detail-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
}

.grow-detail-archive-btn {
    color: var(--text-muted);
}

.grow-detail-archive-btn:hover {
    color: var(--text-secondary);
}

.grow-detail-journal-empty {
    color: var(--text-secondary);
    text-align: center;
    padding: 32px;
}

/* Gleicher Abstand zwischen allen Bereichen (wie Duengung Giess-Diagramme) */
.grow-detail-page .grow-detail-stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.grow-detail-page .grow-detail-stack > *,
.grow-detail-page .grow-detail-stack .open-tasks,
.grow-detail-page .grow-detail-stack .open-tasks.is-minimized,
.grow-detail-page .grow-detail-stack .env-fold,
.grow-detail-page .grow-detail-stack .grow-stats,
.grow-detail-page .grow-detail-stack .grow-stats.grow-stats-grid,
.grow-detail-page .grow-detail-stack .grow-climate-hints-wrap,
.grow-detail-page .grow-detail-stack .grow-detail-footer {
    margin-top: 0;
    margin-bottom: 0;
}

.grow-detail-page .grow-detail-section .section-header {
    margin-bottom: 8px;
}

.grow-detail-page .grow-detail-section .card {
    margin-bottom: 0;
}

.grow-detail-page [data-env-section^="grow-nutrient-charts-"] .nutrient-charts-grid {
    margin-bottom: 0;
}

.grow-detail-page [data-env-section^="grow-nutrient-history-"] {
    margin-top: 0;
}

.grow-detail-page [data-env-section^="grow-journal-charts-"] .journal-metric-charts-grid {
    margin-bottom: 0;
}

/* Offene Termine im gleichen Fold-Layout wie Journal / Giessprotokoll */
.grow-detail-page .open-tasks-list-in-fold {
    margin: 0;
}

.grow-detail-page .env-fold-title .open-tasks-count {
    margin-left: 4px;
    vertical-align: middle;
}

/* Grow-Formular: Cover-Anzeige-Optionen */
.grow-cover-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
}

.grow-cover-options .form-check {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-secondary);
    cursor: pointer;
    line-height: 1.35;
}

.grow-cover-options .form-check input {
    margin-top: 0.2em;
    flex-shrink: 0;
    accent-color: var(--accent);
}

.grow-cover-options .form-check span {
    min-width: 0;
}

/* Premium Datei-Auswahl */
.file-field {
    width: 100%;
}

.file-field-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.file-field-ui {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.file-field-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    cursor: pointer;
    user-select: none;
    box-shadow: none;
    transition: border-color var(--transition), background var(--transition), color var(--transition);
}

.file-field-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
    background: color-mix(in srgb, var(--accent) 8%, var(--bg-card));
    color: var(--text);
    box-shadow: none;
}

.file-field-btn:active {
    transform: none;
}

.file-field-input:focus-visible + .file-field-ui .file-field-btn {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.file-field-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    color: var(--accent);
    opacity: 0.95;
}

.file-field-name {
    font-size: 0.82rem;
    color: var(--text-muted);
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-field-name.has-file {
    color: var(--text-secondary);
    font-weight: 500;
}

.grow-cover-upload-fields {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Grow Detail: Hinweis ohne Kachel, reiner Text */
.grow-detail-notes {
    margin-top: 12px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 400;
    line-height: 1.5;
}

[data-theme="dark"] .grow-detail-notes {
    color: #fff;
}

.grow-card:not(:has(.grow-card-cover)) .grow-card-body {
    border-top: none;
}

/* Formular: Bild loeschen gleicher Stil wie Bild hochladen, rechts daneben */
.file-field-ui .form-image-remove {
    margin: 0;
    color: var(--text-secondary);
}

.file-field-ui .form-image-remove:hover {
    border-color: color-mix(in srgb, #e74c3c 45%, var(--border));
    background: color-mix(in srgb, #e74c3c 10%, var(--bg-card));
    color: #e74c3c;
}

.env-image-options {
    margin-top: 10px;
}

/* Umgebung: Bildanzeige deaktiviert / ohne Foto */
.dash-env-card-media.image-disabled .is-hidden-image, .env-card-media.image-disabled .is-hidden-image, .env-hero-media.image-disabled .is-hidden-image, .dash-env-card-placeholder.is-hidden-image, .env-card-placeholder.is-hidden-image, .env-hero-placeholder.is-hidden-image {
    background: var(--bg-hover);
    font-size: 0;
    min-height: 100%;
}

.dash-env-card-media.image-disabled, .env-card-media.image-disabled {
    opacity: 0.85;
}

/* Grow Detail: Umgebung-Link */
.grow-detail-env-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: #5b9bd5;
  background: color-mix(in srgb, #5b9bd5 12%, transparent);
  border: 1px solid color-mix(in srgb, #5b9bd5 28%, transparent);
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
  max-width: 100%;
}

.grow-detail-env-link:hover {
  color: var(--text);
  background: color-mix(in srgb, #5b9bd5 20%, transparent);
  border-color: color-mix(in srgb, #5b9bd5 45%, transparent);
}

.grow-detail-env-icon {
  flex-shrink: 0;
  line-height: 1;
}

.grow-detail-env-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Umgebung Detail: Zelt Flaeche / Volumen */
.env-tent-metrics {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 5px;
  padding: 10px 0px 0px 0px;
  border-radius: var(--radius);
  /* border: 1px solid var( - border); */
  /* background: color-mix(in srgb, var( - accent) 6%, var( - bg-card)); */
  display: none;
}

.env-tent-metric-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
}

.env-tent-metric-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.env-tent-metric-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
}

.env-tent-metric {
  font-size: 0.88rem;
  color: var(--text);
}

.env-tent-metric-label {
  color: var(--text-muted);
  font-weight: 500;
  margin-right: 4px;
}

.env-tent-metric strong {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Umgebung: textartiger Aktions-Link in Section-Kopf */
.env-section-text-link {
  font-weight: 600;
  color: var(--accent);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding-left: 6px;
  padding-right: 6px;
}

.env-section-text-link:hover {
  color: var(--accent-hover, var(--accent));
  text-decoration: underline;
  background: transparent !important;
}

/* Grow Report */
body.report-mode .bottom-nav {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

body.report-mode .main {
  padding-bottom: 0;
}

.grow-report-page {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  /* Horizontal nur ueber .content ( - content-pad-x), damit Kacheln = Bottom-Nav-Breite */
  padding: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .grow-report-page {
    padding: 0 0 12px;
    gap: 20px;
  }
}

.report-private-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--text-secondary) 90%, #fff);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.08) 0%, transparent 55%),
    color-mix(in srgb, var(--text-muted) 22%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--text-muted) 35%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.18);
}

.report-hero {
  padding: 18px 20px;
}

@media (min-width: 900px) {
  .report-hero {
    padding: 32px 36px 30px;
  }

  .report-hero-top {
    gap: 28px;
  }

  .report-hero-badge {
    margin-bottom: 8px;
  }

  .report-hero-meta {
    margin-top: 10px;
  }

  .report-hero-dates {
    margin-top: 6px;
  }

  .report-hero-body .report-summary-chips {
    margin-top: 14px;
    gap: 10px;
  }
}

.report-hero-top {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.report-hero-cover {
  width: 200px;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg);
  border: 1px solid var(--border);
}

.report-hero-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (min-width: 600px) {
  .report-hero-cover {
    width: 260px;
    height: 260px;
    border-radius: 20px;
  }
}

@media (min-width: 900px) {
  .report-hero-cover {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 480px) {
  .report-hero-top {
    flex-direction: column;
    align-items: stretch;
  }

  .report-hero-cover {
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    max-height: min(72vw, 280px);
    align-self: center;
    max-width: min(100%, 280px);
  }
}

.report-hero-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.report-hero-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: color-mix(in srgb, var(--accent) 75%, #fff);
  margin-bottom: 8px;
  padding: 5px 11px;
  border-radius: 999px;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
    color-mix(in srgb, var(--accent) 14%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 1px 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

.report-hero-name {
  margin: 0;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.report-hero-meta {
  margin-top: 6px;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}

.report-hero-dates {
  margin-top: 4px;
  font-size: 0.85rem;
  color: var(--text-secondary);
}

/* Chips in der Infospalte - fluchten mit Name/Meta/Datum */
.report-summary-chips,
.report-hero-body .report-summary-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  width: 100%;
}

.report-summary-chip {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border-radius: 12px;
  min-width: 0;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.06) 0%, transparent 48%),
    var(--bg-elevated);
  border: 1px solid color-mix(in srgb, var(--border) 90%, var(--text-muted));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.12);
}

.report-summary-l {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
  line-height: 1.25;
}

.report-summary-v {
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  letter-spacing: -0.01em;
}

[data-theme="light"] .report-summary-chip {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, transparent 55%),
    var(--bg-elevated);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 2px 8px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .report-summary-l {
  color: #555;
}

.report-grow-notes {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.report-section-title {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 700;
}

.report-equip-heading {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}

.report-equip-section {
  padding: 18px 20px;
}

@media (min-width: 900px) {
  .report-equip-section {
    padding: 30px 36px 28px;
  }

  .report-equip-heading {
    font-size: 1.35rem;
    margin-bottom: 18px;
  }

  .report-env-block {
    margin-bottom: 18px;
  }

  .report-env-cover {
    max-height: 380px;
    border-radius: 16px;
    margin-bottom: 14px;
  }

  .report-env-name {
    font-size: 1.2rem;
  }
}

.report-env-block {
  margin-bottom: 14px;
}

.report-env-cover {
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 280px;
  border-radius: 14px;
  overflow: hidden;
  flex-shrink: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  margin-bottom: 12px;
}

.report-env-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.report-env-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.report-env-name {
  flex: 1;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  min-width: 0;
  line-height: 1.3;
}

.report-env-kind-badge {
  flex-shrink: 0;
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 6px 13px;
  border-radius: 999px;
  line-height: 1.2;
  color: color-mix(in srgb, var(--accent) 85%, #fff);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.14) 0%, transparent 52%),
    color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 38%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 2px 8px color-mix(in srgb, var(--accent) 16%, transparent);
}

[data-theme="light"] .report-env-kind-badge {
  color: var(--accent);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, transparent 50%),
    color-mix(in srgb, var(--accent) 12%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 4px color-mix(in srgb, var(--accent) 12%, transparent);
}

/* Connected list: Geraetezeilen aneinander, gemeinsame Aussenkante */
.report-equip-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.report-equip-item {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0;
  /* Dark: nicht reines - bg (zu schwarz), sondern elevated */
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom: none;
  min-height: 52px;
}

.report-equip-item:first-child {
  border-top-left-radius: var(--radius-lg);
  border-top-right-radius: var(--radius-lg);
}

.report-equip-item:last-child {
  border-bottom: 1px solid var(--border);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.report-equip-item:only-child {
  border-radius: var(--radius-lg);
  border-bottom: 1px solid var(--border);
}

/* Fester gruener Typ-Bereich (Zelt, Filter, ) - zentriert, unabhaengig von Label-Laenge */
.report-equip-type {
  flex: 0 0 5.75rem;
  width: 5.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8px 6px;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
  border-right: 1px solid color-mix(in srgb, var(--accent) 28%, var(--border));
  box-sizing: border-box;
}

.report-equip-type-text {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
  color: var(--accent);
  /* Lange Labels (Aktivkohlefilter, Umgebungsluefter) umbrechen statt Spalte aufzublasen */
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
  max-width: 100%;
}

.report-equip-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  padding: 10px 16px;
  background: var(--bg-elevated);
}

.report-equip-name {
  font-weight: 650;
  font-size: 0.92rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.report-equip-specs {
  font-size: 0.8rem;
  color: var(--text-secondary);
  line-height: 1.3;
}

[data-theme="light"] .report-equip-item,
[data-theme="light"] .report-equip-body {
  background: var(--bg-elevated);
}

[data-theme="light"] .report-equip-type {
  background: color-mix(in srgb, var(--accent) 14%, #ffffff);
  border-right-color: color-mix(in srgb, var(--accent) 22%, var(--border));
}

.report-week-section {
  position: relative;
  padding: 22px 20px 18px;
  scroll-margin-top: calc(var(--topbar-height, 72px) + 12px);
  overflow: hidden;
}

@media (min-width: 900px) {
  .report-week-section {
    padding: 26px 28px 22px;
  }
}

/*
* Report-Phasenfarben (eigenstaendig, nicht an - accent gebunden).
* Spaeter pro User-Theme aenderbar, ohne App-Akzent zu beruehren.
*/
:root {
  --report-stage-seed: #3d8b6e;
  --report-stage-seedling: #2f9e6b;
  --report-stage-clone: #4caf7a;
  --report-stage-veg: #00996a;
  --report-stage-flower: #e67e22;
  --report-stage-harvest: #c9a227;
  --report-stage-curing: #8e6bb8;
  --report-stage-fallback: #00996a;
}

/* Phase-Badge: oben an die Kachel, mit Lichtkante + sanftem Verlauf */
.report-week-kicker {
  --report-kicker-base: var(--report-stage-fallback);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: calc(100% - 24px);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
  background-color: var(--report-kicker-base);
  background-image: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.28) 0%,
    rgba(255, 255, 255, 0.08) 42%,
    rgba(0, 0, 0, 0.14) 100%
  );
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--report-kicker-base) 55%, #000);
  padding: 7px 16px 8px;
  border-radius: 0 0 14px 0;
  line-height: 1.25;
  /* Kachel-Ecke oben links mitzeichnen */
  border-top-left-radius: calc(var(--radius-lg) - 1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 3px 10px color-mix(in srgb, var(--report-kicker-base) 35%, transparent);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.22);
}

.report-week-kicker--seed {
  --report-kicker-base: var(--report-stage-seed);
}

.report-week-kicker--seedling {
  --report-kicker-base: var(--report-stage-seedling);
}

.report-week-kicker--clone {
  --report-kicker-base: var(--report-stage-clone);
}

.report-week-kicker--veg {
  --report-kicker-base: var(--report-stage-veg);
}

.report-week-kicker--flower {
  --report-kicker-base: var(--report-stage-flower);
}

.report-week-kicker--harvest {
  --report-kicker-base: var(--report-stage-harvest);
  color: #1a1408;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}

.report-week-kicker--curing {
  --report-kicker-base: var(--report-stage-curing);
}

.report-week-head {
  padding-top: 22px;
}

.report-week-title {
  margin: 0;
  font-size: 1.3rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
}

.report-week-now {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  font-size: 0.65rem;
  font-weight: 800;
  vertical-align: middle;
  padding: 4px 10px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--accent) 80%, #fff);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
    color-mix(in srgb, var(--accent) 18%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 36%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.14),
    0 1px 4px color-mix(in srgb, var(--accent) 14%, transparent);
}

.report-week-range {
  margin-top: 6px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.report-week-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0 4px;
}

.report-stat-chip {
  font-size: 0.76rem;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 999px;
  color: var(--text);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.07) 0%, transparent 50%),
    color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .report-stat-chip {
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.9) 0%, transparent 55%),
    color-mix(in srgb, var(--accent) 8%, #fff);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 3px rgba(0, 0, 0, 0.05);
}

[data-theme="light"] .report-private-badge {
  color: #555;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, transparent 55%),
    #f0f0f0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 1px 3px rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .report-hero-badge {
  color: var(--accent);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, transparent 50%),
    color-mix(in srgb, var(--accent) 10%, #fff);
}

.report-week-block {
  margin-top: 14px;
}

.report-block-title {
  margin: 0 0 8px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--text-secondary);
}

.report-empty-hint {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 10px 0;
}

.report-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px;
}

.report-media-item {
  position: relative;
  aspect-ratio: 1;
  border: none;
  padding: 0;
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg);
  border: 1px solid var(--border);
  cursor: pointer;
}

.report-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.report-media-play {
  position: absolute;
  inset: auto 6px 6px auto;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-week-journal {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.45;
}

.report-week-jdate {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}

.report-comment-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.report-comment-display {
  width: 100%;
}

/* Anzeige wie fliessender Report-Text (kein Textfeld-Look) */
.report-week-comment-text {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  word-break: break-word;
  padding: 0;
  margin: 0;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.report-week-comment-text p {
  margin: 0 0 0.55em;
}

.report-week-comment-text p:last-child {
  margin-bottom: 0;
}

.report-week-comment-text ul,
.report-week-comment-text ol {
  margin: 0.35em 0 0.55em;
  padding-left: 1.35rem;
}

.report-week-comment-text li {
  margin: 0.15em 0;
}

.report-comment-form {
  width: 100%;
}

/* Report WYSIWYG */
.report-rte {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  overflow: hidden;
}

.report-rte-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--bg-card) 80%, var(--bg));
}

.report-rte-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

.report-rte-btn:hover {
  background: var(--bg-hover);
  border-color: var(--border);
}

.report-rte-btn:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 1px;
}

.report-rte-sep {
  width: 1px;
  height: 18px;
  margin: 0 4px;
  background: var(--border);
  flex-shrink: 0;
}

.report-rte-editor {
  min-height: 144px;
  max-height: 360px;
  overflow-y: auto;
  padding: 12px 14px;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text);
  outline: none;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  resize: none;
  white-space: pre-wrap;
  word-break: break-word;
}

.report-rte-editor.is-empty::before {
  content: attr(data-placeholder);
  color: var(--placeholder, var(--text-muted));
  pointer-events: none;
  float: left;
  height: 0;
}

/* :empty greift nicht mit <br> - Placeholder per Klasse */
.report-rte-editor:focus {
  outline: none;
}

.report-rte-editor p {
  margin: 0 0 0.55em;
}

.report-rte-editor p:last-child {
  margin-bottom: 0;
}

.report-rte-editor ul,
.report-rte-editor ol {
  margin: 0.35em 0 0.55em;
  padding-left: 1.35rem;
}

.report-comment-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 8px;
}

.report-comment-toggle {
  align-self: flex-start;
}

.report-bottom-spacer {
  height: 110px;
}

.report-bottom-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: max(12px, env(safe-area-inset-bottom, 0px));
  z-index: 90;
  /* Gleiche Seitenraender wie Report-Kacheln / .content ( - content-pad-x: 16/12 Handy, 32 Desktop) */
  width: min(560px, calc(100% - 2 * var(--content-pad-x)));
  max-width: calc(100% - var(--safe-left) - var(--safe-right));
  box-sizing: border-box;
  pointer-events: none;
}

.report-bottom-inner {
  pointer-events: auto;
  background: color-mix(in srgb, var(--bg-card) 92%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
  /* Kein Innenabstand: Tabs gehen bis an den Kachelrand */
  padding: 0;
  overflow: hidden;
}

/* Phasen: connected, volle Breite bis zum Rand */
.report-phase-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  margin: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--border);
}

.report-phase-tabs::-webkit-scrollbar {
  display: none;
}

.report-phase-tab {
  /* Wachsen gleichmaessig, aber nie enger als der volle Phasenname */
  flex: 1 1 auto;
  min-width: max-content;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  padding: 12px 14px;
  cursor: pointer;
  white-space: nowrap;
  text-align: center;
  overflow: visible;
  text-overflow: clip;
}

.report-phase-tab:last-child {
  border-right: none;
}

.report-phase-tab:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.report-phase-tab.is-active {
  background: var(--accent);
  color: #fff;
  border-right-color: color-mix(in srgb, var(--accent) 70%, var(--border));
  box-shadow: none;
}

/* Wochen: connected, volle Breite bis zum Rand */
.report-week-tabs {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  width: 100%;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  justify-content: stretch;
}

.report-week-tabs::-webkit-scrollbar {
  display: none;
}

.report-week-tab {
  flex: 1 1 0;
  min-width: 2.2rem;
  border: none;
  border-radius: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 10px 8px;
  cursor: pointer;
  text-align: center;
}

.report-week-tab:last-child {
  border-right: none;
}

.report-week-tab:hover {
  background: var(--bg-hover, rgba(255, 255, 255, 0.06));
}

.report-week-tab.is-active,
.report-week-tab.is-current.is-active {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  color: var(--accent);
  box-shadow: none;
}

.report-week-tab.is-current:not(.is-active) {
  box-shadow: inset 0 -2px 0 0 var(--accent);
  color: var(--accent);
}

[data-theme="light"] .report-bottom-inner {
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
}

/* Auth (Login / Register) */
body.auth-mode {
  overflow: hidden;
}

/* Vor JS / ohne Session: kein Flash von Sidebar & App-Chrome */
html.auth-gate #app {
  display: none !important;
}

html.auth-gate #authScreen,
html.auth-gate #authScreen[hidden] {
  display: flex !important;
}

html.auth-gate body {
  overflow: hidden;
}

/* Android App-Sperre: Inhalt verdecken bis PIN / Biometrie ok */
html.app-lock-gate body {
  overflow: hidden;
}

html.app-lock-gate #app,
html.app-lock-gate #authScreen,
html.app-lock-gate #welcomeScreen,
html.app-lock-gate .sidebar,
html.app-lock-gate .topbar,
html.app-lock-gate .bottom-nav,
html.app-lock-gate .add-fab {
  visibility: hidden !important;
}

html.app-lock-gate #appLockScreen:not([hidden]) {
  display: flex !important;
}

.app-lock-screen[hidden] {
  display: none !important;
}

.app-lock-screen {
  position: fixed;
  inset: 0;
  z-index: 30000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, calc(16px + var(--safe-top))) max(16px, var(--safe-right)) max(24px, calc(16px + var(--safe-bottom))) max(16px, var(--safe-left));
  box-sizing: border-box;
  background: #000;
}

.app-lock-card {
  text-align: center;
}

.app-lock-card h1 {
  margin: 0 0 8px;
  font-size: 2rem;
  color: #fff;
}

.app-lock-text {
  margin: 0 0 22px;
  color: #bbb;
  font-size: 1rem;
}

.auth-screen {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(24px, calc(16px + var(--safe-top))) max(16px, var(--safe-right)) max(24px, calc(16px + var(--safe-bottom))) max(16px, var(--safe-left));
  box-sizing: border-box;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(76, 175, 80, 0.12), transparent 55%),
    var(--bg);
}

.auth-screen[hidden] {
  display: none !important;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px 24px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
}

.auth-brand {
  text-align: center;
  margin-bottom: 20px;
}

.auth-brand img {
  display: block;
  margin: 0 auto 10px;
}

.auth-brand h1 {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--accent);
}

.auth-tagline {
  margin: 6px 0 0;
  font-size: 0.88rem;
  color: var(--text-secondary);
}

.auth-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 18px;
  padding: 4px;
  background: var(--bg);
  border-radius: 10px;
  border: 1px solid var(--border);
}

.auth-tab {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 10px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.auth-tab.is-active {
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.auth-form .form-group {
  margin-bottom: 14px;
}

.auth-submit {
  width: 100%;
  margin-top: 4px;
}

.auth-login-links {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin-top: 4px;
}

.auth-login-links[hidden] {
  display: none !important;
}

.auth-legal {
  margin: 18px 0 0;
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.auth-legal a {
  color: var(--text-secondary);
}

.auth-legal a:hover {
  color: var(--text);
}

.auth-link-btn {
  width: 100%;
  margin-top: 8px;
}

.auth-link-btn[hidden] {
  display: none !important;
}

.auth-link-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.auth-panel-intro {
  margin: 0 0 12px;
  line-height: 1.4;
}

.auth-tabs[hidden] {
  display: none !important;
}

.auth-error {
  color: #e74c3c;
  font-size: 0.88rem;
  margin: 0 0 10px;
  padding: 8px 10px;
  background: rgba(231, 76, 60, 0.1);
  border-radius: 8px;
}

/* Willkommen / Onboarding nach Registrierung */
.welcome-card {
  max-width: 440px;
}

.welcome-disclaimer {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  background: color-mix(in srgb, var(--bg) 55%, transparent);
}

.welcome-disclaimer p {
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

.welcome-disclaimer strong {
  color: var(--text);
  font-weight: 700;
}

.welcome-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 14px;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
}

.welcome-ack input {
  margin-top: 3px;
  flex-shrink: 0;
}

body.welcome-mode {
  overflow: hidden;
}

body.welcome-mode #app {
  display: none !important;
}

/* Sidebar Profil-Avatar - immer unterstes Element im Footer */
.sidebar-user {
  position: relative;
  margin: 0;
  order: 10;
  width: 100%;
}

/* Beim ersten Paint: dezenter Skeleton statt Platzhalter / Konto */
.sidebar-user.is-booting .sidebar-avatar {
  background: var(--border);
  color: transparent;
  animation: sidebar-user-pulse 1.1s ease-in-out infinite;
}

.sidebar-user.is-booting .sidebar-user-name,
.sidebar-user.is-booting .sidebar-user-plan {
  display: block;
  height: 0.85em;
  border-radius: 4px;
  background: var(--border);
  color: transparent;
  animation: sidebar-user-pulse 1.1s ease-in-out infinite;
}

.sidebar-user.is-booting .sidebar-user-name {
  width: 72%;
  margin-bottom: 4px;
}

.sidebar-user.is-booting .sidebar-user-plan {
  width: 40%;
}

.sidebar-user.is-empty {
  opacity: 0.55;
}

@keyframes sidebar-user-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 0.85; }
}

.sidebar-avatar-btn {
  display: grid;
  grid-template-columns: calc(var(--sidebar-logo-inset) + var(--sidebar-logo-size)) minmax(0, 1fr);
  align-items: center;
  column-gap: var(--sidebar-label-gap);
  width: 100%;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  /* feste hoehe (Avatar + 14+14) - kein Springen wenn Meta aus */
  height: calc(var(--sidebar-logo-size) + 28px);
  min-height: calc(var(--sidebar-logo-size) + 28px);
  padding: 0 12px 0 0;
  line-height: 0;
  border-radius: 0;
  cursor: pointer;
  transition: background var(--transition);
  box-sizing: border-box;
}

.sidebar-avatar-btn:hover {
  background: var(--bg-hover);
}

.sidebar-avatar {
  grid-column: 1;
  width: var(--sidebar-logo-size);
  height: var(--sidebar-logo-size);
  margin-left: var(--sidebar-logo-inset);
  margin-right: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  background: linear-gradient(135deg, #00996a, #00543a);
  box-shadow: 0 0 0 0px var(--bg), 0 0 0 3px var(--accent);
  overflow: hidden;
  position: relative;
  border: 0px solid var(--accent);
  box-sizing: border-box;
}

.sidebar-avatar.has-photo {
  background: var(--border);
  color: transparent;
}

.sidebar-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.sidebar-user-meta {
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0;
  line-height: 1.25;
  gap: 1px;
}

.sidebar-user-name {
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar-user-plan {
  font-size: 0.75rem;
  line-height: 1.25;
  color: var(--text-muted);
  font-weight: 500;
}

.profile-menu-card {
  position: absolute;
  left: 8px;
  bottom: calc(100% + 6px);
  min-width: 180px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  padding: 6px;
  z-index: 120;
}

.profile-menu-card[hidden] {
  display: none !important;
}

.profile-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  box-sizing: border-box;
  border: none;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.25;
  text-align: left;
  padding: 10px 12px;
  /* Mitte: eckig; erstes/letztes mit Radius */
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
}

.profile-menu-card > .profile-menu-item:first-child {
  border-radius: 8px 8px 0 0;
}

.profile-menu-card > .profile-menu-item:last-child {
  border-radius: 0 0 8px 8px;
}

.profile-menu-card > .profile-menu-item:only-child {
  border-radius: 8px;
}

.profile-menu-item:hover {
  background: var(--bg-hover);
  color: var(--text);
}

.profile-menu-logout {
  color: var(--text);
  margin-top: 2px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
}

html.sidebar-collapsed .sidebar-user-meta {
  display: none !important;
}

html.sidebar-collapsed .sidebar-avatar-btn {
  grid-template-columns: calc(var(--sidebar-logo-inset) + var(--sidebar-logo-size));
  column-gap: 0;
  /* gleiche feste hoehe; nur seitliches Padding weg */
  padding: 0;
}

/* Eingeklappt: Menu nach rechts ueber den Inhalt oeffnen (sonst abgeschnitten) */
html.sidebar-collapsed .sidebar-user {
  overflow: visible;
}

html.sidebar-collapsed .sidebar-footer {
  overflow: visible;
}

html.sidebar-collapsed .profile-menu-card {
  left: calc(100% + 10px);
  right: auto;
  bottom: 0;
  transform: none;
  min-width: 200px;
  z-index: 200;
}

/* Account / Profil / Einstellungen */
.account-page {
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.modal-header-tabs {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 8px 0 0;
}

.modal-header-tabs[hidden] {
    display: none !important;
}

.modal.modal-has-header-tabs .modal-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.modal.modal-has-header-tabs .modal-header {
    gap: 8px;
}

.modal.modal-has-header-tabs .modal-header-end {
    margin-left: 0;
}

.settings-tabs {
    display: flex;
    gap: 4px;
    margin: 0;
    padding: 4px;
    background: var(--bg);
    border-radius: 10px;
    border: 1px solid var(--border);
    box-sizing: border-box;
    width: 100%;
}

.settings-tab {
    flex: 1 1 0;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 650;
    line-height: 1.25;
    padding: 9px 6px;
    border-radius: 8px;
    cursor: pointer;
    text-align: center;
    white-space: normal;
    transition: background 0.15s, color 0.15s;
}

.settings-tab-short {
    display: none;
}

.settings-tab.is-active {
    background: var(--surface, var(--bg-card));
    color: var(--text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.settings-tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.settings-tab-panels {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.settings-tab-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.settings-tab-panel[hidden] {
    display: none !important;
}

@media (max-width: 767px) {
    .settings-tab-full {
        display: none;
    }

    .settings-tab-short {
        display: inline;
    }

    .settings-tab {
        white-space: nowrap;
        font-size: 0.78rem;
        padding: 8px 4px;
    }

    .modal.modal-has-header-tabs .modal-header {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

.account-page .account-card {
  max-width: 700px;
  width: 100%;
}

/* Einstellungen: gleiche gro */
.account-page .account-card > form > .btn,
.account-page .account-card > form .btn[type="submit"],
.account-page .help-action-block .btn,
.account-page .account-danger-body .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 0.92rem;
  box-sizing: border-box;
}

.account-page .account-card > form > .btn,
.account-page .account-card > form .btn[type="submit"] {
  margin-top: 8px;
}

.account-page .help-actions {
  margin-top: 4px;
}

.account-page .account-card-actions .section-title {
  margin: 0 0 16px;
}

.profile-identity {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.profile-name-form {
  width: 100%;
  min-width: 0;
}

.profile-name-form .form-group {
  width: 100%;
}

.profile-name-form .form-input,
.profile-name-form .form-select {
  width: 100%;
  box-sizing: border-box;
}

/* Land breit, Alter schmal */
.profile-name-form .form-row {
  grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 7.5rem);
}

/* Land & Alter: zugeklappt wenn ausgefuellt */
.profile-meta-fold {
  margin: 0 0 14px;
  border: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  overflow: hidden;
}

.profile-meta-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.profile-meta-summary::-webkit-details-marker {
  display: none;
}

.profile-meta-summary-label {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  flex-shrink: 0;
}

.profile-meta-summary-value {
  flex: 1;
  min-width: 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text-secondary);
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profile-meta-chevron {
  flex-shrink: 0;
  display: flex;
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
  transition: transform 0.15s ease;
}

.profile-meta-chevron svg {
  width: 100%;
  height: 100%;
}

.profile-meta-fold[open] .profile-meta-chevron {
  transform: rotate(180deg);
}

.profile-meta-body {
  padding: 0 12px 12px;
}

.profile-meta-body .form-row {
  margin: 0;
}

.profile-meta-body .form-group {
  margin-bottom: 0;
}

@media (min-width: 560px) {
  .profile-identity {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }
  /* Avatar-Spalte: Bild + zwei Buttons nebeneinander */
  .profile-avatar-wrap {
    flex: 0 0 188px;
    width: 188px;
    max-width: 188px;
  }
  .profile-name-form {
    flex: 1 1 320px;
    max-width: 420px;
    min-width: 0;
    width: auto;
  }
}

.profile-avatar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* Gleicher Rahmen/Border/Radius/Farbe wie .sidebar-avatar (nur groesser) */
.profile-avatar-preview {
  width: 148px;
  height: 148px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.75rem;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #00996a, #006f4d);
  box-shadow: 0 0 0 0px var(--bg), 0 0 0 3px #00996a66;
  border: 2px solid var(--accent);
  overflow: hidden;
  position: relative;
  box-sizing: border-box;
}

.profile-avatar-preview.has-photo {
  color: transparent;
  background: var(--border);
}

.profile-avatar-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}

.profile-avatar-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
}

.profile-avatar-actions .btn {
  flex: 0 0 auto;
  white-space: nowrap;
  text-align: center;
  line-height: 1.25;
  padding: 6px 10px;
}

.profile-avatar-actions label.btn {
  cursor: pointer;
  margin: 0;
}

.account-card {
  padding: 20px;
}

.account-card > .section-title {
  padding-bottom: 22px;
  margin-bottom: 0;
}

.account-plan-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.account-plan-actions {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.account-plan-actions .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .account-plan-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .account-plan-badge {
    align-self: flex-start;
    width: auto;
  }

  .account-plan-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  .account-plan-actions .btn-sm {
    padding: 6px 8px;
  }
}

#leavePremiumBtn {
  color: var(--text-secondary);
  border: 1px solid var(--border);
}

#leavePremiumBtn:hover {
  color: #e67e22;
  border-color: rgba(230, 126, 34, 0.45);
}

.account-plan-badge {
  display: inline-block;
  margin-top: 0;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}

.account-plan-table-wrap {
  margin-top: 16px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.account-plan-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.account-plan-table th,
.account-plan-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.account-plan-table thead th {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.account-plan-table thead th:first-child,
.account-plan-table tbody th[scope="row"] {
  width: 48%;
}

.account-plan-table thead th:nth-child(2),
.account-plan-table thead th:nth-child(3),
.account-plan-table td {
  width: 26%;
}

.account-plan-table tbody th {
  font-weight: 600;
  color: var(--text-secondary);
  white-space: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.account-plan-table td {
  color: var(--text);
}

.account-plan-table .is-current {
  color: var(--text);
  font-weight: 400;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}

.account-plan-table thead th.is-current {
  color: var(--accent);
  font-weight: 700;
}

.admin-dash .section-title {
  margin: 20px 0 12px;
}

.admin-dash > .card + .card {
  margin-top: 16px;
}

.admin-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 10px;
  margin-bottom: 8px;
}

.admin-stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.admin-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.admin-stat-label {
  margin-top: 4px;
  color: var(--text-secondary);
  font-size: 0.8rem;
}

.admin-spark-row {
  display: grid;
  gap: 12px;
  margin: 16px 0 8px;
}

@media (min-width: 768px) {
  .admin-spark-row {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-spark-card .section-title {
  margin-top: 0;
}

.admin-spark {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 80px;
  margin-top: 8px;
}

.admin-spark-bar {
  flex: 1;
  min-width: 0;
  background: var(--accent);
  border-radius: 3px 3px 0 0;
  opacity: 0.85;
}

.admin-country-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 8px 12px;
}

.admin-country-list li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  color: var(--text-secondary);
  font-size: 0.9rem;
}

.admin-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: 10px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.admin-table th,
.admin-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.admin-table thead th {
  font-weight: 700;
  color: var(--text-secondary);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.admin-ref {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}

.account-plan-legal {
  margin-top: 12px;
  margin-bottom: 0;
}

.account-plan-legal a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.account-plan-legal a:hover {
  color: var(--accent-hover, var(--accent));
}

.account-plan-free {
  background: rgba(149, 165, 166, 0.2);
  color: var(--text);
  border: 1px solid var(--border);
}

.account-plan-premium {
  background: linear-gradient(135deg, rgba(241, 196, 15, 0.25), rgba(230, 126, 34, 0.2));
  color: #f1c40f;
  border: 1px solid rgba(241, 196, 15, 0.45);
}

.storage-block {
  margin-top: 4px;
}

.storage-label {
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-secondary);
}

.storage-label .form-hint {
  font-weight: 400;
  font-size: 0.8rem;
}

.media-upload-progress {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 16px 12px;
    background: var(--bg-card);
    border-top: 1px solid var(--border);
}

.media-upload-progress[hidden] {
    display: none !important;
}

.media-upload-progress.is-fixed {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--bottom-nav-total, 16px) + 16px);
    width: min(420px, calc(100vw - 32px));
    z-index: 240;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-top: 1px solid var(--border);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.media-upload-progress-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 600;
}

.media-upload-progress-track {
    height: 6px;
    border-radius: 999px;
    background: var(--bg-hover);
    overflow: hidden;
}

.media-upload-progress-bar {
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: var(--accent);
    transition: width 0.18s ease;
}

.media-upload-progress-bar.is-indeterminate {
    width: 36%;
    animation: media-upload-indeterminate 1.1s ease-in-out infinite;
}

@keyframes media-upload-indeterminate {
    0% { transform: translateX(-120%); }
    100% { transform: translateX(320%); }
}

.storage-bar {
  height: 12px;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
}

.storage-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #00996a, #09b07d);
  transition: width 0.3s ease;
  min-width: 0;
}

.storage-bar.is-low .storage-bar-fill {
  background: linear-gradient(90deg, #e67e22, #e74c3c);
}

.storage-bar.is-over .storage-bar-fill {
  background: linear-gradient(90deg, #c0392b, #e74c3c);
}

.storage-bar-meta {
  margin-top: 6px;
  font-size: 0.82rem;
  color: var(--text-muted);
}

.storage-bar-detail {
  margin-top: 4px;
  font-size: 0.78rem;
  line-height: 1.35;
}

.storage-local-size {
  font-size: 1.15rem;
  font-weight: 650;
  letter-spacing: -0.02em;
  color: var(--text);
  margin-top: 2px;
}

/* Profil: E-Mail / Passwort aendern standardmaessig zugeklappt */
.account-fold {
  padding: 0;
  overflow: hidden;
}

.account-fold-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.account-fold-toggle::-webkit-details-marker,
.account-fold-toggle::marker {
  display: none;
  content: none;
}

.account-fold-toggle:hover {
  background: var(--bg-hover);
}

.account-fold-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.account-fold-toggle .section-title {
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.account-fold-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.account-fold-chevron svg {
  width: 18px;
  height: 18px;
}

.account-fold[open] .account-fold-chevron {
  transform: rotate(180deg);
}

.account-fold-body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--border);
}

.premium-welcome-list {
  margin: 10px 0 0;
  padding-left: 1.2em;
  line-height: 1.45;
}

.premium-welcome-list li {
  margin: 4px 0;
}

.modal.modal-premium-welcome .modal-body {
  color: var(--text-secondary);
}

/* Account loeschen: standardmaessig zugeklappt, neutral; Akzent erst wenn geoeffnet */
.account-danger-fold {
  border-color: var(--border);
  padding: 0;
  overflow: hidden;
}

.account-danger-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 16px 20px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.account-danger-toggle:hover {
  background: var(--bg-hover);
}

.account-danger-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.account-danger-toggle .section-title {
  margin: 0;
  color: var(--text-secondary);
  font-weight: 600;
}

.account-danger-chevron {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.account-danger-chevron svg {
  width: 18px;
  height: 18px;
}

.account-danger-fold:not(.is-collapsed) .account-danger-chevron {
  transform: rotate(180deg);
}

.account-danger-body {
  padding: 0 20px 18px;
  border-top: 1px solid var(--border);
}

.account-danger-body[hidden] {
  display: none !important;
}

.account-danger-warn {
  margin: 14px 0 16px;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.45;
  color: color-mix(in srgb, #e74c3c 70%, var(--text));
}

/* Geoeffnet: dezent Warnfarbe, nicht schreiend rot */
.account-danger-fold:not(.is-collapsed) {
  border-color: color-mix(in srgb, #e74c3c 28%, var(--border));
}

.account-danger-fold:not(.is-collapsed) .account-danger-toggle .section-title {
  color: color-mix(in srgb, #e74c3c 70%, var(--text));
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.form-check input {
  margin-top: 3px;
  flex-shrink: 0;
}

.btn-danger {
  background: #c0392b;
  color: #fff;
  border: none;
}

.btn-danger:hover {
  background: #e74c3c;
}

.btn-danger-soft {
  background: color-mix(in srgb, #e57373 18%, var(--bg-elevated));
  color: #e57373;
  border: 1px solid color-mix(in srgb, #e57373 40%, var(--border));
}

.btn-danger-soft:hover {
  background: color-mix(in srgb, #e57373 28%, var(--bg-elevated));
  color: #ef5350;
  border-color: color-mix(in srgb, #ef5350 50%, var(--border));
}

.help-page {
  max-width: 42rem;
  margin: 0 auto;
  padding-bottom: 32px;
}

.help-intro {
  margin: 0 0 16px;
  font-size: 0.95rem;
  line-height: 1.45;
}

.help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.help-toc-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.help-toc-link:hover {
  color: var(--text);
  border-color: color-mix(in srgb, var(--accent) 40%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-elevated));
}

.help-sections {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.help-section {
  border-radius: var(--radius-lg);
  background: var(--bg-card);
  border: 1px solid var(--border);
  overflow: hidden;
  /* Scroll-Anker: Abstand unter fester Topbar */
  scroll-margin-top: calc(var(--topbar-height, 72px) + var(--safe-top, 0px) + 12px);
}

html.capacitor-native .help-section {
  scroll-margin-top: calc(var(--topbar-height, 72px) + var(--safe-top, 0px) + 12px);
}

.help-section-summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 14px 16px;
  font-size: 0.98rem;
  font-weight: 650;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 10px;
}

.help-section-summary::-webkit-details-marker {
  display: none;
}

.help-section-summary::before {
  content: '';
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid var(--text-secondary);
  border-bottom: 2px solid var(--text-secondary);
  transform: rotate(-45deg);
  transition: transform 0.15s ease;
  flex-shrink: 0;
  margin-top: -2px;
}

.help-section[open] > .help-section-summary::before {
  transform: rotate(45deg);
  margin-top: 0;
}

.help-section[open] > .help-section-summary {
  border-bottom: 1px solid var(--border);
  color: var(--text);
}

.help-section-body {
  padding: 12px 16px 16px;
}

.help-list {
  margin: 0 0 14px;
  padding-left: 1.15rem;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.5;
}

.help-list li {
  margin-bottom: 8px;
}

.help-list li:last-child {
  margin-bottom: 0;
}

/* Einstieg: nummerierte Liste, eingerueckt, ohne Kreis-Bullets */
.help-list--numbered {
  list-style: decimal;
  list-style-position: outside;
  padding-left: 1.6rem;
  margin: 0 0 12px;
}

.help-list--numbered li {
  padding-left: 0.35rem;
  margin-bottom: 12px;
}

.help-list--numbered li:last-child {
  margin-bottom: 0;
}

.help-after-items {
  margin: 0 0 14px;
  line-height: 1.45;
}

.help-actions-card {
  padding: 18px 18px 20px;
}

.help-actions-card .section-title {
  margin: 0 0 18px;
}

.help-actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 20px;
}

.help-action-block {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.help-action-text {
  margin: 0;
  line-height: 1.45;
}

.help-action-block .btn {
  width: 100%;
  justify-content: center;
  min-height: 44px;
  padding: 12px 16px;
  font-size: 0.92rem;
  box-sizing: border-box;
}

/* Abschnitt-Links in den Hilfe-Akkordeons etwas grosszuegiger */
.help-section-body > .btn {
  min-height: 40px;
  padding: 10px 16px;
  box-sizing: border-box;
}

.feature-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 12000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  background: var(--overlay, rgba(0, 0, 0, 0.7));
  box-sizing: border-box;
}

.feature-tour-card {
  width: 100%;
  max-width: 26rem;
  padding: 22px 22px 18px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated, var(--bg-card));
  border: 1px solid var(--border);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
}

.feature-tour-progress {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}

.feature-tour-dot {
  flex: 1;
  height: 4px;
  border-radius: 999px;
  background: var(--border);
}

.feature-tour-dot.is-active,
.feature-tour-dot.is-done {
  background: var(--accent);
}

.feature-tour-step-label {
  margin: 0 0 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.feature-tour-title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}

.feature-tour-body {
  margin: 0 0 20px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

.feature-tour-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.feature-tour-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}

html.climate-hints-off .climate-hints,
html.climate-hints-off .grow-climate-hints-wrap,
html.climate-hints-off .env-fold[data-env-section^="hints-"],
html.climate-hints-off .dash-env-stat-hints {
  display: none !important;
}

.climate-hints {
  margin-top: 12px;
  padding: 0;
  border: none;
  background: transparent;
}

.climate-hints.is-compact {
  margin-top: 12px;
}

.climate-hints-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 12px;
  margin-bottom: 8px;
}

.climate-hints-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.climate-hints-note {
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted);
}

.climate-hints-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.climate-hint {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
}

.climate-hint-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  min-width: 0;
}

.climate-hint-tag {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 4px 7px 4px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
}

.climate-hint--warn .climate-hint-tag {
  color: #e08a3c;
  background: color-mix(in srgb, #e67e22 16%, var(--bg-card));
}

.climate-hint--info .climate-hint-tag {
  color: #7aa8d4;
  background: color-mix(in srgb, #5b9bd5 14%, var(--bg-card));
}

.climate-hint--tip .climate-hint-tag {
  color: var(--accent);
  background: var(--accent-muted);
}

.climate-hint-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
  min-width: 0;
}

.climate-hint-detail {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  line-height: 1.45;
}

.env-live .climate-hints {
  margin-top: 15px;
}

/* Hinweise unter Hero volle Breite, ohne Bild-Spalte zu strecken */
.env-climate-hints-wrap {
  margin-top: 4px;
}

/* Pflanzen-Detail: Klima-Hinweise vor den Terminen */
.grow-detail-page .grow-climate-hints-wrap {
  margin: 0 0 12px;
}
.grow-detail-page .grow-climate-hints-wrap .climate-hints {
  margin-top: 0;
}

.env-climate-hints-wrap .climate-hints {
  margin-top: 0;
}

.env-fold[data-env-section^="hints-"] .climate-hints,
.env-fold[data-env-section^="hints-"] .climate-hints.in-fold {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.env-fold-note {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted);
  max-width: 12rem;
  text-align: right;
  line-height: 1.25;
}

.env-hints-empty {
  margin: 0;
}
/* - BLE SwitchBot Sensor (Umgebung) - */
.ble-sensor-sheet {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Intro-Text: enger zur Verknuepfungs-Kachel */
.ble-sensor-sheet > .form-hint:first-child {
  margin-top: 0;
  margin-bottom: 2px;
}
#bleLinkedWrap:not([hidden]) {
  margin: 0;
}
.ble-linked-card {
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ble-linked-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.ble-linked-name {
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--text);
  word-break: break-word;
}
.ble-linked-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
}
.ble-linked-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  align-items: stretch;
  margin-top: 2px;
}
.ble-linked-actions .btn {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
}
.ble-linked-actions .btn-primary.is-saving,
.ble-linked-actions .btn-primary:disabled.is-saving {
  background: color-mix(in srgb, var(--accent) 52%, #000);
  opacity: 1;
}
.ble-linked-actions .btn.is-saving::after {
  width: 1em;
  height: 1em;
  border-width: 2.5px;
  margin-left: 0.45em;
}
.ble-linked-auto {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}
.ble-linked-auto .form-label {
  margin-bottom: 6px;
}
.ble-auto-save-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.ble-auto-save-row .form-select {
  flex: 1 1 140px;
  min-width: 0;
}
.ble-auto-save-row .btn {
  flex: 0 0 auto;
}
.ble-linked-auto.is-premium-locked .form-select {
  opacity: 0.62;
  pointer-events: none;
}
.ble-history {
  margin-top: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ble-history-unavailable {
  gap: 0;
}
.ble-history-unavailable .form-hint {
  margin: 0;
}
.ble-history .form-label {
  margin: 4px 0 0;
}
.ble-history-times {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
}
.ble-history-progress {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 2px;
}
.ble-history-progress[hidden] {
  display: none !important;
}
.ble-history-progress-label {
  font-size: 0.82rem;
  color: var(--text-secondary);
  font-weight: 600;
}
#bleHistFetchBtn {
  margin-top: 4px;
}
.premium-pill {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  vertical-align: middle;
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
#bleAutoStatus {
  font-weight: 500;
  color: var(--text-secondary);
}
.ble-scan-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  min-height: 0;
}
/* Ohne Verknuepfung: keine Trennlinie ueber "Sensor suchen" */
.ble-sensor-sheet.is-unlinked .ble-scan-section {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  flex: 1 1 auto;
  min-height: 0;
}
.modal-body.ble-sheet-unlinked {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.modal-body.ble-sheet-unlinked .ble-sensor-sheet {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
}
.modal-body.ble-sheet-unlinked .ble-sensor-list {
  flex: 1 1 auto;
  max-height: none;
  min-height: 0;
  margin-top: 4px;
}
.ble-scan-section-title {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-muted);
  margin: 0 0 2px;
}
.ble-sensor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
/* Status 10 Sensoren: wenig Luft zur ersten Sensor-Karte */
.ble-sensor-sheet #bleSensorStatus.form-hint {
  margin: 0;
  padding: 0;
  min-height: 0;
  line-height: 1.35;
  max-height: 2.8em;
  overflow: hidden;
  flex: 0 0 auto;
}
.ble-sensor-sheet #bleSensorStatus.form-hint:empty {
  display: none;
}
.ble-scan-seen {
  flex: 0 0 auto;
  max-height: 7.5em;
  overflow: auto;
  margin: 4px 0 0;
  padding: 6px 8px;
  font-size: 0.75rem;
  line-height: 1.35;
  color: var(--text-muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  word-break: break-word;
}
.ble-scan-seen[hidden] {
  display: none !important;
}
.ble-sensor-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
  max-height: min(50vh, 360px);
  overflow: auto;
  flex: 1 1 auto;
  min-height: 120px;
}
.ble-sensor-list.is-hidden {
  display: none;
}
.ble-sensor-list > .form-hint {
  margin: 0;
}
.ble-read-busy {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 28px 16px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  background: var(--bg);
  color: var(--text-secondary);
  text-align: center;
}
.ble-read-busy[hidden] {
  display: none !important;
}
.ble-read-busy .spinner {
  margin-bottom: 0;
}
.spinner.spinner-sm {
  width: 28px;
  height: 28px;
  border-width: 3px;
  margin-bottom: 0;
}
.ble-read-busy-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  margin: 0;
}
.ble-read-busy-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin: 0;
}
.ble-sensor-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.ble-sensor-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}
.ble-sensor-item:hover,
.ble-sensor-item:active {
  border-color: var(--accent);
  background: var(--bg-hover);
}
.ble-sensor-item.is-linked {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 10%, var(--bg-card));
}
.ble-sensor-item.is-taken,
.ble-sensor-item:disabled {
  cursor: not-allowed;
  opacity: 1;
  background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-elevated));
  border-style: dashed;
  border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border));
  color: var(--text-muted);
}
.ble-sensor-item.is-taken:hover,
.ble-sensor-item.is-taken:active,
.ble-sensor-item:disabled:hover,
.ble-sensor-item:disabled:active {
  border-color: color-mix(in srgb, var(--text-muted) 45%, var(--border));
  background: color-mix(in srgb, var(--text-muted) 8%, var(--bg-elevated));
}
.ble-sensor-item.is-taken .ble-sensor-item-vals {
  color: var(--text-muted);
  font-weight: 500;
}
.ble-sensor-item-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ble-sensor-item-main strong {
  font-size: 0.95rem;
  font-weight: 600;
}
.ble-sensor-item-main small {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ble-sensor-item-vals {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-size: 0.9rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  color: var(--accent);
}
.ble-sensor-item-status {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 0.78rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--text);
  background: color-mix(in srgb, var(--text-muted) 16%, var(--bg-card));
}
.ble-sensor-item-status.is-here {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
}
.ble-sensor-item-lock {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}