/* =========================================================
   0) TOKENS & SCALE
   ========================================================= */
:root{
  /* Brand */
  --brand:#2C6B4A;
  --brand-600:#285F43;
  --brand-700:#214E37;

  /* UI */
  --ui-bg:#fff;
  --ui-ink:#111827;
  --ui-sub:#6b7280;
  --ui-border:#e5e7eb;
  --ui-muted:#f9fafb;
  --ui-primary:var(--brand);
  --ui-shadow:0 12px 30px rgba(0,0,0,.12);

  /* Cards */
  --ink:#1e293b;
  --sub:#637083;
  --border:#e6e9ee;
  --radius:16px;
  --shadow:0 12px 40px rgba(0,0,0,.14);

  /* Spacing scale */
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-24:24px;

  /* Range defaults (non-modal) */
  --range-h:8px;
  --range-icon:20px;
  --range-label:#6b7570;
  --range-bg:#e7eaee;
  --range-fill:rgba(61,155,122,.35); /* #3d9b7a @35% */
  --range-marker:#3d9b7a;
    --pl-z-filterbar: 2147483000;     /* unter Drawer/Overlay, aber über Card-UI */
  --pl-z-card-ui: 20;               /* Card overlays/buttons */
  --pl-z-drawer-overlay: 2147483645;/* dein Overlay */
  --pl-z-drawer: 2147483646;        /* dein Drawer */
}

/* =========================================================
   1) BASE / TYPO
   ========================================================= */
html, body,
.plant-grid, .plant-card,
.offcanvas-sidebar, .filters__options, .filterbar{
  font-family:"Poppins", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--ink);
}

/* =========================================================
   2) LAYOUT: LIBRARY & GRID
   ========================================================= */
#plant-library{
  width:100%;
  margin:2rem auto;
  padding:0 1rem;
  position:relative;
  display:flex;
  align-items:flex-start;
  overflow:visible;
}
#plant-library-content{ flex:1; display:flex; flex-direction:column; }

#plant-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
  gap:2rem;
  align-items:stretch;
}

/* =========================================================
   3) PLANT CARD (STRUCTURE)
   ========================================================= */
.plant-card{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--card-radius);
  border:1px solid var(--card-border);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  min-height:320px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

@media (hover:hover){
  .plant-card:hover{
    transform:translateY(-3px);
    box-shadow:var(--card-shadow-hover);
    border-color:rgba(0,0,0,.10);
  }
}

.plant-image-wrapper{ position:relative; background:#f3f4f6; }
.plant-image-wrapper img{ display:block; width:100%; height:auto; object-fit:cover; }

.plant-card-body{
  padding:var(--sp-16);
  display:flex; flex-direction:column; justify-content:space-between; flex-grow:1;
}
.plant-card-body h3,
.plant-name{
  margin:0 0 var(--sp-8);
  text-align:center;
  font-weight:800;
  font-size:clamp(1.1rem, 1.2vw + .9rem, 1.3rem);
  color:#38424a;
}
@media (min-width:900px){
  .plant-card-body h3{ font-size:1.25rem; }
}

.plant-tags{ display:flex; flex-wrap:wrap; gap:.5rem; }
.plant-tags span{
  background:#f0f0f0; border-radius:8px; padding:.3rem .6rem;
  font-size:.85rem; color:#333;
}

/* =========================================================
   4) META / BADGES / PILLS
   ========================================================= */
.plant-meta{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; padding:6px 0 0;
}
.plant-meta-secondary{
  display:flex; flex-wrap:wrap; gap:8px;
  justify-content:center; padding:0 12px 6px;
}

/* Badge container (generic + variants) */
.meta-badge{
  display:inline-flex; align-items:center; gap:6px;
  height:36px; white-space:nowrap;
  padding:4px 8px;
  border:1px solid var(--ui-border);
  border-radius:10px; background:var(--ui-bg);
  box-shadow:0 2px 6px rgba(0,0,0,.06);
}
.meta-badge.growth,
.meta-badge.position{ padding:0; background:none; box-shadow:none; }
.meta-badge img{ height:28px; width:auto; display:block; }
.meta-badge[data-color="green"] img{ background-color:#28a745; }
.meta-badge[data-color="yellow"] img{ background-color:#ffc107; }
.meta-badge[data-color="orange"] img{ background-color:#fd7e14; }
.meta-badge[data-color="red"] img{ background-color:#dc3545; }
.meta-badge[data-color="blue"] img{ background-color:#007bff; }

.meta-text{ font-size:16px; font-weight:600; color:#ffffff; }

/* Pills */
.pl-pill{ padding:4px 8px; border-radius:999px; background:#f5f7f6; font:600 12px/1.2 system-ui; color:var(--ui-ink); }
.pl-pill--light{ background:#eef7ff; }

/* =========================================================
   5) RANGE BARS (DEDUPED)
   ========================================================= */
.plant-ranges{
  display:grid; gap:10px; margin-top:6px;
}
.range-row{
  display:grid; grid-template-columns:auto 1fr;
  gap:12px; align-items:center;
}
.range-label{
  display:flex; align-items:center; gap:8px;
  color:var(--range-label); font:600 13px/1.2 system-ui;
}
.range-label .ico{ width:var(--range-icon); height:var(--range-icon); opacity:.9; }

.range-bar{
  position: relative;
  height: var(--range-h);
  background: linear-gradient(90deg, #f4f7f6 0%, #e6e9ee 100%); /* sehr dezent */
  border-radius: 999px;
  overflow: hidden;
}

.range-bar::before{
  content: "";
  position: absolute; inset: 0;
  left: var(--from,0%); 
  right: calc(100% - var(--to,100%));
  background: linear-gradient(90deg, #6fc2a7 0%, #3d9b7a 100%); /* Ton-in-Ton zu #3d9b7a */
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 6px 8px rgba(255,255,255,.35);
}


.range-bar::after{
  content:none !important; /* Marker aus */
}
.range-min,.range-max{
  position:absolute; top:-22px; font:500 12px/1 system-ui; color:var(--range-label);
}
.range-min{ left:0; } .range-max{ right:0; }

.range-bar--with-text{
  display:flex; align-items:center; justify-content:center;
  color:#1f2c26; font:600 11px system-ui;
}
.range-bar--with-text .range-text{ position:relative; z-index:1; opacity:.9; }

/* =========================================================
   6) FILTERBAR
   ========================================================= */
/* Basis: eigener Stack, damit sticky sauber darüber liegen kann */
#plant-library,
#plant-library-content{
  position: relative;
  z-index: 0;
}

/* Filterbar: über allem Content, aber unter .sidebar-overlay (2147483645) und Drawer (2147483646) */
.filterbar{
  position: sticky;
  top: 75px;
  z-index: var(--pl-z-filterbar);

  display:flex; gap:12px; align-items:center;
  padding:10px 12px; margin-bottom:12px;
  background:#fff; border:1px solid var(--ui-border);
  border-radius:14px; box-shadow:0 8px 20px rgba(0,0,0,.05);
}

.filterbar .sidebar-toggle{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 14px; border:0; border-radius:12px;
  background:var(--ui-primary); color:#fff; font:700 14px/1 system-ui; cursor:pointer;

  flex:0 0 auto;
  white-space:nowrap;
}

.filterbar__search{ position:relative; flex:1 1 auto; min-width:0; }
.filterbar__search .input-icon{
  position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.55;
}
#global-search{
  width:100%; border:1px solid var(--ui-border); border-radius:999px;
  padding:10px 12px 10px 36px; background:var(--ui-muted);
  font:500 14px/1.2 system-ui; color:var(--ui-ink);
}
#global-search:focus{ outline:none; box-shadow:0 0 0 3px rgba(47,107,74,.18); background:#fff; }

/* =========================================================
   7) OFF-CANVAS FILTER (SIDEBAR)
   ========================================================= */
/* =========================================================
   7) OFF-CANVAS FILTER (SIDEBAR) — RIGHT SLIDE-IN (FINAL)
   ========================================================= */
#plant-filters.offcanvas-sidebar{
  position:fixed !important;

  /* statt inset:0 auto 0 0 -> rechts andocken */
  top:0 !important;
  right:0 !important;
  bottom:0 !important;
  left:auto !important;

  width:min(92vw,360px) !important;
  max-width:360px !important;
  padding:16px !important;
  background:var(--ui-bg) !important;

  /* visuell gespiegelt */
  border-left:1px solid var(--ui-border) !important;
  border-right:0 !important;
  border-radius:18px 0 0 18px !important;

  z-index:2147483646 !important;

  display:flex !important;
  flex-direction:column !important;
  gap:12px !important;

  overflow:auto !important;

  /* statt -100% (links) -> +100% (rechts) */
  transform:translateX(100%) !important;
  transition:transform .2s ease-out !important;
  will-change:transform !important;
  backface-visibility:hidden !important;
}

/* bleibt bewusst .active (passt zu deinem JS) */
#plant-filters.offcanvas-sidebar.active{
  transform:translateX(0) !important;
}

/* =========================================================
   Overlay für Sidebar
   ========================================================= */
.sidebar-overlay{
  position:fixed !important;
  inset:0 !important;
  background:rgba(0,0,0,.35) !important;
  backdrop-filter:blur(2px) !important;
  z-index:2147483645 !important;
}
.sidebar-overlay[hidden]{ display:none !important; }

/* =========================================================
   Sidebar Header
   ========================================================= */
#plant-filters .sidebar-header{
  position:sticky !important;
  top:0 !important;
  z-index:2 !important;
  background:linear-gradient(to bottom, var(--ui-bg) 75%, transparent) !important;
  padding:6px 0 10px !important;
  margin:-6px -2px 8px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
}
#plant-filters .sidebar-header h2{
  margin:0 !important;
  font:700 14px/1.2 system-ui !important;
  color:var(--ui-ink) !important;
}

/* =========================================================
   Close Button
   ========================================================= */
#close-filters{
  width:32px !important;
  height:32px !important;
  display:grid !important;
  place-items:center !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:var(--ui-ink) !important;
  font-size:20px !important;
  cursor:pointer !important;
}
#close-filters:hover{ background:transparent !important; }

/* =========================================================
   Sections & Toggles
   ========================================================= */
#plant-filters .filter-section{
  padding:10px 0 !important;
  border-bottom:1px dashed var(--ui-border) !important;
}
#plant-filters .filter-section:last-of-type{ border-bottom:0 !important; }

.filters__group-toggle{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
  padding:6px 0 !important;
  border:0 !important;
  background:transparent !important;
  font:600 13px/1.2 system-ui !important;
  color:var(--ui-ink) !important;
  cursor:pointer !important;
}
#plant-filters .chev{
  width:14px !important;
  height:14px !important;
  opacity:.7 !important;
  transition:transform .15s ease !important;
}
#plant-filters .filter-section.is-open .chev{
  transform:rotate(180deg) !important;
}

/* =========================================================
   Options
   ========================================================= */
.filters__options{
  padding:6px 2px !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:6px !important;
}
#plant-filters .filter-section .filters__options{ display:none !important; }
#plant-filters .filter-section.is-open .filters__options{ display:grid !important; }

.opt{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.opt input[type="checkbox"]{
  width:16px !important;
  height:16px !important;
  accent-color:var(--ui-primary) !important;
}
.opt span{
  font:600 12px/1.2 system-ui !important;
  color:var(--ui-ink) !important;
  padding:4px 8px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:999px !important;
  background:#fff !important;
}

/* =========================================================
   Chips
   ========================================================= */
.filters__chips{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:8px !important;
}
.chip{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  padding:4px 8px !important;
  border:1px solid var(--ui-border) !important;
  border-radius:999px !important;
  background:#fff !important;
  color:var(--ui-ink) !important;
  font:600 12px/1 system-ui !important;
  cursor:pointer !important;
}

/* =========================================================
   Footer / Buttons
   ========================================================= */
.filters__foot{
  position:sticky !important;
  bottom:-1px !important;
  margin-top:4px !important;
  padding-top:8px !important;
  background:linear-gradient(to top, #fff 70%, transparent) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:10px !important;
}
.result-count{
  font:600 12px/1 system-ui !important;
  color:var(--ui-sub) !important;
}
.button-group{
  display:flex !important;
  gap:8px !important;
}

/* =========================================================
   Group Toggle: Hover/Focus neutral
   ========================================================= */
#plant-filters .filters__group-toggle,
#plant-filters .filters__group-toggle:hover,
#plant-filters .filters__group-toggle:focus,
#plant-filters .filters__group-toggle:active,
#plant-filters button.filters__group-toggle:hover,
#plant-filters a.filters__group-toggle:hover{
  background:transparent !important;
  color:inherit !important;
  border:0 !important;
  box-shadow:none !important;
  text-decoration:none !important;
  transform:none !important;
  outline:none !important;
  transition:none !important;
  -webkit-tap-highlight-color:transparent;
}

/* Pfeil beim Hover NICHT animieren */
#plant-filters .filters__group-toggle:hover .chev{
  transform:none !important;
  opacity:.7 !important;
}

/* =========================================================
   8) BUTTONS (GLOBAL)
   ========================================================= */
.btn{
  display:inline-flex !important; align-items:center !important; gap:8px !important;
  border-radius:10px !important; padding:8px 12px !important; font:700 12px/1 system-ui !important;
  cursor:pointer !important; border:1px solid transparent !important;
  transition:background .15s ease, border-color .15s ease !important;
}
.btn--primary{ background:var(--ui-primary) !important; color:#fff !important; }
.btn--primary:hover{ background:#14532d !important; }
.btn--ghost{ background:#fff !important; border-color:var(--ui-border) !important; color:#111827 !important; }
.btn--ghost:hover{ background:var(--ui-muted) !important; }

#global-search:focus{
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent) !important;
  border-color:var(--brand) !important;
}
.sidebar-toggle{ background:var(--brand) !important; border-color:var(--brand) !important; color:#fff !important; }
.sidebar-toggle:hover{ background:var(--brand-600) !important; }

/* =========================================================
   9) ICONS & DIFFICULTY BADGE
   ========================================================= */
.badge{ display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:12px; font:600 12px/1 system-ui; }
.badge .ico{ width:32px; height:32px; object-fit:contain; opacity:.85; }
.badge--difficulty{ color:#fff; }
.badge--ghost{ background:#eef2ef; color:#1f2c26; }


/* Difficulty color tags */
.diff--g1{ background:#8bc34a; color:#fff; }
.diff--g2{ background:#3c8f43; color:#fff; }
.diff--y{ background:#F2B705; color:#fff; }
.diff--o{ background:#EC8B3A; color:#fff; }
.diff--r{ background:#E55454; color:#fff; }

.badge img.ico{ filter:none !important; opacity:1; }
.plant-badges{ display:flex; flex-wrap:wrap; gap:6px; }
.meta-difficulty{ display:flex; justify-content:center; margin:4px 0 21px; }

.badge.badge--difficulty{
  gap:6px; padding:20px 15px; border-radius:8px; height:28px;
  font:700 12px/1 system-ui;
}
.badge.badge--difficulty .ico{ width:32px; height:32px; }

.meta-row{ display:flex; justify-content:center; gap:14px; margin:8px 0 var(--sp-16); }
.meta-icon{ display:inline-flex; align-items:center; gap:6px; height:24px; }
.meta-icon .ico{ width:38px; height:38px; }
.meta-icon .meta-text{ font:600 12px/1.2 system-ui; color:#38424a; }

/* Difficulty chip mapping */
:root{
  --diff-beginner:#34d399;
  --diff-intermediate:#f59e0b;
  --diff-advanced:#ef4444;
  --diff-expert:#7c3aed;
}
.badge--difficulty.diff--g1{ --diff-accent:var(--diff-beginner); }
.badge--difficulty.diff--g2{ --diff-accent:color-mix(in srgb, var(--diff-beginner) 85%, black 15%); }
.badge--difficulty.diff--y{  --diff-accent:var(--diff-intermediate); }
.badge--difficulty.diff--o{  --diff-accent:color-mix(in srgb, var(--diff-intermediate) 75%, var(--diff-advanced) 25%); }
.badge--difficulty.diff--r{  --diff-accent:var(--diff-advanced); }
.badge--difficulty.diff--v{  --diff-accent:var(--diff-expert); }

/* Card difficulty chip (bottom-right) */
.plant-card .badge--difficulty{
  position:absolute; right:8px; bottom:8px;
  display:flex; align-items:center; gap:6px; padding:7px 12px; border-radius:10px;
  color:#fff; font-weight:700; font-size:12px; line-height:1; z-index:2; user-select:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--diff-accent, #3d9b7a) 96%, white 4%) 0%,
      color-mix(in srgb, var(--diff-accent, #3d9b7a) 90%, black 10%) 100%);
  border:1px solid color-mix(in srgb, var(--diff-accent, #3d9b7a) 65%, white 35%);
  text-shadow:0 1px 1px rgba(0,0,0,.25);
}
.plant-card .badge--difficulty img{ width:14px; height:14px; }
@media (hover:hover){
  .plant-card .badge--difficulty:hover{
    transform:translateY(-1px);
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--diff-accent) 98%, white 2%) 0%,
        color-mix(in srgb, var(--diff-accent) 88%, black 12%) 100%);
  }
  .plant-card .badge--difficulty:active{ transform:translateY(0); }
}
@supports not (color: color-mix(in srgb, black 50%, white 50%)){
  .plant-card .badge--difficulty{
    background:var(--diff-accent, #3d9b7a);
    border-color:rgba(255,255,255,.3);
  }
}

/* =========================================================
   10) MISC / UTIL
   ========================================================= */
.plant-image-wrapper{ position:relative; overflow:hidden; }

/* =========================================================
   MODAL 2025 — SCOPED (wirkt nur in .plm / .plm-overlay)
   ========================================================= */

/* Farb-/UI-Variablen (Fallback auf bestehende Site-Vars) */
:root{
  --plm-brand:  var(--brand, #2C6B4A);
  --plm-ink:    var(--ui-ink, #111827);
  --plm-border: var(--ui-border, #e5e7eb);
  --plm-bg:     #fff;
  --plm-overlay: rgba(17,25,40,.55);
  --plm-shadow: 0 18px 50px rgba(0,0,0,.18);
}

/* Overlay: zentriert + Blur */
.plm-overlay{
  position:fixed; inset:0; z-index:2147483647;
  display:flex; align-items:center; justify-content:center;
  padding:24px; background:var(--plm-overlay); backdrop-filter:blur(4px);
  min-height:100dvh; opacity:1;
}
.plm-overlay.is-closing{ animation:plm-fade-out .15s ease forwards; }
@keyframes plm-fade-out{ to{opacity:0} }
@supports not (height:1dvh){ .plm-overlay{ min-height:100vh; } }

/* Dialog: responsiv, overflow sichtbar (für floating Close) */
.plm{
  position:relative;
  width:min(960px, 92vw);
  max-height:calc(100dvh - 48px);
  background:#fff; color:var(--plm-ink);
  border-radius:16px; box-shadow:var(--plm-shadow);
  overflow:visible; display:grid; grid-template-rows:auto minmax(0,1fr);
}

/* (Leerer) Header zulassen */
.plm__head{
  position:sticky; top:0; z-index:2;
  padding:12px 16px;
  background:linear-gradient(to bottom,#fff 80%,transparent);
  border-bottom:1px solid var(--plm-border);
  min-height:0;
}
.plm__head:empty{ display:none; }

/* Close: rund, leicht außerhalb am Eck „schwebend“ */
.plm__close--float{
  position:absolute;
  top:-14px;           /* außerhalb */
  right:-14px;
  width:36px; height:36px;
  display:grid; place-items:center;
  border:none; border-radius:999px;
  background:#fff; color:#111;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
}
.plm__close--float:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand) 45%, transparent);
  outline-offset:2px;
}
.plm__close:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand) 45%, transparent);
  outline-offset:2px;
}

/* Body scrollt im Modal */
.plm__body{
  display:grid; gap:16px; padding:16px;
  grid-template-columns:1fr; overflow:auto; overscroll-behavior:contain;
}
@media (min-width:900px){
  .plm__body{ grid-template-columns:360px 1fr; gap:24px; padding:18px 20px; }
  .plm__media{ position:sticky; top:76px; align-self:start; }
}

/* Linke Spalte: Card neutralisieren + CTA */
.plm__media{ display:grid; gap:12px; }
.plm .plant-card{ box-shadow:none; transform:none !important; cursor:default; }
.plm .plant-card:hover{ box-shadow:none; transform:none; }
.plm .plant-card a{ pointer-events:none; }
.plm__cta{ display:grid; }
.plm__btn{
  border-radius:10px; padding:10px 12px; border:1px solid transparent;
  font:700 12px/1 system-ui; cursor:pointer;
  background:var(--plm-brand); color:#fff;
}
.plm__btn:hover{ filter:brightness(.96); }

/* Rechte Spalte */
.plm__content{ display:grid; gap:12px; align-content:start; max-width:72ch; }

/* ---------- Tabs: modern, sticky, nur Content wechselt ---------- */
.plm-tabs{
  position:sticky; top:0; z-index:3;
  background:linear-gradient(to bottom, #fff 85%, transparent);
  border-bottom:1px solid var(--plm-border);
  padding:6px 0;
}

/* horizontales Scrollen ohne Scrollbar */
.plm-tabs__rail{
  display:flex; gap:8px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.plm-tabs__rail::-webkit-scrollbar{ display:none; }

/* Pills */
.plm-tabs__btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:34px; padding:0 14px;
  border:1px solid var(--plm-border);
  border-radius:999px; background:#fff; color:#111827;
  font:700 12px/1 system-ui; letter-spacing:.2px; white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s, transform .08s;
}
.plm-tabs__btn.is-active,
.plm-tabs__btn[aria-selected="true"]{
  background:var(--plm-brand); border-color:var(--plm-brand); color:#fff;
}
.plm-tabs__btn:active{ transform:translateY(1px); }
.plm-tabs__btn:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand) 45%, transparent);
  outline-offset:2px;
}
.plm-tabs__panels{
  padding:12px 0 0;
  contain:layout paint;                 /* Layout stabil */
}
.plm-tab__panel[hidden]{ display:none !important; }

/* Typo / Key-Value-Grid */
.plm__desc{ margin:0 0 8px; line-height:1.65; color:#111827; }
.plm__grid{ display:grid; gap:8px; }
.plm__row{
  display:grid; grid-template-columns:140px 1fr; gap:10px;
  align-items:start; padding:4px 0;
}
.plm__label{ color:#6b7280; font-weight:600; }
.plm__val{ color:#111827; }
@media (max-width:640px){ .plm__row{ grid-template-columns:1fr; } }

/* ---------- Range Bars: nur im Modal ---------- */
.plm .plant-ranges{ display:grid; gap:10px; }
.plm .range-row{ display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:center; }
.plm .range-label{ display:flex; gap:8px; align-items:center; color:#334155; font:600 13px/1.2 system-ui; }
.plm .range-label .ico{ width:18px; height:18px; opacity:.9; }

.plm .range-bar { 
  position: relative;
  height: var(--range-h);
  background: linear-gradient(90deg, #f4f7f6 0%, #e6e9ee 100%); /* sehr dezent */
  border-radius: 999px;
  overflow: hidden;
}

.plm .range-bar::before{
  content: "";
  position: absolute; inset: 0;
  left: var(--from,0%); 
  right: calc(100% - var(--to,100%));
  background: linear-gradient(90deg, #6fc2a7 0%, #3d9b7a 100%); /* Ton-in-Ton zu #3d9b7a */
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04), inset 0 6px 8px rgba(255,255,255,.35);
}

.plm .range-bar::after{
    content: none !important;  position:absolute; top:50%; left:var(--marker,50%); transform:translate(-50%,-50%);
  width:14px; height:14px; border-radius:50%; background:var(--plm-brand);
  box-shadow:0 0 0 3px #fff;
}
.plm .range-min,.plm .range-max{
  position:absolute; top:-20px; font:500 12px/1 system-ui; color:#6b7280;
}
.plm .range-min{ left:0; } .plm .range-max{ right:0; }

/* Upload UI (nur im Modal) */
.plm .plm-upload{ border-top:1px solid #f2f4f6; padding-top:8px; }
.plm .plm__secTitle{ margin:0 0 8px; font:700 .95rem system-ui; color:var(--plm-brand); }
.plm .plm-up__grid{ display:grid; gap:14px; }
@media (min-width:680px){ .plm .plm-up__grid{ grid-template-columns: 1fr 1fr; gap:18px; } }
.plm .plm-up__drop{
  position:relative; display:grid; place-items:center; text-align:center;
  border:1.5px dashed var(--plm-border); border-radius:14px; background:#fafbfb;
  padding:18px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.plm .plm-up__drop.is-drag{ border-color:var(--plm-brand); background:#f4f8f6; }
.plm .plm-up__file{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.plm .plm-up__hint{ color:#6b7280; font-size:.95rem; line-height:1.45; }
.plm .plm-up__preview{ max-width:100%; border-radius:12px; margin-top:8px; box-shadow:0 6px 16px rgba(0,0,0,.08); }
.plm .plm-up__form{ display:grid; gap:10px; }
.plm .plm-up__input{ border:1px solid var(--plm-border); border-radius:12px; padding:10px 12px; font-size:14px; }
.plm .plm-up__actions{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.plm .plm-up__progress{ width:180px; height:8px; border-radius:999px; background:#eef1f4; overflow:hidden; }
.plm .plm-up__bar{ height:100%; width:0%; background:var(--plm-brand); transition:width .2s ease; }
.plm .plm-up__msg{ font-size:.9rem; color:#6b7280; }

/* Builder-/Theme-Artefakte sicher killen */
.plm .plm__content::before,
.plm .plm__content::after,
.plm .plm-tabs::before,
.plm .plm-tabs::after,
.plm .plm-tabs__rail::before,
.plm .plm-tabs__rail::after{
  content:none !important; display:none !important; background:transparent !important; box-shadow:none !important;
}

/* A11y/Motion */
.plm button:focus-visible,
.plm [href]:focus-visible,
.plm input:focus-visible,
.plm select:focus-visible,
.plm textarea:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand) 45%, transparent);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .plm-overlay{ animation:none; opacity:1; }
  .plm-tabs__btn{ transition:none; }
}

/* (Optional) Dark Mode */
@media (prefers-color-scheme: dark){
  .plm{ background:#0b0f14; color:#e5e7eb; }
  .plm__head{ background:linear-gradient(to bottom,#0b0f14 80%,transparent); border-bottom-color:#1f2937; }
  .plm-tabs{ border-bottom-color:#1f2937; }
  .plm-tabs__btn{ background:#0f1620; border-color:#16202b; color:#e5e7eb; }
  .plm-tabs__btn.is-active{ background:var(--plm-brand); border-color:var(--plm-brand); color:#fff; }
  .plm .range-bar{ background:#15202b; }
  .plm .range-bar::before{ background:#14352c; }
}

/* ==== Mobile Full-Bleed / Safe-Area ==== */
@media (max-width: 640px){
  .plm-overlay{
    padding: 0;                      /* keine Ränder am Overlay */
  }
  .plm{
    width: 100vw;                    /* echte Vollbreite */
    max-height: 100dvh;              /* gesamte Höhe nutzbar */
    border-radius: 0;                /* keine abgeschnittenen Ecken */
  }
  /* Close-Button: auf kleinen Screens innerhalb „angedockt“ sichtbar */
  .plm__close--float{
    top: 10px;
    right: 10px;
  }
}

/* iOS Safe Areas + Orientierung */
.plm{
  /* verhindert abgeschnittene Inhalte auf iOS (URL-Bar) */
  max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}

/* Bilder/Karten im Modal dürfen nie breiter als der Container sein */
.plm .plant-card{ width:100%; max-width:none; }
.plm .plant-image-wrapper{ width:100%; }
.plm .plant-image{ display:block; width:100%; height:auto; object-fit:cover; }

/* Grid-Shrink fix: rechte Spalte darf schrumpfen (verhindert Overflow) */
.plm__content{ min-width:0; }

/* Tabs: sticky auf Scroll-Container, sauberer Offset + Safe Area */
.plm-tabs{
  top: calc(env(safe-area-inset-top) + 0px);
}

/* Optional: etwas mehr Innenabstand auf sehr kleinen Phones */
@media (max-width: 380px){
  .plm__body{ padding:12px; gap:12px; }
  .plm-tabs__btn{ height:32px; padding:0 12px; }
}

/* =========================
   Off-Canvas Close Button 2025
   ========================= */
:root{
  --plm-close-size: 40px;
  --plm-close-offset: 18px;      /* wie weit außerhalb */
  --plm-close-bg: color-mix(in srgb, #fff 92%, transparent);
  --plm-close-ink: #111827;
  --plm-close-ring: rgba(0,0,0,.06);
}

/* WICHTIG: darf über den Rand hinausragen */
.plm{ overflow: visible; }

/* Button rund, „floating“, außerhalb oben rechts */
.plm__close--float{
  position:absolute;
  z-index:10; /* über Tabs etc. */
  top: calc(-1 * var(--plm-close-offset));
  right: calc(-1 * var(--plm-close-offset));
  width: var(--plm-close-size);
  height: var(--plm-close-size);
  display:grid; place-items:center;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  background: var(--plm-close-bg);
  color: var(--plm-close-ink);
  box-shadow:
    0 8px 24px rgba(0,0,0,.14),
    0 0 0 6px #fff; /* Weißer „Air-Ring“ trennt vom Modalrand */
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.plm__close--float svg{
  width: 18px; height: 18px; pointer-events:none;
}
.plm__close--float:hover{
  transform: translateY(-1px);
  box-shadow:
    0 10px 28px rgba(0,0,0,.18),
    0 0 0 6px #fff,
    0 0 0 1px var(--plm-close-ring) inset;
}
.plm__close--float:active{
  transform: translateY(0);
  opacity: .9;
}
.plm__close--float:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 48%, transparent);
  outline-offset: 2px;
}

/* Mobile: innen andocken, Safe-Area beachten */
@media (max-width: 640px){
  .plm__close--float{
    top: calc(10px + env(safe-area-inset-top));
    right: calc(10px + env(safe-area-inset-right));
    box-shadow:
      0 8px 24px rgba(0,0,0,.14);
  }
}

/* Dark Mode Tuning */
@media (prefers-color-scheme:dark){
  :root{
    --plm-close-bg: color-mix(in srgb, #0f1620 85%, transparent);
    --plm-close-ink:#e5e7eb;
  }
  .plm__close--float{
    border-color: rgba(255,255,255,.08);
    box-shadow:
      0 8px 24px rgba(0,0,0,.5),
      0 0 0 6px #0b0f14;
  }
}

/* ---- Off-canvas Close (hard override) ---- */
:root{
  --plm-close-size: 40px;
  --plm-close-offset: 18px;
}

.plm{ overflow: visible !important; } /* wichtig, sonst wird der Button abgeschnitten */

.plm__close--float{
  position:absolute;
  z-index:100;
  top: calc(-1 * var(--plm-close-offset)) !important;
  right: calc(-1 * var(--plm-close-offset)) !important;
  width: var(--plm-close-size); height: var(--plm-close-size);
  display:grid; place-items:center;
  border-radius:9999px;
  border:1px solid rgba(0,0,0,.08);
  background: color-mix(in srgb, #fff 92%, transparent);
  color:#111827;
  box-shadow: 0 8px 24px rgba(0,0,0,.14), 0 0 0 6px #fff;
  transition: transform .14s ease, box-shadow .18s ease, background .18s ease, opacity .18s ease;
}
.plm__close--float svg{ width:18px; height:18px; pointer-events:none; }
.plm__close--float:hover{ transform:translateY(-1px); }
.plm__close--float:active{ transform:none; opacity:.9; }
.plm__close--float:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 48%, transparent);
  outline-offset:2px;
}

/* Mobile: innen andocken (nichts abgeschnitten), Safe-Area beachten */
@media (max-width:640px){
  .plm__close--float{
    top: calc(10px + env(safe-area-inset-top)) !important;
    right: calc(10px + env(safe-area-inset-right)) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
  }
}

/* ================================
   OFF-CANVAS CLOSE 2025 (Glass/Halo)
   ================================ */
:root{
  --plm-close-size:   48px;               /* 44+ für Touch */
  --plm-close-offset: 22px;               /* wie weit außerhalb */
  --plm-close-ink:    var(--plm-ink, #111827);
  --plm-close-bg:     color-mix(in srgb, var(--plm-bg, #fff) 78%, transparent);
}

.plm{ overflow: visible !important; }     /* darf über Rand hinausragen */

.plm__close--float{
  position:absolute; z-index:1000;
  top:  calc(-1 * var(--plm-close-offset)) !important;
  right:calc(-1 * var(--plm-close-offset)) !important;
  width:var(--plm-close-size); height:var(--plm-close-size);
  display:grid; place-items:center;
  border-radius:9999px;
  border:1px solid color-mix(in srgb, #000 12%, transparent);
  background:var(--plm-close-bg);
  -webkit-backdrop-filter:saturate(160%) blur(8px);
  backdrop-filter:saturate(160%) blur(8px);
  color:var(--plm-close-ink);
  /* „Halo“ trennt den Button optisch vom Modal – off-canvas look */
  box-shadow:
    0 18px 40px rgba(0,0,0,.16),
    0 0 0 8px var(--plm-bg, #fff);
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, opacity .18s ease;
}
.plm__close--float::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #000 10%, transparent);
  pointer-events:none;
}
.plm__close--float svg{
  width:20px; height:20px; pointer-events:none;
  transition: transform .18s ease, opacity .18s ease;
}
.plm__close--float:hover{
  transform: translateY(-1px) scale(1.02);
  box-shadow:
    0 22px 52px rgba(0,0,0,.20),
    0 0 0 8px var(--plm-bg,#fff),
    0 0 0 2px color-mix(in srgb, var(--plm-brand,#2C6B4A) 16%, transparent) inset;
}
.plm__close--float:active{ transform: translateY(0) scale(.98); opacity:.9; }
.plm__close--float:focus-visible{
  outline:3px solid color-mix(in srgb, var(--plm-brand,#2C6B4A) 48%, transparent);
  outline-offset:2px;
}
/* dezente Icon-Rotation (nur wenn Motion erlaubt) */
@media (prefers-reduced-motion:no-preference){
  .plm__close--float:hover svg{ transform: rotate(90deg); }
}

/* Mobile: innen andocken + Safe Areas, ohne Halo-Ring */
@media (max-width:640px){
  .plm__close--float{
    top:  calc(12px + env(safe-area-inset-top)) !important;
    right:calc(12px + env(safe-area-inset-right)) !important;
    box-shadow: 0 14px 30px rgba(0,0,0,.22); /* ohne 8px Halo-Ring */
  }
}

/* Dark Mode Tuning */
@media (prefers-color-scheme:dark){
  :root{
    --plm-close-bg: color-mix(in srgb, #0f1620 85%, transparent);
    --plm-close-ink:#e5e7eb;
  }
  .plm__close--float{
    border-color: rgba(255,255,255,.10);
    box-shadow:
      0 18px 40px rgba(0,0,0,.55),
      0 0 0 8px #0b0f14;
  }
}

/* === FINAL: Simple Off-Canvas Close (clean & round) === */

/* Werte anpassbar */
:root{
  --plm-close-size:   44px;   /* 44px = gutes Touch-Ziel */
  --plm-close-offset: 26px;   /* wie weit außerhalb vom Modal */
}

/* Dialog darf überstehen */
.plm{ overflow: visible !important; }

/* höhere Spezifität + !important, damit ALLES davor überschrieben wird */
.plm > .plm__close.plm__close--float{
  position: absolute !important;
  z-index: 1002 !important;

  /* echte Off-Canvas-Position */
  top: calc(-1 * var(--plm-close-offset)) !important;
  right: calc(-1 * var(--plm-close-offset)) !important;

  /* schlicht & rund */
  width: var(--plm-close-size) !important;
  height: var(--plm-close-size) !important;
  border-radius: 9999px !important;
  background: #fff !important;
  border: 1px solid var(--plm-border, #e5e7eb) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
  color: #111827 !important;

  display: grid !important;
  place-items: center !important;

  /* keine fancy Effekte */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}

.plm > .plm__close.plm__close--float:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}

.plm > .plm__close.plm__close--float:active{
  transform: none;
  opacity: .95;
}

.plm > .plm__close.plm__close--float:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 45%, transparent) !important;
  outline-offset: 2px !important;
}

/* Icon dezent, nicht fett */
.plm > .plm__close.plm__close--float svg{
  width: 18px !important;
  height: 18px !important;
  color: currentColor !important;
}

/* Mobile: innen andocken, damit nichts abgeschnitten wird */
@media (max-width: 640px){
  .plm > .plm__close.plm__close--float{
    top: 10px !important;
    right: 10px !important;
    box-shadow: 0 8px 18px rgba(0,0,0,.14) !important;
  }
}

/* Dark Mode schlicht halten */
@media (prefers-color-scheme: dark){
  .plm > .plm__close.plm__close--float{
    background: #0f1620 !important;
    border-color: #1f2937 !important;
    color: #e5e7eb !important;
    box-shadow: 0 10px 24px rgba(0,0,0,.5) !important;
  }
}

/* === FINAL: simple, perfectly round, real off-canvas close === */
:root{
  --plm-close-size:   44px;   /* Touch-sicher, gerne 48px wenn größer gewünscht */
  --plm-close-offset: 10px;   /* Extra-Abstand über Eck hinaus */
}

/* Modal-Rand darf überstehen */
.plm{ overflow: visible !important; }

/* hohe Spezifität: direkter Button-Nachkomme des Modals */
.plm > .plm__close.plm__close--float{
  position: absolute !important;
  z-index: 1002 !important;

  /* echte Off-Canvas-Position:
     Center des Buttons liegt genau in der Modalecke,
     + zusätzlicher Offset schiebt ihn komplett nach außen. */
  top:   calc(-1 * ((var(--plm-close-size) / 2) + var(--plm-close-offset))) !important;
  right: calc(-1 * ((var(--plm-close-size) / 2) + var(--plm-close-offset))) !important;

  width: var(--plm-close-size) !important;
  height: var(--plm-close-size) !important;
  border-radius: 50% !important;      /* „ordentlich rund“ */
  background: #fff !important;
  border: 1px solid var(--plm-border, #e5e7eb) !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;

  /* Icon wirklich zentriert */
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  appearance: none !important;

  color: #111827 !important;
  transition: transform .15s ease, box-shadow .15s ease !important;
}
.plm > .plm__close.plm__close--float:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,0,0,.14) !important;
}
.plm > .plm__close.plm__close--float:active{ transform:none; opacity:.95; }
.plm > .plm__close.plm__close--float:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 45%, transparent) !important;
  outline-offset: 2px !important;
}

/* SVG sauber mittig halten */
.plm > .plm__close.plm__close--float svg{
  width: 20px !important;
  height: 20px !important;
  display: block !important;     /* verhindert Zeilenbox-Shift */
}

/* Mobile: innen andocken, damit nichts abgeschnitten wird */
@media (max-width:640px){
  .plm > .plm__close.plm__close--float{
    top: 10px !important;
    right: 10px !important;
  }
}

/* Dark Mode schlicht */
@media (prefers-color-scheme: dark){
  .plm > .plm__close.plm__close--float{
    background:#0f1620 !important;
    border-color:#1f2937 !important;
    color:#e5e7eb !important;
    box-shadow:0 10px 24px rgba(0,0,0,.5) !important;
  }
}

/* ===== Clamp modal to viewport; body scrolls inside ===== */
.plm{
  height: calc(100dvh - 48px) !important; /* feste, viewport-gebundene Höhe */
  max-height: none !important;            /* verhindert "endloses" Wachsen */
}

/* Fallback für Browser ohne dvh */
@supports not (height: 1dvh){
  .plm{ height: calc(100vh - 48px) !important; }
}

/* Scroll nur im Modal-Body */
.plm__body{
  overflow: auto !important;
  overscroll-behavior: contain;
  min-height: 0; /* Grid-Shrink-Fix */
}

/* Genug Platz oben, damit der off-canvas Close nie verschwindet */
.plm-overlay{
  padding-top: calc(24px + (var(--plm-close-size, 44px) / 2) + var(--plm-close-offset, 10px)) !important;
  padding-bottom: 24px !important;
}

/* Mobile: Vollhöhe */
@media (max-width:640px){
  .plm{
    height: 100dvh !important;
    border-radius: 0; /* wie gehabt */
  }
}

/* =========================
   MOBILE FIX – TYPO, TABS, BUTTONS
   ========================= */

/* 1) Typo/Copy in Panels: besserer Umbruch + kleinere Schrift */
@media (max-width: 640px){
  .plm{ font-size: 14px; } /* nur im Modal skalieren */

  /* Description + generische Texte im aktiven Tab */
  .plm__desc,
  .plm .plm-tab__panel p,
  .plm .plm-tab__panel li{
    font-size: .95rem !important;
    line-height: 1.6 !important;
    margin: 0 0 10px !important;
    overflow-wrap: anywhere !important;   /* bricht lange Wörter/URLs */
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Key/Value-Grid untereinander statt 2 Spalten */
  .plm__row{
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  /* etwas kompaktere Abstände im Modal */
  .plm__body{ padding: 12px !important; gap: 12px !important; }
}

/* 2) Tabs: kompakt, horizontal scrollbar, ohne Übergröße */
@media (max-width: 640px){
  .plm-tabs{ padding: 4px 0 !important; }
  .plm-tabs__rail{
    gap: 6px !important;
    padding: 0 8px !important;      /* innen etwas Luft an den Rändern */
    max-width: 100% !important;
  }
  .plm-tabs__btn{
    height: 30px !important;
    padding: 0 10px !important;
    font-size: 11.5px !important;
    line-height: 1 !important;
    border-radius: 999px !important;
  }
}

/* 3) Buttons im Modal (CTA + Upload) kleiner & neutral */
@media (max-width: 640px){
  .plm .plm__btn{
    font-size: 13px !important;
    padding: 10px 12px !important;
    border-radius: 10px !important;
  }
  .plm .plm-up__actions .plm__btn{ padding: 9px 12px !important; }
  .plm .btn{        /* falls Theme-Buttons im Modal landen */
    font-size: 13px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
  }
}

/* 4) Range-Zeilen enger & einspaltig auf sehr schmalen Displays */
@media (max-width: 480px){
  .plm .range-row{ grid-template-columns: 1fr !important; gap: 8px !important; }
}

/* 5) Extra-kompakt für Mini-Phones */
@media (max-width: 380px){
  .plm-tabs__btn{ height: 28px !important; padding: 0 8px !important; font-size: 11px !important; }
  .plm__body{ padding: 10px !important; gap: 10px !important; }
}

/* ===== Tabs 2025 – Segmented, compact, responsive ===== */

.plm-tabs{
  position: sticky;
  top: calc(env(safe-area-inset-top) + 0px);
  z-index: 3;
  background: linear-gradient(to bottom, var(--plm-bg, #fff) 92%, transparent) !important;
  padding: 8px 0 !important;
  border: 0 !important;
}

/* Track mit sanfter Border + Mask-Fade an den Scrollrändern */
.plm-tabs__rail{
  display: flex !important;
  gap: 4px !important;
  padding: 4px !important;
  background: color-mix(in srgb, var(--plm-bg, #fff) 98%, transparent) !important;
  border: 1px solid var(--plm-border, #e5e7eb) !important;
  border-radius: 9999px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  --edge: 16px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}
.plm-tabs__rail::-webkit-scrollbar{ display:none !important; }

/* Pills sehr dezent; aktive Pill hebt sich weiß + feiner Brand-Strich */
.plm-tabs__btn{
  position: relative !important;
  flex: 0 0 auto !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: 0 !important;
  border-radius: 9999px !important;
  background: transparent !important;
  color: var(--plm-ink, #111827) !important;
  font: 600 12.5px/1 system-ui !important;
  letter-spacing: .2px !important;
}
.plm-tabs__btn[aria-selected="true"]{
  background: #fff !important;
  color: var(--plm-ink, #111827) !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.04), 0 1px 8px rgba(0,0,0,.05) !important;
}
.plm-tabs__btn[aria-selected="true"]::after{
  content: "" !important;
  position: absolute !important;
  left: 12px; right: 12px; bottom: 6px;
  height: 2px; border-radius: 2px;
  background: var(--plm-brand, #2C6B4A) !important; /* dezenter Brand-Indicator */
}
.plm-tabs__btn:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 45%, transparent) !important;
  outline-offset: 2px !important;
}

/* Mobile-Feinschliff */
@media (max-width: 640px){
  .plm-tabs{ padding: 6px 0 !important; }
  .plm-tabs__rail{ gap: 3px !important; padding: 3px !important; --edge: 10px; }
  .plm-tabs__btn{ height: 30px !important; padding: 0 10px !important; font-size: 12px !important; }
}

/* Dark Mode stimmig halten */
@media (prefers-color-scheme: dark){
  .plm-tabs__rail{
    background: color-mix(in srgb, #0b0f14 92%, transparent) !important;
    border-color: #1f2937 !important;
  }
  .plm-tabs__btn[aria-selected="true"]{
    background: #0f1620 !important;
    box-shadow: 0 1px 8px rgba(0,0,0,.45) !important;
  }
}

/* ===== Tabs – mehr Kontrast zum weißen Hintergrund ===== */

/* Sticky-Bereich leicht absetzen (dezente Glas-/Tönung) */
.plm-tabs{
  padding: 10px 0 8px !important;
  background: linear-gradient(to bottom, rgba(255,255,255,.92) 30%, rgba(255,255,255,.78) 70%, transparent) !important;
  backdrop-filter: saturate(120%) blur(2px);
}

/* Segmented-Track: getönt, mit feiner Kontur + Shadow */
.plm-tabs__rail{
  background: color-mix(in srgb, var(--plm-bg, #fff) 90%, #0b0f14 10%) !important; /* sanftes Grau */
  border: 1px solid color-mix(in srgb, var(--plm-border, #e5e7eb) 80%, #000 20%) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.08), 0 1px 0 rgba(255,255,255,.65) inset !important;
  border-radius: 9999px !important;
  padding: 4px !important;
  gap: 4px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
  --edge: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}
.plm-tabs__rail::-webkit-scrollbar{ display:none !important; }

/* Tabs kompakt, neutral */
.plm-tabs__btn{
  height: 32px !important;
  padding: 0 12px !important;
  border-radius: 9999px !important;
  border: 0 !important;
  background: transparent !important;
  color: color-mix(in srgb, var(--plm-ink, #111827) 85%, #0b0f14 15%) !important;
  font: 600 12.5px/1 system-ui !important;
}

/* Aktiver Tab hebt sich weiß ab + dezenter Brand-Indicator */
.plm-tabs__btn[aria-selected="true"]{
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06),
              0 0 0 1px color-mix(in srgb, var(--plm-brand, #2C6B4A) 24%, transparent) inset !important;
}
.plm-tabs__btn[aria-selected="true"]::after{
  content:""; position:absolute; left:12px; right:12px; bottom:6px; height:2px; border-radius:2px;
  background: color-mix(in srgb, var(--plm-brand, #2C6B4A) 85%, #000 15%) !important;
}

/* Mobile Feinschliff */
@media (max-width:640px){
  .plm-tabs{ padding: 8px 0 6px !important; }
  .plm-tabs__rail{ --edge: 12px; padding: 3px 6px !important; gap: 3px !important; }
  .plm-tabs__btn{ height: 30px !important; padding: 0 10px !important; font-size: 12px !important; }
}

/* Dark Mode passend absetzen */
@media (prefers-color-scheme: dark){
  .plm-tabs{
    background: linear-gradient(to bottom, rgba(11,15,20,.94) 30%, rgba(11,15,20,.82) 70%, transparent) !important;
  }
  .plm-tabs__rail{
    background: color-mix(in srgb, #0b0f14 88%, #ffffff 12%) !important;
    border-color: #1f2937 !important;
    box-shadow: 0 8px 20px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.06) inset !important;
  }
  .plm-tabs__btn[aria-selected="true"]{ background:#0f1620 !important; }
}

/* ===== Tabs 2025 — Underline Nav (clean) ===== */
.plm-tabs{
  background: none !important;
  backdrop-filter: none !important;
  padding: 6px 0 8px !important;
}

.plm-tabs__rail{
  position: relative !important;
  display: flex !important;
  gap: 18px !important;
  padding: 0 8px !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  border-bottom: 1px solid var(--plm-border, #e5e7eb) !important;
  /* sanfter Edge-Fade, signalisiert horizontales Scrollen */
  --edge: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}
.plm-tabs__rail::-webkit-scrollbar{ display:none !important; }

/* Buttons flach, kompakt, ohne Hintergrundflächen */
.plm-tabs__btn{
  background: transparent !important;
  border: 0 !important;
  height: auto !important;
  padding: 8px 2px !important;
  border-radius: 0 !important;
  color: color-mix(in srgb, var(--plm-ink, #111827) 65%, transparent) !important;
  font: 600 14px/1.1 system-ui !important;
  letter-spacing: .2px !important;
  transition: color .15s ease, opacity .15s ease !important;
}
.plm-tabs__btn:hover{ color: var(--plm-ink, #111827) !important; }
.plm-tabs__btn[aria-selected="true"]{ color: var(--plm-ink, #111827) !important; }

/* Gleitender Brand-Indikator */
.plm-tabs__indicator{
  position: absolute !important;
  bottom: -1px !important;
  height: 2px !important;
  width: var(--plm-tab-w, 0px) !important;
  transform: translateX(var(--plm-tab-x, 0px)) !important;
  background: var(--plm-brand, #2C6B4A) !important;
  border-radius: 2px !important;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    width .25s cubic-bezier(.2,.8,.2,1) !important;
}

/* Mobile tighter */
@media (max-width:640px){
  .plm-tabs__rail{ gap: 14px !important; --edge: 12px; }
  .plm-tabs__btn{ font-size: 13px !important; padding: 7px 2px !important; }
}

/* ===== Modal polish 2025: cleaner tabs + copy rhythm + thin scrollbars ===== */

/* 1) Tabs: Underline-Nav, leicht abgesetzt vom Body */
.plm-tabs{
  background: none !important;
  backdrop-filter: none !important;
  padding: 4px 0 6px !important;
}
.plm-tabs__rail{
  position: relative !important;
  display: flex !important;
  gap: 18px !important;
  padding: 0 8px !important;
  border-bottom: 1px solid var(--plm-border, #e5e7eb) !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  --edge: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%);
}
.plm-tabs__rail::-webkit-scrollbar{ display:none !important; }

.plm-tabs__btn{
  background: transparent !important;
  border: 0 !important;
  height: auto !important;
  padding: 10px 2px 8px !important;
  border-radius: 0 !important;
  color: color-mix(in srgb, var(--plm-ink, #111827) 65%, transparent) !important;
  font: 600 14px/1.1 system-ui !important;
  letter-spacing: .2px !important;
  transition: color .15s ease !important;
}
.plm-tabs__btn:hover,
.plm-tabs__btn[aria-selected="true"]{
  color: var(--plm-ink, #111827) !important;
}

/* Sliding indicator (Brand) – benötigt die .plm-tabs__indicator aus dem JS */
.plm-tabs__indicator{
  position: absolute !important;
  bottom: -1px !important;
  height: 2px !important;
  width: var(--plm-tab-w, 0px) !important;
  transform: translateX(var(--plm-tab-x, 0px)) !important;
  background: var(--plm-brand, #2C6B4A) !important;
  border-radius: 2px !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1) !important;
}

/* 2) Panels: bessere Lesbarkeit + dezentere Scrollbars */
.plm .plm-tab__panel p{
  font-size: .98rem !important;
  line-height: 1.65 !important;
  margin: 0 0 12px !important;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
.plm__body{ scrollbar-gutter: stable both-edges; }

/* Thin scrollbar nur im Modal-Body & in Panels */
.plm__body, .plm-tabs__panels{
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, #000 18%, transparent) transparent;
}
.plm__body::-webkit-scrollbar,
.plm-tabs__panels::-webkit-scrollbar{ height: 8px; width: 8px; }
.plm__body::-webkit-scrollbar-thumb,
.plm-tabs__panels::-webkit-scrollbar-thumb{
  background: color-mix(in srgb, #000 18%, transparent);
  border-radius: 8px;
}
.plm__body::-webkit-scrollbar-track,
.plm-tabs__panels::-webkit-scrollbar-track{ background: transparent; }

/* 3) Mobile tighter */
@media (max-width:640px){
  .plm-tabs__rail{ gap: 14px !important; --edge: 12px; }
  .plm-tabs__btn{ font-size: 13px !important; padding: 8px 2px 6px !important; }
}

/* Dark mode stimmig */
@media (prefers-color-scheme:dark){
  .plm-tabs__rail{ border-bottom-color:#1f2937 !important; }
  .plm-tabs__btn{ color: color-mix(in srgb, #e5e7eb 70%, transparent) !important; }
  .plm-tabs__btn[aria-selected="true"]{ color:#e5e7eb !important; }
}

/* =========================================================
   PLM — FINAL TABS 2025 (Underline + Sliding Indicator)
   Autoritativer Override – überschreibt alle früheren Tab-Styles
   ========================================================= */

/* Container: keine Flächen, nur schlanke Unterkante */
.plm .plm-tabs{
  background: transparent !important;
  backdrop-filter: none !important;
  padding: 4px 0 6px !important;
  border: 0 !important;
}

/* Rail: flach, Underline, mit Edge-Fade für horizontales Scrollen */
.plm .plm-tabs__rail{
  position: relative !important;
  display: flex !important;
  gap: 18px !important;
  padding: 0 8px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--plm-border, #e5e7eb) !important;
  border-radius: 0 !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-width: none !important;
  --edge: 18px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%) !important;
          mask-image: linear-gradient(to right, transparent 0, #000 var(--edge), #000 calc(100% - var(--edge)), transparent 100%) !important;
}
.plm .plm-tabs__rail::-webkit-scrollbar{ display:none !important; }

/* Buttons: flach, keine Pills, keine Schatten */
.plm .plm-tabs__btn{
  flex: 0 0 auto !important;
  margin: 0 !important;
  padding: 10px 2px 8px !important;
  height: auto !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: color-mix(in srgb, var(--plm-ink, #111827) 60%, transparent) !important;
  font: 600 16px/1.1 system-ui !important;
  letter-spacing: .2px !important;
  transition: color .15s ease !important;
}
/* Sämtliche alten „Pill“-Pseudo-Linien sicher entfernen */
.plm .plm-tabs__btn::after{ content:none !important; }

.plm .plm-tabs__btn:hover,
.plm .plm-tabs__btn[aria-selected="true"]{
  color: var(--plm-ink, #111827) !important;
}

/* Sliding Brand-Indicator (wird per JS gesetzt – du hast ihn bereits) */
.plm .plm-tabs__indicator{
  position: absolute !important;
  bottom: -1px !important;
  left: 0 !important;
  height: 2px !important;
  width: var(--plm-tab-w, 0px) !important;
  transform: translateX(var(--plm-tab-x, 0px)) !important;
  background: var(--plm-brand, #2C6B4A) !important;
  border-radius: 2px !important;
  transition: transform .25s cubic-bezier(.2,.8,.2,1), width .25s cubic-bezier(.2,.8,.2,1) !important;
}

/* Mobile tighter */
@media (max-width:640px){
  .plm .plm-tabs__rail{ gap: 14px !important; --edge: 12px; }
  .plm .plm-tabs__btn{ font-size: 14px !important; padding: 8px 2px 6px !important; }
}

/* Dark Mode: nur die Underline anpassen */
@media (prefers-color-scheme: dark){
  .plm .plm-tabs__rail{ border-bottom-color:#1f2937 !important; }
  .plm .plm-tabs__btn{ color: color-mix(in srgb, #e5e7eb 70%, transparent) !important; }
  .plm .plm-tabs__btn[aria-selected="true"]{ color:#e5e7eb !important; }
}

/* ===== Featured-CTA im Modal ===== */

/* Submit Featured Image – zentriert oben im Bild */
.plm__cta--overlay{
  position:absolute;
  top:10px;
  left:50%;
  transform:translateX(-50%);
  z-index:3; /* über dem Bild, unter dem Close-Button etc. */
}

/* Button-Stil (falls schon vorhanden, lassen) */
.plm__btn--overlay{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font:700 12px/1 system-ui;
  background:#fff;
  color:#111827;
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

@media (max-width:640px){
  .plm__cta--overlay{ top:8px; }
  .plm__btn--overlay{ padding:5px 9px; font-size:11px; }
}

/* neutrale Variante unter der Card, wenn es bereits ein Featured gibt */
.plm .plm__btn--subtle{
  background: #f8faf9;
  color: #1f2937;
  border: 1px solid var(--plm-border, #e5e7eb);
  border-radius: 10px;
  padding: 9px 12px;
  font: 700 12px/1 system-ui;
}
.plm .plm__btn--subtle:hover{ background:#f3f6f4; }

/* Mobile: etwas größerer Tap-Target und dichter am Rand */
@media (max-width: 640px){
  .plm .plm__cta--overlay{ bottom: 10px; }
  .plm .plm__btn--overlay{ padding: 10px 14px; font-size: 13px; }
}

/* ===== Readability Fix (Modal only) ===== */

/* 1) bessere Kantenglättung + mehr Kontrast */
.plm{
  --plm-ink: #0f172a; /* etwas dunkler als #111827 */
  color: var(--plm-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1;
  font-synthesis-weight: none; /* verhindert Faux-Bold-Flimmern */
}

/* 2) angenehmere Zeilenlänge (war 72ch) */
.plm .plm__content{ max-width: 66ch; }

/* 3) Fließtext: System-/Inter-Stack für klarere Pixel, leicht kräftiger, größerer Zeilenabstand */
.plm .plm-tab__panel p,
.plm .plm-tab__panel li,
.plm .plm__desc{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Inter", Arial, sans-serif;
  font-weight: 500;                 /* 450–500 ist auf Windows am klarsten */
  font-size: clamp(15px, 0.28vw + 14px, 16.8px);
  line-height: 1.72;
  letter-spacing: 0.01em;
  text-wrap: pretty;
  overflow-wrap: anywhere;
  margin: 0 0 12px;
}

/* 4) Labels/Key-Value minimal kräftiger */
.plm .plm__label{ color:#475569; font-weight: 600; }
.plm .plm__val{   color:var(--plm-ink); }

/* 5) Tabs-Typo minimal kräftiger, bessere Lesbarkeit */
.plm .plm-tabs__btn{
  font-weight: 600;
  letter-spacing: .01em;
}

/* 6) Mobile – nicht kleiner werden lassen */
@media (max-width:640px){
  .plm .plm-tab__panel p,
  .plm .plm-tab__panel li,
  .plm .plm__desc{
    font-size: 15.5px;
    line-height: 1.7;
  }
}

/* =========================
   Submit Featured Image – Readability Boost
   ========================= */

/* Overlay-Wrapper bleibt wie bei dir: .plm__cta--overlay { position:absolute; left:50%; bottom:12px; transform:translateX(-50%); } */

.plm .plm__btn--overlay{
  /* höhere Grund-Opazität + Halo trennt vom Bild */
  --plm-ov-bg: color-mix(in srgb, #fff 96%, transparent);
  --plm-ov-ink: #0b1220;                 /* etwas dunkler als #111827 */
  background: var(--plm-ov-bg);
  color: var(--plm-ov-ink);
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 999px;
  padding: 10px 14px;
  white-space: nowrap;

  /* gut lesbarer Font auf Windows */
  font: 700 13.5px/1 system-ui;
  letter-spacing: .15px;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  font-synthesis-weight: none;

  /* dezenter Blur + kräftigerer Halo */
  backdrop-filter: blur(3px) saturate(115%) contrast(1.05);
  -webkit-backdrop-filter: blur(3px) saturate(115%) contrast(1.05);
  box-shadow:
    0 10px 24px rgba(0,0,0,.18),
    0 0 0 4px rgba(255,255,255,.92); /* Weißer Halo-Ring für Kontrast */
  transition: background .15s ease, transform .06s ease, box-shadow .15s ease, opacity .15s ease;
}

.plm .plm__btn--overlay:hover{
  background: color-mix(in srgb, #fff 98%, transparent);
  box-shadow:
    0 12px 28px rgba(0,0,0,.20),
    0 0 0 4px rgba(255,255,255,.95);
}

.plm .plm__btn--overlay:active{ transform: translateY(1px); }
.plm .plm__btn--overlay:focus-visible{
  outline: 3px solid color-mix(in srgb, var(--plm-brand, #2C6B4A) 42%, transparent);
  outline-offset: 2px;
}

/* Fallback, falls kein (backdrop-)blur unterstützt wird → fester, klarer Hintergrund */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .plm .plm__btn--overlay{
    background: #ffffff;
    box-shadow:
      0 10px 24px rgba(0,0,0,.18),
      0 0 0 4px #ffffff;
  }
}

/* Dark Mode: kontrastreich auf dunklem Bild */
@media (prefers-color-scheme: dark){
  .plm .plm__btn--overlay{
    --plm-ov-bg: color-mix(in srgb, #0f1620 92%, transparent);
    --plm-ov-ink: #e5e7eb;
    border-color: rgba(255,255,255,.10);
    box-shadow:
      0 10px 24px rgba(0,0,0,.5),
      0 0 0 4px #0b0f14;
  }
}

/* Mobile etwas größerer Tap-Target */
@media (max-width:640px){
  .plm .plm__btn--overlay{ font-size: 14px; padding: 11px 16px; }
}

/* Earthy difficulty variant (identischer Stil, nur braun) */
.badge--difficulty.diff--earth,
.plant-card .badge--difficulty.diff--earth{
  --diff-accent:#99784A;   /* steuert Gradient, Border & Hover wie bei den anderen */
  color:#fff;              /* Text wie die Difficulty-Pills */
}

/* Icon-Größe matchen (wie bei den anderen Difficulty-Badges) */
.plant-card .badge--difficulty.diff--earth .ico{
  width:32px; height:32px;
}

/* Linke Spalte in der Modal-Zeile immer oben fixieren */
.plm__body{
  align-items:start !important;            /* beide Spalten oben in der Grid-Zeile */
}

/* .plm__media darf NICHT zentrieren & soll eigene BFC öffnen (kein Margin-Collapse) */
.plm__media{
  display: flow-root !important;           /* statt grid → keine Zentrierung, neue BFC */
  align-self:start !important;             /* Item selbst oben im Grid */
  align-content:start !important;          /* falls irgendwo grid bleibt */
  justify-items:stretch !important;        /* Sicherheit gegen place-items:center */
}

/* Sicherheit: keine „aus der Card heraus kollabierenden“ Top-Margins */
.plm__media > *{ margin-top:0 !important; }

/* Rechte Spalte darf die Grid-Zeile nicht aufdrücken */
.plm__content{ min-height:0 !important; }  /* verhindert, dass Grid-Track wächst */
.plm-tabs__panels{ max-height:60vh; overflow:auto; } /* Scroll in den Panels statt Zeilenhöhe */

/* Dialog-Höhe sauber begrenzen (ohne Layout zu ändern) */
.plm{
  height: auto !important;                 /* statt height:none */
  max-height: calc(100dvh - 48px) !important; /* 24px oben/unten Luft – anpassbar */
  overflow: auto;                           /* scrollt der Dialog selbst */
}

/* auf kleineren Screens etwas mehr Luft lassen */
@media (max-width: 700px){
  .plm{ max-height: calc(100dvh - 32px); }
}

/* verhindert „Scroll-Bounce“ im Dialog auf manchen Browsern */
.plm{ overscroll-behavior: contain; }

/* Nur im Modal-Bild: zentriert oben, ohne Full-Width-Blur */
.plant-card--modal .plant-image-wrapper{ position:relative; }

.plm__cta--overlay{
  position:absolute;
  top:8px; left:0; right:0;           /* statt left:50% + transform */
  transform:none !important;
  display:flex !important;
  justify-content:center;
  align-items:center;
  width:auto !important;
  height:auto !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  z-index:3;
  filter:none !important;
  backdrop-filter:none !important;

  /* verhindert, dass der (breite) Wrapper Klicks abfängt */
  pointer-events:none;
}

.plm__cta--overlay .plm__btn,
.plm__cta--overlay .plm__btn--overlay{
  display:inline-flex !important;
  align-items:center; justify-content:center;
  width:auto !important;
  max-width:calc(100% - 16px);
  white-space:nowrap;

  /* schärferes Font-Rendering */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* Button bleibt klickbar obwohl Wrapper pointer-events:none ist */
  pointer-events:auto;
}

@media (max-width:480px){
  .plm__cta--overlay .plm__btn--overlay{ padding:5px 9px; font-size:11px; }
}


/* Zwei Spalten erzwingen: Label links, Bar rechts */
.plm .range-row,
.plant-card .range-row{
  display:grid;
  grid-template-columns:minmax(88px,auto) 1fr !important;
  align-items:center;
  gap:10px;
}

/* etwas kompakter */
.plm .range-label{ font:600 12px/1.2 system-ui; gap:6px; }
.plm .range-label .ico{ width:16px; height:16px; opacity:.9; }
.plm .range-bar{ height:10px; }




/* ===== Modal data rows (dl) ===== */
.plm .plm-dl { display:grid; gap:10px; }
.plm .plm-row { 
  display:grid; grid-template-columns: 180px 1fr; 
  align-items: center; gap:14px; padding:6px 0; 
  border-bottom: 1px solid var(--border);
}
@media (max-width: 720px){ .plm .plm-row{ grid-template-columns: 1fr; } }

.plm .plm-term { color: var(--sub); font-weight: 600; font-size: 13px; }
.plm .plm-desc { color: var(--ink); font-weight: 600; font-size: 14px; 
  font-variant-numeric: tabular-nums; }

/* Gruppentitel */
.plm .plm-group-title{
  color: var(--sub); font-size: 12px; font-weight: 700; 
  letter-spacing: .04em; text-transform: uppercase; 
  margin: 14px 0 8px;
}

/* Chips */
.plm .chip{ 
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius: 999px; 
  background: var(--ui-muted); color: var(--ink); font-weight:600; font-size:13px;
  border: 1px solid var(--border);
}
.plm .chip--ok    { background: #ecfdf5; border-color:#d1fae5; }
.plm .chip--warn  { background: #fff7ed; border-color:#ffedd5; }
.plm .chip--danger{ background: #fef2f2; border-color:#fee2e2; }

/* Difficulty Farben (Beispiel) */
.plm .diff-easy   { background:#ecfdf5; border-color:#a7f3d0; }
.plm .diff-medium { background:#eef2ff; border-color:#c7d2fe; }
.plm .diff-adv    { background:#fef3c7; border-color:#fde68a; }

/* Range-Meter */
.plm .meter{ height:8px; background: var(--ui-muted); border-radius: 6px; 
  border:1px solid var(--border); position: relative; overflow:hidden; }
.plm .meter > i{ content:""; position:absolute; top:0; bottom:0; 
  left: var(--min,0%); width: calc(var(--max,100%) - var(--min,0%)); 
  background: linear-gradient(90deg, rgba(16,185,129,.25), rgba(16,185,129,.55));
}

/* Booleans */
.bool-yes::before {  content:"\2714\0020"; color:#059669; }
.bool-no::before  { content:"\2716\0020";  color:#6b7280; }


/* Missing values */
.plm .value-missing{ color:#9ca3af; font-style: italic; }

/* Gruppen & DL */
.plm .plm-group-title{color:var(--sub);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;margin:14px 0 8px;}
.plm .plm-dl{display:grid;gap:10px;}
.plm .plm-row{display:grid;grid-template-columns:180px 1fr;align-items:center;gap:14px;padding:6px 0;border-bottom:1px solid var(--border);}
@media (max-width:720px){ .plm .plm-row{grid-template-columns:1fr;} }
.plm .plm-term{color:var(--sub);font-weight:600;font-size:13px;}
.plm .plm-desc{color:var(--ink);font-weight:600;font-size:14px;font-variant-numeric:tabular-nums;display:grid;gap:6px}

/* Chips */
.plm .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;background:var(--ui-muted);color:var(--ink);font-weight:600;font-size:13px;border:1px solid var(--border);}
.plm .diff-easy{background:#ecfdf5;border-color:#a7f3d0;}
.plm .diff-medium{background:#eef2ff;border-color:#c7d2fe;}
.plm .diff-adv{background:#fef3c7;border-color:#fde68a;}
.plm .chip--ok{background:#ecfdf5;border-color:#d1fae5;}
.plm .chip--warn{background:#fff7ed;border-color:#ffedd5;}
.plm .chip--danger{background:#fef2f2;border-color:#fee2e2;}

/* Meter */
.plm .meter{height:8px;background:var(--ui-muted);border-radius:6px;border:1px solid var(--border);position:relative;overflow:hidden}
.plm .meter>i{position:absolute;top:0;bottom:0;left:var(--min,0%);width:calc(var(--max,100%) - var(--min,0%));background:linear-gradient(90deg, rgba(16,185,129,.25), rgba(16,185,129,.55));}
.plm .meter.is-unknown>i{opacity:.25}

.plm-up__input.is-invalid{
  border-color:#ef4444 !important;
  outline:2px solid rgba(239,68,68,.25);
}

/* Dialog darf überstehen (wg. floating close) */
#alMemberArea .plm-dialog { position: relative !important; overflow: visible !important; }

/* Floating Close – wirklich außerhalb der Ecke des Dialogs */
#alMemberArea .plm-close-float{
  position:absolute !important;
  z-index:1002 !important;
  top:-18px !important; right:-18px !important;   /* OFF-CANVAS */
  width:44px !important; height:44px !important;
  display:grid !important; place-items:center !important;
  border-radius:999px !important;
  border:1px solid rgba(0,0,0,.08) !important;
  background:#fff !important; color:#111 !important;
  box-shadow:0 10px 24px rgba(0,0,0,.16), 0 0 0 6px #fff !important;
  cursor:pointer !important;
}
#alMemberArea .plm-close-float:focus-visible{
  outline:3px solid color-mix(in srgb, var(--al-accent) 45%, transparent) !important;
  outline-offset:2px !important;
}
@media (max-width:640px){
  #alMemberArea .plm-close-float{ top:10px !important; right:10px !important; box-shadow:0 8px 18px rgba(0,0,0,.14) !important; }
}

/* Killt Inline-Max-Height und klemmt an den Viewport */
#alMemberArea #alTankModal .al-modal-dialog[style],
#alMemberArea #alTankDrawer .panel[style]{
  max-height: calc(100dvh - 48px) !important;
  height: auto !important;
  overflow: visible !important;
}
#alMemberArea #alTankModal .al-modal-body,
#alMemberArea #alTankDrawer .panel > .hdr + *{
  overflow: auto !important; overscroll-behavior: contain !important; min-height: 0 !important;
}

#alMemberArea .plm-tabs{
  position:sticky !important; top:0 !important; z-index:3 !important;
  background:linear-gradient(to bottom,#fff 85%,transparent) !important;
  border-bottom:1px solid var(--al-border) !important;
  margin:-6px -12px 10px !important; padding:6px 12px !important;
}
#alMemberArea .plm-tabs__rail{ display:flex !important; gap:8px !important; overflow-x:auto !important; scrollbar-width:none; }
#alMemberArea .plm-tabs__rail::-webkit-scrollbar{ display:none; }
#alMemberArea .plm-tabs__btn{
  height:34px !important; padding:0 14px !important; white-space:nowrap !important;
  border:1px solid var(--al-border) !important; border-radius:999px !important;
  background:#fff !important; color:#111827 !important; font:700 12px/1 system-ui !important;
}
#alMemberArea .plm-tabs__btn[aria-selected="true"]{
  background:var(--al-accent) !important; border-color:var(--al-accent) !important; color:#fff !important;
}
#alMemberArea .plm-tabs__panels{ padding-top:12px !important; }
#alMemberArea .plm-tab__panel[hidden]{ display:none !important; }

/* KPI Row */
.plm-kpi-row{
  display:flex; flex-wrap:wrap; gap:14px 20px; align-items:flex-start;
  margin-top:6px; margin-bottom:12px;
}
.plm-kpi{
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid rgba(0,0,0,.06); border-radius:10px;
  background: #fff; box-shadow: 0 1px 0 rgba(0,0,0,.03);
}
.plm-kpi__ico{ display:inline-flex; line-height:0; }
.plm-kpi__label{ font-size:.85rem; color:#64748b; }
.plm-kpi__val{ font-size:.95rem; font-weight:600; margin-left:2px; }

/* Badges */
.plm-badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px; }
.plm-badge{
  display:inline-block; padding:5px 10px; border-radius:9999px;
  background:#eef6f1; color:#0f5132; font-size:.85rem; font-weight:600;
  border:1px solid #d7ecdf;
}

/* .plant-card { border-radius:16px; box-shadow:0 6px 18px rgba(0,0,0,.05); } */
@keyframes pl-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

.plant-card.skeleton{
  background:#fff;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  min-height:320px;                 /* = echte Card */
}

.skeleton-img{
  width:100%;
  aspect-ratio: 4 / 3;              /* = echte Bildfläche */
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
  background-size:400% 100%;
  animation:pl-shimmer 1.2s infinite;
}

/* Body-Layout & Abstände wie bei echten Karten */
.plant-card.skeleton .plant-card-body{ padding:12px 16px; }
.skeleton-line{
  height:12px;
  margin:10px 0;
  border-radius:6px;
  background:linear-gradient(90deg,#eee 25%,#f5f5f5 50%,#eee 75%);
  background-size:400% 100%;
  animation:pl-shimmer 1.2s infinite;
}
.skeleton-line.w-90{width:90%} .skeleton-line.w-70{width:70%}
.skeleton-line.w-60{width:60%} .skeleton-line.w-50{width:50%}

/* sanfter Fade-in für echte Karten */
.plant-card.will-fade{opacity:0;transform:translateY(6px)}
.plant-card.is-ready{opacity:1;transform:none;transition:opacity .18s ease,transform .18s ease}

/* EIN Bottom-Spinner, passend zu deinem JS (#grid-spinner) */
@keyframes pl-spin{to{transform:rotate(360deg)}}
#grid-spinner{grid-column:1/-1;display:flex;justify-content:center;align-items:center;padding:20px 0}
#grid-spinner .ring{width:28px;height:28px;border:3px solid #d1d5db;border-top-color:#10b981;border-radius:50%;animation:pl-spin .8s linear infinite}

/* Hart-Lock: echte Karten im Grid bleiben unsichtbar, Skeleton darf sichtbar sein */
#plant-grid.grid-locked .plant-card:not(.skeleton){
  display: none !important;
}

/* Beispiel */
.plant-card.will-fade { opacity: 0; transform: translateY(4px); transition: opacity .18s ease, transform .18s ease; }
.plant-card.will-fade.is-ready { opacity: 1; transform: none; }

.meta-flag--emersed-no{
  position:absolute; right:10px; bottom:10px;
  background:#fff; border-radius:9999px; padding:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.meta-flag--emersed-no .ico{ width:18px; height:18px; display:block; }

/* braunes Warn-Badge für cannot grow submersed */
.badge--cannot-submersed {
  --badge-bg: #8b5e3c;      /* warmes Braun */
  --badge-fg: #fff;
  background: var(--badge-bg);
  color: var(--badge-fg);
  border-radius: 999px;
  padding: .25rem .5rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.badge--cannot-submersed .ico{
  width: 16px;
  height: 16px;
  display: inline-block;
}

/* Tooltip oben */
.plm-tip--top .plm-tip__txt{
  top:auto;
  bottom:120%;
  transform:translateY(-6px);
}
.plm-tip--top:hover .plm-tip__txt{
  transform:translateY(0);
}

/* ===== Cannot grow submersed badge (brown, no hover/animation) ===== */
.badge--cannot-submersed{
  --pl-brown:#8b5e34;            /* warmes Braun */
  background:var(--pl-brown)!important;
  color:#fff!important;
  border:1px solid var(--pl-brown)!important;
  box-shadow:none!important;
  transition:none!important;     /* keine Animationen */
  cursor:default!important;
}

.badge--cannot-submersed .ico{
  width:16px; height:16px;
  margin-right:.4rem;
  opacity:1; filter:none;
}

/* Alle möglichen Hover-/Active-Overlays neutralisieren */
.meta-difficulty .badge--cannot-submersed:hover,
.meta-difficulty .badge--cannot-submersed:focus,
.meta-difficulty .badge--cannot-submersed:active{
  background:var(--pl-brown)!important;
  color:#fff!important;
  transform:none!important;
  box-shadow:none!important;
  outline:none!important;
}

/* falls dein Theme Badges „pulst“ oder skaliert */
.plant-card .meta-difficulty .badge--cannot-submersed,
.plm .meta-difficulty .badge--cannot-submersed{
  animation:none!important;
}

/* Neuer Farb-Token */
:root{ --diff-brown:#8b5e34; }

/* Mapping wie bei g1/y/o/r/v – nutzt deine vorhandene Logik */
.badge--difficulty.diff--brown{ --diff-accent: var(--diff-brown); }

/* Hover/Active für diese Variante komplett neutralisieren */
@media (hover:hover){
  .plant-card .badge--difficulty.diff--brown:hover{ transform:none; }
  .plant-card .badge--difficulty.diff--brown:active{ transform:none; }
}
/* Falls woanders ebenfalls hovered wird (z.B. im Modal) */
.badge--difficulty.diff--brown:hover,
.badge--difficulty.diff--brown:active{ transform:none !important; }

/* Variante 1: Du lässt im JS die Klasse "badge--cannot-submersed" stehen */
.badge--difficulty.badge--cannot-submersed{
  --diff-accent:#8b5e34;              /* braunes Accent steuert den vorhandenen Gloss */
  /* KEIN eigenes background/border hier setzen, damit der Gloss der Basis-Regel greift */
}

/* Variante 2 (falls du im JS auf 'diff--brown' umgestellt hast) */
.badge--difficulty.diff--brown{
  --diff-accent:#8b5e34;
}

/* Hover/Active neutralisieren – keine Sprunganimation für diese Variante */
@media (hover:hover){
  .plant-card .badge--difficulty.badge--cannot-submersed:hover,
  .plant-card .badge--difficulty.diff--brown:hover{
    transform:none !important;
    /* Hintergrund nicht ändern: den Basis-Gradienten beibehalten */
  }
  .plant-card .badge--difficulty.badge--cannot-submersed:active,
  .plant-card .badge--difficulty.diff--brown:active{
    transform:none !important;
  }
}
/* optional: auch Transition deaktivieren, falls gewünscht */
.plant-card .badge--difficulty.badge--cannot-submersed,
.plant-card .badge--difficulty.diff--brown{
  transition:none !important;
}

/* CANNOT GROW SUBMERSED — glossy wie die Difficulty-Badges, aber braun */
.plant-card .badge--difficulty.badge--cannot-submersed{
  --diff-accent: #8b5e34; /* Braun */

  /* exakt wie bei .plant-card .badge--difficulty, nur mit brauner Accent-Var */
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--diff-accent) 96%, white 4%) 0%,
      color-mix(in srgb, var(--diff-accent) 90%, black 10%) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--diff-accent) 65%, white 35%) !important;
  color:#fff; 
  text-shadow: 0 1px 1px rgba(0,0,0,.25) !important;

  /* keine Animation/Sprung */
  transition: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Hover neutralisieren (kein „Hopser“) */
@media (hover:hover){
  .plant-card .badge--difficulty.badge--cannot-submersed:hover,
  .plant-card .badge--difficulty.badge--cannot-submersed:active{
    transform: none !important;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--diff-accent) 96%, white 4%) 0%,
        color-mix(in srgb, var(--diff-accent) 90%, black 10%) 100%) !important;
  }
}

.plant-credit {
  margin-top: .35rem;
  font-size: .85rem;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}

.plant-credit__ig {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: inherit;
  text-decoration: none;
}

.plant-credit__ig:hover {
  text-decoration: underline;
}

.plant-credit__ig .ico-ig {
  width: 14px;
  height: 14px;
  display: inline-block;
  vertical-align: middle;
  color: currentColor;
}

@media (prefers-color-scheme: dark) {
  .plant-credit { color: #94a3b8; }
}

.plant-image-wrapper{position:relative;overflow:hidden}
.plant-credit-chip{
  position:absolute;left:.5rem;bottom:.5rem;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.28rem .5rem;border-radius:.5rem;
  font-size:.85rem;line-height:1;color:#fff;
  background:rgba(0,0,0,.55);backdrop-filter:blur(3px);
  max-width:80%;pointer-events:none
}
.plant-credit-chip a{pointer-events:auto;color:inherit;text-decoration:none;display:inline-flex;gap:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plant-credit-chip .ico-ig{width:14px;height:14px;flex:0 0 14px}

/* --- Overlay-Struktur im Bild --- */
.plant-image-wrapper {
  position: relative;
  overflow: hidden;
}

/* Container für Badges unten rechts */
.plant-image-overlays {
  position: absolute;
  bottom: .5rem;
  right: .5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .35rem;
  z-index: 3;
}

/* Difficulty-Badge im Overlay */
.plant-image-overlays .meta-difficulty {
  position: static !important; /* nicht relativ zum Wrapper */
  margin: 0 !important;
}

/* Instagram-Chip unten rechts */
.plant-credit-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .28rem .5rem;
  border-radius: .5rem;
  font-size: .85rem;
  line-height: 1;
  color: #fff;
  background: rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
  max-width: 80%;
  pointer-events: none;
}

.plant-credit-chip a {
  pointer-events: auto;
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.plant-credit-chip .ico-ig {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
}

/* Bild-Wrapper bleibt der Anker */
.plant-image-wrapper { position: relative; overflow: hidden; }

/* feste Zonen unten links/rechts */
.overlay-bl, .overlay-br {
  position: absolute;
  bottom: .5rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.overlay-bl { left: .5rem;  justify-content: flex-start; }
.overlay-br { right: .5rem; justify-content: flex-end; }

/* Difficulty-Badge im Overlay: nicht absolut, normal rendern */
.overlay-br .meta-difficulty { position: static !important; margin: 0 !important; }
.overlay-br .meta-difficulty .badge {
  position: static !important;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}



/* ---------- IG-Credit-Chip (neutraler Hover, kein Grün) ---------- */
:root{

  --pl-credit-bg-hover: rgba(28, 31, 37, .92);  /* Hoverfläche */
  --pl-credit-ring: rgba(255,255,255,.18);      /* feiner Rand */
}

.plant-credit-chip{
  position:absolute; left:10px; bottom:10px; z-index:2;
}

.plant-credit-chip a{
  display:inline-flex; align-items:center; gap:.45rem;
  padding:.35rem .6rem .33rem;
  border-radius:999px;
  background:var(--pl-credit-bg);
  color:#fff; text-decoration:none;
  border:1px solid var(--pl-credit-ring);
  line-height:1; font-size:.78rem; font-weight:600;
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  transition:background .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* gezielter Hover/Fokus – neutral, kein Brand-Grün */
.plant-image-wrapper .plant-credit-chip a:hover,
.plant-image-wrapper .plant-credit-chip a:focus-visible{
  background:var(--pl-credit-bg-hover);
  color:#fff;
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transform:translateY(-1px);
  text-decoration:none;
}

/* Falls globale Link-Hover-Farbe greift, so überschreiben wir sie sicher */
.plant-image-wrapper .plant-credit-chip a:hover svg,
.plant-image-wrapper .plant-credit-chip a:hover .plant-credit__txt{
  color:#fff; fill:currentColor;
}

/* Icon minimal anpassen (optional) */
.plant-credit-chip .ico-ig{ width:14px; height:14px; opacity:.9; }
.plant-credit__txt{ white-space:nowrap; }

/* Overlay-Wrapper für den IG-Chip vollständig neutralisieren */
.plant-image-wrapper .plant-overlay{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* Positionierung übernimmt der Chip selbst */
.plant-image-wrapper .plant-overlay .plant-credit-chip{
  position: absolute;
  left: 10px;
  bottom: 10px;
}



/* Innerer <a> ist transparent → kein zweiter Rahmen */
.plant-credit-chip a{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;         /* Padding liegt am Chip */
}

/* Hover/Fokus auf dem Chip selbst, nicht auf <a> */
.plant-credit-chip:hover,
.plant-credit-chip:focus-within{
  background:var(--pl-credit-bg-hover);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
  transform:translateY(-1px);
}

/* Falls Themes noch Fokus-Ränder aufs <a> legen */
.plant-credit-chip a:focus{ outline:none !important; }

/* Safety: Wrapper komplett neutral (falls noch vorhanden) */
.plant-image-wrapper .plant-overlay{
  background:transparent !important;
  box-shadow:none !important;
  border:0 !important;
  padding:0 !important;
  backdrop-filter:none !important;
}

/* === IG-Chip: hellgrau halbtransparent, weiße Schrift, 1 Layer === */
:root{
  /* Helligkeit gerne feintunen (0.28–0.42 sind bewährt) */
  --ig-chip-bg: rgba(255, 255, 255, .32);
}

.plant-image-wrapper { position: relative; overflow: hidden; }

/* Position links unten im Bild */
.plant-credit-chip{
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  /* EINZIGER Hintergrund */
  background: var(--ig-chip-bg) !important;
  color: #fff !important;
  padding: 6px 10px;
  border-radius: 10px;

  /* kein zusätzlicher Rahmen/Shadow/Blur */
  border: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;

  line-height: 1;
  font-size: 12px;
  font-weight: 600;

  /* leichte Lesbarkeit, da heller Grund + weiße Schrift */
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

/* Innerer Link ist transparent – kein zweiter Hintergrund */
.plant-credit-chip a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit !important;
  text-decoration: none;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Kein Hover/Fokus-Effekt */
.plant-credit-chip:hover,
.plant-credit-chip:focus-within,
.plant-credit-chip a:hover,
.plant-credit-chip a:focus-visible{
  background: var(--ig-chip-bg) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  outline: none !important;
}

/* Icon & Text */
.plant-credit-chip .ico-ig{ width:14px; height:14px; flex:0 0 14px; color: currentColor; }
.plant-credit__txt{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}

/* Safety: evtl. alte Wrapper-Overlays neutralisieren */
.plant-image-wrapper .plant-overlay{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* === FINAL: IG-Chip = 1 Layer, hellgrau halbtransparent, weiße Schrift === */
:root{
  /* Grau so wählen, dass es auf hellen & dunklen Bildern sichtbar bleibt */
 --ig-chip-bg: rgba(95,102,110,.58) !important;
}

/* Position & Stil des Chips */
.plant-image-wrapper .plant-credit-chip{
  position:absolute; left:10px; bottom:10px; z-index:4;
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:10px;

  /* EINZIGER Hintergrund */
  background:var(--ig-chip-bg) !important;
  color:#fff !important;

  /* alles andere erzwingen: kein Rahmen, kein Shadow, kein Blur */
  border:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  outline:0 !important;
}

/* Innerer Link ist rein typografisch – keine eigene Fläche */
.plant-image-wrapper .plant-credit-chip a{
  display:inline-flex; align-items:center; gap:6px;
  color:inherit !important; text-decoration:none;
  background:transparent !important;
  border:0 !important; box-shadow:none !important; outline:0 !important;
  padding:0 !important; margin:0 !important;
}

/* Kill-Switch gegen geerbte Hintergründe/Ränder von Themes/Buttons */
.plant-image-wrapper .plant-credit-chip,
.plant-image-wrapper .plant-credit-chip *,
.plant-image-wrapper .plant-overlay .plant-credit-chip,
.plant-image-wrapper .plant-overlay .plant-credit-chip *{
  background-image:none !important;
  box-shadow:none !important;
  border:0 !important;
}

/* Icon & Text */
.plant-image-wrapper .plant-credit-chip .ico-ig{width:14px;height:14px;flex:0 0 14px;color:currentColor}
.plant-image-wrapper .plant-credit__txt{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:14ch;
  text-shadow:0 1px 1px rgba(0,0,0,.25); /* leichte Lesbarkeit */
}

/* Keine Hover-Änderung (plain bleibt plain) */
.plant-image-wrapper .plant-credit-chip:hover,
.plant-image-wrapper .plant-credit-chip:focus-within{
  background:var(--ig-chip-bg) !important;
  color:#fff !important;
  transform:none !important;
  box-shadow:none !important;
  text-decoration:none !important;
}

/* Einheitlicher Icon-Style im Credit-Chip */
.plant-credit-chip .ico-photo,
.plant-credit-chip .ico-ig {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  color: currentColor;        /* übernimmt die Chip-Textfarbe (weiß) */
  vertical-align: middle;
  opacity: .95;
}

/* Falls noch alte IG-SVGs im HTML sind: ausblenden */
.plant-credit-chip .ico-ig { display: none !important; }

/* Optional – falls das Foto-SVG Linien nutzt: */
.plant-credit-chip .ico-photo [stroke] { stroke: currentColor; }
.plant-credit-chip .ico-photo [fill]   { fill: currentColor; }

/* Mini-Feintuning: ein Tick mehr Luft zwischen Icon und Text */
.plant-credit-chip a { gap: .5rem; }

/* Chip bleibt hellgrau-transparent, Text/Icons weiß */
:root { --ig-chip-bg: rgba(95,102,110,.58); } /* Helligkeit hier anpassen */
.plant-credit-chip {
  background: var(--ig-chip-bg) !important;
  color: #fff !important;
}

/* Größe + Ausrichtung wie zuvor */
.plant-credit-chip .ico-photo{
  width:16px; height:16px; flex:0 0 16px; display:inline-block;
}

/* Sicherheit: Outline-Elemente dürfen NICHT gefüllt werden */
.plant-credit-chip .ico-photo path[fill="none"],
.plant-credit-chip .ico-photo circle[fill="none"]{
  fill: none !important;
}

/* Strichbreite bleibt visuell konstant */
.plant-credit-chip .ico-photo *{ vector-effect: non-scaling-stroke; }

/* === IG/Fotocredit-Chip – anti-clipping fine-tuning === */
:root{
  /* fein justierbare Tokens */
  --ig-chip-font: .76rem;      /* vorher .78rem */
  --ig-chip-line: 1.2;         /* mehr Luft */
  --ig-chip-pad-y: 5px;        /* vorher 6px */
  --ig-chip-pad-x: 9px;        /* minimal schmaler */
  --ig-chip-gap:   6px;
  --ig-chip-ico:  13px;        /* Icon minimal kleiner */
}

.plant-image-wrapper .plant-credit-chip{
  padding: var(--ig-chip-pad-y) var(--ig-chip-pad-x);
  gap: var(--ig-chip-gap);
  align-items: center;
  line-height: var(--ig-chip-line);
}

.plant-image-wrapper .plant-credit-chip .plant-credit__txt{
  font-size: var(--ig-chip-font);
  line-height: var(--ig-chip-line);
  white-space: nowrap;
}

/* Kamera-Icon nicht größer als Text, zentriert */
.plant-image-wrapper .plant-credit-chip .ico-photo{
  width: var(--ig-chip-ico);
  height: var(--ig-chip-ico);
  display: inline-block;
  vertical-align: middle;
}

/* Safety: kein Abschneiden durch übergeordnete Regeln */
.plant-image-wrapper .plant-credit-chip,
.plant-image-wrapper .plant-credit-chip *{
  overflow: visible !important;
}

.filterbar__search {
  position: relative;
}

/* Container unter der Suchleiste */
#search-suggest.search-suggest {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 4px;

  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--al-border, #e5e7eb);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.12),
    0 2px 6px rgba(15, 23, 42, 0.10);

  max-height: 320px;
  overflow-y: auto;

  z-index: 40;
  padding: 4px 0;
}

.search-suggest .suggest-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.55rem 0.85rem;
  display: flex;
  flex-direction: column;
  row-gap: 2px;

  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--al-text, #0f172a);

  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.05s ease;
}

.search-suggest .suggest-item .suggest-main strong {
  font-weight: 700;
}

.search-suggest .suggest-item small {
  font-size: 0.75rem;
  color: var(--al-text-muted, #6b7280);
}

.search-suggest .suggest-item.is-active,
.search-suggest .suggest-item:hover {
  background: #f3f4f6;
}

/* Eltern müssen das Dropdown „durchlassen“ */
#filterbar,
.filterbar {
  overflow: visible;
}

.filterbar__search {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* Desktop / große Screens */
#search-suggest {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: calc(100% + 0.35rem);
  width: min(480px, 92vw);
  max-height: min(320px, 60vh); /* nicht aus dem Viewport rausfallen */
  overflow-y: auto;
  background: var(--al-surface, #fff);
  border-radius: var(--al-radius, 0.75rem);
  box-shadow: var(--al-shadow-lg, 0 18px 45px rgba(0,0,0,.18));
  padding: 0.25rem 0;
  z-index: 50;
}

/* Suggest-Items wie gehabt schlank */
.suggest-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9rem;
}

.suggest-item.is-active,
.suggest-item:hover {
  background: rgba(0,0,0,0.04);
}

/* Clear-X im Feld */
.search-clear {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  font-size: 0.9rem;
  cursor: pointer;
  opacity: 0.6;
  padding: 0;
}

.search-clear:hover {
  opacity: 1;
}

/* Mobile: Dropdown fix im Viewport zentriert */
@media (max-width: 768px) {
  .filterbar__search input[type="search"],
  .filterbar__search input[type="text"] {
    font-size: 1.05rem;
    padding-block: 0.8rem;
  }

  #search-suggest {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    top: clamp(64px, 14vh, 96px); /* je nach Header-Höhe */
    width: min(520px, 96vw);
    max-height: 55vh;
  }
}

/* Eltern-Container: Referenz für das Dropdown */
.filterbar__search {
  position: relative;
  display: flex;
  align-items: center;
  overflow: visible;
}

/* FINAL: Dropdown exakt unter der Searchbar, selbe Breite */
#search-suggest {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(100% + 0.35rem) !important;
  transform: none !important;
  margin: 0;
  width: auto;
  max-height: min(320px, 60vh);
  overflow-y: auto;
  background: var(--al-surface, #fff);
  border-radius: var(--al-radius, 0.75rem);
  box-shadow: var(--al-shadow-lg, 0 18px 45px rgba(0,0,0,0.18));
  padding: 0.25rem 0;
  z-index: 50;
}

/* Suggest-Items – nur zur Sicherheit */
#search-suggest .suggest-item {
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  padding: 0.45rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  font-size: 0.9rem;
}

/* Mobile: einfach volle Breite der Searchbar, aber weiterhin an ihr ausgerichtet */
@media (max-width: 768px) {
  .filterbar__search input[type="search"],
  .filterbar__search input[type="text"] {
    font-size: 1.05rem;
    padding-block: 0.8rem;
  }

  #search-suggest {
    max-height: 55vh;
  }
}

.result-count.is-hidden {
  display: none;
}

.plant-empty-state {
  padding: 2.5rem 2rem;
  text-align: center;
  border-radius: 1.25rem;
  background: #f5f7f8;
  border: 1px dashed rgba(0,0,0,0.08);
}

.plant-empty-state__title {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  font-weight: 600;
}

.plant-empty-state__text {
  margin: 0 0 1.25rem;
  color: rgba(0,0,0,0.6);
}

.plant-empty-state__reset {
  margin-top: 0.25rem;
}

.filterbar__chips {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0.25rem 0.5rem;
  gap: 0.5rem;
}

/* === Section Titles (Care basics, Growth, Size…) === */
.plm .plm-group-title {
    font-family: inherit;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.12em !important;
    color: #94A3B8 !important; /* Slate-400 */
    
    margin-top: 27px !important;   /* Abstand ZWISCHEN den Blöcken */
    margin-bottom: 6px !important; /* kompakt, aber lesbar */
    
    padding: 0 !important;         /* kein zusätzliches Padding */
    border: none !important;       /* Border kommt über rows */
}

/* Erster Titel im Tab etwas näher */
.plm .plm-tab__panel .plm-group-title:first-of-type {
    margin-top: 10px !important;
}

/* Entfernt ungewollte Abstände in DLs */
.plm .plm-tab__panel dl.plm-dl {
    margin: 0 !important;
}

/* === Rows === */
.plm .plm-row {
    display: grid;
    grid-template-columns: minmax(0, 45%) minmax(0, 55%);
    column-gap: 16px;
    align-items: flex-start;

    padding: 6px 0 !important;     /* angenehm kompakt */
    border-bottom: 1px solid rgba(0,0,0,0.035) !important;
}

.plm .plm-row:last-of-type {
    border-bottom: none !important;
}

/* Label */
.plm .plm-term {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important; /* Slate-700 */
    margin: 0 !important;
    line-height: 1.45 !important;
}

/* Value */
.plm .plm-desc {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #111827 !important; /* Slate-900 */
    margin: 0 !important;
    line-height: 1.45 !important;
}


/* ---------- MODAL BACKDROP (Dunkler + mehr Blur) ---------- */
#plm-overlay,
.plm-overlay {
    backdrop-filter: blur(14px) brightness(0.55); /* 0.55 = dunkler */
    -webkit-backdrop-filter: blur(14px) brightness(0.55);

    background: rgba(0,0,0,0.32) !important; 
    /* du kannst 0.32 erhöhen auf 0.40 oder 0.48 für noch dunkler */
}

/* ===== Style B: Soft Neumorph ===== */

.plm__btn--primary {
  background: #ffffff;
  color: #2C6B4A;
  border-radius: 12px;
  padding: 12px 22px;
  font-weight: 600;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow:
    4px 4px 12px rgba(0,0,0,0.08),
    -4px -4px 12px rgba(255,255,255,0.7);
  transition: all 0.15s ease;
}

.plm__btn--primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    6px 6px 14px rgba(0,0,0,0.12),
    -4px -4px 12px rgba(255,255,255,0.8);
}

/* Disabled */
.plm__btn--primary:disabled {
  opacity: 0.45;
  box-shadow: none;
}

/* ----------------------------------------------
   PREMIUM UPLOAD BUTTON — Minimal Modern (2025)
   ---------------------------------------------- */

/* Base Button */
.plm__btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 10px 18px !important;
    border-radius: 8px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    border: none !important;
    cursor: pointer !important;
    
    transition: all 0.15s ease !important;
}

/* Primary CTA */
.plm__btn--primary {
    background: #2C6B4A !important; /* deine Brand-Farbe */
    color: #ffffff !important;

    box-shadow: 0 1px 2px rgba(0,0,0,0.06) !important;
}

/* Hover */
.plm__btn--primary:hover:not(:disabled) {
    background: #255a3f !important;      /* dunklere Brand-Farbe */
    box-shadow: 0 2px 4px rgba(0,0,0,0.10) !important;
    transform: translateY(-1px) !important;
}

/* Disabled State */
.plm__btn--primary:disabled,
.plm__btn--primary[disabled] {
    background: #E2E8F0 !important;       /* Slate-300 */
    color: #94A3B8 !important;            /* Slate-400 */
    box-shadow: none !important;
    
}

/* ==== Photo Credit (Variante A – Minimal & Elegant) ==== */
.plant-credit {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.80rem;
  line-height: 1.35;
  padding-left: 0.2rem;
  color: #6b7280; /* base grey */
}

.plant-credit--user {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.plant-credit__label {
  color: #6b7280; /* light grey */
  font-weight: 400;
}

.plant-credit__handle {
  color: #374151; /* slightly darker */
  font-weight: 400; /* no dominance */
  text-decoration: none;
}

.plant-credit__handle:hover {
  text-decoration: underline;
}

/* ==== Photo Credit (Variante A – Minimal & Elegant) ==== */
.plm .plant-credit {
  margin: 0.6rem 0 0.3rem;
  font-size: 0.80rem;
  line-height: 1.35;
  padding-left: 0.2rem;
  color: #6b7280;
  pointer-events: auto !important;  /* sicherstellen, dass Events durchgehen */
}

.plm .plant-credit--user {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

/* "Photo by" */
.plm .plant-credit__label {
  color: #6b7280;
  font-weight: 400;
}

/* Instagram-Handle (Link) */
.plm .plant-credit__handle {
  color: #374151 !important;       /* leicht dunkler */
  font-weight: 400 !important;     /* nicht fetter als Label */
  text-decoration: none !important;
  font-size: 0.80rem !important;
  cursor: pointer !important;
  pointer-events: auto !important; /* Link explizit aktiv */
}

/* Hover / Focus */
.plm .plant-credit__handle:hover,
.plm .plant-credit__handle:focus {
  text-decoration: underline !important;
}

.plm-seo-link {
  margin-top: 20px !important;
  padding-top: 8px !important;
  border-top: 1px solid rgba(0,0,0,0.12) !important;
  text-align: left !important;
  opacity: 0.55 !important;
  font-size: 11px !important;
}

.plm-seo-link a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: none !important;
}

.plm-seo-link a:hover {
  opacity: 0.9 !important;
}

/* ----------------------------------------
   AquariumLesson – Plant Detail SEO Page
   ---------------------------------------- */

.al-plant-detail-page {
  padding: 2.5rem 1.5rem 3.5rem;
  background: #f8fafc; /* sehr hell, fast weiß */
  font-family: inherit;
  color: #0f172a; /* slate-900 */
}

.al-plant-detail {
  max-width: 1120px;
  margin: 0 auto;
}

/* ---------- Header ---------- */

.al-plant-detail__header {
  margin-bottom: 2rem;
}

.al-plant-detail__title {
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  line-height: 1.2;
  margin: 0 0 .35rem;
  font-weight: 650;
  letter-spacing: .01em;
  color: #020617; /* slate-950 */
}

.al-plant-detail__subtitle {
  margin: 0;
  font-size: .95rem;
  color: #64748b; /* slate-500 */
}

.al-plant-detail__subtitle span {
  font-size: .95rem;
}

/* ---------- Layout ---------- */

.al-plant-detail__layout {
  display: block; /* mobile: untereinander */
}

/* ---------- Main Column ---------- */

.al-plant-detail__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* ---------- Sections ---------- */

.al-plant-detail__seo-intro,
.al-plant-detail__quick-specs,
.al-plant-detail__params,
.al-plant-detail__nutrients,
.al-plant-detail__taxonomy {
  background: #ffffff;
  border-radius: 16px;
  border: 1px solid rgba(148, 163, 184, 0.28); /* slate-400 */
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow:
    0 18px 45px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(148, 163, 184, 0.35);
}

.al-plant-detail__seo-intro h2,
.al-plant-detail__quick-specs h2,
.al-plant-detail__params h2,
.al-plant-detail__nutrients h2,
.al-plant-detail__taxonomy h2 {
  font-size: 1.05rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #94a3b8; /* slate-400 */
  margin: 0 0 .9rem;
  font-weight: 700;
}

.al-plant-detail__seo-intro p {
  margin: 0 0 .9rem;
  font-size: .97rem;
  line-height: 1.7;
  color: #1f2933;
}

.al-plant-detail__seo-intro p:last-child {
  margin-bottom: 0;
}

/* ---------- Definition Lists ---------- */

.al-plant-detail__spec-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem .75rem;
}

.al-plant-detail__spec {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.7fr);
  column-gap: .75rem;
  row-gap: .1rem;
  align-items: baseline;
}

.al-plant-detail__spec dt,
.al-plant-detail__spec dd {
  margin: 0;
  font-size: .93rem;
}

.al-plant-detail__spec dt {
  font-weight: 600;
  color: #64748b; /* slate-500 */
  white-space: nowrap;
}

.al-plant-detail__spec dd {
  color: #020617; /* slate-950 */
}

/* ---------- Footer ---------- */

.al-plant-detail__footer {
  margin-top: .75rem;
}

.al-plant-detail__disclaimer {
  margin: 0;
  font-size: .8rem;
  color: #94a3b8;
}

/* ---------- Sidebar ---------- */

.al-plant-detail__sidebar {
  margin-top: 2.5rem;
}

.al-plant-detail__image {
  margin: 0 0 1.5rem;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: radial-gradient(circle at 30% 0%, #e0f2fe 0, #f8fafc 55%);
}

.al-plant-detail__image img {
  display: block;
  width: 100%;
  height: auto;
}

/* Sidebar Links */

.al-plant-detail__links {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.al-plant-detail__links a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  color: #0f766e; /* teal-700 */
  text-decoration: none;
  padding: .5rem .7rem;
  border-radius: 999px;
  background: rgba(45, 212, 191, 0.06);
  border: 1px solid rgba(45, 212, 191, 0.3);
  transition: background .16s ease, transform .16s ease, box-shadow .16s ease;
}

.al-plant-detail__links a::before {
  content: '↗';
  font-size: .8rem;
  opacity: .85;
}

.al-plant-detail__links a:hover {
  background: rgba(45, 212, 191, 0.12);
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(15, 23, 42, 0.08);
}

/* ---------- Responsive Layout ---------- */

@media (min-width: 880px) {
  .al-plant-detail__layout {
    display: grid;
    grid-template-columns: minmax(0, 2.1fr) minmax(260px, 0.95fr);
    gap: 2.5rem;
    align-items: flex-start;
  }

  .al-plant-detail__sidebar {
    margin-top: .2rem;
    position: sticky;
    top: 5.5rem; /* leicht unter Header / Adminbar */
  }

  .al-plant-detail__spec-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .al-plant-detail-page {
    padding-top: 3rem;
  }
}

/* ---------- Dark Mode (optional, falls du global dark-mode verwendest) ---------- */

@media (prefers-color-scheme: dark) {
  .al-plant-detail-page {
    background: #020617;
    color: #e2e8f0;
  }

  .al-plant-detail__seo-intro,
  .al-plant-detail__quick-specs,
  .al-plant-detail__params,
  .al-plant-detail__nutrients,
  .al-plant-detail__taxonomy {
    background: #020617;
    border-color: rgba(148, 163, 184, 0.5);
    box-shadow:
      0 18px 45px rgba(15, 23, 42, 0.65),
      0 0 0 1px rgba(30, 64, 175, 0.3);
  }

  .al-plant-detail__seo-intro p {
    color: #e2e8f0;
  }

  .al-plant-detail__spec dt {
    color: #94a3b8;
  }

  .al-plant-detail__spec dd {
    color: #e5e7eb;
  }

  .al-plant-detail__disclaimer {
    color: #6b7280;
  }

  .al-plant-detail__image {
    border-color: rgba(148, 163, 184, 0.6);
    background: radial-gradient(circle at 30% 0%, #0f172a 0, #020617 60%);
  }

  .al-plant-detail__links a {
    background: rgba(45, 212, 191, 0.08);
    border-color: rgba(45, 212, 191, 0.45);
    color: #5eead4;
  }

  .al-plant-detail__links a:hover {
    background: rgba(45, 212, 191, 0.15);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.9);
  }
}

/* Filterbar IMMER über Card-Overlays (overlay-br, bookmark, upload-hint, etc.) */
#filterbar.filterbar.al-sticky-offsets,
#filterbar{
  position: sticky;
  top: 75px;
  z-index: 1100 !important; /* > 1000 (bookmark) */
}

/* Drawer soll das EINZIGE sein, das drüber liegt */
#plant-filters.offcanvas-sidebar.active{
  z-index: 1200 !important;
}

/* falls du ein Overlay für den Drawer hast */
#sidebar-overlay{
  z-index: 1190 !important;
}

/* === PATCH: Cannot grow submersed – brauner Difficulty-Badge === */
:root {
  --diff-brown: #8b5e34;
}

/* nur die spezielle Kombination in der Card anpassen */
.plant-card .badge--difficulty.badge--cannot-submersed {
  --diff-accent: var(--diff-brown);

  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--diff-accent) 96%, white 4%) 0%,
      color-mix(in srgb, var(--diff-accent) 90%, black 10%) 100%);
  border: 1px solid color-mix(in srgb, var(--diff-accent) 65%, white 35%);
  color: #fff;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
  transition: none;
  transform: none;
  box-shadow: none;
}

.plant-card .badge--difficulty.badge--cannot-submersed .ico {
  width: 16px;
  height: 16px;
  margin-right: .35rem;
  opacity: 1;
}

@media (hover:hover) {
  .plant-card .badge--difficulty.badge--cannot-submersed:hover,
  .plant-card .badge--difficulty.badge--cannot-submersed:active {
    transform: none;
    background:
      linear-gradient(180deg,
        color-mix(in srgb, var(--diff-accent) 96%, white 4%) 0%,
        color-mix(in srgb, var(--diff-accent) 90%, black 10%) 100%);
  }
}

/* kleines emersed-no Icon unten rechts im Bild (falls du es nutzt) */
.meta-flag--emersed-no {
  position: absolute;
  right: 10px;
  bottom: 10px;
  background: #fff;
  border-radius: 9999px;
  padding: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.meta-flag--emersed-no .ico {
  width: 18px;
  height: 18px;
  display: block;
}

/* ======================================================
   Plant Library: constrain filterbar width on large screens
   ====================================================== */
#filterbar.filterbar{
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}

/* Optional: auf sehr großen Screens noch etwas breiter */
@media (min-width: 1400px){
  #filterbar.filterbar{ max-width: 1200px; }
}


/* ===== MOBILE MODAL RESCUE PATCH (nur Plant Modal) ===== */

@media (max-width: 768px) {
  /* Overlay darf nicht zentriert „quetschen“, sondern oben starten + scrollen */
  .plm-overlay {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: center !important;
    padding: 16px 10px !important;

    max-height: 100dvh !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
  }

  /* Dialog/Container: NICHT selbst scrollen, nur Rahmen + Layout */
  .plm,
  .plm-dialog {
    position: relative !important;
    margin: 0 auto !important;
    width: 100% !important;
    max-width: 960px !important;

    /* wichtig: kein eigener Scroll, kein fixes 100vh */
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;

    display: flex !important;
    flex-direction: column !important;
  }

  /* HIER soll gescrollt werden */
  .plm__body {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    /* H: Reserve für Header/Close/Spacing – Wert bei Bedarf anpassen */
    max-height: calc(100dvh - 120px) !important;
    overflow-y: auto !important;
  }
}

/* =========================================
   MOBILE: Bookmark im PLANT-MODAL links oben
   ========================================= */
@media (max-width: 640px) {
  /* Nur im Modal, nicht im normalen Grid */
  .plant-card--modal .plant-save-toggle,
  .plant-card--modal .al-bookmark-btn.al-heart-btn.-compact {
    position: absolute !important;
    top: 10px !important;
    left: 10px !important;
    right: auto !important;
    z-index: 5 !important;
  }
}

/* FORCE: Upload CTA modern */
.plant-image-wrapper { 
  position: relative !important; 
}

.plant-image-wrapper .plant-upload-hint { 
  position: absolute !important;
  left: 12px !important;
  right: 12px !important;
  bottom: 12px !important;
  z-index: 50 !important;
  display: flex !important;
  justify-content: center !important;
}

.plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  padding: 10px 14px !important;
  border-radius: 999px !important;

  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;

  color: #fff !important;
  background: linear-gradient(135deg, #2c6b4a, #3f8f66) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;

  opacity: .95 !important;
  transform: translateZ(0) !important;
}

.plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo::before {
  content: "＋";
  font-size: 16px;
  line-height: 1;
}

/* 3) CTA link: quiet, crisp, one-line, no wrap, not blurry */
.plant-card .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo,
.plm .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo{
  pointer-events: auto;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;

  padding: 6px 10px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 650;
  line-height: 1;

  color: rgba(24,52,36,.85);
  text-decoration: none;

  /* crisp (no blur) */
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 6px 14px rgba(0,0,0,.10);

  opacity: .82;
  transition: opacity .15s ease;
}

.plant-card .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo:hover,
.plm .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo:hover{
  opacity: .95;
  text-decoration: underline;
}

/* 4) sprout */
.plant-card .plant-upload-hint .sprout,
.plm .plant-upload-hint .sprout{
  opacity: .75;
}

/* 5) Keep overlays above image but below top-right bookmark if needed */
.plant-card .plant-image-wrapper .al-bookmark-btn{
  position: absolute;
  z-index: 30;                /* bookmark always above */
}

/* difficulty stays bottom-right, above image */
.plant-card .plant-image-wrapper .overlay-br,
.plm .plant-image-wrapper .overlay-br{
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 25;
}

/* Keep your position fix */
.plant-card .plant-image-wrapper .plant-upload-hint{
  position: absolute !important;
  left: 50% !important;
  top: 22% !important;
  transform: translateX(-50%) !important;
  z-index: 20 !important;

  /* IMPORTANT: don't clip the label */
  overflow: visible !important;

  /* width guard so it doesn't run into edges */
  max-width: min(320px, calc(100% - 24px)) !important;
  width: max-content !important;
  pointer-events: none !important;
}

/* crisp, quiet CTA – no blur, no clipping */
.plant-card .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo{
  pointer-events: auto !important;

  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;

  /* prevent ugly wraps; keep readable */
  white-space: nowrap !important;

  /* remove clipping that causes cut text */
  overflow: visible !important;
  text-overflow: clip !important;

  padding: 6px 10px !important;
  border-radius: 999px !important;

  font-size: 12px !important;
  font-weight: 650 !important;
  line-height: 1.2 !important;

  color: rgba(24,52,36,.86) !important;
  text-decoration: none !important;

  /* CRISP (no fog) */
  background: rgba(255,255,255,.96) !important;
  border: 1px solid rgba(0,0,0,.06) !important;
  box-shadow: 0 6px 14px rgba(0,0,0,.10) !important;

  /* kill blur sources */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: none !important;

  opacity: .84 !important;
}

/* if you want ellipsis instead of overflow outside the pill, use this instead:
.plant-card .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo{
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}
*/

/* sprout */
.plant-card .plant-upload-hint .sprout{
  opacity: .75 !important;
  flex: 0 0 auto !important;
}

/* =========================================================
   ANDROID SAFE CTA — LAST RULE WINS
   (no color-mix, no backdrop-filter, no fancy features)
========================================================= */
.plant-card .plant-image-wrapper{ position:relative !important; }

.plant-card .plant-image-wrapper .plant-upload-hint{
  position:absolute !important;
  left:50% !important;
  top:22% !important;
  transform:translateX(-50%) !important;
  z-index:999 !important;

  display:block !important;
  opacity:1 !important;
  visibility:visible !important;

  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;

  max-width:calc(100% - 24px) !important;
  width:max-content !important;
}

.plant-card .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo{
  pointer-events:auto !important;

  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;

  padding:7px 10px !important;
  border-radius:999px !important;

  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.1 !important;

  color:rgba(24,52,36,.9) !important;
  text-decoration:none !important;

  background:#ffffff !important;          /* no transparency */
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.12) !important;

  opacity:.92 !important;
  visibility:visible !important;

  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  filter:none !important;
}

.plant-card .plant-image-wrapper .plant-upload-hint{ z-index:999 !important; }
.plant-card .plant-image-wrapper .al-bookmark-btn{ z-index:1000 !important; }
.plant-card .plant-image-wrapper .overlay-br{ z-index:900 !important; }

.plant-card{
  background: #fff;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0,0,0,.04),
    0 6px 20px rgba(0,0,0,.06);
  transition:
    box-shadow .25s ease,
    transform .25s ease;
}

@media (hover:hover){
  .plant-card:hover{
    transform: translateY(-2px);
    box-shadow:
      0 4px 10px rgba(0,0,0,.06),
      0 12px 30px rgba(0,0,0,.10);
  }
}

@media (max-width: 768px){
  .plant-grid{
    padding-left: 12px;
    padding-right: 12px;
  }
}

/* Media box: stable layout */
.plant-card .plant-image-wrapper{
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}

/* All images behave the same */
.plant-card .plant-image{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center; /* <- macht das Leaf wieder “richtig” */
}

/* Placeholder: only visual tweaks, no positioning tricks */
.plant-card .plant-image.is-placeholder{
  opacity:1;
  filter:saturate(.95);
}

/* Upload hint: always visible, stacked above image */
.plant-card .plant-image-wrapper .plant-upload-hint{
  position:absolute !important;
  left:50% !important;
  top:22% !important;
  transform:translateX(-50%) !important;
  z-index:20 !important;

  display:block !important;
  opacity:1 !important;
  visibility:visible !important;

  pointer-events:none !important;
  margin:0 !important;
  padding:0 !important;

  max-width:calc(100% - 24px) !important;
  width:max-content !important;
}

.plant-card .plant-image-wrapper .plant-upload-hint > a.js-open-submit-photo{
  pointer-events:auto !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:8px !important;

  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  max-width:100% !important;

  padding:7px 10px !important;
  border-radius:999px !important;

  font-size:12px !important;
  font-weight:700 !important;
  line-height:1.1 !important;

  color:rgba(24,52,36,.9) !important;
  text-decoration:none !important;

  background:#fff !important;
  border:1px solid rgba(0,0,0,.08) !important;
  box-shadow:0 6px 14px rgba(0,0,0,.12) !important;
}

/* Ensure stacking order */
.plant-card .plant-image-wrapper .plant-image{ position:relative; z-index:1; }
.plant-card .plant-image-wrapper .overlay-br{ z-index:10; }
.plant-card .plant-image-wrapper .al-bookmark-btn{ z-index:30; }

/* =========================================================
   PLM MODAL — MOBILE FULLSCREEN + ONE SCROLL
   ========================================================= */
@media (max-width: 768px) {

  /* 1) Modal selbst ist Fullscreen + EINZIGER Scroll-Container */
  .plm{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    max-height: none;

    border-radius: 0;
    margin: 0;

    overflow-y: auto;                 /* ✅ NUR HIER scrollen */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* 2) Innerer Dialog darf NICHT scrollen */
  .plm__dialog{
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* 3) Header darf NICHT sticky/fixed sein */
  .plm__header{
    position: static !important;
    top: auto !important;
  }

  /* 4) Content darf KEINEN eigenen Scroll haben */
  .plm__body{
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
  }
}

/* ===========================
   PLM Modal: ONE scroll only (mobile)
   Kill inner scroll containers
   =========================== */
@media (max-width: 768px){

  /* Das Modal selbst soll Fullscreen sein + der EINZIGE Scroller */
  .plm{
    position: fixed;
    inset: 0;
    height: 100dvh;
    overflow: hidden; /* wichtig: damit NICHT mehrere Scrollbereiche entstehen */
  }

  /* Body ist der einzige Scroll-Container */
  .plm__body{
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ✅ INNEREN SCROLL ENTFERNEN (dein Problem im Screenshot) */
  .plm-tabs__panels{
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important; /* falls irgendwo grid/flex klemmt */
  }

  /* falls Tabs-Wrapper irgendwo selbst overflow bekommt */
  .plm-tabs,
  .plm-tabs__rail{
    overflow: visible !important;
  }
}
/* =========================================================
   PLM MODAL — MOBILE FULLSCREEN
   plm__body = ONE AND ONLY SCROLL CONTAINER
   ========================================================= */
@media (max-width: 768px){

  /* Modal selbst: Fullscreen, KEIN Scroll */
  .plm{
    position: fixed;
    inset: 0;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;           /* ❗ wichtig */
    border-radius: 0;
  }

  /* 👉 EINZIGER Scroll-Container */
  .plm__body{
    position: relative;
    height: 100dvh;             /* fullscreen */
    overflow-y: auto;           /* ✅ NUR HIER scrollen */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  /* Header darf NICHT sticky/fixed sein */
  .plm__header{
    position: static !important;
    top: auto !important;
  }

  /* ❌ INNEREN SCROLL KOMPLETT ENTFERNEN */
  .plm-tabs__panels{
    max-height: none !important;
    overflow: visible !important;
    min-height: 0 !important;
  }

  /* Sicherheit: auch Tabs selbst dürfen nicht scrollen */
  .plm-tabs,
  .plm-tabs__rail{
    overflow: visible !important;
  }
}

.plant-card .plant-image-wrapper img.plant-image.is-placeholder{
  object-fit: contain !important;
}

.plant-card{
  background: #fff !important;
}

/* Bildfläche / Wrapper muss die Fläche definieren (hast du vermutlich schon) */
.plant-image-wrapper{
  overflow: hidden;
  /* falls noch nicht vorhanden: */
  aspect-ratio: 4 / 3; /* passt zu 1200x900 */
}

/* Bild füllt die Fläche */
.plant-image-wrapper > img.plant-image{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Placeholder: ebenfalls cover (und überschreibt alte contain-Regeln) */
.plant-image-wrapper > img.plant-image.is-placeholder{
  object-fit: cover !important;
}

/* ===== PLM: single scroll container architecture (stable) ===== */
.plm{
  overflow: hidden !important;                 /* dialog selbst NICHT scrollen */
  max-height: calc(100dvh - 48px) !important;  /* viewport clamp */
}

.plm__body{
  overflow: auto !important;                   /* NUR hier scrollen */
  min-height: 0 !important;                    /* grid shrink fix */
}

.plm-tabs__panels{
  max-height: none !important;                 /* keine zweite Scroll-Ebene */
  overflow: visible !important;
}

/* FIX: Off-canvas Close darf auf Desktop nicht abgeschnitten werden */
@media (min-width: 641px){
  .plm{
    overflow: visible !important;
  }
}

/* === Search suggest should overlay card UI (difficulty/bookmark/heart) === */

/* Wichtig: nichts darf das Dropdown clippen */
.filterbar,
.filterbar__search{
  overflow: visible !important;
}

/* Anker für absolute Position */
.filterbar__search{
  position: relative !important;
  z-index: var(--pl-z-filterbar) !important;
}

/* Dropdown selbst immer über Card-UI */
#search-suggest.search-suggest{
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  right: 0 !important;

  /* über Card-UI (20), aber unter Overlay/Drawer (2147483645/46) */
  z-index: calc(var(--pl-z-filterbar) + 1) !important;

  /* optional, damit es “wie ein Layer” wirkt */
  background: #fff !important;
  border: 1px solid var(--ui-border) !important;
  border-radius: 12px !important;
  box-shadow: var(--ui-shadow) !important;
}

/* Drawer + Overlay immer ÜBER Bottom Nav */
#sidebar-overlay{
  z-index: 2147483645 !important;
}

#plant-filters.offcanvas-sidebar.active{
  z-index: 2147483646 !important;
}

.pl-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:1.5rem;
}
@media (max-width:640px){
  .pl-grid{ grid-template-columns:1fr; }
}