/* CLXON24 / Brand Unity v2
   Einheitliches Shop-System: weiße Produktflächen, klare navy Schrift,
   Blau als Aktion. Keine Änderungen an Produkten, SEO oder Zahlungslogik. */
:root {
  --clx-brand-navy:#102a43;
  --clx-brand-ink:#172e45;
  --clx-brand-muted:#40566d;
  --clx-brand-border:#d5e2ed;
  --clx-brand-blue:#0764be;
  --clx-brand-blue-soft:#eaf4fe;
  --clx-brand-surface:#fff;
  --clx-brand-subtle:#f4f8fc;
}
body.page-home,body.page-shop,body.page-cat-surface,
body.page-wish-cat {
  background:#fff; color:var(--clx-brand-ink);
}
body.page-home main,
body.page-shop main {color:var(--clx-brand-ink);}
:is(.clx-hero,.clx-sec,.clx-cat,.clx-door,.clx-product,.shop-card) {
  -webkit-font-smoothing:antialiased;
}
:is(.clx-sec,.clx-head,.clx-hero) h1,
:is(.clx-sec,.clx-head,.clx-hero) h2 {color:#142b42;}
:is(.clx-lead,.shop-card-perks span) {color:#354d65;}
:is(.clx-door,.clx-cat,.clx-product,.shop-card) {
  border-color:#d4e0ec;
}
:is(.clx-door,.clx-cat,.clx-product,.shop-card):focus-visible {
  outline:3px solid #3c96d6;outline-offset:3px;
}
.shop-card:focus-within {outline:2px solid #398cce;outline-offset:2px;}
.shop-card-perks span {
  background:#edf4fb;border-color:#cadeed;color:#31516c;
  font-size:12px;line-height:1.3;
}
.shop-card-perks span::before {color:#0764af;}
:is(.clx-link,.clx-more,.clx-head a):focus-visible {
  outline:3px solid #3c96d6;outline-offset:3px;
}
.clx-link,.clx-more {color:#133a5b;}
.clx-btn {
  border-radius:10px;
  min-height:46px;
  font-weight:780;
}
.clx-btn:hover {background:#0765c0;color:#fff;}
/* Store search and product purchase controls: visible focus, readable defaults. */
:is(.shop-toolbar,.shop-filters,.product-buybox,.product-buy) :is(input,select,textarea) {
  color-scheme:light;
  color:#152c42;
}
:is(.shop-toolbar,.shop-filters,.product-buybox,.product-buy) :is(input,select,textarea)::placeholder {
  color:#50657a;opacity:1;
}
:is(.shop-toolbar,.shop-filters,.product-buybox,.product-buy) :is(input,select,textarea):focus-visible {
  outline:3px solid #8dcafd;outline-offset:1px;border-color:#0764bd;
}
/* Headings on product recommendations never inherit white-on-white. */
.clx-cat,.clx-product,.shop-card {color:#172e45;}
.clx-product :is(h2,h3,strong),
.shop-card :is(h2,h3,strong) {color:#162d43;}
/* Consistent interactive surfaces across the storefront. */
:is(.clx-btn,.shop-card-cta,.product-buy button) {min-height:44px;}
@media (max-width:720px) {
  .shop-card-perks span {font-size:12px;}
  :is(.shop-toolbar,.shop-filters,.product-buybox,.product-buy) :is(input,select,textarea) {
    font-size:16px;
  }
}
@media (prefers-reduced-motion:reduce) {
  .shop-card,.clx-door,.clx-product {transition:none;}
}

/* Seitenkopf sitzt direkt unter der Navbar, nicht als weiße Karte. */
body.page-framed .site-frame:has(> .page-hero) {
  width: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: #fff;
  overflow: visible;
  box-shadow: none;
}
body.page-framed .site-frame > .page-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 28px 40px;
  width: 100%;
  max-width: none;
  min-height: 24rem;
  height: auto;
  margin: 0;
  overflow: hidden;
  background: #07090c;
  color: #fff;
  padding: 28px max(clamp(16px, 2.4vw, 28px), calc((100vw - 1360px) / 2)) 32px;
  box-sizing: border-box;
}
body.page-framed .site-frame > .page-hero:has(.page-hero__media),
body.page-framed .site-frame > .page-hero:has(picture) {
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 460px);
}
body.page-framed .site-frame > .page-hero::after {
  display: none;
}
body.page-framed .site-frame > .page-hero > div {
  order: 1;
  width: min(40rem, 100%);
  max-width: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.7rem;
}
body.page-framed .site-frame > .page-hero > .page-hero__media,
body.page-framed .site-frame > .page-hero > picture,
body.page-framed .site-frame > .page-hero > img {
  order: 2;
  position: relative;
  inset: auto;
  width: 100%;
  height: 280px;
  max-width: none;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: #12161d;
  pointer-events: none;
}
body.page-framed .site-frame > .page-hero > .page-hero__media,
body.page-framed .site-frame > .page-hero > picture {
  display: block;
}
body.page-framed .site-frame > .page-hero > .page-hero__media img,
body.page-framed .site-frame > .page-hero > picture img,
body.page-framed .site-frame > .page-hero > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  border-radius: 0;
}
body.page-framed .site-frame > .page-hero h1,
body.page-framed .site-frame > .page-hero .kicker,
body.page-framed .site-frame > .page-hero .breadcrumb,
body.page-framed .site-frame > .page-hero .breadcrumb a {
  color: #fff !important;
}
body.page-framed .site-frame > .page-hero .kicker {
  color: #8ebfff !important;
}
body.page-framed .site-frame > .page-hero .breadcrumb,
body.page-framed .site-frame > .page-hero .breadcrumb a {
  color: rgba(255, 255, 255, 0.62) !important;
  text-decoration: none;
}
body.page-framed .site-frame > .page-hero h1 {
  margin: 0;
  max-width: 22rem;
  font-size: clamp(2rem, 3.4vw, 3.15rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
}
body.page-framed .site-frame > .page-hero .page-hero-desc,
body.page-framed .site-frame > .page-hero p:not(.kicker):not(.breadcrumb) {
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  max-width: 38rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.72) !important;
  font-size: 1.05rem;
  line-height: 1.5;
}
body.page-framed .site-frame > .page-hero .btn,
body.page-framed .site-frame > .page-hero .btn.white {
  background: #fff !important;
  color: #10141c !important;
  border-color: #fff !important;
  border-radius: 10px;
  min-height: 44px;
}
body.page-framed .site-frame > .page-hero .btn:hover,
body.page-framed .site-frame > .page-hero .btn.white:hover {
  background: #e7eef8 !important;
  color: #10141c !important;
  border-color: #e7eef8 !important;
}
body.page-framed .site-frame > .page-hero .btn.ghost {
  background: transparent !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
}
body.page-framed .site-frame > .page-hero .btn.ghost:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}
body.page-framed .site-frame:has(> .page-hero) > :not(.page-hero) {
  width: min(1360px, calc(100% - 2rem));
  margin-inline: auto;
}
@media (max-width: 860px) {
  body.page-framed .site-frame > .page-hero:has(.page-hero__media),
  body.page-framed .site-frame > .page-hero:has(picture) {
    grid-template-columns: 1fr;
  }
  body.page-framed .site-frame > .page-hero > .page-hero__media,
  body.page-framed .site-frame > .page-hero > picture,
  body.page-framed .site-frame > .page-hero > img {
    order: 0;
    height: 190px;
  }
  body.page-framed .site-frame > .page-hero h1 {
    font-size: clamp(1.7rem, 8vw, 2.2rem);
  }
}