/* ==========================================================================
   Avocado child theme – gescoptes Front-End-CSS
   Tokens leben auf den Wrappern (.av-scope/.av-header/.av-footer),
   Komponenten sind unter .av-scope gekapselt.
   ========================================================================== */

.av-scope, .av-header, .av-footer{
  --cream:#F4F1E6; --surface:#FCFBF4; --ink:#232619; --muted:#5F6450;
  --hairline:#E2DEC9;
  --leaf-900:#1E2A15; --leaf-800:#26361B; --leaf-700:#34521E; --leaf-600:#4A6E2C;
  --leaf-500:#6E9048; --leaf-300:#B7C77E; --leaf-100:#E4E8BF;
  --pit:#7A4E28; --amber:#D89A34;
  --brand:var(--leaf-700); --brand-ink:#F6F4E8; --on-dark:#EDEAD6;
  --font-display:var(--wp--preset--font-family--display, ui-sans-serif, system-ui, sans-serif);
  --font-body:var(--wp--preset--font-family--body, ui-sans-serif, system-ui, sans-serif);
  --wrap:1120px; --r:14px; --r-lg:22px;
  --shadow:0 1px 2px rgba(30,42,21,.05), 0 14px 34px -18px rgba(30,42,21,.28);
}
@media (prefers-color-scheme:dark){
  .av-scope, .av-header, .av-footer{
    --cream:#141A0F; --surface:#1E2717; --ink:#ECE9D8; --muted:#A8AF92;
    --hairline:#33402A; --leaf-900:#0F160A; --leaf-800:#18220F;
    --brand:#8FB85C; --brand-ink:#14200A; --on-dark:#ECE9D8;
    --leaf-600:#8FB85C; --leaf-500:#9CC26A; --leaf-300:#5F7E38; --leaf-100:#2A371C;
    --pit:#BE9160;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 16px 40px -20px rgba(0,0,0,.7);
  }
}

/* base helpers -------------------------------------------------------------- */
.av-scope, .av-header, .av-footer{ font-family:var(--font-body); color:var(--ink); }
.av-scope *, .av-header *, .av-footer *{ box-sizing:border-box; }
.av-scope h1, .av-scope h2, .av-scope h3,
.av-header .word, .av-footer h4{ font-family:var(--font-display); }
.av-scope h1, .av-scope h2, .av-scope h3{
  font-weight:800; line-height:1.05; letter-spacing:-.02em; text-wrap:balance; margin:0;
}
.av-scope p{ margin:0; }
.av-scope .wrap, .av-header .wrap, .av-footer .wrap{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px);
}
.av-scope .eyebrow{
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--leaf-600);
}

/* buttons ------------------------------------------------------------------- */
.av-scope .btn, .av-header .btn{
  display:inline-flex; align-items:center; gap:.55em; font-family:var(--font-body);
  font-weight:700; font-size:.98rem; padding:.82em 1.35em; border-radius:999px;
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease, color .18s ease;
}
.av-scope .btn-primary, .av-header .btn-primary{ background:var(--brand); color:var(--brand-ink); }
.av-scope .btn-primary:hover, .av-header .btn-primary:hover{
  transform:translateY(-2px); box-shadow:0 10px 22px -10px rgba(52,82,30,.6);
}
.av-scope .btn-ghost{ background:transparent; color:var(--ink); border-color:var(--hairline); }
.av-scope .btn-ghost:hover{ border-color:var(--brand); color:var(--leaf-600); transform:translateY(-2px); }

/* header -------------------------------------------------------------------- */
.av-header{
  position:sticky; top:0; z-index:30;
  background:color-mix(in srgb, var(--cream) 88%, transparent);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--hairline);
}
.av-header .wrap{ display:flex; align-items:center; gap:1.5rem; padding-block:.9rem; }
.av-header .brand{ display:flex; align-items:center; gap:.6rem; text-decoration:none; }
.av-header .brand .mark{ width:32px; height:42px; flex:none; }
.av-scope .word{ display:flex; flex-direction:column; gap:.12rem; line-height:1; }
.av-scope .wm-name{ font-family:var(--font-display); font-weight:800; font-size:1.18rem; letter-spacing:-.02em; color:var(--ink); }
.av-scope .wm-sub{ font-family:var(--font-body); font-weight:600; font-size:.64rem; letter-spacing:.15em; text-transform:uppercase; color:var(--leaf-600); }
.av-header nav.main{ display:flex; gap:1.4rem; margin-left:auto; font-size:.95rem; font-weight:500; }
.av-header nav.main a{ text-decoration:none; color:var(--muted); transition:color .15s; }
.av-header nav.main a:hover{ color:var(--leaf-600); }
.av-header .cart{ margin-left:.4rem; }
@media(max-width:820px){
  .av-header nav.main{ display:none; }
  .av-header .av-lang{ margin-left:auto; }
}

/* Sprachumschalter (TranslatePress) im Header */
.av-header .av-lang{ display:inline-flex; align-items:center; }
.av-header .av-lang:empty{ display:none; }
.av-header .av-lang .trp-language-switcher,
.av-header .av-lang .trp-language-switcher-container{ font-family:var(--font-body); font-size:.9rem; }
.av-header .av-lang a{ text-decoration:none; color:var(--muted); font-weight:600; }
.av-header .av-lang a:hover{ color:var(--leaf-600); }

/* hero ---------------------------------------------------------------------- */
.av-scope .hero{ padding-block:clamp(2.6rem,6vw,5rem); }
.av-scope .hero .grid{
  display:grid; grid-template-columns:1.08fr .92fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media(max-width:860px){ .av-scope .hero .grid{ grid-template-columns:1fr; gap:2.2rem; } }
.av-scope .hero h1{ font-size:clamp(2.5rem,6.4vw,4.5rem); margin:.5rem 0 1.1rem; }
.av-scope .hero h1 em{ font-style:normal; color:var(--brand); white-space:nowrap; }
.av-scope .hero p.lead{ font-size:1.15rem; color:var(--muted); max-width:44ch; }
.av-scope .hero .cta{ display:flex; gap:.8rem; flex-wrap:wrap; margin-top:1.7rem; }
.av-scope .hero .trust{ margin-top:1.4rem; font-size:.9rem; color:var(--muted); display:flex; align-items:center; gap:.5rem; }
.av-scope .hero .trust .leaf{ color:var(--leaf-600); font-size:1.05em; }

.av-scope .hero-art{ position:relative; display:grid; place-items:center; aspect-ratio:1/1; }
.av-scope .hero-art .disc{
  position:absolute; inset:6%; border-radius:50%;
  background:radial-gradient(circle at 50% 42%, var(--leaf-100), color-mix(in srgb, var(--leaf-100) 40%, var(--cream)));
  box-shadow:inset 0 0 0 1px var(--hairline);
}
.av-scope .hero-art .avo{ position:relative; width:66%; filter:drop-shadow(0 30px 40px rgba(30,42,21,.28)); }
.av-scope .hero-art .tag{
  position:absolute; background:var(--surface); border:1px solid var(--hairline);
  border-radius:999px; padding:.5em .95em; font-size:.82rem; font-weight:600;
  box-shadow:var(--shadow); display:flex; align-items:center; gap:.5em;
}
.av-scope .hero-art .tag .dot{ width:9px; height:9px; border-radius:50%; }
.av-scope .hero-art .tag.t1{ top:12%; right:2%; }
.av-scope .hero-art .tag.t2{ bottom:14%; left:0; }

/* usp ----------------------------------------------------------------------- */
.av-scope .usp{ border-block:1px solid var(--hairline); background:var(--surface); }
.av-scope .usp .wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem; padding-block:1.5rem; }
@media(max-width:720px){ .av-scope .usp .wrap{ grid-template-columns:1fr; } }
.av-scope .usp .item{ display:flex; gap:.85rem; align-items:flex-start; }
.av-scope .usp .item svg{ flex:none; width:26px; height:26px; color:var(--leaf-600); margin-top:2px; }
.av-scope .usp .item b{ display:block; font-family:var(--font-display); font-weight:700; font-size:1rem; }
.av-scope .usp .item span{ font-size:.9rem; color:var(--muted); }

/* sections ------------------------------------------------------------------ */
.av-scope .band{ padding-block:clamp(3rem,7vw,5.5rem); }
.av-scope .sec-head{ max-width:640px; margin-bottom:2.4rem; }
.av-scope .sec-head h2{ font-size:clamp(1.8rem,4vw,2.7rem); margin:.6rem 0 .7rem; }
.av-scope .sec-head p{ color:var(--muted); }

/* ripeness ------------------------------------------------------------------ */
.av-scope .ripe-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media(max-width:760px){ .av-scope .ripe-grid{ grid-template-columns:1fr; } }
.av-scope .ripe{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:1.5rem 1.5rem 1.6rem; position:relative; overflow:hidden;
  transition:transform .2s ease, border-color .2s ease;
}
.av-scope .ripe:hover{ transform:translateY(-4px); border-color:var(--brand); }
.av-scope .ripe .scale{ display:flex; gap:5px; margin-bottom:1.1rem; }
.av-scope .ripe .scale i{ height:6px; flex:1; border-radius:3px; background:var(--hairline); }
.av-scope .ripe .num{
  font-family:var(--font-display); font-weight:700; font-size:.8rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted);
}
.av-scope .ripe h3{ font-size:1.3rem; margin:.35rem 0 .5rem; }
.av-scope .ripe p{ font-size:.94rem; color:var(--muted); }
.av-scope .ripe .when{ margin-top:1.1rem; font-size:.86rem; font-weight:600; display:inline-flex; align-items:center; gap:.5em; }
.av-scope .ripe .when .dot{ width:10px; height:10px; border-radius:50%; }
/* Reife-Reise: fest (braun) -> reift (amber) -> genussreif (gruen) */
.av-scope .ripe.r1 .scale i:nth-child(-n+1){ background:var(--pit); }
.av-scope .ripe.r2 .scale i:nth-child(-n+3){ background:var(--amber); }
.av-scope .ripe.r3 .scale i{ background:var(--leaf-500); }

/* products ------------------------------------------------------------------ */
.av-scope .prod-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media(max-width:900px){ .av-scope .prod-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:520px){ .av-scope .prod-grid{ grid-template-columns:1fr; } }
.av-scope .card{
  background:var(--surface); border:1px solid var(--hairline); border-radius:var(--r-lg);
  padding:1rem; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease;
}
.av-scope .card:hover{ transform:translateY(-5px); box-shadow:var(--shadow); }
.av-scope .card .thumb{
  position:relative; border-radius:var(--r); aspect-ratio:4/3; display:grid; place-items:center;
  background:radial-gradient(circle at 50% 45%, var(--leaf-100), color-mix(in srgb, var(--leaf-100) 55%, var(--surface)));
  margin-bottom:.9rem; overflow:hidden;
}
.av-scope .card .thumb .avo{ width:52%; filter:drop-shadow(0 12px 16px rgba(30,42,21,.22)); }
.av-scope .card .pill{
  position:absolute; top:.6rem; left:.6rem; font-size:.72rem; font-weight:700;
  background:var(--surface); border:1px solid var(--hairline); border-radius:999px;
  padding:.3em .7em; display:inline-flex; align-items:center; gap:.4em;
}
.av-scope .card .pill .dot{ width:8px; height:8px; border-radius:50%; }
.av-scope .card .name{ font-family:var(--font-display); font-weight:700; font-size:1.12rem; margin:.1rem 0; }
.av-scope .card .sub{ font-size:.86rem; color:var(--muted); margin-bottom:.9rem; }
.av-scope .card .buy{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:auto; }
.av-scope .card .price{ font-family:var(--font-display); font-weight:700; font-size:1.25rem; font-variant-numeric:tabular-nums; }
.av-scope .card .price small{ font-weight:500; font-size:.72rem; color:var(--muted); display:block; letter-spacing:.02em; }
.av-scope .icon-btn{
  flex:none; width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:var(--brand); color:var(--brand-ink); display:grid; place-items:center;
  transition:transform .16s ease;
}
.av-scope .icon-btn:hover{ transform:scale(1.08); }

/* story --------------------------------------------------------------------- */
.av-scope .story{ background:var(--leaf-900); color:var(--on-dark); }
.av-scope .story .grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
@media(max-width:820px){ .av-scope .story .grid{ grid-template-columns:1fr; } }
.av-scope .story h2{ color:var(--on-dark); font-size:clamp(1.8rem,4vw,2.7rem); }
.av-scope .story .eyebrow{ color:var(--leaf-500); }
.av-scope .story p{ color:color-mix(in srgb, var(--on-dark) 78%, transparent); margin-top:1rem; max-width:48ch; }
.av-scope .stats{ display:flex; gap:2.2rem; margin-top:2rem; flex-wrap:wrap; }
.av-scope .stats .n{ font-family:var(--font-display); font-weight:800; font-size:2.1rem; color:#fff; line-height:1; }
.av-scope .stats .l{ font-size:.82rem; color:color-mix(in srgb, var(--on-dark) 70%, transparent); margin-top:.3rem; }
.av-scope .story-art{
  display:grid; place-items:center; aspect-ratio:5/4;
  background:radial-gradient(circle at 50% 45%, rgba(143,184,92,.22), transparent 62%); border-radius:var(--r-lg);
}
.av-scope .story-art .avo{ width:50%; }

/* footer -------------------------------------------------------------------- */
.av-footer{ background:var(--surface); border-top:1px solid var(--hairline); padding-block:3rem 2rem; }
.av-footer .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:2rem; }
@media(max-width:820px){ .av-footer .foot-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:480px){ .av-footer .foot-grid{ grid-template-columns:1fr; } }
.av-footer .brand{ display:inline-flex; align-items:center; gap:.6rem; text-decoration:none; margin-bottom:1rem; }
.av-footer .brand .mark{ width:30px; height:40px; }
.av-footer h4{ font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0 0 1rem; font-weight:700; }
.av-footer ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.55rem; }
.av-footer a{ color:var(--ink); text-decoration:none; font-size:.94rem; opacity:.85; }
.av-footer a:hover{ color:var(--leaf-600); opacity:1; }
.av-footer .intro{ color:var(--muted); font-size:.92rem; max-width:32ch; }
.av-footer .news{ display:flex; gap:.5rem; margin-top:1rem; max-width:340px; }
.av-footer .news input{
  flex:1; background:var(--cream); border:1px solid var(--hairline); border-radius:999px;
  padding:.7em 1em; color:var(--ink); font:inherit; font-size:.92rem;
}
.av-footer .news input:focus{ outline:2px solid var(--brand); outline-offset:1px; }
.av-footer .foot-legal{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--hairline);
  font-size:.82rem; color:var(--muted);
}
.av-footer .foot-legal .links{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.av-footer .foot-legal a{ font-size:.82rem; }

/* focus + motion ------------------------------------------------------------ */
.av-scope a:focus-visible, .av-header a:focus-visible, .av-footer a:focus-visible,
.av-scope button:focus-visible{ outline:2px solid var(--brand); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion:no-preference){
  .av-scope .rise{ opacity:0; transform:translateY(16px); animation:av-rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .av-scope .rise.d1{ animation-delay:.05s; }
  .av-scope .rise.d2{ animation-delay:.14s; }
  .av-scope .rise.d3{ animation-delay:.23s; }
  .av-scope .rise.d4{ animation-delay:.32s; }
  @keyframes av-rise{ to{ opacity:1; transform:none; } }
}