/* ============================================================
   Beet-Shop Berater – Design System
   CI-Quelle: Styleguide/Beet-Shop Styleguide.html
   ============================================================ */
:root{
  --green:#95C11F;
  --green-dark:#7BA517;
  --berry:#B5004B;
  --berry-dark:#8C0039;
  --ink:#3C3C3B;
  --gray:#8B8B8A;
  --gray-soft:#E8E8E6;
  --bg:#F6F6F3;
  --white:#FFFFFF;

  --sidebar-w:236px;

  /* Safe-Area: index.html nutzt viewport-fit=cover, die Seite reicht also bis
     unter Status-/Navigationsleiste und Display-Aussparungen (Tablet/Kiosk).
     Ohne diese Insets läge das Logo oben links unter der Systemleiste. */
  --safe-t:env(safe-area-inset-top,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --gap:24px;
  --radius-btn:6px;
  --radius-card:8px;
  --shadow:0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:0 8px 28px rgba(0,0,0,.12);

  --font-head:'Montserrat','Segoe UI',Arial,sans-serif;
  --font-body:'Open Sans','Segoe UI',Calibri,Arial,sans-serif;

  /* Lebensbereich-Farben (aus Wireframe Pflanzenübersicht) */
  --lb-trocken-sonnig:#E8A24A;
  --lb-feucht-sonnig:#E9C766;
  --lb-feucht-schattig:#4CA17A;
  --lb-trocken-schattig:#4A5568;
}

*{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}

h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.1;letter-spacing:-.3px;}
h1{font-size:38px;font-weight:800;}
h2{font-size:28px;font-weight:800;}
h3{font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;}
p{color:#555;}

/* ---------- App-Shell ---------- */
#app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  min-height:100vh;
}

/* ---------- Sidebar ---------- */
.sidebar{
  background:var(--white);
  border-right:1px solid var(--gray-soft);
  padding:calc(28px + var(--safe-t)) 20px calc(20px + var(--safe-b)) calc(20px + var(--safe-l));
  overflow-y:auto;             /* bei sehr flachen Viewports scrollen statt abschneiden */
  overscroll-behavior:contain;
  display:flex;
  flex-direction:column;
  position:sticky;
  top:0;
  height:100vh;
  height:100dvh; /* Browser-UI (Adressleiste) auf Tablets nicht überdecken */
}
.brand{display:block;flex:0 0 auto;padding:0 6px 22px;}
.brand-logo{height:46px;width:auto;}
/* min-height:0 + overflow: bei flachen Viewports (Tablet quer) scrollt das Menü,
   Logo und Fußzeile bleiben stehen – sonst rutscht das Logo aus dem Bild. */
.nav{display:flex;flex-direction:column;gap:4px;margin-top:6px;min-height:0;overflow-y:auto;overscroll-behavior:contain;}
.nav-item{
  display:flex;align-items:center;gap:12px;
  padding:12px 14px;border-radius:var(--radius-btn);
  font-family:var(--font-head);font-weight:700;font-size:14px;
  color:var(--ink);letter-spacing:.2px;
  transition:background .15s,color .15s;
  position:relative;
}
.nav-item:hover{background:var(--bg);}
.nav-item.active{background:var(--green);color:var(--ink);}
.nav-item.active .nav-ico{color:var(--ink);}
.nav-ico{width:22px;height:22px;flex-shrink:0;color:var(--green-dark);display:inline-flex;}
.nav-ico svg{width:100%;height:100%;}
.nav-badge{
  margin-left:auto;background:var(--berry);color:#fff;
  font-family:var(--font-body);font-weight:700;font-size:11px;
  min-width:20px;height:20px;border-radius:10px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 6px;
}
.sidebar-foot{margin-top:auto;flex:0 0 auto;padding:14px 8px 0;border-top:1px solid var(--gray-soft);}
.claim{font-family:var(--font-head);font-weight:700;font-size:13px;color:var(--green-dark);letter-spacing:.3px;}
.legal-links{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:8px;font-size:12px;color:var(--gray);}
.legal-links .legal-row{display:flex;gap:6px;}
.legal-links a{color:var(--gray);}
.legal-links a:hover{color:var(--green-dark);text-decoration:underline;}
.mwst-note{color:var(--gray);font-size:13px;}

/* ---------- Mobile Topbar ---------- */
.topbar{display:none;}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:40;}

/* ---------- Content ---------- */
.content{padding:calc(36px + var(--safe-t)) calc(40px + var(--safe-r)) 60px 40px;outline:none;max-width:1400px;}
.loading{color:var(--gray);padding:40px 0;}

/* Kopfzeile einer Seite */
.page-head{margin-bottom:22px;}
.eyebrow{
  font-family:var(--font-head);font-weight:700;font-size:12px;
  letter-spacing:3px;text-transform:uppercase;color:var(--green-dark);
  margin-bottom:10px;display:block;
}
.eyebrow.berry{color:var(--berry);}
.page-head p{max-width:640px;margin-top:8px;}
.divider{width:60px;height:4px;background:var(--green);border-radius:2px;margin:14px 0 26px;}
.divider.berry{background:var(--berry);}

/* ---------- Detail-Layout: Video + Info ---------- */
.detail{
  display:grid;
  grid-template-columns:minmax(300px,420px) 1fr;
  gap:44px;
  align-items:start;
}
.detail-media{position:sticky;top:calc(24px + var(--safe-t));}

/* KI-Transparenzhinweis (Startseite, unter dem Intro-Video) */
.ki-note{margin-top:10px;text-align:center;font-size:12px;line-height:1.5;color:var(--gray);}
.ki-note a{color:var(--gray);text-decoration:underline;}
.ki-note a:hover{color:var(--green-dark);}

/* 9:16 Media-Player */
.player{
  position:relative;width:100%;aspect-ratio:9/16;
  background:var(--ink);border-radius:14px;overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.player img,.player video{width:100%;height:100%;object-fit:cover;}
.player .play-btn{
  position:absolute;inset:0;margin:auto;
  width:84px;height:84px;border-radius:50%;
  background:rgba(255,255,255,.86);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s,background .15s;
}
.player .play-btn:hover{transform:scale(1.06);background:#fff;}
.player .play-btn svg{width:34px;height:34px;margin-left:4px;color:var(--ink);}
.player .badge{
  position:absolute;top:14px;left:14px;z-index:2;
  background:rgba(60,60,59,.82);color:#fff;
  font-family:var(--font-head);font-weight:700;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;
  padding:7px 12px;border-radius:20px;display:inline-flex;gap:7px;align-items:center;
}
.player .badge .nav-ico{width:15px;height:15px;color:var(--green);}
.player .video-hint{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  background:rgba(60,60,59,.82);color:#fff;white-space:nowrap;
  font-family:var(--font-head);font-weight:700;font-size:11px;
  letter-spacing:1px;text-transform:uppercase;
  padding:7px 12px;border-radius:20px;display:inline-flex;gap:7px;align-items:center;
}
.player .video-hint .nav-ico{width:15px;height:15px;color:var(--green);}
.player.no-media{display:flex;align-items:center;justify-content:center;}
.player.no-media .ph{color:#fff;opacity:.5;font-family:var(--font-head);font-size:13px;letter-spacing:1px;text-transform:uppercase;}

/* ---------- Info-Spalte ---------- */
.info-title{margin-bottom:2px;}
.info-sub{font-family:var(--font-head);font-style:italic;font-weight:600;color:var(--green-dark);font-size:17px;margin-bottom:6px;}

/* Shop-Fakten (Startseite): 24/7 + Kartenzahlung */
.shop-facts{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;}
.shop-fact{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 12px;border-radius:999px;
  background:rgba(149,193,31,.14);border:1px solid rgba(149,193,31,.45);
  font-family:var(--font-head);font-weight:600;font-size:13px;color:var(--ink);
}
.shop-fact .nav-ico{width:17px;height:17px;color:var(--green-dark);flex-shrink:0;}
.price{font-family:var(--font-head);font-weight:800;font-size:24px;color:var(--ink);margin:12px 0 4px;}
.price .per{font-family:var(--font-body);font-weight:400;font-size:13px;color:var(--gray);}

/* Argument-/Feature-Liste */
.features{list-style:none;margin:22px 0;display:flex;flex-direction:column;gap:16px;}
.features li{display:flex;gap:14px;align-items:flex-start;}
.features .f-ico{
  width:40px;height:40px;flex-shrink:0;border-radius:50%;
  background:rgba(149,193,31,.14);color:var(--green-dark);
  display:flex;align-items:center;justify-content:center;
}
.features .f-ico svg{width:22px;height:22px;}
.features .f-txt strong{display:block;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);}
.features .f-txt span{font-size:13.5px;color:#666;}

/* Fakten-Chips */
.facts{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0;}
.fact{
  background:var(--bg);border:1px solid var(--gray-soft);
  border-radius:var(--radius-btn);padding:10px 14px;font-size:13px;
}
.fact b{font-family:var(--font-head);font-weight:700;display:block;font-size:12px;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;}
.fact span{font-size:14px;color:var(--ink);}

/* Pflegehinweise-Box */
.care{background:var(--bg);border-left:3px solid var(--green);border-radius:var(--radius-card);padding:18px 20px;margin:20px 0;}
.care h3{margin-bottom:10px;}
.care p{font-size:14px;color:#555;white-space:pre-line;}

/* ---------- Buttons / CTA ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:var(--radius-btn);
  font-family:var(--font-head);font-weight:700;font-size:14px;letter-spacing:.3px;
  transition:background .15s,border-color .15s,transform .05s;
}
.btn:active{transform:translateY(1px);}
.btn .nav-ico{width:18px;height:18px;}
.btn > svg{width:18px;height:18px;flex-shrink:0;}
.btn-primary{background:var(--green);color:var(--ink);}
.btn-primary:hover{background:var(--green-dark);}
.btn-secondary{background:var(--berry);color:#fff;}
.btn-secondary:hover{background:var(--berry-dark);}
.btn-secondary .nav-ico{color:#fff;}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn-ghost:hover{background:var(--ink);color:#fff;}
.btn-ghost.on{background:var(--berry);border-color:var(--berry);color:#fff;}
.btn-ghost.on .nav-ico{color:#fff;}
.btn-block{width:100%;}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}

/* "Im Markt finden"-Box */
.market{
  margin-top:22px;background:var(--white);border:1px solid var(--gray-soft);
  border-radius:var(--radius-card);padding:18px 20px;box-shadow:var(--shadow);
}
.market .m-row{display:flex;align-items:center;gap:12px;}
.market .m-row + .m-row{margin-top:12px;padding-top:12px;border-top:1px solid var(--gray-soft);}
.market .nav-ico{width:22px;height:22px;color:var(--green-dark);flex-shrink:0;}
.market b{font-family:var(--font-head);}
.stock{font-family:var(--font-head);font-weight:700;}
.stock.in{color:var(--green-dark);}
.stock.low{color:var(--berry);}
.stock.out{color:var(--gray);}

/* ---------- Karten-Grids ---------- */
.section-title{font-family:var(--font-head);font-weight:700;font-size:16px;letter-spacing:.4px;margin:34px 0 14px;}
.section-title:first-of-type{margin-top:6px;}
.grid{display:grid;gap:20px;}
.grid.cols-3{grid-template-columns:repeat(3,1fr);}
.grid.cols-4{grid-template-columns:repeat(4,1fr);}
.grid.cols-auto{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));}

/* Media-Karte (Kachel mit Standbild + Play) */
.card{
  background:var(--white);border-radius:var(--radius-card);overflow:hidden;
  box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;
  display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);}
.card-thumb{position:relative;aspect-ratio:4/3;background:var(--gray-soft);overflow:hidden;}
.card-thumb img{width:100%;height:100%;object-fit:cover;}
.card-thumb.tall{aspect-ratio:3/4;}
.card-play{
  position:absolute;inset:0;margin:auto;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.82);display:flex;align-items:center;justify-content:center;
}
.card-play svg{width:22px;height:22px;margin-left:3px;color:var(--ink);}
.card-thumb .tag{
  position:absolute;top:10px;left:10px;background:var(--green);color:var(--ink);
  font-family:var(--font-head);font-weight:700;font-size:10.5px;letter-spacing:.6px;
  text-transform:uppercase;padding:4px 9px;border-radius:14px;
}
.card-thumb .tag.berry{background:var(--berry);color:#fff;}
.card-thumb .heart{
  position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
}
.card-thumb .heart svg{width:18px;height:18px;color:var(--berry);}
.card-thumb .heart.off svg{color:var(--gray);}
.card-body{padding:13px 15px;display:flex;flex-direction:column;gap:3px;flex:1;}
.card-body .k-title{font-family:var(--font-head);font-weight:700;font-size:14.5px;line-height:1.2;color:var(--ink);}
.card-body .k-sub{font-size:12.5px;color:var(--gray);}
.card-body .k-foot{margin-top:auto;padding-top:8px;display:flex;align-items:center;justify-content:space-between;}
.card-body .k-price{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);}

/* Lebensbereich-Farbstreifen für Pflanzenkarten */
.lb-strip{height:6px;width:100%;}
.lb-trocken-sonnig{background:var(--lb-trocken-sonnig);}
.lb-feucht-sonnig{background:var(--lb-feucht-sonnig);}
.lb-feucht-schattig{background:var(--lb-feucht-schattig);}
.lb-trocken-schattig{background:var(--lb-trocken-schattig);}
.lb-default{background:var(--gray-soft);}

.pill-legend{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0 4px;}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-family:var(--font-head);font-weight:600;
  padding:6px 12px;border-radius:16px;background:var(--bg);border:1px solid var(--gray-soft);}
.pill .dot{width:11px;height:11px;border-radius:50%;}

/* Themen-Liste (Zeilenlayout) */
.qlist{display:flex;flex-direction:column;gap:12px;}
.qrow{
  display:flex;align-items:center;gap:16px;background:var(--white);
  border:1px solid var(--gray-soft);border-radius:var(--radius-card);
  padding:14px 16px;box-shadow:var(--shadow);transition:transform .15s,box-shadow .15s;
}
.qrow:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg);}
.qrow .q-thumb{width:96px;height:72px;border-radius:6px;overflow:hidden;flex-shrink:0;position:relative;background:var(--gray-soft);}
.qrow .q-thumb img{width:100%;height:100%;object-fit:cover;}
.qrow .q-thumb .card-play{width:38px;height:38px;}
.qrow .q-thumb .card-play svg{width:16px;height:16px;}
.qrow .q-txt strong{font-family:var(--font-head);font-weight:700;font-size:16px;display:block;}
.qrow .q-txt span{font-size:13px;color:var(--gray);}
.qrow .q-arrow{margin-left:auto;color:var(--green-dark);}
.qrow .q-arrow svg{width:22px;height:22px;}

/* Hero (Startseite) */
.hero{
  position:relative;border-radius:var(--radius-card);overflow:hidden;
  background:var(--ink);color:#fff;margin-bottom:30px;box-shadow:var(--shadow-lg);
  min-height:300px;display:flex;
}
.hero img.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;}
.hero .hero-inner{position:relative;padding:44px 46px;display:flex;flex-direction:column;justify-content:center;max-width:560px;
  background:linear-gradient(90deg,rgba(60,60,59,.86) 0%,rgba(60,60,59,.5) 70%,transparent 100%);}
.hero h1{color:#fff;font-size:44px;line-height:1.02;}
.hero h1 .g{color:var(--green);}
.hero p{color:#e6e6e2;margin:14px 0 22px;max-width:420px;}
.hero .sb-sticker{
  position:absolute;right:34px;top:50%;transform:translateY(-50%);
  width:118px;height:118px;border-radius:50%;background:var(--berry);color:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  font-family:var(--font-head);font-weight:800;box-shadow:var(--shadow-lg);
}
.hero .sb-sticker small{font-weight:600;font-size:10px;letter-spacing:.5px;margin-top:2px;text-transform:none;}

/* USP-Reihe */
.usps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:6px 0 8px;}
.usp{background:var(--white);border-radius:var(--radius-card);padding:20px;text-align:center;box-shadow:var(--shadow);}
.usp .u-ico{width:40px;height:40px;margin:0 auto 10px;color:var(--green-dark);}
.usp .u-ico svg{width:100%;height:100%;}
.usp strong{font-family:var(--font-head);font-weight:700;font-size:14px;display:block;}
.usp span{font-size:12.5px;color:var(--gray);}

/* Start: Erklärvideo + Top-Listen (Layout wie Detailseiten) */
.start-intro{margin-top:0;}

/* Belege / Quellen */
.sources{margin-top:30px;border-top:1px solid var(--gray-soft);padding-top:16px;}
.sources summary{font-family:var(--font-head);font-weight:700;font-size:13px;letter-spacing:.5px;color:var(--gray);cursor:pointer;text-transform:uppercase;}
.sources .src-body{font-size:12.5px;color:#666;margin-top:12px;white-space:pre-line;line-height:1.6;}
.sources .src-body a{color:var(--green-dark);text-decoration:underline;word-break:break-all;}

/* Merkliste */
.merk-empty{text-align:center;padding:60px 20px;color:var(--gray);}
.merk-empty .nav-ico{width:54px;height:54px;margin:0 auto 16px;color:var(--gray-soft);}
.merk-actions{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 26px;}
.merk-group h3{margin:22px 0 12px;color:var(--gray);}
.merk-m2{display:flex;align-items:center;gap:9px;margin-top:6px;font-size:14px;}
.merk-m2 .nav-ico{width:20px;height:20px;color:var(--green-dark);flex-shrink:0;}
.merk-m2 strong{font-family:var(--font-head);color:var(--green-dark);white-space:nowrap;}

/* Merkliste: Listenzeilen (Infos links · Menge · Preis · Bild rechts) */
.merk-list{display:flex;flex-direction:column;gap:12px;}
.merk-row{
  display:flex;align-items:center;gap:20px;background:var(--white);
  border:1px solid var(--gray-soft);border-radius:var(--radius-card);
  padding:14px 16px;box-shadow:var(--shadow);
}
.merk-row .mr-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.mr-title{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--ink);}
.mr-title:hover{color:var(--green-dark);}
.mr-sub{font-size:12.5px;color:var(--gray);}
.merk-row .stock{font-size:13px;margin-top:3px;}
.mr-m2{font-size:12.5px;color:#666;}
.mr-m2 strong{font-family:var(--font-head);color:var(--ink);white-space:nowrap;}
.mr-facts{display:flex;flex-direction:column;gap:8px;flex-shrink:0;min-width:118px;}
.mr-fact{font-size:13.5px;color:var(--ink);}
.mr-fact b{font-family:var(--font-head);font-weight:700;display:block;font-size:11px;color:var(--gray);text-transform:uppercase;letter-spacing:.6px;}
.mr-qty{display:flex;align-items:stretch;flex-shrink:0;border:1px solid var(--gray-soft);border-radius:var(--radius-btn);overflow:hidden;}
.qty-btn{
  width:38px;min-height:40px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-head);font-weight:700;font-size:18px;line-height:1;
  background:var(--bg);color:var(--ink);transition:background .15s;
}
.qty-btn:hover{background:var(--green);}
.qty-in{
  width:48px;border:none;border-left:1px solid var(--gray-soft);border-right:1px solid var(--gray-soft);
  text-align:center;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--ink);
  background:var(--white);appearance:textfield;-moz-appearance:textfield;
}
.qty-in::-webkit-outer-spin-button,.qty-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.qty-in:focus{outline:2px solid var(--green);outline-offset:-2px;}
.mr-price{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex-shrink:0;min-width:104px;}
.mr-price .mr-unit{font-size:12px;color:var(--gray);}
.mr-price strong{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--ink);}
.mr-thumb{position:relative;width:116px;height:86px;border-radius:6px;overflow:hidden;flex-shrink:0;background:var(--gray-soft);}
.mr-thumb img{width:100%;height:100%;object-fit:cover;}
.mr-thumb .heart{
  position:absolute;top:6px;right:6px;width:30px;height:30px;border-radius:50%;
  background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;
}
.mr-thumb .heart svg{width:16px;height:16px;color:var(--berry);}

/* Pflege-Kalender (#/pflegeplan) */
.cal{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin:4px 0 10px;}
.cal-month{
  background:var(--white);border:1px solid var(--gray-soft);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:16px 18px;
}
.cal-month h3{display:flex;align-items:center;gap:9px;margin-bottom:4px;color:var(--green-dark);}
.cal-month h3 .nav-ico{width:20px;height:20px;flex-shrink:0;}
.cal-task{display:flex;gap:12px;align-items:flex-start;margin-top:12px;}
.cal-task .f-ico{
  width:36px;height:36px;flex-shrink:0;border-radius:50%;
  background:rgba(149,193,31,.14);color:var(--green-dark);
  display:flex;align-items:center;justify-content:center;
}
.cal-task .f-ico svg{width:20px;height:20px;}
.cal-task .ct-txt strong{display:block;font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--ink);}
.cal-task .ct-txt span{font-size:13.5px;color:#666;}
.cal-plants{display:block;font-size:12.5px;color:var(--gray);margin-top:3px;}
.cal-know{margin-top:26px;}
.cal-tips{display:flex;flex-direction:column;gap:10px;max-width:680px;}
.cal-tip{
  background:var(--white);border:1px solid var(--gray-soft);
  border-radius:var(--radius-card);box-shadow:var(--shadow);padding:13px 16px;
}
.cal-tip strong{display:block;font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--ink);}
.cal-tip span{font-size:13.5px;color:#666;}

/* Suche */
.search-box{
  display:flex;align-items:center;gap:12px;max-width:560px;
  background:var(--white);border:1px solid var(--gray-soft);
  border-radius:var(--radius-card);padding:4px 18px;
  box-shadow:var(--shadow);margin-bottom:24px;
  transition:border-color .15s,box-shadow .15s;
}
.search-box:focus-within{border-color:var(--green);box-shadow:0 0 0 2px rgba(149,193,31,.25);}
.search-box .nav-ico{width:22px;height:22px;color:var(--green-dark);flex-shrink:0;}
.search-box input{
  flex:1;min-width:0;min-height:50px;border:none;outline:none;background:transparent;
  font-family:var(--font-body);font-size:17px;color:var(--ink);
}
.search-box input::placeholder{color:var(--gray);}
.search-count{color:var(--gray);font-size:14px;}
.search-count strong{color:var(--ink);}
.search-hint p{max-width:560px;color:var(--gray);}
.search-empty .nav-ico svg{stroke-width:1.5;}

/* Über uns */
.prose{max-width:680px;}
.prose p{margin-bottom:14px;}
.prose h3{margin:24px 0 10px;color:var(--ink);}

/* Anfahrtskarte (Über uns): Platzhalter, Google-Iframe erst nach Klick */
.map-box{
  max-width:680px;margin:6px 0 18px;
  background:var(--white);border:1px solid var(--gray-soft);
  border-radius:var(--radius-card);box-shadow:var(--shadow);overflow:hidden;
}
.map-consent{padding:26px 20px;text-align:center;}
.map-consent>.nav-ico{display:block;width:36px;height:36px;margin:0 auto 10px;color:var(--green-dark);}
.map-consent p{max-width:440px;margin:0 auto 16px;font-size:14.5px;color:#666;}
.map-consent p strong{color:var(--ink);}
.map-consent .btn .nav-ico{width:18px;height:18px;}
.map-alt{display:block;margin-top:12px;font-size:13.5px;color:var(--green-dark);text-decoration:underline;}
.map-alt:hover{color:var(--ink);}
.map-box.loaded{aspect-ratio:16/10;}
.map-box.loaded iframe{display:block;width:100%;height:100%;border:0;}

/* Breadcrumb / Zurück */
.back{display:inline-flex;align-items:center;gap:7px;color:var(--gray);font-family:var(--font-head);
  font-weight:700;font-size:13px;letter-spacing:.4px;margin-bottom:16px;text-transform:uppercase;}
.back:hover{color:var(--green-dark);}
.back svg{width:16px;height:16px;}

/* Toast */
.toast{
  position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:#fff;padding:13px 22px;border-radius:var(--radius-btn);
  font-family:var(--font-head);font-weight:600;font-size:14px;box-shadow:var(--shadow-lg);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:60;
  display:flex;align-items:center;gap:10px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast .nav-ico{width:18px;height:18px;color:var(--green);}

/* ---------- Responsive ---------- */
@media(max-width:1080px){
  .detail{grid-template-columns:minmax(280px,360px) 1fr;gap:30px;}
  .usps{grid-template-columns:repeat(2,1fr);}
  .grid.cols-4{grid-template-columns:repeat(3,1fr);}
}

/* Tablet quer (Shop-Gerät: Galaxy Tab Active Pro 10,1" ≈ 1280×800 CSS-px).
   Aufbau wie Browser-Ansicht (Sidebar · Video · Infos), aber:
   Video wird über die Viewport-HÖHE dimensioniert, damit das 9:16-Format
   komplett ohne Scrollen sichtbar ist. Nach der 1080er-Query platziert,
   damit sie im Überlappungsbereich gewinnt. */
@media(min-width:861px) and (max-width:1366px){
  :root{--sidebar-w:216px;}
  .content{padding:calc(26px + var(--safe-t)) calc(30px + var(--safe-r)) 50px 30px;}
  .detail{grid-template-columns:auto 1fr;gap:32px;}
  .detail-media{
    width:clamp(260px,calc((100vh - 170px - var(--safe-t)) * 9 / 16),420px);
    width:clamp(260px,calc((100dvh - 170px - var(--safe-t)) * 9 / 16),420px);
    /* Video-Oberkante bündig mit dem 1. Menüpunkt („Start"):
       28px Sidebar-Padding + 68px Brand + 6px Nav-Abstand = 102px.
       Start ohne Zurück-Link (Content-Padding 26px): 102−26 = 76px;
       Detailseiten mit Zurück-Link darüber (~62px belegt): 102−62 = 40px. */
    margin-top:76px;
    top:calc(102px + var(--safe-t));
  }
  .back + .detail .detail-media{margin-top:40px;}
  .hero{min-height:260px;}
  .hero h1{font-size:38px;}
}
@media(max-width:860px){
  #app{grid-template-columns:1fr;grid-template-rows:auto 1fr;}
  .sidebar{
    position:fixed;top:0;left:0;z-index:50;width:262px;height:100vh;
    transform:translateX(-100%);transition:transform .25s ease;
  }
  #app.nav-open .sidebar{transform:translateX(0);box-shadow:var(--shadow-lg);}
  .topbar{
    display:flex;align-items:center;gap:14px;position:sticky;top:0;z-index:30;
    background:var(--white);border-bottom:1px solid var(--gray-soft);
    padding:calc(10px + var(--safe-t)) calc(16px + var(--safe-r)) 10px calc(16px + var(--safe-l));
  }
  .topbar-brand{flex:1;display:flex;justify-content:center;align-items:center;min-width:0;}
  .topbar-brand img{height:34px;}
  .topbar-merk{position:relative;width:40px;height:40px;flex:0 0 40px;display:flex;align-items:center;justify-content:center;}
  .topbar-merk .nav-ico{width:24px;height:24px;color:var(--berry);}
  .topbar-merk .nav-badge{position:absolute;top:2px;right:2px;}
  .burger{width:40px;height:40px;display:flex;flex-direction:column;justify-content:center;gap:5px;padding:0 8px;}
  .burger span{height:2.5px;background:var(--ink);border-radius:2px;transition:.2s;}
  .content{padding:20px 18px 50px;}
  .detail{grid-template-columns:1fr;gap:24px;}
  .detail-media{position:static;max-width:340px;margin:0 auto;}
  .hero .sb-sticker{width:92px;height:92px;font-size:14px;right:18px;}
  .hero h1{font-size:34px;}
  .hero .hero-inner{padding:30px 26px;background:linear-gradient(0deg,rgba(60,60,59,.9),rgba(60,60,59,.55));}
}
@media(max-width:560px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:repeat(2,1fr);}
  .usps{grid-template-columns:1fr 1fr;}
  h1{font-size:30px;}
  .price{font-size:21px;}
}
/* Touch-Geräte (Tablet & Smartphone): größere Tippflächen, Hover-Effekte
   neutralisieren – auf Touch bleibt :hover nach dem Tippen sonst "kleben". */
@media(hover:none) and (pointer:coarse){
  .card:hover,.qrow:hover{transform:none;box-shadow:var(--shadow);}
  .nav-item{padding:14px;min-height:48px;}
  .btn{min-height:48px;}
  .qty-btn{width:46px;min-height:46px;}
  .qty-in{width:54px;}
  .card-thumb .heart{width:42px;height:42px;}
  .card-thumb .heart svg{width:20px;height:20px;}
  .mr-thumb .heart{width:36px;height:36px;}
  .back{padding:8px 0;}
}

/* Merkliste mobil: Bild bleibt rechts, Menge + Preis rutschen in eine 2. Zeile */
@media(max-width:700px){
  .merk-row{
    display:grid;grid-template-columns:1fr auto;gap:12px 14px;
    grid-template-areas:"info thumb" "qty price";align-items:start;
  }
  .merk-row .mr-info{grid-area:info;}
  .mr-thumb{grid-area:thumb;width:96px;height:72px;}
  .mr-qty{grid-area:qty;justify-self:start;align-self:center;}
  .mr-price{grid-area:price;justify-self:end;align-self:center;}
  /* Fakten (Höhe/Blütezeit) rutschen als eigene Zeile unter die Infos */
  .merk-row:has(.mr-facts){grid-template-areas:"info thumb" "facts facts" "qty price";}
  .mr-facts{grid-area:facts;flex-direction:row;gap:24px;min-width:0;}
}

/* ---------- Print (Merkliste + Pflege-Kalender) ---------- */
@media print{
  .sidebar,.topbar,.scrim,.merk-actions,.card-play,.card-thumb .heart,.nav-badge,
  .qty-btn,.mr-thumb .heart,.merk-reco,.back{display:none !important;}
  #app{display:block;}
  .content{padding:0;max-width:100%;}
  body{background:#fff;}
  .card{box-shadow:none;border:1px solid var(--gray-soft);break-inside:avoid;}
  .merk-row{box-shadow:none;break-inside:avoid;}
  .cal-month,.cal-tip,.cal-know{box-shadow:none;break-inside:avoid;}
  .mr-qty{border:none;}
  .qty-in{border:1px solid var(--gray-soft);border-radius:var(--radius-btn);}
  .print-head{display:block !important;}
}
.print-head{display:none;}

/* ---------- Profi-Merkliste (#/merkliste-profi) ----------
   Versteckte B2B-Seite; der Ausdruck ist bewusst neutral (kein Beet-Shop-CI). */
.profi-print-head{display:none;}
.profi-settings{
  background:var(--white);border-radius:var(--radius-card);box-shadow:var(--shadow);
  padding:20px;margin-bottom:20px;
}
.profi-settings h3{margin:18px 0 10px;font-size:14px;color:var(--gray);}
.profi-settings h3:first-child{margin-top:0;}
.ps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;}
.ps-field{
  display:flex;flex-direction:column;gap:4px;
  font-family:var(--font-head);font-weight:700;font-size:11px;
  color:var(--gray);text-transform:uppercase;letter-spacing:.6px;
}
.ps-field input{
  font-family:var(--font-body);font-size:14.5px;color:var(--ink);
  border:1px solid var(--gray-soft);border-radius:var(--radius-btn);
  padding:9px 11px;background:var(--white);
}
.ps-field input:focus{outline:2px solid var(--green);outline-offset:-1px;}
.ps-markup{max-width:220px;}
.ps-logo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.ps-logo-prev{
  max-height:56px;max-width:180px;object-fit:contain;
  border:1px solid var(--gray-soft);border-radius:var(--radius-btn);padding:4px;background:var(--white);
}
.pr-calc{font-size:11.5px;color:var(--gray);white-space:nowrap;}
.pr-total{
  display:flex;align-items:baseline;justify-content:flex-end;gap:14px;
  margin-top:18px;padding-top:12px;border-top:2px solid var(--gray-soft);
}
.profi-druckhinweis{font-size:12.5px;color:var(--gray);margin:-14px 0 20px;}
.pr-total span{font-family:var(--font-head);font-weight:700;}
.pr-total strong{font-family:var(--font-head);font-weight:800;font-size:20px;}
.pr-total small{color:var(--gray);}

@media print{
  /* Bedienelemente und interne Infos (EK-Kalkulation, Bestand) nicht mitdrucken;
     die Menge steht bereits in der Preisspalte („3 × 4,00 €") */
  .profi .page-head,.profi .profi-settings,.profi .pr-calc,
  .profi .mr-qty,.profi .stock,.profi-druckhinweis{display:none !important;}
  /* Neutraler Kopf: Logo + „Angebot" links, Kontaktdaten rechts */
  .profi-print-head{
    display:flex !important;justify-content:space-between;align-items:flex-start;gap:24px;
    border-bottom:2px solid #000;padding-bottom:14px;margin-bottom:18px;
  }
  .pph-logo{display:block;max-height:60px;max-width:220px;object-fit:contain;margin-bottom:10px;}
  .profi-print-head h1{font-size:22px;color:#000;}
  .pph-stand{font-size:12px;color:#444;margin-top:2px;}
  .pph-kontakt{text-align:right;font-size:13px;line-height:1.6;color:#000;}
  /* Keine CI-Farben auf dem Kundenangebot */
  .profi,.profi .mr-title,.profi .merk-group h3,
  .profi .mr-price strong,.profi .mr-m2 strong,.profi .pr-total{color:#000 !important;}
  .profi .mr-sub,.profi .mr-unit,.profi .mr-m2,.profi .mr-fact,.profi .mr-fact b,
  .profi .pr-total small{color:#444 !important;}
  .profi .merk-row{box-shadow:none;border:none;border-bottom:1px solid #ccc;border-radius:0;}
  .profi .pr-total{border-top:2px solid #000;}
}