/* ============================================================
   plant pirate — Tweak overrides
   Layered ON TOP of styles.css. Driven by the Tweaks panel via
   CSS vars on :root (fonts / palette / tone / radius / marquee)
   and data-* attributes on <body> (pattern / button / motion).
   ============================================================ */

/* ---------- Button corner radius (var set by panel) ---------- */
.btn{ border-radius:var(--btn-radius, 999px); }

/* ---------- Button styles ---------- */
/* Outline */
body[data-btn="outline"] .btn--primary{
  background:transparent; color:var(--green-deep);
  border-color:var(--green-deep); box-shadow:none;
}
body[data-btn="outline"] .btn--primary:hover{
  background:var(--green-deep); color:#fff;
  box-shadow:0 12px 24px -12px color-mix(in srgb, var(--green-deep) 70%, transparent);
}

/* Sheen — a light sweep crosses the button on hover */
body[data-btn="sheen"] .btn--primary{ position:relative; overflow:hidden; }
body[data-btn="sheen"] .btn--primary::after{
  content:""; position:absolute; top:0; left:-160%;
  width:65%; height:100%; transform:skewX(-18deg);
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
  transition:left .6s cubic-bezier(.4,0,.1,1); pointer-events:none;
}
body[data-btn="sheen"] .btn--primary:hover::after{ left:170%; }

/* Glow — soft coloured halo, intensifies on hover */
body[data-btn="glow"] .btn--primary{
  box-shadow:0 0 0 1px color-mix(in srgb, var(--green) 45%, transparent),
             0 10px 32px -8px color-mix(in srgb, var(--green) 75%, transparent);
}
body[data-btn="glow"] .btn--primary:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px var(--green),
             0 14px 44px -6px color-mix(in srgb, var(--green) 90%, transparent);
}

/* ============================================================
   Decorative background patterns (hero + green band + footer)
   ============================================================ */
body:not([data-pattern="keins"]) .hero,
body:not([data-pattern="keins"]) .erst,
body:not([data-pattern="keins"]) .site-footer{ position:relative; }
body:not([data-pattern="keins"]) .hero > .wrap,
body:not([data-pattern="keins"]) .erst > .wrap,
body:not([data-pattern="keins"]) .site-footer > .wrap{ position:relative; z-index:1; }
body:not([data-pattern="keins"]) .hero::before,
body:not([data-pattern="keins"]) .erst::before,
body:not([data-pattern="keins"]) .site-footer::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
}

/* — Punkte (dots) — */
body[data-pattern="punkte"] .hero::before{
  background-image:radial-gradient(color-mix(in srgb,var(--green-deep) 26%, transparent) 1.4px, transparent 1.6px);
  background-size:20px 20px;
}
body[data-pattern="punkte"] .erst::before,
body[data-pattern="punkte"] .site-footer::before{
  background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.6px);
  background-size:20px 20px;
}

/* — Raster (grid) — */
body[data-pattern="raster"] .hero::before{
  background-image:
    linear-gradient(color-mix(in srgb,var(--green-deep) 14%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb,var(--green-deep) 14%, transparent) 1px, transparent 1px);
  background-size:32px 32px;
}
body[data-pattern="raster"] .erst::before,
body[data-pattern="raster"] .site-footer::before{
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:32px 32px;
}

/* — Diagonal (hatch) — */
body[data-pattern="diagonal"] .hero::before{
  background-image:repeating-linear-gradient(45deg,
    color-mix(in srgb,var(--green-deep) 12%, transparent) 0 1.5px, transparent 1.5px 14px);
}
body[data-pattern="diagonal"] .erst::before,
body[data-pattern="diagonal"] .site-footer::before{
  background-image:repeating-linear-gradient(45deg,
    rgba(255,255,255,.10) 0 1.5px, transparent 1.5px 14px);
}

/* — Wellen (waves) — */
body[data-pattern="wellen"] .hero::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cpath d='M0 11 Q16 1 32 11 T64 11' fill='none' stroke='%232C7A43' stroke-opacity='0.18' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:64px 22px;
}
body[data-pattern="wellen"] .erst::before,
body[data-pattern="wellen"] .site-footer::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='22'%3E%3Cpath d='M0 11 Q16 1 32 11 T64 11' fill='none' stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1.5'/%3E%3C/svg%3E");
  background-size:64px 22px;
}

/* ============================================================
   Motion level
   ============================================================ */
/* Sanft — calm: no scroll reveal, minimal hover movement */
body[data-motion="sanft"] .fade-up{ opacity:1 !important; transform:none !important; transition:none !important; }
body[data-motion="sanft"] .leistung:hover,
body[data-motion="sanft"] .blog-card:hover,
body[data-motion="sanft"] .kontakt-tile:hover{ transform:none; }
body[data-motion="sanft"] .btn:hover{ transform:none; }

/* Verspielt — lively: bigger lifts, gentle floating accents, deeper reveal */
body[data-motion="verspielt"] .fade-up{ transform:translateY(40px); }
@media (prefers-reduced-motion: no-preference){
  body[data-motion="verspielt"] .hero__photo{ animation:pp-float 7s ease-in-out infinite; }
  body[data-motion="verspielt"] .hero__badge{ animation:pp-float 6s ease-in-out infinite reverse; }
  body[data-motion="verspielt"] .warum__stat{ animation:pp-float 8s ease-in-out infinite; }
}
@keyframes pp-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }
body[data-motion="verspielt"] .leistung{ transition:transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease; }
body[data-motion="verspielt"] .leistung:hover{ transform:translateY(-10px) scale(1.015); }
body[data-motion="verspielt"] .btn--primary:hover{ transform:translateY(-3px) scale(1.03); }
body[data-motion="verspielt"] .leistung:hover .link-arrow{ gap:.75em; }
body[data-motion="verspielt"] .testi__card:hover,
body[data-motion="verspielt"] .feature:hover,
body[data-motion="verspielt"] .bgm-card:hover{ transform:translateY(-6px); }