/* ============================================================
   chrome.css — GLOBALE Bausteine: Announce, Navbar, USP-Band,
   Footer, Darkband. Wird auf ALLEN Seiten nach den Seiten-Styles
   geladen und gewinnt damit die Kaskade: Aenderungen hier gelten
   ueberall (Startseite, Kaufen, Blog, Team, Rechtliches).
   ============================================================ */

/* ---------- Announcement-Zeile ---------- */
.announce{position:relative;background:transparent;color:var(--ink);height:44px;overflow:hidden;z-index:5;}
.announce--on-dark{color:var(--paper);}
.announce-item{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:9px;
  font-size:17px;font-weight:600;letter-spacing:.01em;padding:0 16px;text-align:center;
  opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;
}
.announce-item.is-on{opacity:1;transform:none;transition-delay:.22s;}
.announce-item .ok{color:var(--azur);font-weight:700;}
.announce--on-dark .announce-item .ok{color:var(--azur-soft);}
@media (max-width:640px){.announce{height:42px;}.announce-item{font-size:15px;}}
@media (prefers-reduced-motion:reduce){.announce-item{transition:opacity .2s ease;transform:none;}}

/* ---------- Navigationsleiste (Oura-Form, Glas) ---------- */
.topbar{
  position:sticky;top:12px;z-index:50;
  width:min(1280px,calc(100% - 28px));
  margin:18px auto 0;
  border-radius:22px;
  border:1px solid rgba(19,18,17,.10);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 44px rgba(19,18,17,.16),0 3px 10px rgba(19,18,17,.08);
}
.topbar.glass{
  background:rgba(252,252,253,.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:blur(26px) saturate(1.7);
  border-color:rgba(255,255,255,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(19,18,17,.03),
    0 20px 50px rgba(19,18,17,.16),
    0 5px 14px rgba(19,18,17,.08);
  overflow:hidden;
  transition:background .45s ease,border-color .45s ease,box-shadow .45s ease;
}
.topbar.glass.nav-dark{
  background:rgba(20,21,22,.42);
  -webkit-backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);
  backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 20px 50px rgba(0,0,0,.4),0 5px 14px rgba(0,0,0,.28);
}
/* Navbar deutlich groesser: Bar, Logo, Links, Buttons, Icons (07.07.2026) */
.topbar-inner{height:78px;gap:18px;}
.topbar .wrap{padding:0 14px 0 28px;}
.wordmark{font-size:20px;gap:16px;}
.wm-key{height:54px;}
.topnav{gap:40px;}
.topnav a{font-size:18.5px;font-weight:600;letter-spacing:.01em;}
.topbar .btn--sm{min-height:54px;padding:0 30px;font-size:17px;}
.cart-btn{width:50px;height:50px;}
.cart-btn svg{width:26px;height:26px;}
.cart-count{min-width:20px;height:20px;line-height:20px;font-size:12px;}
@media (max-width:1023px){.cart-btn{width:46px;height:46px;}}
@media (max-width:999px){
  .burger{width:46px;height:44px;}
  .burger span{width:27px;height:2.4px;}
}
@media (max-width:767px){
  .topbar-inner{height:66px !important;gap:10px !important;}
  .topbar .wrap{padding:0 10px 0 18px !important;}
  .topbar .wm-key{height:46px !important;}
  .topbar .wordmark{font-size:18px !important;gap:12px !important;}
  .topbar .burger{width:44px !important;}
}

/* ---------- Mobiles Menue: linker Liquid-Glass-Drawer ---------- */
@media (max-width:999px){
  :root{--mnav-w:min(400px,92vw);}
  .topbar{
    transition:
      transform .42s cubic-bezier(.22,1,.36,1),
      opacity .32s ease,
      background .45s ease,
      border-color .45s ease,
      box-shadow .45s ease;
  }
  .mnav{
    position:fixed;inset:0;z-index:990;
    height:100vh;height:100dvh;
    display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;
    padding:102px 18px calc(24px + env(safe-area-inset-bottom,0px));
    color:var(--paper);
    background:rgba(19,18,17,.34);
    -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
    overflow:hidden;opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .32s ease,visibility .32s ease;
  }
  .mnav::before,
  .mnav::after{
    content:"";position:absolute;top:0;left:0;bottom:0;width:var(--mnav-w);
    border-radius:0 22px 22px 0;pointer-events:none;
    transform:translateX(-100%);
    transition:transform .42s cubic-bezier(.22,1,.36,1);
  }
  .mnav::before{
    border:1px solid rgba(255,255,255,.10);border-left:none;
    background:linear-gradient(160deg,rgba(21,23,26,.72) 0%,rgba(12,13,15,.9) 100%);
    -webkit-backdrop-filter:blur(32px) saturate(1.85);
    backdrop-filter:blur(32px) saturate(1.85);
    box-shadow:24px 0 64px rgba(19,18,17,.46),inset 0 1px 0 rgba(255,255,255,.14);
  }
  .mnav::after{
    background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,0) 42%);
  }
  body.mnav-open .mnav{
    opacity:1 !important;visibility:visible !important;pointer-events:auto !important;
    transition:opacity .32s ease,visibility 0s;
  }
  body.mnav-open .mnav::before,
  body.mnav-open .mnav::after{transform:none !important;}

  .mnav-links,
  .mnav-cta{
    position:relative;z-index:1;
    width:min(364px,calc(92vw - 36px));
    opacity:0;transform:translateX(-22px);
    transition:opacity .34s ease,transform .42s cubic-bezier(.22,1,.36,1);
  }
  body.mnav-open .mnav-links,
  body.mnav-open .mnav-cta{opacity:1 !important;transform:none !important;}
  .mnav-links{display:flex;flex-direction:column;}
  .mnav-links a{
    font-size:21px;font-weight:650;letter-spacing:.01em;color:var(--paper);
    text-decoration:none;padding:19px 0;
    border-bottom:1px solid rgba(255,255,255,.09);
    opacity:0;transform:translateX(-8px);
    transition:opacity .34s ease,transform .38s cubic-bezier(.22,1,.36,1),color .2s ease;
  }
  .mnav-links a:first-child{border-top:0;}
  .mnav-links a:last-child{border-bottom:0;}
  .mnav-links a:hover{color:var(--azur-soft);}
  body.mnav-open .mnav-links a{opacity:1 !important;transform:none !important;}
  body.mnav-open .mnav-links a:nth-child(1){transition-delay:.07s;}
  body.mnav-open .mnav-links a:nth-child(2){transition-delay:.1s;}
  body.mnav-open .mnav-links a:nth-child(3){transition-delay:.13s;}
  body.mnav-open .mnav-links a:nth-child(4){transition-delay:.16s;}
  body.mnav-open .mnav-links a:nth-child(5){transition-delay:.19s;}
  body.mnav-open .mnav-links a:nth-child(6){transition-delay:.22s;}
  body.mnav-open .mnav-links a:nth-child(7){transition-delay:.25s;}

  .mnav-cta{display:grid;gap:12px;margin-top:auto;padding-top:24px;transition-delay:.12s;}
  .mnav-cta .btn{width:100%;min-height:54px;}
  .mnav-wl{
    background:rgba(255,255,255,.05);color:var(--paper);
    border-color:rgba(255,255,255,.24);
  }
  .mnav-wl:hover{background:rgba(255,255,255,.12);color:var(--paper);border-color:rgba(255,255,255,.36);}

  body.mnav-open .topbar,
  body.mnav-open .topbar.glass{
    position:sticky;top:12px;z-index:1010;
    width:min(400px,calc(100vw - 28px));margin:18px auto 0;
    transform:translateY(var(--mnav-topbar-lift,0px)) !important;
    background:rgba(20,21,22,.42);
    -webkit-backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);
    backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);
    border-color:rgba(255,255,255,.16);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 20px 50px rgba(0,0,0,.4),0 5px 14px rgba(0,0,0,.28);
  }
  body.mnav-open .topbar .wordmark,
  body.mnav-open .topbar .cart-btn{color:var(--paper);}
  body.mnav-open .topbar .wm-key rect{stroke:var(--paper);}
  body.mnav-open .topbar .wm-key path,
  body.mnav-open .topbar .wm-key text{fill:var(--paper);}
  body.mnav-open .burger span{background:var(--paper);}
  body.mnav-open .cart-btn:hover{background:rgba(255,255,255,.12);}
  body.mnav-open .cart-count{background:var(--azur-soft,#88CEF6);color:var(--ink);}

  body.mnav-closing .topbar,
  body.mnav-closing .topbar.glass{
    position:sticky;top:12px;z-index:1010;
    width:min(400px,calc(100vw - 28px));margin:18px auto 0;
    transform:translateY(0) !important;
  }
}
@media (max-width:600px){
  .mnav{padding:96px 18px calc(20px + env(safe-area-inset-bottom,0px));}
  .mnav::before,.mnav::after{border-radius:0 20px 20px 0;}
  .mnav-links a{font-size:20px;padding:17px 0;}
}
@media (max-width:999px) and (max-height:700px){
  .mnav{padding-top:86px;}
  .mnav-links a{padding:14px 0;}
  .mnav-cta{padding-top:16px;}
}
@media (max-width:999px) and (prefers-reduced-motion:reduce){
  .mnav,.mnav::before,.mnav::after,.mnav-links,.mnav-cta,.mnav-links a{transition:none !important;transform:none !important;}
}

/* ---------- USP-Band (Navbar-Glas, passend zum Hintergrund) ---------- */
.trustband{
  width:min(1280px,calc(100% - 28px));
  position:relative;overflow:hidden;
  background:rgba(252,252,253,.5);
  -webkit-backdrop-filter:blur(26px) saturate(1.7);
  backdrop-filter:blur(26px) saturate(1.7);
  border:1px solid rgba(255,255,255,.55);border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(19,18,17,.03),
    0 20px 50px rgba(19,18,17,.16),
    0 5px 14px rgba(19,18,17,.08);
}
.trustband--on-dark{
  background:rgba(20,21,22,.42);
  -webkit-backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);
  backdrop-filter:blur(26px) saturate(1.5) brightness(1.15);
  border-color:rgba(255,255,255,.16);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 20px 50px rgba(0,0,0,.4),
    0 5px 14px rgba(0,0,0,.28);
}
.trustband::after{
  content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:linear-gradient(104deg,rgba(255,255,255,.28) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.14) 100%);
}
.trustband--on-dark::after{background:linear-gradient(104deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 26%,rgba(255,255,255,0) 74%,rgba(255,255,255,.06) 100%);}
.trustband .usp-item{color:var(--warm-700);}
.trustband .usp-item .ok{color:var(--azur);}
.trustband--on-dark .usp-item{color:rgba(241,239,234,.85);}
.trustband--on-dark .usp-item .ok{color:var(--azur-soft);}
.usp-marquee{position:relative;z-index:2;-webkit-mask-image:none;mask-image:none;}
.usp-track{width:100%;animation:none !important;justify-content:center;flex-wrap:wrap;gap:8px 0;}
.usp-item{padding:4px 14px;}
.usp-item[aria-hidden="true"]{display:none;}
@media (min-width:1000px){.usp-track{flex-wrap:nowrap;justify-content:space-around;}.usp-item{padding:0 14px;}}

/* ---------- Footer (breit, luftig) ---------- */
footer{border-top:0;padding:72px 0 44px;}
footer .wrap{max-width:1380px;padding:0 28px;}
.ftr-top{display:grid;gap:48px 72px;grid-template-columns:1.35fr 1fr 1fr 1fr;}
@media (max-width:900px){.ftr-top{grid-template-columns:1fr 1fr;row-gap:40px;}}
@media (max-width:560px){.ftr-top{grid-template-columns:1fr;}}
.ftr-h{font-family:var(--sans);font-size:15.5px;font-weight:600;letter-spacing:.02em;color:rgba(241,239,234,.55);margin-bottom:18px;}
.ftr-col a{font-size:16.5px;padding:8px 0;}
.ftr-bottom{margin-top:60px;padding-top:28px;}
footer{border-radius:clamp(26px,4vw,46px) clamp(26px,4vw,46px) 0 0;overflow:hidden;}

/* ---------- Darkband: CTA + Footer als EIN Verlauf ---------- */
.darkband{border-radius:clamp(26px,4vw,46px) clamp(26px,4vw,46px) 0 0;overflow:hidden;}
.darkband section.dark,.darkband footer{background:transparent;border-radius:0;border-top:0;}

/* ---------- Zahlungsarten im Footer (self-hosted, Oura-Stil) ---------- */
.pay-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:44px;}
.pay-row img{height:40px;width:auto;display:block;border-radius:7px;}
@media (max-width:640px){.pay-row{gap:8px;row-gap:9px;margin-top:36px;}.pay-row img{height:32px;}}