/*
Theme Name: Polisi Gartencenter
Theme URI: https://polisi.at
Author: 1.wien
Description: Massgeschneidertes WooCommerce-Theme fuer das Polisi Gartencenter Wien-Hernals. Designsprache "Organischer Garten-Editorial": Blatt-Ecken, Huegel-Kurven, Fraunces-Displaymomente, Blueten-Glyphe.
Version: 1.0.0
Requires PHP: 7.4
Text Domain: polisi
*/
/* ==========================================================================
   Polisi Gartencenter — Homepage
   Designsprache „Organischer Garten-Editorial":
   Blatt-Ecken-Radius, Hügel-Kurven zwischen Sektionen, Fraunces-Displaymomente,
   wiederkehrende Blüten-Glyphe. Kein Framework, keine externen Requests.
   ========================================================================== */

:root{
  --leaf:#5FA52B;
  --leaf-deep:#357A1A;
  --leaf-soft:#8FCB52;
  --leaf-tint:#EAF5DC;
  --sun:#F6A623;
  --sun-deep:#EC7A1C;
  --berry:#CC2D74;
  --berry-deep:#A81E5C;
  --berry-soft:#F6D9E6;
  --ink:#2C3A1E;
  --ink-soft:#5C6B4A;
  --dark:#24330F;
  --dark-2:#2E4213;
  --paper:#F4F9EC;
  --paper-2:#FCFEF8;
  --card:#FFFFFF;
  --line:#E2EED2;
  --line-dark:rgba(255,255,255,.14);

  --shadow:18px 30px 60px -28px rgba(53,122,26,.45);
  --shadow-sm:0 10px 28px -16px rgba(53,122,26,.4);
  --shadow-berry:0 14px 26px -12px rgba(204,45,116,.7);

  --r:22px;
  --r-sm:14px;
  /* Signatur: „Blatt-Ecke" — eine Ecke wächst aus */
  --r-leaf:26px 78px 26px 26px;
  --r-leaf-flip:78px 26px 26px 26px;

  --container:1180px;
  --grain:url("data:image/png;base64,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");
}

*{box-sizing:border-box;margin:0;padding:0}
html{
  scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  /* overflow-x:clip statt hidden: verhindert Layout-Viewport-Aufblähen auf iOS,
     ohne position:sticky zu brechen */
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent}
body{
  font-family:"Nunito",system-ui,sans-serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.65;
  overflow-x:hidden;
}
a,button,summary{touch-action:manipulation}
img,svg{max-width:100%;display:block}
a{color:inherit}
button{font-family:inherit;cursor:pointer}
ul,ol{list-style:none}
::selection{background:var(--berry-soft);color:var(--ink)}

@media(min-width:900px){
  ::-webkit-scrollbar{width:12px}
  ::-webkit-scrollbar-track{background:var(--paper)}
  ::-webkit-scrollbar-thumb{background:var(--leaf-soft);border-radius:8px;border:3px solid var(--paper)}
  ::-webkit-scrollbar-thumb:hover{background:var(--leaf)}
}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 24px}

section[id]{scroll-margin-top:96px}

/* ---------- Typografie ---------- */
h1,h2,h3,.serif{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.06;letter-spacing:-.015em}
.em{color:var(--berry);font-style:italic}

/* Wort mit goldenem Schwung darunter */
.em-u{position:relative;white-space:nowrap;display:inline-block}
.swash{
  position:absolute;left:-3%;bottom:-.22em;width:106%;height:.34em;
  overflow:visible;pointer-events:none}
.swash path{
  fill:none;stroke:var(--sun);stroke-width:7;stroke-linecap:round;
  stroke-dasharray:320;stroke-dashoffset:320}
.swash-draw path,.reveal.visible .swash path{animation:swash-draw .9s cubic-bezier(.3,.6,.3,1) .45s forwards}
@keyframes swash-draw{to{stroke-dashoffset:0}}

.section{padding:clamp(60px,9vw,110px) 0;position:relative}

/* Editorialer Sektionskopf: Kicker + Display-Zeile, optional Meta rechts */
.kicker{
  display:flex;align-items:center;gap:12px;
  font-weight:800;font-size:.76rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--leaf-deep)}
.kicker .fl{width:15px;height:15px;flex:none;color:var(--sun)}
.kicker .no{color:var(--berry);letter-spacing:.08em}
.kicker::after{content:"";height:1px;flex:0 1 76px;background:currentColor;opacity:.35}
.kicker.center{justify-content:center}
.kicker.center::before{content:"";height:1px;flex:0 1 76px;background:currentColor;opacity:.35}
.on-dark .kicker{color:var(--leaf-soft)}

.section-head{margin-bottom:clamp(34px,5vw,56px)}
.section-head h2{font-size:clamp(2rem,4.6vw,3.1rem);margin-top:.5em;max-width:16ch}
.section-head p{margin-top:.9em;color:var(--ink-soft);font-size:1.05rem;max-width:56ch}
.section-head.center{text-align:center}
.section-head.center h2,.section-head.center p{margin-left:auto;margin-right:auto}
.head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.head-row .section-head{margin-bottom:0}
.head-meta{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
  color:var(--ink-soft);font-size:1.05rem;padding-bottom:.4em;max-width:26ch}

/* ---------- Hügel-Kurven zwischen Sektionen ---------- */
.curve{display:block;width:100%;line-height:0;position:relative;z-index:2}
.curve svg{display:block;width:100%;height:clamp(30px,6vw,72px)}

/* ---------- Korn-Textur ---------- */
.grain{position:relative}
.grain::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:var(--grain);background-size:64px;opacity:.04}
.on-dark.grain::after{opacity:.06}

/* ---------- Buttons ---------- */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:800;font-size:1rem;white-space:nowrap;
  padding:15px 28px;border-radius:999px;
  text-decoration:none;border:2px solid transparent;background:none;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease,border-color .18s ease}
.btn svg{width:19px;height:19px;flex:none}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:var(--berry);color:#fff;box-shadow:var(--shadow-berry)}
.btn-primary:hover{background:var(--berry-deep);transform:translateY(-2px)}
.btn-ghost{background:#fff;color:var(--leaf-deep);border-color:var(--line)}
.btn-ghost:hover{border-color:var(--leaf);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.btn-leaf{background:var(--leaf);color:#fff;box-shadow:0 14px 26px -12px rgba(53,122,26,.65)}
.btn-leaf:hover{background:var(--leaf-deep);transform:translateY(-2px)}
.btn:focus-visible,a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--sun-deep);outline-offset:3px}

/* Fließtext-Links mit wachsendem Unterstrich */
.link-grow{
  text-decoration:none;font-weight:800;color:var(--berry-deep);
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 2px;
  transition:background-size .25s ease}
.link-grow:hover{background-size:100% 2px}

/* ---------- Topbar ---------- */
.topbar{background:var(--dark);color:#fff;font-size:.85rem;font-weight:700;letter-spacing:.02em}
.topbar .container{display:flex;align-items:center;justify-content:space-between;gap:14px;padding-top:9px;padding-bottom:9px}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline}
.topbar .tb-item{display:inline-flex;align-items:center;gap:7px;min-width:0}
.topbar .tb-item .fl{width:12px;height:12px;color:var(--sun)}
.topbar svg{width:15px;height:15px;flex:none}
.topbar .tb-right{display:flex;gap:18px;flex:none}
.tb-short{display:none}
@media(max-width:860px){
  .topbar .tb-right .tb-mail{display:none}
  .tb-long{display:none}
  .tb-short{display:inline}
}
@media(max-width:440px){
  .topbar{font-size:.8rem}
  .topbar .container{padding-left:16px;padding-right:16px}
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(252,254,248,.9);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .25s ease,box-shadow .25s ease}
.site-header.scrolled{border-color:var(--line);box-shadow:0 12px 30px -22px rgba(53,122,26,.45)}
/* Bei offenem Mobilmenü: backdrop-filter aus, sonst wird der Header auf
   iOS/Chromium zum Containing Block des fixed positionierten Nav-Overlays
   und das Menü erscheint als abgeschnittener Streifen statt fullscreen */
body.nav-open .site-header{
  backdrop-filter:none;-webkit-backdrop-filter:none;
  background:var(--paper-2)}
.site-header .container{display:flex;align-items:center;gap:28px;padding-top:12px;padding-bottom:12px}
.brand{flex:none;display:block}
.brand img{height:58px;width:auto;transition:height .25s ease}
.site-header.scrolled .brand img{height:46px}
.main-nav{margin-left:auto}
.main-nav ul{display:flex;gap:2px}
.main-nav a{
  position:relative;display:block;padding:9px 14px;border-radius:999px;
  font-weight:800;font-size:.97rem;text-decoration:none;color:var(--ink);
  transition:background .15s ease,color .15s ease}
.main-nav a:hover{background:var(--leaf-tint);color:var(--leaf-deep)}
.main-nav a.active{color:var(--berry-deep)}
.main-nav a.active::after{
  content:"";position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:5px;height:5px;border-radius:50%;background:var(--berry)}
.header-actions{display:flex;align-items:center;gap:10px;position:relative;z-index:95}
.cart-btn{
  position:relative;display:inline-flex;align-items:center;gap:9px;
  background:var(--leaf);color:#fff;border:none;
  font-weight:800;font-size:.95rem;padding:11px 20px;border-radius:999px;
  box-shadow:0 12px 22px -12px rgba(53,122,26,.7);
  transition:background .18s ease,transform .18s ease}
.cart-btn:hover{background:var(--leaf-deep);transform:translateY(-2px)}
.cart-btn svg{width:19px;height:19px}
.cart-count{
  position:absolute;top:-7px;right:-7px;
  min-width:22px;height:22px;padding:0 6px;
  background:var(--berry);color:#fff;border-radius:999px;
  font-size:.74rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--paper-2)}
.cart-count.bump{animation:bump .4s cubic-bezier(.34,1.56,.64,1)}
@keyframes bump{50%{transform:scale(1.45)}}
.nav-toggle{display:none;background:none;border:none;padding:8px;border-radius:12px;color:var(--ink)}
.nav-toggle svg{width:26px;height:26px}
.nav-cta{display:none}
@media(max-width:1020px){
  /* Overlay liegt unter dem Sticky-Header (z 100) — Menü-Toggle bleibt antippbar */
  .main-nav{
    position:fixed;inset:0;z-index:90;
    background:var(--paper-2);
    display:none;align-items:center;justify-content:center;margin:0;
    padding-top:80px;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;overflow-y:auto}
  .main-nav.open{display:flex}
  .main-nav ul{flex-direction:column;text-align:center;gap:8px}
  .main-nav a{font-size:1.3rem;padding:11px 26px}
  .main-nav a.active::after{display:none}
  .nav-cta{display:block;margin-top:18px}
  .nav-cta a{
    display:inline-flex;align-items:center;gap:10px;
    background:var(--leaf);color:#fff;font-size:1.05rem;
    padding:14px 30px;border-radius:999px;
    box-shadow:0 14px 26px -12px rgba(53,122,26,.65)}
  .nav-cta svg{width:19px;height:19px}
  .nav-toggle{display:block}
  .cart-btn .cart-label{display:none}
  .cart-btn{padding:11px 14px}
}

/* ---------- Hero ---------- */
.hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1100px 560px at 50% -12%, #FFFFFF 0%, rgba(255,255,255,0) 60%),
    radial-gradient(880px 480px at 88% 14%, rgba(246,217,230,.5) 0%, rgba(246,217,230,0) 55%),
    radial-gradient(880px 500px at 8% 34%, rgba(143,203,82,.3) 0%, rgba(143,203,82,0) 55%),
    var(--paper)}
.hero .container{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(28px,5vw,72px);
  padding-top:clamp(40px,6vw,76px);padding-bottom:clamp(28px,4vw,48px)}
.hero h1{font-size:clamp(2.7rem,6vw,4.6rem);margin-top:.5em;letter-spacing:-.02em}
.hero .lead{margin-top:1.1em;max-width:48ch;font-size:clamp(1.04rem,2vw,1.2rem);color:var(--ink-soft)}
.hero-actions{margin-top:clamp(26px,3.5vw,36px);display:flex;flex-wrap:wrap;gap:14px}
.hero-facts{margin-top:clamp(28px,4vw,40px);display:flex;flex-direction:column;gap:10px}
.hero-facts li{display:flex;align-items:center;gap:11px;font-weight:800;font-size:.96rem}
.hero-facts .fl{width:15px;height:15px;flex:none;color:var(--sun)}

.hero-figure{position:relative;margin:0}
.hero-figure img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:380px 380px var(--r) var(--r);
  box-shadow:var(--shadow)}
.float-card{
  position:absolute;z-index:3;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:12px 18px;box-shadow:0 18px 40px -18px rgba(44,58,30,.35)}
.float-card .fc-ico{
  flex:none;width:40px;height:40px;border-radius:12px;
  background:var(--leaf-tint);color:var(--leaf-deep);
  display:flex;align-items:center;justify-content:center}
.float-card .fc-ico svg{width:20px;height:20px}
.float-card .fc-txt{display:flex;flex-direction:column;line-height:1.3}
.float-card strong{font-size:.92rem;font-weight:800}
.float-card small{font-size:.8rem;color:var(--ink-soft);font-weight:700}
.fc-hours{left:-22px;bottom:34px;animation:float-slow 7s ease-in-out infinite}
.fc-truck{right:-14px;top:96px;animation:float-slow 8s ease-in-out 1.2s infinite}
.fc-truck .fc-ico{background:var(--berry-soft);color:var(--berry-deep)}
@keyframes float-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Schmetterling — landet an der Bogenkante */
.hero-butterfly{
  position:absolute;z-index:4;top:-4px;right:16%;width:56px;height:auto;
  animation:flutter-hover 6s ease-in-out infinite;transform-origin:center}
@keyframes flutter-hover{
  0%,100%{transform:translateY(0) rotate(-6deg)}
  50%{transform:translateY(-10px) rotate(5deg)}}

@media(max-width:880px){
  .hero .container{grid-template-columns:1fr;text-align:center}
  .hero .lead{margin-left:auto;margin-right:auto}
  .hero-actions{justify-content:center}
  .hero-facts{align-items:center}
  .hero-figure{max-width:460px;margin:0 auto}
  .fc-hours{left:-6px}
  .fc-truck{right:-6px;top:64px}
}

/* schwebende Blätter */
.ambient{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1}
.ambient .lf{position:absolute;top:-60px;width:24px;height:24px;opacity:.4;animation:fall linear infinite;color:var(--leaf-soft)}
.ambient .lf:nth-child(1){left:6%;width:20px;animation-duration:21s;animation-delay:-3s;color:var(--leaf)}
.ambient .lf:nth-child(2){left:32%;width:15px;animation-duration:26s;animation-delay:-11s}
.ambient .lf:nth-child(3){left:56%;width:24px;animation-duration:23s;animation-delay:-16s;color:var(--leaf)}
.ambient .lf:nth-child(4){left:79%;width:17px;animation-duration:28s;animation-delay:-7s;opacity:.3}
.ambient .lf:nth-child(5){left:93%;width:20px;animation-duration:24s;animation-delay:-19s;color:var(--berry-soft);opacity:.5}
@keyframes fall{0%{transform:translateY(-40px) rotate(0)}100%{transform:translateY(110vh) rotate(380deg)}}

/* ---------- USP-Band (rahmenlos, mit Trennlinien) ---------- */
.usp{background:var(--paper-2)}
.usp .container{
  display:grid;grid-template-columns:repeat(4,1fr);
  padding-top:clamp(28px,4vw,48px);padding-bottom:clamp(28px,4vw,48px)}
.usp-item{display:flex;gap:15px;align-items:flex-start;padding:6px 22px}
.usp-item + .usp-item{border-left:1px solid var(--line)}
.usp-ico{
  flex:none;width:48px;height:48px;border-radius:16px 16px 16px 4px;
  background:var(--leaf-tint);color:var(--leaf-deep);
  display:flex;align-items:center;justify-content:center}
.usp-ico svg{width:24px;height:24px}
.usp-item:nth-child(2) .usp-ico{background:var(--berry-soft);color:var(--berry-deep)}
.usp-item:nth-child(3) .usp-ico{background:#FDEBCF;color:var(--sun-deep)}
.usp-item h3{font-family:"Nunito",sans-serif;font-weight:800;font-size:1rem;letter-spacing:0}
.usp-item p{font-size:.9rem;color:var(--ink-soft);margin-top:2px}
@media(max-width:920px){
  .usp .container{grid-template-columns:repeat(2,1fr);gap:18px 0}
  .usp-item:nth-child(3){border-left:none}
}
@media(max-width:520px){
  .usp .container{grid-template-columns:1fr}
  .usp-item + .usp-item{border-left:none;border-top:1px solid var(--line);padding-top:20px}
}

/* ---------- Sortiment: Bento ---------- */
.bento{
  display:grid;gap:18px;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:200px}
.tile{
  position:relative;display:block;overflow:hidden;text-decoration:none;
  border-radius:var(--r);background:var(--leaf-tint);
  transition:transform .25s ease,box-shadow .25s ease}
.tile:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.tile:hover img{transform:scale(1.06)}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(185deg,rgba(36,51,15,0) 42%,rgba(36,51,15,.74) 100%)}
.tile-txt{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:20px 22px;color:#fff}
.tile-txt h3{font-size:1.28rem;letter-spacing:-.01em;text-shadow:0 2px 14px rgba(36,51,15,.4)}
.tile-txt p{font-size:.9rem;font-weight:700;color:rgba(255,255,255,.85);margin-top:4px;max-width:36ch;display:none}
.tile-arrow{
  position:absolute;top:16px;right:16px;z-index:2;
  width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.92);color:var(--leaf-deep);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-6px);opacity:0;
  transition:transform .25s ease,opacity .25s ease}
.tile-arrow svg{width:17px;height:17px}
.tile:hover .tile-arrow{transform:none;opacity:1}
.tile-lg{grid-column:span 2;grid-row:span 2;border-radius:var(--r-leaf)}
.tile-lg .tile-txt h3{font-size:1.7rem}
.tile-lg .tile-txt p{display:block}
.tile-w{grid-column:span 2;border-radius:var(--r-leaf-flip)}
.tile:nth-child(3n){border-radius:var(--r-leaf-flip)}
.tile-lg:nth-child(3n){border-radius:var(--r-leaf)}
@media(max-width:920px){
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .tile-w{grid-column:span 2}
}
/* ≤440px-Verhalten des Bento-Grids: siehe Feinschliff-Block am Dateiende */

/* ---------- Webshop ---------- */
.shop{background:var(--paper-2)}

/* nur für Screenreader */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* Vertrauens-Zeile im Sektionskopf */
.trust-row{display:flex;flex-direction:column;gap:11px;padding-bottom:.35em}
.trust-row li{display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:700;color:var(--ink-soft)}
.trust-row .t-ico{
  flex:none;width:32px;height:32px;border-radius:11px 11px 11px 3px;
  background:var(--leaf-tint);color:var(--leaf-deep);
  display:flex;align-items:center;justify-content:center}
.trust-row .t-ico svg{width:16px;height:16px}
.trust-row a{color:var(--berry-deep)}

/* Filter-Chips */
.chip-row{display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(26px,3.5vw,38px)}
.chip{
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 18px;font-weight:800;font-size:.9rem;color:var(--ink);
  transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.chip:hover{border-color:var(--leaf-soft);color:var(--leaf-deep)}
.chip.is-active{
  background:var(--berry);border-color:var(--berry);color:#fff;
  box-shadow:0 10px 20px -12px rgba(204,45,116,.7)}
.chip.is-active:hover{background:var(--berry-deep);border-color:var(--berry-deep);color:#fff}

/* Toolbar: Trefferzahl + Sortierung */
.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.result-count{font-weight:800;font-size:.92rem;color:var(--ink-soft)}
.sort-select{
  appearance:none;-webkit-appearance:none;
  border:1px solid var(--line);border-radius:999px;background-color:#fff;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6B4A' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:13px;
  padding:10px 40px 10px 18px;
  font:inherit;font-weight:800;font-size:.9rem;color:var(--ink);cursor:pointer;
  transition:border-color .16s ease}
.sort-select:hover{border-color:var(--leaf-soft)}

/* Produktraster — dense verhindert Löcher, wenn die Aktions-Kachel 2 Spalten belegt */
.product-grid{
  display:grid;grid-template-columns:repeat(3,1fr);grid-auto-flow:dense;
  gap:20px;margin-top:clamp(24px,3vw,34px);
  scroll-margin-top:110px}
/* .product/.promo-tile sind display:flex — [hidden] muss das schlagen */
.product[hidden],.promo-tile[hidden]{display:none !important}

/* Merchandising-Kachel */
.promo-tile{
  position:relative;overflow:hidden;grid-column:span 2;
  border-radius:var(--r-leaf);
  background:linear-gradient(150deg,var(--dark) 0%,var(--dark-2) 100%);
  color:#fff;display:flex;align-items:center;
  padding:clamp(24px,3vw,34px);min-height:230px}
.promo-in{position:relative;z-index:2;max-width:36ch}
.promo-tile .kicker{color:var(--leaf-soft)}
.promo-tile h3{font-size:clamp(1.5rem,2.7vw,2.05rem);margin-top:.45em;color:#fff}
.promo-tile h3 .em{color:var(--sun)}
.promo-in p{margin-top:.6em;font-size:.94rem;color:rgba(255,255,255,.72)}
.promo-btn{margin-top:20px;padding:12px 24px;font-size:.94rem}
.promo-flower{
  position:absolute;right:-26px;bottom:-30px;width:190px;height:190px;z-index:1;
  opacity:.14;transform:rotate(-12deg);pointer-events:none}

/* Produktkarte */
.product{
  position:relative;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
/* Blatt-Ecken wechseln sich ab. nth-of-type ist der No-JS-Default;
   .r-std/.r-flip setzt JS nach der sichtbaren Reihenfolge (Filter/Sortierung) */
.product:nth-of-type(odd){border-radius:var(--r-leaf)}
.product:nth-of-type(even){border-radius:var(--r-leaf-flip)}
.product.r-std{border-radius:var(--r-leaf)}
.product.r-flip{border-radius:var(--r-leaf-flip)}
.product:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--leaf-soft)}
.product-media{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--leaf-tint)}
.product-media img{width:100%;height:100%;object-fit:cover;transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.product:hover .product-media img{transform:scale(1.06)}
.badge{
  position:absolute;top:12px;left:12px;z-index:2;
  /* Platz für den Favoriten-Schalter oben rechts freihalten, sonst
     überlappen sich beide auf schmalen Karten */
  max-width:calc(100% - 72px);
  font-size:.68rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  background:var(--berry);color:#fff;padding:6px 13px;border-radius:999px;
  box-shadow:0 6px 16px -6px rgba(36,51,15,.35)}
.badge.gold{background:var(--sun-deep)}
.badge.leaf{background:var(--leaf)}

/* Favoriten-Schalter */
.wish{
  position:absolute;top:12px;right:12px;z-index:2;
  width:36px;height:36px;border-radius:50%;border:none;
  background:rgba(255,255,255,.92);color:var(--ink-soft);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 16px -8px rgba(36,51,15,.5);
  transition:background .18s ease,color .18s ease,transform .18s ease}
.wish svg{width:17px;height:17px}
.wish:hover{transform:scale(1.08);color:var(--berry)}
.wish.is-on{background:var(--berry);color:#fff}

.product-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1}
.p-cat{font-size:.66rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.product-body h3{
  font-size:1.06rem;line-height:1.2;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.product-body .p-sub{
  font-size:.84rem;color:var(--ink-soft);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Bewertung: Blüten-Glyphe statt Sternen, Teilfüllung über --fill */
.p-rating{display:flex;align-items:center;gap:7px;margin-top:2px;font-size:.8rem}
.p-rating b{font-weight:800;color:var(--ink)}
.p-rating .p-count{color:var(--ink-soft);font-weight:700}
.stars{position:relative;display:inline-flex;flex:none;line-height:0}
.stars .s-bg,.stars .s-fg{display:flex;gap:2px}
.stars .s-bg{opacity:.25}
.stars .s-fg{position:absolute;left:0;top:0;width:var(--fill,100%);overflow:hidden}
.stars svg{width:13px;height:13px;flex:none}

/* Verfügbarkeit */
.p-stock{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:700;color:var(--ink-soft)}
.p-stock .dot{width:6px;height:6px;border-radius:50%;flex:none;background:var(--leaf)}
.p-stock.ok{color:var(--leaf-deep)}
.p-stock.low{color:var(--sun-deep)}
.p-stock.low .dot{background:var(--sun-deep)}

/* Preis als Pflanzenstecker (Etikett mit Loch) */
.p-price-row{margin-top:auto;padding-top:14px;display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap}
.price-tag{
  position:relative;flex:none;
  background:var(--leaf-tint);border:1px solid var(--line);
  border-radius:10px 16px 16px 10px;
  padding:8px 14px 8px 24px;
  transform:rotate(-3deg);transform-origin:left bottom;
  transition:transform .2s ease}
.product:hover .price-tag{transform:rotate(0)}
.price-tag::before{
  content:"";position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:7px;height:7px;border-radius:50%;
  background:var(--paper-2);box-shadow:inset 0 0 0 2px var(--leaf-soft)}
.price{white-space:nowrap;font-weight:800;font-size:1.14rem;color:var(--leaf-deep);line-height:1.15}
.price .p-unit{display:block;font-size:.68rem;font-weight:700;color:var(--ink-soft)}
.p-old{font-size:.8rem;font-weight:700;color:var(--ink-soft);padding-bottom:5px}
.p-old s{text-decoration-thickness:1.5px}

.add-btn{
  margin-top:14px;width:100%;min-height:44px;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  background:var(--berry);color:#fff;border:none;
  font-weight:800;font-size:.9rem;padding:11px 18px;border-radius:999px;
  transition:background .18s ease,transform .18s ease;box-shadow:0 10px 20px -10px rgba(204,45,116,.6)}
.add-btn:hover{background:var(--berry-deep);transform:translateY(-2px)}
.add-btn:active{transform:scale(.97)}
.add-btn svg{width:16px;height:16px}
.add-btn.in-cart{background:var(--leaf);box-shadow:0 10px 20px -10px rgba(53,122,26,.6)}
.add-btn.in-cart:hover{background:var(--leaf-deep)}

.shop-note{margin-top:30px;text-align:center;font-size:.92rem;color:var(--ink-soft)}

@media(max-width:920px){.product-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){
  .trust-row{flex-direction:row;flex-wrap:wrap;gap:9px 18px;padding-bottom:0}
  .trust-row li{font-size:.85rem}
  /* Chips als wischbare Reihe mit weicher Kante.
     Negative Margins entsprechen exakt dem Container-Padding → kein Overflow */
  .chip-row{
    flex-wrap:nowrap;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;
    /* vertikales Padding = Luft für den 3px-Fokusring (+3px offset),
       sonst beschneidet der Scroll-Container ihn oben/unten */
    margin-left:-24px;margin-right:-24px;padding:8px 24px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent);
    mask-image:linear-gradient(90deg,#000 calc(100% - 30px),transparent)}
  .chip-row::-webkit-scrollbar{display:none}
  .chip{flex:none;scroll-snap-align:start}
}
@media(max-width:600px){
  .product-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .product-body{padding:12px 13px 14px;gap:4px}
  .product-body h3{font-size:.95rem}
  .p-cat,.product-body .p-sub,.p-count{display:none}
  .stars svg{width:12px;height:12px}
  .p-stock{font-size:.72rem}
  .p-price-row{padding-top:10px;gap:7px}
  .price{font-size:1.02rem}
  .price-tag{padding:6px 11px 6px 20px}
  .price-tag::before{left:7px;width:6px;height:6px}
  .p-old{font-size:.74rem;padding-bottom:3px}
  .add-btn{margin-top:10px;font-size:.84rem;padding:10px 12px}
  .promo-tile{min-height:0;padding:22px}
  .promo-flower{width:130px;height:130px;right:-18px;bottom:-22px}
}

/* ---------- Leistungen (dunkle Editorial-Sektion) ---------- */
.services{background:linear-gradient(170deg,var(--dark) 0%,var(--dark-2) 100%);color:#fff}
.services .section-head h2{color:#fff}
.services .section-head p{color:rgba(255,255,255,.72)}
.service-list{max-width:900px;margin:0 auto}
.service-row{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;
  gap:clamp(18px,4vw,44px);
  padding:clamp(22px,3.5vw,34px) 8px;
  border-top:1px solid var(--line-dark)}
.service-row:last-child{border-bottom:1px solid var(--line-dark)}
.s-num{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(2rem,4.4vw,3.2rem);line-height:1;
  color:var(--leaf-soft);opacity:.85;min-width:2.2ch}
.service-row h3{font-size:clamp(1.25rem,2.4vw,1.6rem);color:#fff}
.service-row p{margin-top:6px;font-size:.98rem;color:rgba(255,255,255,.7);max-width:52ch}
.s-ico{
  flex:none;width:58px;height:58px;border-radius:18px 18px 18px 5px;
  background:rgba(255,255,255,.08);color:var(--leaf-soft);
  border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,color .2s ease,transform .2s ease}
.service-row:hover .s-ico{background:var(--leaf-soft);color:var(--dark);transform:rotate(-6deg)}
.s-ico svg{width:26px;height:26px}
@media(max-width:560px){
  .service-row{grid-template-columns:auto 1fr}
  .s-ico{display:none}
}

/* ---------- Ãœber uns ---------- */
.about{background:var(--paper-2)}
.about .container{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(32px,6vw,80px);align-items:center}
.about-quote{
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;
  font-size:clamp(1.5rem,2.8vw,2rem);line-height:1.28;color:var(--leaf-deep);
  margin:1.2em 0 .4em;position:relative;padding-left:26px}
.about-quote::before{
  content:"";position:absolute;left:0;top:.2em;bottom:.2em;width:4px;
  border-radius:99px;background:linear-gradient(var(--sun),var(--berry))}
.about-quote cite{display:block;font-family:"Nunito",sans-serif;font-style:normal;font-weight:700;font-size:.88rem;color:var(--ink-soft);margin-top:10px}
.about-text > p{color:var(--ink-soft);margin-top:1em;font-size:1.03rem}
.about-text > p strong{color:var(--ink)}
.about-stats{
  display:flex;gap:clamp(20px,4vw,44px);flex-wrap:wrap;
  margin-top:clamp(24px,3.5vw,36px);padding-top:clamp(20px,3vw,28px);
  border-top:1px solid var(--line)}
.stat b{
  display:block;font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(1.9rem,3.6vw,2.6rem);line-height:1;color:var(--leaf-deep)}
.stat b em{font-style:italic;color:var(--berry)}
.stat span{font-size:.85rem;font-weight:700;color:var(--ink-soft)}
.about-figure{position:relative;margin:0}
.about-figure img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--r-leaf);box-shadow:var(--shadow)}
.about-figure::after{
  content:"";position:absolute;inset:20px -20px -20px 20px;z-index:-1;
  border-radius:var(--r-leaf);background:var(--berry-soft)}
.about-figure .fl-badge{
  position:absolute;right:-16px;top:-16px;width:64px;height:64px;
  color:var(--sun);filter:drop-shadow(0 8px 16px rgba(36,51,15,.25));
  animation:spin-slow 26s linear infinite}
@keyframes spin-slow{to{transform:rotate(360deg)}}
@media(max-width:880px){
  .about .container{grid-template-columns:1fr}
  .about-figure{max-width:480px;margin:0 auto}
}

/* ---------- Bezirke (SEO-Hub) ---------- */
.districts{position:relative;overflow:hidden}
.districts .ghost{
  position:absolute;top:-4%;right:-2%;z-index:0;pointer-events:none;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:600;
  font-size:clamp(11rem,26vw,22rem);line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--line);user-select:none}
.districts .container{position:relative;z-index:1}
.district-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.district-link{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 16px;text-decoration:none;
  font-weight:700;font-size:.93rem;color:var(--ink);
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.district-link:hover{transform:translateY(-3px);border-color:var(--leaf-soft);box-shadow:var(--shadow-sm);color:var(--leaf-deep)}
.district-link .plz{
  flex:none;font-size:.76rem;font-weight:800;color:var(--berry-deep);
  background:var(--berry-soft);border-radius:8px;padding:3px 8px;
  transition:background .16s ease,color .16s ease}
.district-link:hover .plz{background:var(--berry);color:#fff}
.district-link.home{border-color:var(--leaf);background:var(--leaf-tint)}
.district-link.home .plz{background:var(--leaf);color:#fff}
.district-note{margin-top:24px;font-size:.92rem;color:var(--ink-soft);max-width:720px}
@media(max-width:1020px){.district-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.district-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- FAQ ---------- */
.faq{background:var(--paper-2)}
.faq-list{max-width:820px;margin:0 auto}
.faq-item{border-top:1px solid var(--line)}
.faq-item:last-child{border-bottom:1px solid var(--line)}
.faq-item summary{
  list-style:none;display:flex;align-items:center;gap:16px;
  padding:clamp(18px,2.6vw,24px) 6px;cursor:pointer;
  font-family:"Fraunces",Georgia,serif;font-weight:600;
  font-size:clamp(1.06rem,2vw,1.25rem);
  transition:color .2s ease}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:var(--leaf-deep)}
.faq-item summary .fl{
  width:16px;height:16px;flex:none;color:var(--sun);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.faq-item[open] summary{color:var(--berry-deep)}
.faq-item[open] summary .fl{transform:rotate(135deg)}
.faq-item p{
  padding:0 6px clamp(18px,2.6vw,24px) 38px;
  color:var(--ink-soft);font-size:.99rem;max-width:64ch}
.faq-item p a{color:var(--berry-deep);font-weight:800}

/* ---------- Kontakt / Besuch ---------- */
.visit{background:var(--paper)}
.visit .container{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(26px,4vw,48px);align-items:stretch}
.visit-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-leaf);
  box-shadow:var(--shadow);padding:clamp(26px,4vw,38px);
  display:flex;flex-direction:column;gap:22px}
.visit-card h2{font-size:clamp(1.7rem,3vw,2.2rem)}
.vc-row{display:flex;gap:14px;align-items:flex-start}
.vc-ico{
  flex:none;width:44px;height:44px;border-radius:14px 14px 14px 4px;
  background:var(--leaf-tint);color:var(--leaf-deep);
  display:flex;align-items:center;justify-content:center}
.vc-ico svg{width:21px;height:21px}
.vc-row .lbl{font-size:.68rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--berry)}
.vc-row .val{font-weight:700;font-size:1.02rem}
.vc-row .val a{color:inherit;text-decoration:none;border-bottom:2px solid var(--berry-soft);transition:border-color .15s ease}
.vc-row .val a:hover{border-color:var(--berry)}
.vc-row .sub{display:block;color:var(--ink-soft);font-weight:600;font-size:.92rem}
.hours-table{width:100%;border-collapse:collapse;font-size:.98rem}
.hours-table td{padding:7px 0;border-bottom:1px dashed var(--line);font-weight:700}
.hours-table tr:last-child td{border-bottom:none}
.hours-table td:last-child{text-align:right;color:var(--leaf-deep);font-weight:800}
.open-badge{
  align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
  background:var(--leaf-tint);color:var(--leaf-deep);
  font-weight:800;font-size:.85rem;border-radius:999px;padding:7px 15px}
.open-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--leaf);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.55);opacity:.55}}
.map-frame{
  border-radius:var(--r-leaf-flip);overflow:hidden;border:1px solid var(--line);
  box-shadow:var(--shadow);min-height:400px;background:var(--leaf-tint)}
.map-frame iframe{width:100%;height:100%;min-height:400px;border:0;display:block}
@media(max-width:880px){.visit .container{grid-template-columns:1fr}}

/* ---------- Newsletter: „Gartenpost"-Saatgut-Tüte ---------- */
.newsletter{
  position:relative;
  background:linear-gradient(120deg,var(--leaf-deep) 0%,var(--leaf) 62%,#6FB335 100%);
  padding:clamp(56px,8vw,96px) 0}
.packet{
  position:relative;max-width:900px;margin:0 auto;
  background:var(--paper-2);border-radius:var(--r);
  padding:clamp(30px,5vw,52px);
  box-shadow:0 40px 80px -40px rgba(20,30,8,.55);
  transform:rotate(-.6deg)}
.packet::before{
  content:"";position:absolute;inset:12px;pointer-events:none;
  border:2px dashed var(--berry-soft);border-radius:calc(var(--r) - 8px)}
.packet-stamp{
  position:absolute;top:22px;right:26px;width:64px;height:74px;
  border:2px dashed var(--leaf-soft);border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  color:var(--sun);transform:rotate(4deg);background:#fff}
.packet-stamp svg{width:34px;height:34px}
.packet .kicker{color:var(--berry-deep)}
.packet h2{font-size:clamp(1.7rem,3.4vw,2.5rem);margin-top:.45em;max-width:14ch}
.packet > p{margin-top:.8em;color:var(--ink-soft);max-width:46ch}
.nl-form{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(20px,3vw,28px)}
.nl-form input{
  flex:1;min-width:220px;
  font:inherit;font-weight:700;color:var(--ink);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:14px 22px;outline:none;transition:border-color .15s ease,box-shadow .15s ease}
.nl-form input:focus{border-color:var(--leaf);box-shadow:0 0 0 3px var(--leaf-tint)}
.nl-hint{font-size:.78rem;color:var(--ink-soft);margin-top:12px}
@media(max-width:560px){.packet{transform:none}.packet-stamp{display:none}}

/* ---------- Footer ---------- */
.site-footer{background:var(--dark);color:rgba(255,255,255,.85)}
.footer-top{
  display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:36px;
  padding-top:clamp(44px,6vw,64px);padding-bottom:clamp(36px,5vw,52px)}
.footer-brand img{height:64px;width:auto;background:#FCFEF8;border-radius:16px;padding:8px 14px}
.footer-brand p{margin-top:16px;font-size:.93rem;color:rgba(255,255,255,.65);max-width:34ch}
.site-footer h4{
  font-family:"Nunito",sans-serif;font-weight:800;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--leaf-soft);margin-bottom:16px}
.site-footer ul li{margin-bottom:9px}
.site-footer ul a{
  color:rgba(255,255,255,.85);text-decoration:none;font-size:.95rem;
  background:linear-gradient(currentColor,currentColor) no-repeat 0 100%/0 1px;
  transition:background-size .25s ease}
.site-footer ul a:hover{color:#fff;background-size:100% 1px}
.footer-contact li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;margin-bottom:12px}
.footer-contact svg{width:17px;height:17px;flex:none;margin-top:4px;color:var(--leaf-soft)}
.footer-contact a{color:rgba(255,255,255,.85);text-decoration:none}
.footer-contact a:hover{text-decoration:underline}
.footer-bottom{
  border-top:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding-top:20px;padding-bottom:22px;font-size:.85rem;color:rgba(255,255,255,.55)}
.footer-bottom .fl{width:12px;height:12px;color:var(--sun);display:inline-block;vertical-align:-1px;margin:0 6px}
.footer-bottom a{color:rgba(255,255,255,.75);text-decoration:none}
.footer-bottom a:hover{text-decoration:underline}
@media(max-width:920px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.footer-top{grid-template-columns:1fr}}

/* ---------- Warenkorb-Drawer (Demo) ---------- */
.cart-overlay{
  position:fixed;inset:0;z-index:110;background:rgba(36,51,15,.5);
  opacity:0;pointer-events:none;transition:opacity .25s ease}
.cart-overlay.open{opacity:1;pointer-events:auto}
.cart-drawer{
  position:fixed;top:0;right:0;bottom:0;z-index:120;
  width:min(420px,100vw);background:var(--paper-2);
  box-shadow:-24px 0 60px -30px rgba(36,51,15,.5);
  /* visibility zusätzlich zum transform: nimmt den geschlossenen Drawer aus
     Tab-Reihenfolge und Accessibility-Tree (sonst 5 unsichtbare Tab-Stopps) */
  visibility:hidden;
  transform:translateX(105%);
  transition:transform .3s cubic-bezier(.2,.7,.3,1),visibility .3s;
  display:flex;flex-direction:column}
.cart-drawer.open{transform:translateX(0);visibility:visible}
.cart-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border-bottom:1px solid var(--line)}
.cart-head h3{font-size:1.3rem}
.cart-close{background:none;border:none;padding:8px;border-radius:12px;color:var(--ink)}
.cart-close:hover{background:var(--leaf-tint)}
.cart-close svg{width:22px;height:22px}
/* Fortschritt bis Gratis-Lieferung (Demo-Schwelle, siehe js/main.js) */
.ship-bar{padding:14px 24px;border-bottom:1px solid var(--line);background:var(--leaf-tint)}
.ship-txt{font-size:.82rem;font-weight:800;color:var(--ink);margin-bottom:8px}
.ship-bar.done .ship-txt{color:var(--leaf-deep)}
.ship-track{height:7px;border-radius:999px;background:#fff;overflow:hidden;box-shadow:inset 0 0 0 1px var(--line)}
.ship-fill{
  display:block;height:100%;width:0;border-radius:999px;
  background:linear-gradient(90deg,var(--leaf-soft),var(--leaf));
  transition:width .35s cubic-bezier(.2,.7,.3,1)}

.cart-items{flex:1;overflow-y:auto;padding:18px 24px;display:flex;flex-direction:column;gap:14px}
.cart-empty{margin:auto;text-align:center;color:var(--ink-soft);font-weight:700}
.cart-empty svg{width:52px;height:52px;margin:0 auto 12px;color:var(--leaf-soft)}
.cart-item{
  display:flex;gap:14px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);padding:12px 14px}
.cart-item .ci-thumb{
  flex:none;width:52px;height:52px;border-radius:12px 12px 12px 4px;overflow:hidden;
  background:var(--leaf-tint)}
.cart-item .ci-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item .ci-info{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.cart-item .ci-info h4{font-family:"Nunito",sans-serif;font-size:.95rem;font-weight:800}
.cart-item .ci-info .ci-price{font-size:.85rem;color:var(--leaf-deep);font-weight:800}
.ci-remove{
  display:inline-flex;align-items:center;gap:5px;margin-top:3px;
  background:none;border:none;padding:0;
  font-size:.76rem;font-weight:700;color:var(--ink-soft);text-decoration:underline}
.ci-remove:hover{color:var(--berry-deep)}
.ci-remove svg{width:12px;height:12px}
.qty{display:flex;align-items:center;gap:8px}
.qty button{
  width:26px;height:26px;border-radius:8px;border:1px solid var(--line);
  background:#fff;font-weight:800;font-size:.95rem;color:var(--ink);line-height:1}
.qty button:hover{background:var(--leaf-tint);border-color:var(--leaf-soft)}
.qty span{min-width:18px;text-align:center;font-weight:800;font-size:.92rem}
.cart-foot{
  border-top:1px solid var(--line);
  padding:20px 24px calc(20px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;gap:14px}
.cart-total{display:flex;justify-content:space-between;font-weight:800;font-size:1.1rem}
.cart-total span:last-child{color:var(--leaf-deep)}
.cart-foot .btn{width:100%}
.cart-foot .demo-hint{font-size:.78rem;color:var(--ink-soft);text-align:center}

/* ---------- Mini-Warenkorb (mobil) ----------
   Liegt bewusst direkt im <body>: ein Vorfahre mit filter/backdrop-filter/transform
   würde zum Containing Block und position:fixed brechen (iOS) */
.mini-cart{
  position:fixed;left:0;right:0;bottom:0;z-index:105;
  display:none;align-items:center;gap:14px;
  padding:12px 18px calc(12px + env(safe-area-inset-bottom,0px));
  background:var(--paper-2);border-top:1px solid var(--line);
  border-radius:26px 78px 0 0;
  box-shadow:0 -18px 40px -24px rgba(36,51,15,.5)}
.mc-ico{
  position:relative;flex:none;width:42px;height:42px;border-radius:12px 12px 12px 4px;
  background:var(--leaf-tint);color:var(--leaf-deep);
  display:flex;align-items:center;justify-content:center}
.mc-ico svg{width:20px;height:20px}
.mc-count{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;
  background:var(--berry);color:#fff;border-radius:999px;
  font-size:.7rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid var(--paper-2)}
.mc-txt{display:flex;flex-direction:column;line-height:1.2;flex:1;min-width:0}
.mc-txt small{font-size:.72rem;font-weight:700;color:var(--ink-soft)}
.mc-txt strong{font-size:1.06rem;font-weight:800;color:var(--leaf-deep)}
.mini-cart .btn{flex:none;padding:12px 22px;font-size:.92rem}
@media(max-width:880px){
  .mini-cart{
    display:flex;visibility:hidden;transform:translateY(120%);
    transition:transform .32s cubic-bezier(.2,.7,.3,1),visibility .32s}
  body.mini-on .mini-cart{visibility:visible;transform:translateY(0)}
  body.mini-on{padding-bottom:78px}
  body.mini-on .toast{bottom:calc(102px + env(safe-area-inset-bottom,0px))}
  /* muss nach .mini-on stehen: bei offenem Drawer den Balken wegschieben */
  body.cart-open .mini-cart{visibility:hidden;transform:translateY(120%)}
}

/* ---------- Toast ---------- */
.toast{
  position:fixed;left:50%;bottom:calc(28px + env(safe-area-inset-bottom,0px));z-index:130;
  transform:translate(-50%,140%);
  background:var(--dark);color:#fff;font-weight:700;font-size:.92rem;
  padding:13px 22px;border-radius:999px;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
  transition:transform .3s cubic-bezier(.2,.7,.3,1);max-width:90vw;text-align:center}
.toast.show{transform:translate(-50%,0)}

/* ---------- Reveal-Animationen ----------
   Hinweis: sichtbarer Zustand deklariert bewusst KEIN transform,
   damit hover-Lifts und Eigen-Transforms (.packet) nicht überschrieben werden */
.reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal:not(.visible){opacity:0;transform:translateY(24px)}

/* ---------- Touch-Geräte ---------- */
@media(hover:none){
  /* hover-abhängige Affordanzen ohne Maus immer zeigen */
  .tile-arrow{opacity:1;transform:none}
  .price-tag{transform:rotate(-3deg)}
}
@media(pointer:coarse){
  .qty button{width:36px;height:36px;border-radius:10px}
  .main-nav a,.district-link,.faq-item summary{min-height:44px}
  .chip,.sort-select{min-height:44px}
  .wish{width:44px;height:44px}
  .wish svg{width:19px;height:19px}
  .ci-remove{min-height:32px}
}

/* ---------- Kleine Screens (Feinschliff) ---------- */
@media(max-width:640px){
  .districts .ghost{display:none}
  .head-row{align-items:stretch;flex-direction:column}
  .head-row .btn{width:100%}
  .head-meta{padding-bottom:0}
}
@media(max-width:440px){
  .container{padding-left:18px;padding-right:18px}
  /* Chip-Reihe: Werte müssen dem Container-Padding entsprechen (sonst Overflow) */
  .chip-row{margin-left:-18px;margin-right:-18px;padding-left:18px;padding-right:18px}
  .hero .container{padding-top:30px}
  .hero-facts li{font-size:.9rem;text-align:left}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:150px;gap:12px}
  .tile-lg,.tile-w{grid-column:span 2}
  .tile-lg{grid-row:span 2}
  .tile-txt{padding:14px 16px}
  .tile-txt h3{font-size:1.02rem}
  .tile-lg .tile-txt h3{font-size:1.3rem}
  .tile-lg .tile-txt p,.tile-w .tile-txt p{font-size:.82rem}
  .district-grid{grid-template-columns:repeat(2,1fr);gap:10px}
  .district-link{font-size:.85rem;padding:11px 12px}
  .about-figure::after{inset:12px -10px -10px 12px}
  .visit-card{border-radius:var(--r)}
  .packet{padding:26px 20px}
  .packet::before{inset:8px}
}

@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .reveal{opacity:1 !important;transform:none !important}
  .swash path{stroke-dashoffset:0 !important}
  .ambient{display:none}
}