/* =========================================================================
   BLUECAT® – Kunststoff-Gärkörbchen · Landingpage
   Corporate Design: Original Avenir Next (lizenziert), Markenblau #0077CC
   ========================================================================= */

/* ---- Original-Font (von bluecat-germany.de, für den Kunden lizenziert) ---- */
@font-face{
  font-family:"Avenir Next";
  font-weight:400; font-style:normal; font-display:swap;
  src:url("assets/fonts/AvenirNext-Regular.woff2") format("woff2"),
      url("assets/fonts/AvenirNext-Regular.woff")  format("woff"),
      url("assets/fonts/AvenirNext-Regular.ttf")   format("truetype");
}
@font-face{
  font-family:"Avenir Next";
  font-weight:700; font-style:normal; font-display:swap;
  src:url("assets/fonts/AvenirNext-Bold.woff2") format("woff2"),
      url("assets/fonts/AvenirNext-Bold.woff")  format("woff"),
      url("assets/fonts/AvenirNext-Bold.ttf")   format("truetype");
}
@font-face{
  font-family:"Avenir Next Ultra";
  font-weight:200; font-style:normal; font-display:swap;
  src:url("assets/fonts/AvenirNext-UltraLight.woff2") format("woff2"),
      url("assets/fonts/AvenirNext-UltraLight.woff")  format("woff"),
      url("assets/fonts/AvenirNext-UltraLight.ttf")   format("truetype");
}

/* ------------------------------- Tokens --------------------------------- */
:root{
  --blue:#0077cc;          /* BLUECAT Markenblau (exakt aus der Website) */
  --blue-600:#0069b4;
  --blue-700:#005596;
  --ink:#111418;           /* Fließtext / dunkel */
  --gray:#4d4d4d;          /* Sekundärtext (h3-Grau der Website) */
  --gray-400:#6b7480;   /* Kontrast auf WCAG-AA angehoben */
  --line:#e4e9ee;          /* Trennlinien */
  --surface:#f4f7fa;       /* zart bläuliche Fläche für Sektionswechsel */
  --white:#ffffff;
  --radius:16px;
  --radius-sm:10px;
  --shadow-sm:0 2px 10px rgba(17,20,24,.06);
  --shadow:0 18px 50px -18px rgba(0,72,130,.28);
  --maxw:1180px;
  --ff:"Avenir Next",-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-ultra:"Avenir Next Ultra","Avenir Next",-apple-system,"Segoe UI",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--ff); color:var(--ink); background:var(--white);
  font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.02em; line-height:1.05; color:var(--ink)}
h1{font-size:clamp(2.6rem,6vw,5rem); letter-spacing:-.035em}
h2{font-size:clamp(2rem,4.2vw,3.4rem); letter-spacing:-.03em}
h3{font-size:clamp(1.15rem,1.8vw,1.4rem); letter-spacing:-.02em}
p{margin:0 0 1em}
.container{width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:24px}
.blue{color:var(--blue)}
.eyebrow{font-size:.82rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--blue); margin:0 0 14px}
.lead{font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--gray); max-width:62ch}
section{padding:clamp(56px,8vw,110px) 0}

/* ------------------------------- Buttons -------------------------------- */
.btn{
  --bg:var(--blue); --fg:#fff;
  display:inline-flex; align-items:center; gap:.6em; justify-content:center;
  background:var(--bg); color:var(--fg); font-family:var(--ff); font-weight:700;
  font-size:1rem; letter-spacing:-.01em; padding:16px 30px; min-height:52px;
  border:2px solid var(--bg); border-radius:999px; cursor:pointer;
  transition:transform .18s ease, background .18s ease, box-shadow .18s ease, border-color .18s ease;
  box-shadow:0 10px 24px -12px rgba(0,105,180,.7);
}
.btn:hover{background:var(--blue-600); border-color:var(--blue-600); transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn--ghost{--bg:transparent; --fg:var(--ink); border-color:var(--line); box-shadow:none}
.btn--ghost:hover{--bg:var(--blue); border-color:var(--blue); color:#fff}
.btn--ghost:hover svg{color:#fff}
.btn--light{--bg:#fff; --fg:var(--blue); border-color:#fff}
.btn--light:hover{--bg:#eaf4fc; border-color:#eaf4fc; color:var(--blue-700)}
/* Unterer CTA-Button: bei Hover schwarz mit weißer Schrift (bleibt lesbar) */
.cta .btn--light:hover{background:#111418; border-color:#111418; color:#fff}
.cta .btn--light:hover svg{color:#fff}
.btn svg{width:18px;height:18px}
:where(a,button,input,textarea):focus-visible{outline:3px solid var(--blue); outline-offset:3px; border-radius:6px}

/* -------------------------------- Header -------------------------------- */
.site-header{
  position:sticky; top:0; z-index:100; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(150%) blur(10px); border-bottom:1px solid var(--line);
}
.site-header .container{display:flex; align-items:center; justify-content:space-between; min-height:74px; gap:20px}
.brand{display:flex; align-items:center; gap:12px}
.brand img{height:48px; width:auto}
.nav{display:flex; align-items:center; gap:30px}
.nav a{font-size:.98rem; font-weight:400; color:var(--gray); transition:color .15s}
.nav a:hover{color:var(--blue)}
.header-cta{display:inline-flex; min-height:44px; padding:10px 24px; font-size:.94rem; box-shadow:0 6px 16px -11px rgba(0,105,180,.6)}
.nav-toggle{display:none}

/* --------------------------------- Hero --------------------------------- */
.hero{position:relative; overflow:hidden; padding-top:clamp(40px,6vw,72px)}
.hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(30px,5vw,72px); align-items:center}
.hero__copy{max-width:600px}
.hero h1 span{display:block}
.hero h1 .thin{font-family:var(--ff-ultra); font-weight:200; letter-spacing:-.02em; color:var(--gray)}
.hero__sub{margin:22px 0 30px; font-size:clamp(1.05rem,1.5vw,1.3rem); color:var(--gray); max-width:52ch}
.hero__actions{display:flex; flex-wrap:wrap; gap:14px}
.hero__media{position:relative}
.hero__media::before{ /* dezenter Marken-Blob hinter dem Produkt */
  content:""; position:absolute; inset:auto; width:118%; aspect-ratio:1; left:-9%; top:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle at 50% 45%, #d6ecfb 0%, #eaf4fc 42%, rgba(234,244,252,0) 70%);
  z-index:0;
}
.hero__media img{position:relative; z-index:1; border-radius:var(--radius);
  filter:drop-shadow(0 30px 45px rgba(0,72,130,.18)); }
.hero__badges{display:flex; flex-wrap:wrap; gap:10px 22px; margin-top:30px}
.hero__badges span{display:inline-flex; align-items:center; gap:8px; font-size:.92rem; font-weight:700; color:var(--ink)}
.hero__badges svg{width:19px;height:19px;color:var(--blue)}

/* ------------------------------ Feature-Band ---------------------------- */
.features{background:var(--surface); border-block:1px solid var(--line)}
.features .grid{display:grid; grid-template-columns:repeat(5,1fr); gap:22px}
.feature{text-align:center; padding:10px}
.feature__ic{width:56px;height:56px; margin:0 auto 14px; display:grid; place-items:center;
  background:#fff; border:1px solid var(--line); border-radius:16px; color:var(--blue); box-shadow:var(--shadow-sm)}
.feature__ic svg{width:26px;height:26px}
.feature h3{font-size:1.05rem; margin-bottom:4px}
.feature p{font-size:.9rem; color:var(--gray); margin:0}

/* ------------------------------ Intro / Split --------------------------- */
.split .container{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,70px); align-items:center}
.split__media img{border-radius:var(--radius); box-shadow:var(--shadow)}
.section-head{max-width:720px; margin:0 auto clamp(38px,5vw,60px)}
.section-head.center{text-align:center}
.section-head .lead{margin-inline:auto}

/* -------------------------------- Galerie ------------------------------- */
.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.tile{position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3; cursor:zoom-in;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s}
.tile img{width:100%; height:100%; object-fit:contain; padding:14px; transition:transform .35s ease}
.tile:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:#cfe0f0}
.tile:hover img{transform:scale(1.05)}
.tile__tag{position:absolute; left:12px; top:12px; z-index:2; background:rgba(255,255,255,.92);
  color:var(--blue); font-size:.72rem; font-weight:700; letter-spacing:.03em;
  padding:5px 11px; border-radius:999px; box-shadow:var(--shadow-sm)}
.note{margin-top:20px; font-size:.85rem; color:var(--gray-400); text-align:center}

/* -------------------------------- Größen -------------------------------- */
.sizes{background:var(--surface); border-block:1px solid var(--line)}
.size-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px}
.card{background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:clamp(22px,3vw,34px); box-shadow:var(--shadow-sm)}
.card h3{display:flex; align-items:center; gap:10px; margin-bottom:16px}
.card h3 svg{width:22px;height:22px;color:var(--blue)}
table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
th,td{text-align:left; padding:13px 10px; border-bottom:1px solid var(--line); font-size:.98rem}
thead th{font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; color:var(--gray-400); font-weight:700}
tbody tr:last-child td{border-bottom:none}
td.dim{font-weight:700}
td.w{color:var(--gray); text-align:right}

/* -------------------------------- Vorteile ------------------------------ */
.usp-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px}
.usp{padding:28px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; transition:border-color .2s, transform .2s}
.usp:hover{border-color:#cfe0f0; transform:translateY(-3px)}
.usp__ic{width:48px;height:48px; border-radius:12px; background:#eaf4fc; color:var(--blue);
  display:grid; place-items:center; margin-bottom:16px}
.usp__ic svg{width:24px;height:24px}
.usp h3{margin-bottom:8px}
.usp p{margin:0; color:var(--gray); font-size:.98rem}

/* --------------------------------- CTA ---------------------------------- */
.cta{background:linear-gradient(135deg,var(--blue) 0%,var(--blue-700) 100%); color:#fff; text-align:center}
.cta h2{color:#fff}
.cta p{color:#dcecfa; max-width:56ch; margin-inline:auto}
.cta__actions{display:flex; flex-wrap:wrap; gap:16px; justify-content:center; margin-top:34px}
.cta__meta{margin-top:26px; font-size:.95rem; color:#bcdcf5}
.cta__meta a{color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:3px}

/* ------------------------------- Kontakt -------------------------------- */
.contact .container{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px)}
.contact form{display:grid; gap:16px}
.field{display:grid; gap:6px}
.field label{font-size:.9rem; font-weight:700}
.field input,.field textarea{
  font-family:var(--ff); font-size:1rem; color:var(--ink); background:#fff;
  border:1.5px solid var(--line); border-radius:var(--radius-sm); padding:13px 14px; width:100%;
  transition:border-color .15s, box-shadow .15s}
.field textarea{min-height:120px; resize:vertical}
.field input:focus,.field textarea:focus{border-color:var(--blue); box-shadow:0 0 0 3px rgba(0,119,204,.15); outline:none}
.form-note{font-size:.82rem; color:var(--gray-400); margin:2px 0 0}
.contact-info h3{margin-bottom:8px}
.info-list{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:16px}
.info-list li{display:flex; gap:14px; align-items:flex-start}
.info-list svg{width:22px;height:22px;color:var(--blue); flex:none; margin-top:2px}
.info-list a:hover{color:var(--blue)}

/* -------------------------------- Footer -------------------------------- */
.site-footer{background:#0b2033; color:#c4d3e0; padding:56px 0 40px; font-size:.9rem}
.site-footer .container{display:flex; flex-wrap:wrap; gap:30px; justify-content:space-between; align-items:flex-start}
.site-footer img{height:32px; width:auto; margin-bottom:16px}
.site-footer a:hover{color:#fff}
.site-footer .legal{max-width:520px; line-height:1.7; color:#8fa6ba}
.site-footer .legal strong{color:#e4eef7}
.site-footer a{color:#a9c3d8; text-decoration:none}
.footer-legal-links{margin-top:14px; display:flex; flex-wrap:wrap; gap:8px; align-items:center}
.footer-legal-links a{text-decoration:underline; text-underline-offset:2px}
.footer-legal-links span{color:#5b7286}

/* ----------------------------- Reveal-Anim ------------------------------ */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease}
.reveal.in{opacity:1; transform:none}

/* -------------------------------- Lightbox ------------------------------ */
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(9,24,38,.9);
  display:none; align-items:center; justify-content:center; padding:30px; cursor:zoom-out}
.lightbox.open{display:flex}
.lightbox img{max-width:min(1000px,92vw); max-height:88vh; width:auto; border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox__close{position:absolute; top:22px; right:26px; width:46px;height:46px; border-radius:50%;
  background:rgba(255,255,255,.12); border:none; color:#fff; font-size:24px; cursor:pointer; line-height:1}
.lightbox__close:hover{background:rgba(255,255,255,.24)}

/* ------------------------------- Honeypot ------------------------------- */
.hp{position:absolute !important; left:-9999px !important; top:auto; width:1px; height:1px; overflow:hidden}

/* -------------------------------- Toast --------------------------------- */
.toast{position:fixed; left:50%; bottom:28px; transform:translate(-50%,20px); z-index:300;
  max-width:min(92vw,460px); padding:16px 22px; border-radius:12px; font-weight:700;
  font-size:.95rem; line-height:1.4; color:#fff; text-align:center;
  box-shadow:0 20px 55px -14px rgba(0,0,0,.45); opacity:0; pointer-events:none;
  transition:opacity .3s ease, transform .3s ease}
.toast.show{opacity:1; transform:translate(-50%,0)}
.toast--ok{background:#1a7f37}
.toast--err{background:#c0392b}

/* ------------------------------ Responsive ------------------------------ */
@media (max-width:960px){
  .hero .container{grid-template-columns:1fr; text-align:left}
  .hero__media{order:-1; max-width:460px}
  .features .grid{grid-template-columns:repeat(2,1fr)}
  .split .container,.size-cols,.contact .container{grid-template-columns:1fr}
  .usp-grid{grid-template-columns:1fr}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .nav{display:none}
  .nav.open{display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column;
    gap:0; background:#fff; border-bottom:1px solid var(--line); padding:8px 0}
  .nav.open a{padding:14px 24px; border-top:1px solid var(--line)}
  .nav-toggle{display:inline-grid; place-items:center; width:46px;height:46px; background:none;
    border:none; cursor:pointer; color:var(--blue)}
  .nav-toggle svg{width:28px;height:28px}
  .header-cta{display:none}
}
@media (max-width:520px){
  body{font-size:17px}
  .gallery-grid{grid-template-columns:1fr 1fr; gap:12px}
  .btn{width:100%}
  .hero__actions .btn,.cta__actions .btn{width:100%}
}

/* --------------------------- Reduced Motion ----------------------------- */
@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto !important}
  .reveal{opacity:1 !important; transform:none !important; transition:none}
  .tile,.tile img,.btn,.usp{transition:none}
}


/* --------------------------- FAQ / SEO-Text --------------------------- */
.faq{padding:72px 0}
.faq .section-head{margin-bottom:36px}
.faq-list{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-list details{background:#f4f8fb;border:1px solid #e2e9f0;border-radius:12px;overflow:hidden}
.faq-list summary{cursor:pointer;list-style:none;padding:18px 22px;font-weight:600;color:#12222e;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";font-size:1.5rem;line-height:1;color:var(--blue);transition:transform .2s}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--blue)}
.faq-a{padding:0 22px 20px;color:#4a5b68;line-height:1.7}
.faq-a p{margin:0}
.seo-more{max-width:820px;margin:26px auto 0;border-top:1px solid #e2e9f0;padding-top:14px}
.seo-more>summary{cursor:pointer;list-style:none;font-weight:600;color:var(--blue);padding:8px 0}
.seo-more>summary::-webkit-details-marker{display:none}
.seo-more>summary::before{content:"\25B8  "}
.seo-more[open]>summary::before{content:"\25BE  "}
.seo-copy{padding:12px 2px 6px;color:#4a5b68;line-height:1.75}
.seo-copy h3{color:#12222e;font-size:1.08rem;margin:20px 0 8px}
.seo-copy h3:first-child{margin-top:6px}
.seo-copy p{margin:0 0 14px}
.seo-copy p:last-child{margin-bottom:0}
/* Footer-Weblink */
.footer-web{margin:10px 0 0}
.footer-web a{color:#a9c3d8}
.footer-web a:hover{color:#fff}
@media (prefers-reduced-motion: reduce){ .faq-list summary::after{transition:none} }


/* --------------------- Lightbox-Caption / Abb. ähnlich ------------------ */
.lightbox__fig{margin:0;max-width:92vw;max-height:88vh;display:flex;flex-direction:column;align-items:center;gap:10px}
.lightbox__cap{color:#eaf4fc;font-size:.9rem;text-align:center;opacity:.92;max-width:60ch}
main img[src^="bilder/"]{cursor:zoom-in}
.footer-hint{margin:12px 0 0;font-size:.8rem;opacity:.7}
.features-head{text-align:center;margin:0 0 34px}


/* ------------------- Vergleich Kunststoff vs. Peddigrohr ---------------- */
.vergleich .compare-card{max-width:860px;margin-inline:auto;padding:0;overflow:hidden}
.compare{width:100%;border-collapse:collapse}
.compare th{background:var(--blue);color:#fff;text-align:left;padding:14px 16px;font-size:.95rem}
.compare td{padding:13px 16px;border-top:1px solid var(--line);font-size:.98rem;vertical-align:top}
.compare .dim{font-weight:700;color:var(--ink);white-space:nowrap}
.compare .yes{color:#0a7d33;font-weight:600}
.compare .no{color:var(--gray)}
.compare tbody tr:nth-child(even){background:#f6f9fc}
@media(max-width:640px){.compare th,.compare td{padding:10px 10px;font-size:.84rem}}

.compare-summary{max-width:820px;margin:26px auto 0;color:var(--gray);line-height:1.75;font-size:1.02rem}
.compare-summary strong{color:var(--ink)}