/* ROOT / BASIS */

:root{
  --brand:#a0c563;
  --brand-dark:#689353;
  --ink:#4a534e;
  --bg:#f8fbf7;
  --bg2:#f1f5f9;
  --text:#ffffff;
  --card:#ffffff;
  --accent:#f59e0b;

  --ink-strong:#111827;
  --ink-strong2: #111827;
  --muted:#6b7280;
  --muted-2:#4b5563;
  --muted-3:#4b5563;
  --ring:#e5e7eb;
  --hover:#f1f5f9;
  --surface:#f8fafc;
  --shadow:0 10px 24px rgba(0,0,0,.06);

  --radius-sm:10px;
  --radius-md:14px;
  --radius-lg:16px;
  --radius-pill:999px;

  --container:1200px;
  --hero-h:clamp(420px, 68vh, 760px);
  --nav-clear:64px;
}

/* Dark Mode */
@media (prefers-color-scheme: dark){
  :root{
    --brand:#9fc96a;
    --brand-dark:#7fb167;
    --ink:#d7e0da;
    --bg:#0f1412;
    --bg2:#151c19;
    --text:#f8fbf7;
    --card:#161d1a;
    --accent:#f4b63f;

    --ink-strong:#f3f7f4;
    --ink-strong2: #111827;
    --muted:#a7b0aa;
    --muted-2:#c3cbc6;
    --muted-3:#4b5563;
    --ring:#2a3530;
    --hover:#1c2521;
    --surface:#18211d;
    --shadow:0 12px 28px rgba(0,0,0,.35);
  }

  .hero-dim{
    background:
      linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.55)),
      radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,.35), transparent 60%);
  }

  .tile span{
    background:rgba(22,29,26,.88);
    color:var(--ink-strong);
  }

  .trackingCard .logo{
    mix-blend-mode:normal;
  }

  .modal-backdrop,
  .notice-backdrop{
    background:rgba(0,0,0,.62);
  }
}

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

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:var(--bg);
}

html,
body{
  min-height:100%;
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

.page-main{
  flex:1;
  display:block;
}

#footer{
  margin-top:auto;
}

a{
  color:var(--brand-dark);
  text-decoration:none;
}

a:hover{
  text-decoration:none;
}

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

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

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(1px, 1px, 1px, 1px);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:-1px;
}

#header + :not(.hero){
  margin-top:var(--nav-clear);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,
  *::before,
  *::after{
    animation:none !important;
    transition:none !important;
  }
}

/* Gemeinsame Kartenflächen */
.value-card,
.contact-form,
.c-card,
.legal-card,
.trackingCard,
.products-hero,
.products-alt .row,
.about-hero,
.about-row,
.service-hero,
.svc-card,
.service-steps,
.service-docs,
.service-faq,
.service-terms .term,
.cuts-filter,
.modal-dialog,
.notice-dialog{
  background:var(--card);
  border:1px solid var(--ring);
  box-shadow:var(--shadow);
}

/* Gemeinsame Buttons */
.btn,
.trackingBtn,
.products-cta .cta-pill,
.products-cta .cta-ghost,
.notice-dialog .btn.primary{
  border:none;
  cursor:pointer;
  font-weight:800;
}

.btn{
  border-radius:12px;
  padding:12px 16px;
}

.btn.primary{
  background:var(--ink-strong);
  color:var(--bg);
}

.btn.ghost{
  background:transparent;
  color:var(--bg);
  border:1.5px solid rgba(255,255,255,.75);
}

.btn.offer{
  background:var(--brand-dark);
  color:var(--bg);
  border:1.5px solid rgba(255,255,255,.75);
}

.btn:hover,
.trackingBtn:hover,
.products-cta .cta-pill:hover,
.notice-dialog .btn.primary:hover{
  filter:brightness(.95);
}

.btn:focus-visible,
.trackingBtn:focus-visible,
.cut-btn:focus-visible,
.menu a:focus-visible,
.pill-cta:focus-visible,
.navbox > .active:focus-visible{
  outline:2px solid var(--ink);
  outline-offset:2px;
}

/* HEADER */

header{
  background:var(--card);
  border-bottom:1px solid var(--ring);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-around;
  gap:24px;
}

.logo img{
  height:auto;
}

.header-right{
  display:flex;
  align-items:center;
  gap:14px;
}

.contactbar{
  display:grid;
  grid-auto-flow:column;
  align-items:center;
  gap:18px;
}

.badge-diamond{
  width:40px;
  height:40px;
  display:inline-grid;
  place-items:center;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:10px;
  box-shadow:0 4px 10px rgba(0,0,0,.06);
  transform:rotate(45deg);
}

.badge-inner{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  transform:rotate(-45deg);
}

.ci-img{
  width:22px;
  height:22px;
}

.contact-item{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  column-gap:10px;
}

.contact-item .kicker{
  font-weight:800;
  font-size:14px;
  line-height:1.1;
  color:var(--ink-strong);
}

.contact-item .value{
  font-size:13px;
  line-height:1.2;
  color:var(--muted);
}

.contact-item .value:hover{
  text-decoration:underline;
}

.divider{
  width:1px;
  height:38px;
  margin:0 6px;
  background:var(--ring);
}

.social{
  display:flex;
  gap:10px;
}

.social a{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--ring);
  border-radius:50%;
  font-size:12px;
  font-weight:700;
  color:var(--muted-2);
}

.social a:hover{
  background:var(--surface);
}

.nav-toggle{
  display:none;
  width:42px;
  height:42px;
  border:1px solid var(--ring);
  border-radius:10px;
  background:var(--card);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

.nav-toggle-bar{
  position:relative;
  display:block;
  width:20px;
  height:2px;
  margin:0 auto;
  background:var(--ink-strong);
}

.nav-toggle-bar::before,
.nav-toggle-bar::after{
  content:"";
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  background:var(--ink-strong);
}

.nav-toggle-bar::before{ top:-6px; }
.nav-toggle-bar::after{ top:6px; }

/* Header MQ */
@media (max-width: 1100px){
  .header-inner{
    justify-content:space-between;
    gap:16px;
  }

  .contactbar{
    grid-auto-flow:row;
    justify-items:flex-start;
    gap:10px;
  }

  .divider{
    display:none;
  }
}

@media (max-width: 820px){
  :root{
    --nav-clear:84px;
  }

  .header-inner{
    padding:10px 0;
  }

  .nav-toggle{
    display:inline-grid;
    place-items:center;
  }
}

@media (max-width: 430px){
  .container{
    padding:0 16px;
  }

  .contact-item .kicker{
    font-size:13px;
  }

  .contact-item .value{
    font-size:12px;
  }
}

/* NAVIGATION */

.navstrip{
  position:relative;
  z-index:5000;
  max-height:0;
}

.navstrip .container{
  position:relative;
}

.navstrip[hidden]{
  display:none !important;
}

.navbox{
  --pill-pad-x:10px;
  --pill-pad-y:8px;

  position:absolute;
  top:0;
  left:50%;
  transform:translate(-50%, -50%);
  z-index:6000;

  display:flex;
  align-items:center;
  gap:12px;

  width:fit-content;
  max-width:92vw;
  padding:var(--pill-pad-y) var(--pill-pad-x);
  overflow:visible;
  white-space:nowrap;

  background:var(--card);
  border:1px solid var(--ring);
  border-radius:999px;
  box-shadow:var(--shadow);
}

.menu{
  display:flex;
  gap:12px;
  flex:0 1 auto;
  min-width:0;
  margin:0;
  padding:0 6px;
  list-style:none;
}

.menu li{
  position:relative;
}

.menu::-webkit-scrollbar{
  display:none;
}

.menu a{
  display:inline-block;
  padding:10px 14px;
  border-radius:999px;
  white-space:nowrap;
  color:var(--ink-strong);
  font-weight:600;
}

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

.navbox > a.active{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  margin-block:calc(-1 * var(--pill-pad-y));
  margin-inline-start:calc(-1 * var(--pill-pad-x));
  padding-inline:16px;
  border-radius:999px;
  background:var(--ink-strong);
  color:var(--bg);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.navbox > a.active:hover{
  filter:brightness(.85);
}

.pill-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:stretch;
  margin-block:calc(-1 * var(--pill-pad-y));
  margin-inline-end:calc(-1 * var(--pill-pad-x));
  padding-inline:16px;
  border-radius:999px;
  background:var(--brand-dark);
  color:var(--bg);
  font-weight:800;
  line-height:1;
  white-space:nowrap;
}

.pill-cta:hover{
  color:var(--bg);
  filter:brightness(.95);
}

.submenu{
  position:absolute;
  top:100%;
  left:0;
  z-index:7000;
  display:none;
  min-width:220px;
  margin-top:8px;
  padding:8px;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:12px;
  box-shadow:0 16px 40px rgba(15,23,42,.12);
}

.submenu li{
  list-style:none;
}

.submenu a[aria-current="page"]{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  white-space:nowrap;
  color:var(--ink-strong);
  font-weight:600;
}

.submenu a:hover{
  background:var(--hover);
}

.has-sub:hover > .submenu,
.has-sub:focus-within > .submenu{
  display:block;
}

.has-sub > .submenu::before{
  content:"";
  position:absolute;
  top:-8px;
  left:24px;
  width:14px;
  height:14px;
  background:var(--card);
  border-top:1px solid var(--ring);
  border-left:1px solid var(--ring);
  transform:rotate(45deg);
}

.has-sub::after{
  content:"";
  position:absolute;
  top:100%;
  left:0;
  right:0;
  height:10px;
}

.disabled-link{
  pointer-events:none;
  color:#9aa3a5;
}

.disabled-link .soon{
  display:inline-block;
  margin-left:8px;
  padding:2px 8px;
  border:1px solid color-mix(in srgb, var(--brand) 50%, white);
  border-radius:999px;
  background:color-mix(in srgb, var(--brand) 20%, transparent);
  color:var(--brand-dark);
  font-size:12px;
  font-weight:800;
  vertical-align:middle;
}

/* Navigation MQ */
@media (max-width: 820px){
  .navstrip{
    position:relative;
    display:none;
    max-height:none;
    z-index:auto;
  }

  .navstrip .container{
    position:static;
  }

  .navstrip.is-open{
    display:block;
  }

  .navbox{
    position:static;
    left:auto;
    top:auto;
    transform:none;
    display:grid;
    gap:10px;
    width:100%;
    max-width:none;
    padding:10px;
    border-radius:16px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
  }

  .menu{
    display:grid;
    gap:8px;
    padding:0;
  }

  .menu a{
    display:block;
    padding:12px 14px;
    border-radius:10px;
  }

  .pill-cta{
    margin:0;
    align-self:auto;
    border-radius:12px;
    padding:12px 16px;
  }

  .submenu{
    position:static;
    display:none;
    min-width:unset;
    margin:6px 0 0;
    padding:0;
    border:0;
    box-shadow:none;
  }

  .has-sub.open > .submenu{
    display:block;
  }

  .has-sub > .submenu::before{
    display:none;
  }
}

@media (max-width: 430px){
  .navbox{
    border-radius:14px;
  }
}

/* HERO */

.hero{
  position:relative;
  isolation:isolate;
  width:100%;
  height:var(--hero-h);
}

.hero-bg{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
}

.hero-bg .slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0;
  will-change:opacity;
  animation:heroFade 24s infinite;
}

.hero-bg .slide:nth-child(1){ animation-delay:0s; }
.hero-bg .slide:nth-child(2){ animation-delay:6s; }
.hero-bg .slide:nth-child(3){ animation-delay:12s; }
.hero-bg .slide:nth-child(4){ animation-delay:18s; }

.hero-dim{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.30), rgba(0,0,0,.35)),
    radial-gradient(120% 120% at 50% 20%, rgba(0,0,0,.25), transparent 60%);
}

.hero-content{
  position:relative;
  z-index:2;
  display:grid;
  place-content:center;
  gap:14px;
  height:100%;
  padding:24px;
  text-align:center;
  color:var(--text);
}

.hero-logo{
  display:inline-block;
  margin-bottom:6px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.35));
}

.hero h1{
  margin:0;
  font-size:clamp(28px, 4.2vw, 48px);
  line-height:1.06;
}

.hero .hl{
  color:var(--text);
  text-shadow:0 1px 0 rgba(0,0,0,.25);
}

.hero p{
  margin:4px 0 10px;
  font-size:clamp(14px, 1.8vw, 18px);
  color:rgba(255,255,255,.92);
}

.actions{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

@keyframes heroFade{
  0%{ opacity:0; }
  4%{ opacity:1; }
  21%{ opacity:1; }
  25%{ opacity:0; }
  100%{ opacity:0; }
}

/* Hero MQ */
@media (max-width: 430px){
  .hero-logo{
    width:132px;
  }

  .actions{
    width:100%;
  }

  .btn{
    width:100%;
    max-width:320px;
  }
}

/* HOME */

.home-intro{
  padding:40px 0 28px;
  text-align:center;
}

.home-intro h2,
.home-categories h2,
.home-cta-inner h2{
  margin:0 0 10px;
  color:var(--ink-strong);
  font-size:clamp(22px, 3vw, 30px);
}

.home-intro p,
.home-categories p,
.home-cta-inner p{
  max-width:70ch;
  margin:0 auto 24px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.home-values{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:16px;
}

.value-card{
  border-radius:14px;
  padding:16px;
  text-align:center;
}

.value-card .icon{
  width:50px;
  height:50px;
  margin:0 auto 10px;
  display:grid;
  place-items:center;
  border-radius:12px;
  font-size:24px;
  background:color-mix(in srgb, var(--brand) 20%, white);
}

.value-card h3{
  margin:0 0 4px;
  color:var(--brand-dark);
  font-size:16px;
}

.value-card p{
  margin:0;
  color:color-mix(in srgb, var(--ink) 75%, white);
  font-size:14px;
}

.home-categories{
  padding:32px 0;
  text-align:center;
}

.tile-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:14px;
}

.tile{
  position:relative;
  display:grid;
  place-items:end;
  overflow:hidden;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:14px;
  color:var(--ink-strong);
  box-shadow:0 8px 20px rgba(15,23,42,.06);
}

.tile img{
  width:100%;
  height:140px;
  object-fit:cover;
}

.tile span{
  position:absolute;
  left:10px;
  bottom:10px;
  padding:6px 10px;
  border:1px solid var(--ring);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  font-weight:700;
  backdrop-filter:saturate(120%) blur(4px);
}

.tile:hover{
  filter:brightness(.98);
}

.home-cta-band{
  margin-top:8px;
  border-top:1px solid var(--ring);
  border-bottom:1px solid var(--ring);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand) 10%, white) 0%,
      color-mix(in srgb, var(--brand-dark) 12%, white) 100%
    );
}

.home-cta-inner{
  padding:28px 0;
  text-align:center;
}

.home-cta-actions{
  display:inline-flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
}

/* Home MQ */
@media (max-width: 430px){
  .home-intro{
    padding:32px 0 22px;
  }

  .home-categories{
    padding:26px 0;
  }

  .home-cta-inner{
    padding:24px 0;
  }

  .home-cta-actions{
    display:flex;
    width:100%;
  }

  .home-cta-actions .btn{
    width:100%;
    max-width:320px;
  }
}

/* FOOTER */

.site-footer{
  background:var(--card);
  color:var(--ink);
}

.site-footer a{
  color:var(--brand-dark);
}

.site-footer a:hover{
  text-decoration:underline;
}

.footer-top{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:28px;
  align-items:start;
  padding:36px 0;
}

.footer-top .col h4{
  margin:0 0 10px;
  font-size:14px;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:color-mix(in srgb, var(--ink) 70%, white);
}

.footer-top .col ul{
  display:grid;
  gap:8px;
  margin:0;
  padding:0;
  list-style:none;
}

.footer-top .col li a{
  font-size:14px;
  color:var(--ink-strong);
}

.footer-top .col li a:hover{
  color:var(--brand-dark);
}

.footer-top .brand{
  padding:0 24px;
  text-align:center;
  border-left:1px solid var(--ring);
  border-right:1px solid var(--ring);
}

.footer-logo{
  width:120px;
  margin:0 auto 10px;
  filter:saturate(.95);
}

.address{
  margin:0;
  font-size:14px;
  color:color-mix(in srgb, var(--ink) 70%, white);
}

.address a{
  color:var(--brand-dark);
}

.footer-bottom{
  padding:12px 0;
  border-top:1px solid var(--ring);
  background:color-mix(in srgb, var(--bg) 70%, white);
  font-size:13px;
  color:color-mix(in srgb, var(--ink) 65%, white);
}

.footer-bottom .container{
  text-align:center;
}

/* Footer MQ */
@media (max-width: 820px){
  .footer-top{
    grid-template-columns:1fr;
    gap:20px;
    padding:28px 0;
    text-align:center;
  }

  .footer-top .col{
    display:grid;
    justify-items:center;
  }

  .footer-top .col ul{
    gap:10px;
  }

  .footer-top .col li a{
    display:inline-block;
    padding:8px 10px;
    border-radius:8px;
  }

  .footer-top .brand{
    padding:0;
    border:0;
  }

  .footer-logo{
    margin-inline:auto;
  }

  .address{
    max-width:22ch;
    margin:0 auto;
  }
}

/* PRINT */

@media print{
  @page{
    size:A4;
    margin:12mm;
  }

  header{
    position:static;
  }

  .hero{
    border-radius:0;
  }
}

/* KONTAKT */

.contact-hero{
  padding:28px 0 8px;
}

.contact-hero h1{
  margin:0 0 6px;
  font-size:clamp(24px, 3vw, 36px);
  color:var(--ink-strong);
}

.contact-hero p{
  margin:0 0 12px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.contact-layout{
  display:grid;
  grid-template-columns:minmax(220px, 340px) 1fr;
  gap:20px;
  padding:12px 0 40px;
}

.contact-cards{
  display:grid;
  gap:12px;
  align-self:start;
}

.c-card{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px;
  border-radius:14px;
}

.c-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:color-mix(in srgb, var(--brand) 22%, white);
  font-size:22px;
}

.c-body h3{
  margin:0 0 4px;
  font-size:16px;
  color:var(--ink-strong);
}

.c-body p{
  margin:0;
  font-size:14px;
  color:color-mix(in srgb, var(--ink) 70%, white);
}

.c-body a:hover{
  text-decoration:underline;
}

.contact-form{
  padding:16px;
  border-radius:14px;
}

.contact-form h2{
  margin:0 0 12px;
  font-size:18px;
  color:var(--ink-strong);
}

.contact-form label{
  display:block;
  margin:8px 0 6px;
  font-size:13px;
  color:var(--muted-2);
}

.contact-form input:not([type="checkbox"]):not([type="radio"]),
.contact-form select,
.contact-form textarea,
.cuts-search{
  width:100%;
  border:1px solid var(--ring);
  border-radius:10px;
  outline:none;
  padding:10px 12px;
  appearance:none;
  -webkit-appearance:none;
  background:var(--card);
  color:var(--ink-strong);
}

.contact-form textarea{
  resize:vertical;
}

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

.stack-row{
  display:flex;
  align-items:center;
  gap:10px;
  margin:12px 0;
}

.stack-row input[type="checkbox"]{
  width:18px;
  height:18px;
  margin:0;
  padding:0;
  border:none;
  border-radius:0;
  flex:0 0 auto;
  accent-color:var(--brand-dark);
  appearance:auto;
  -webkit-appearance:checkbox;
  background:transparent;
  cursor:pointer;
}

.check-text{
  margin:0;
  font-size:13px;
  line-height:1.4;
  color:var(--muted-2);
  cursor:default;
}

.check-text a{
  text-decoration:underline;
}

.form-note{
  margin-top:8px;
  font-size:12px;
  color:color-mix(in srgb, var(--ink) 70%, white);
}

/* Kontakt MQ */
@media (max-width: 1100px){
  .contact-layout{
    grid-template-columns:1fr;
  }
}

@media (max-width: 430px){
  .grid2{
    grid-template-columns:1fr;
  }
}

/* MODAL / NOTICE */

.notice-modal{
  position:fixed;
  inset:0;
  z-index:9998;
  display:none;
}

.notice-modal[aria-hidden="false"]{
  display:grid;
  place-items:center;
  padding:24px;
}

.notice-backdrop{
  position:absolute;
  inset:0;
  z-index:0;
  background:rgba(0,0,0,.45);
  backdrop-filter:blur(2px);
}

.notice-dialog{
  position:relative;
  z-index:1;
  width:min(92vw, 480px);
  margin:0;
  padding:20px 18px 16px;
  border-radius:16px;
  text-align:center;
  animation:noticeIn .18s ease both;
}

@keyframes noticeIn{
  from{ opacity:0; transform:translateY(4px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

.notice-logo{
  width:120px;
  max-width:40%;
  margin:6px auto 10px;
  filter:saturate(.95);
}

.notice-dialog h2{
  margin:6px 0 4px;
  font-size:20px;
  color:var(--ink-strong);
}

.notice-dialog p{
  margin:0 8px 14px;
  font-size:14px;
  color:var(--muted-2);
}

.notice-close{
  position:absolute;
  top:10px;
  right:10px;
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:1px solid var(--ring);
  border-radius:10px;
  background:var(--card);
  color:var(--ink-strong);
  font-size:22px;
  line-height:1;
  cursor:pointer;
}

.notice-close:hover{
  background:var(--surface);
}

.notice-dialog .btn.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:180px;
  max-width:90%;
  margin:8px auto 0;
  padding:10px 16px;
  border-radius:10px;
  background:var(--brand-dark);
  color:var(--bg);
}

.modal {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal[aria-hidden="false"] {
  display: flex;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
}

.modal-dialog {
  position: relative;
  z-index: 10;
  width: min(92vw, 760px);
  max-width: 760px;
  min-height: 0;
  padding: 18px;
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 20px 40px rgba(0,0,0,.3);
  animation: fadeIn .2s ease;
}

.modal-content {
  display: grid;
  gap: 14px;
}

.modal-content img {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(56vh, 420px);
  object-fit: contain;
  object-position: center;
  border-radius: 12px;
  margin: 0;
}

.modal-content h3 {
  margin: 0;
  font-size: clamp(20px, 2.3vw, 30px);
  line-height: 1.2;
  color: var(--ink-strong);
}

.modal-content p {
  margin: 0;
  min-height: 3.2em;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted-2);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 20;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.65);
  border-radius: 999px;
  background: rgba(17,24,39,.72);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(6px);
}

.modal-close:hover {
  background: rgba(17,24,39,.88);
}

.modal-edge {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10001;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(0,0,0,.45);
  color: var(--text);
  font-size: 30px;
  cursor: pointer;
  transition: background .2s;
}

.modal-edge:hover {
  background: rgba(0,0,0,.7);
}

.modal-edge.prev { left: clamp(8px, 2vw, 24px); }
.modal-edge.next { right: clamp(8px, 2vw, 24px); }

@media (max-width: 820px) {
  .modal-dialog {
    width: min(94vw, 680px);
    padding: 14px;
  }

  .modal-content img {
    aspect-ratio: 4 / 3;
    max-height: 44vh;
  }

  .modal-content h3 {
    font-size: clamp(18px, 3vw, 24px);
  }
}

@media (max-width: 430px) {
  .modal-dialog {
    width: 94vw;
    padding: 12px;
    border-radius: 14px;
  }

  .modal-content {
    gap: 12px;
  }

  .modal-content img {
    aspect-ratio: 4 / 3;
    max-height: 34vh;
    border-radius: 10px;
  }

  .modal-content h3 {
    font-size: 20px;
  }

  .modal-content p {
    min-height: 0;
    font-size: 14px;
  }

  .modal-close {
    top: 10px;
    right: 10px;
    width: 38px;
    height: 38px;
    font-size: 22px;
  }

  .modal-edge {
    width: 40px;
    height: 40px;
    font-size: 24px;
  }
}

/* IMPRESSUM / LEGAL */

.legal{
  padding:28px 0 40px;
}

.legal h1{
  margin:0 0 6px;
  font-size:clamp(28px, 3.5vw, 36px);
  color:var(--ink-strong);
}

.legal .brandline{
  margin:0 0 16px;
  color:color-mix(in srgb, var(--ink) 70%, white);
}

.legal-card{
  margin:14px 0;
  padding:18px;
  border-radius:14px;
}

.legal-card h2{
  margin:0 0 12px;
  font-size:18px;
  color:var(--ink-strong);
}

.legal-dl{
  display:grid;
  grid-template-columns:1fr;
  gap:10px 18px;
  margin:0;
}

.legal-dl dt{
  font-weight:800;
  color:var(--ink-strong);
}

.legal-dl dd{
  margin:0;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.legal-note{
  margin-top:12px;
  color:color-mix(in srgb, var(--ink) 60%, white);
}

/* Legal MQ */
@media (min-width: 760px){
  .legal-dl{
    grid-template-columns:240px 1fr;
  }
}

/* TRACKING */

.track-hero{
  padding:32px 0 12px;
}

.track-hero h1{
  margin:0 0 8px;
  font-size:clamp(24px, 3.4vw, 36px);
  color:var(--ink-strong);
}

.track-hero p{
  margin:0 0 16px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.tracker{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:12px 10px;
  padding:8px 10px;
  background:var(--card);
  border:1px solid var(--ring);
  border-radius:999px;
  box-shadow:var(--shadow);
}

.tracker select,
.tracker input{
  height:40px;
  line-height:40px;
  padding:0 12px;
  border:1px solid var(--ring);
  border-radius:999px;
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  background:var(--card);
  color:var(--ink-strong);
}

.tracker select{
  flex:0 0 180px;
  min-width:180px;
}

.tracker input{
  flex:1 1 320px;
  min-width:200px;
}

.trackingBtn{
  flex:0 0 auto;
  height:40px;
  padding:10px 16px;
  border-radius:999px;
  line-height:20px;
  white-space:nowrap;
}

.trackingBtn.primary{
  background:var(--brand-dark);
  color:var(--bg);
}

#toast{
  min-width:max-content;
  margin-left:auto;
  font-size:12px;
  color:color-mix(in srgb, var(--ink) 60%, white);
}

.trackingGrid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:18px;
  margin:22px 0 40px;
}

.trackingCard{
  display:grid;
  place-items:center;
  gap:14px;
  padding:18px;
  border-radius:16px;
  text-align:center;
}

.trackingCard .logo{
  height:32px;
  object-fit:contain;
  mix-blend:multiply;
}

.trackingCard p{
  margin:0;
  font-size:14px;
  color:color-mix(in srgb, var(--ink) 70%, white);
}

.trackingCard .cta{
  padding:12px 14px;
  border:none;
  border-radius:12px;
  background:var(--ink-strong);
  color:var(--bg);
  font-weight:900;
  cursor:pointer;
}

.tracker select:focus,
.tracker input:focus{
  outline:2px solid color-mix(in srgb, var(--brand) 40%, white);
  outline-offset:2px;
}

/* Tracking MQ */
@media (max-width: 430px){
  .tracker{
    align-items:stretch;
    gap:10px;
    padding:10px;
    border-radius:16px;
  }

  .tracker select,
  .tracker input,
  .tracker .trackingBtn{
    width:100%;
    flex:1 1 auto;
  }

  #toast{
    order:99;
    width:100%;
    margin:4px 0 0;
    text-align:center;
  }
}

/* PRODUCTS ALT */

.products-alt{
  display:grid;
  gap:28px;
  padding:36px 0;
  overflow:hidden;
}

.products-hero{
  padding:clamp(16px, 3.2vw, 28px);
  border-radius:16px;
  text-align:center;
}

.products-hero .kicker{
  display:inline-block;
  margin-bottom:8px;
  padding:6px 10px;
  border:1px solid color-mix(in srgb, var(--brand) 35%, white);
  border-radius:999px;
  background:color-mix(in srgb, var(--brand) 18%, white);
  color:var(--muted);
  font-size:12px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.products-hero h1{
  margin:6px 0 10px;
  font-size:clamp(24px, 3.6vw, 34px);
  color:var(--ink-strong);
}

.products-hero p{
  max-width:72ch;
  margin:0 auto 10px;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.products-hero .hero-bullets{
  display:grid;
  gap:6px;
  max-width:64ch;
  margin:10px auto 0;
  padding-left:0;
  list-style:none;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.products-alt .row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  padding:clamp(14px, 3vw, 24px);
  border-radius:16px;
  background:var(--bg);
}

.products-alt .media,
.about-row .media{
  flex:1 1 360px;
  min-width:260px;
  aspect-ratio:16 / 10;
  overflow:hidden;
  border:1px solid color-mix(in srgb, var(--brand) 40%, white);
  border-radius:12px;
}

.products-alt .copy,
.about-row .copy{
  flex:1 1 420px;
  min-width:260px;
  max-width:70ch;
}

.products-alt .row:nth-child(even) .media{
  order:2;
}

.products-alt .row:nth-child(even) .copy{
  order:1;
}

.products-alt .media img,
.about-row .media img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.products-alt .copy h2{
  margin:0 0 10px;
  font-size:clamp(20px, 3vw, 28px);
  color:var(--brand-dark);
}

.products-alt .copy p{
  margin:0 0 12px;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.products-alt .btn.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  margin-top:8px;
  padding:12px 16px;
  border-radius:10px;
  white-space:nowrap;
  font-weight:700;
}

.products-cta{
  margin-top:6px;
  border:1px solid color-mix(in srgb, var(--brand) 35%, white);
  border-left:0;
  border-right:0;
  border-radius:16px;
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--brand) 20%, white) 0%,
      var(--brand) 55%,
      color-mix(in srgb, var(--brand-dark) 25%, white) 100%
    );
}

.products-cta .cta-inner{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:clamp(16px, 3.2vw, 28px) 24px;
}

.products-cta .cta-copy{
  flex:1 1 420px;
  min-width:260px;
  max-width:70ch;
  color:var(--muted-3);
}

.products-cta h2{
  margin:0 0 6px;
  font-size:clamp(20px, 3vw, 28px);
  color:var(--ink-strong2);
}

.products-cta p{
  margin:0 0 8px;
  color:  var(--muted);
}

.products-cta .cta-list{
  margin:8px 0 0;
  padding-left:18px;
  color: var(--muted);
}

.products-cta .cta-actions{
  display:grid;
  gap:10px;
  flex:0 1 360px;
  min-width:260px;
  justify-items:start;
}

.products-cta .cta-pill,
.products-cta .cta-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:12px 16px;
  border-radius:999px;
  white-space:nowrap;
}

.products-cta .cta-pill{
  background:var(--ink-strong);
  color:var(--bg);
}

.products-cta .cta-ghost{
  background:var(--card);
  color:var(--brand-dark);
  border:1px solid color-mix(in srgb, var(--brand) 40%, white);
}

.products-cta .cta-ghost:hover{
  background:color-mix(in srgb, var(--brand) 15%, white);
}

.products-cta .cta-meta{
  margin:2px 0 0;
  font-size:13px;
  text-align:left;
  color:var(--muted);
}

.products-cta .cta-meta a{
  color:var(--muted-3);
  text-decoration:underline;
}

/* Products MQ */
@media (max-width: 820px){
  .products-alt .row{
    gap:12px;
  }

  .products-alt .row .media,
  .products-alt .row .copy,
  .products-alt .row:nth-child(even) .media,
  .products-alt .row:nth-child(even) .copy{
    order:0;
  }

  .products-alt .media,
  .products-alt .copy{
    min-width:unset;
    width:100%;
    max-width:100%;
  }
}

/* ABOUT */

.about-page{
  display:grid;
  gap:26px;
  padding:24px 0 36px;
}

.about-hero{
  overflow:hidden;
  border-radius:16px;
}

.about-hero-media{
  position:relative;
  height:clamp(280px, 46vh, 520px);
  border-bottom:1px solid var(--ring);
}

.about-hero-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}

.about-hero-copy{
  padding:clamp(16px, 3vw, 24px);
  text-align:center;
}

.about-hero-copy h1{
  margin:0 0 8px;
  font-size:clamp(24px, 3.6vw, 34px);
  color:var(--ink-strong);
}

.about-hero-copy p{
  max-width:72ch;
  margin:0 auto;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.about-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:20px;
  padding:clamp(14px, 3vw, 24px);
  border-radius:16px;
}

.about-row:nth-of-type(even) .media{
  order:2;
}

.about-row:nth-of-type(even) .copy{
  order:1;
}

.about-row .copy h2{
  margin:0 0 10px;
  font-size:clamp(20px, 3vw, 28px);
  color:var(--brand-dark);
}

.about-row .copy p{
  margin:0 0 12px;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.about-row .bullets{
  margin:0 0 14px;
  padding-left:18px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.about-row .btn.primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  max-width:100%;
  margin-top:8px;
  padding:12px 16px;
  border-radius:10px;
  white-space:nowrap;
  font-weight:700;
}

/* About MQ */
@media (max-width: 820px){
  .about-row{
    gap:12px;
  }

  .about-row .media,
  .about-row .copy,
  .about-row:nth-of-type(even) .media,
  .about-row:nth-of-type(even) .copy{
    order:0;
    min-width:unset;
    width:100%;
    max-width:100%;
  }
}

/* SERVICE */

.service-page{
  display:grid;
  gap:26px;
  padding:24px 0 36px;
}

.service-hero{
  overflow:hidden;
  border-radius:16px;
}

.service-hero .media{
  position:relative;
  height:clamp(260px, 45vh, 500px);
  border-bottom:1px solid var(--ring);
}

.service-hero .media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.service-hero .copy{
  padding:clamp(16px, 3vw, 24px);
  text-align:center;
}

.service-hero .copy h1{
  margin:0 0 8px;
  font-size:clamp(24px, 3.6vw, 34px);
  color:var(--ink-strong);
}

.service-hero .copy p{
  max-width:72ch;
  margin:0 auto;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.service-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:18px;
}

.svc-card{
  padding:16px;
  border-radius:14px;
}

.svc-card h3{
  margin:0 0 6px;
  font-size:16px;
  color:var(--brand-dark);
}

.svc-card p{
  margin:0;
  font-size:14px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.service-steps,
.service-docs,
.service-faq{
  padding:clamp(16px, 3vw, 24px);
  border-radius:16px;
}

.service-steps h2,
.service-docs h2,
.service-faq h2{
  margin:0 0 10px;
  font-size:clamp(20px, 3vw, 28px);
  text-align:center;
  color:var(--ink-strong);
}

.steps{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}

.steps li{
  padding:12px;
  border:1px dashed color-mix(in srgb, var(--brand) 45%, white);
  border-radius:12px;
  background:var(--card);
}

.steps h4{
  margin:0 0 6px;
  font-size:15px;
  color:var(--brand-dark);
}

.steps p{
  margin:0;
  font-size:14px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.service-terms{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}

.service-terms .term{
  padding:16px;
  border-radius:14px;
}

.service-terms h3{
  margin:0 0 8px;
  font-size:16px;
  color:var(--ink-strong);
}

.service-terms ul{
  margin:0;
  padding-left:18px;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

.doc-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(clamp(240px, 28vw, 300px), 1fr));
  grid-auto-flow:dense;
  gap:12px;
}

.doc{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:8px 12px;
  border:1px solid color-mix(in srgb, var(--brand) 40%, white);
  border-radius:12px;
  background:color-mix(in srgb, var(--brand) 15%, white);
  color:var(--ink-strong2);
  font-size:14px;
  text-align:center;
  white-space:nowrap;
}

.service-faq details{
  margin-top:10px;
  padding:10px 12px;
  border:1px solid var(--ring);
  border-radius:10px;
  background:var(--card);
}

.service-faq summary{
  cursor:pointer;
  font-weight:700;
  color:var(--ink-strong);
}

.service-faq p{
  margin:8px 0 0;
  color:color-mix(in srgb, var(--ink) 80%, white);
}

/* Service MQ */
@media (max-width: 430px){
  .service-hero .media{
    height:auto;
  }

  .service-hero .media img{
    position:static;
    height:auto;
    object-fit:contain;
  }
}

/* BEEF / CHICKEN / GROCERIES */

.products-layout{
  display:grid;
  grid-template-columns:clamp(180px, 28vw, 260px) 1fr;
  gap:18px;
  padding:24px 0;
}

.cuts-filter{
  align-self:start;
  padding:14px;
  border-radius:14px;
}

.cuts-filter h2{
  margin:0 0 8px;
  font-size:16px;
  color:var(--ink-strong);
}

.cuts-search{
  display:block;
  max-width:100%;
  margin:6px 0 10px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.cuts-nav{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:8px;
}

.cut-btn{
  max-width:100%;
  overflow:hidden;
  padding:10px 14px;
  border:1px solid var(--ring);
  border-radius:999px;
  background:var(--card);
  color:var(--ink-strong);
  box-shadow:0 4px 10px rgba(15,23,42,.05);
  cursor:pointer;
  letter-spacing:.2px;
  line-height:1.2;
  text-overflow:ellipsis;
  white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}

.cut-btn:hover{
  transform:translateY(-1px);
  border-color:color-mix(in srgb, var(--brand) 35%, white);
  box-shadow:0 8px 18px rgba(15,23,42,.10);
}

.cut-btn.active{
  background:var(--brand-dark);
  color:var(--bg);
  border-color:var(--brand-dark);
  box-shadow:0 8px 18px rgba(15,23,42,.12);
}

.cuts-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
}

.cut-card{
  width:100%;
}

.cut-card img{
  width:100%;
  height:140px;
  object-fit:fill;
}

.cut-card h3{
  margin:10px 8px 4px;
  font-size:16px;
  color:var(--ink-strong);
}

.cut-card p{
  margin:0 10px 12px;
  font-size:13px;
  color:color-mix(in srgb, var(--ink) 75%, white);
}

.cardlink{
  display:block;
  color:inherit;
}

.cardlink:hover{
  filter:brightness(.98);
}

.cuts-pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  margin:10px 0 0;
}

.cuts-pager .page-btn{
  min-width:38px;
  padding:8px 10px;
  border:1px solid var(--ring);
  border-radius:10px;
  background:var(--card);
  font-weight:800;
  text-align:center;
  cursor:pointer;
}

.cuts-pager .page-btn.active{
  background:var(--brand-dark);
  color:var(--text);
  border-color:var(--brand-dark);
}

.cuts-pager .page-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
}

.cuts-pager .dots{
  padding:0 4px;
  color:color-mix(in srgb, var(--ink) 60%, white);
}

/* Beef/Chicken/Groceries MQ */
@media (max-width: 1100px){
  .products-layout{
    grid-template-columns:1fr;
  }

  .cuts-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 820px){
  .cuts-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 430px){
  .cuts-grid{
    gap:12px;
  }

  .cut-card img{
    height:120px;
  }
}