/* ============================================================
   golive-content.css
   Per-Seite-Styles für die golive-fertigstellung-v1-Seiten.
   ALLES scoped auf #hc-XX, keine globalen Leaks.
   Akzentvariation: jeweils zweites Element bekommt Coral statt Cyan.
   ============================================================ */


/* ============================================================
   Shared Mini-Utilities (scoped auf alle hc-* Blöcke,
   ersetzen die `style="margin-top:...;color:..."`-Inlines)
   ============================================================ */

#hc-uu .mt-1, #hc-faq .mt-1, #hc-404 .mt-1, #hc-kon .mt-1 { margin-top: 14px; }
#hc-uu .mt-2, #hc-faq .mt-2, #hc-404 .mt-2, #hc-kon .mt-2 { margin-top: 18px; }
#hc-uu .mt-3, #hc-faq .mt-3, #hc-404 .mt-3, #hc-kon .mt-3 { margin-top: 26px; }

#hc-uu .muted-body, #hc-faq .muted-body, #hc-404 .muted-body, #hc-kon .muted-body {
  color: var(--muted); font-size: 15.5px; line-height: 1.7;
}

#hc-uu .sec-h2, #hc-faq .sec-h2, #hc-404 .sec-h2, #hc-kon .sec-h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(28px, 3.4vw, 40px); margin: 16px 0 0;
  line-height: 1.05; letter-spacing: -.02em;
}
#hc-uu .sec-h2 .grad, #hc-faq .sec-h2 .grad, #hc-404 .sec-h2 .grad, #hc-kon .sec-h2 .grad {
  background: var(--ribbon); -webkit-background-clip: text; background-clip: text; color: transparent;
}

#hc-uu .sec-lead, #hc-faq .sec-lead, #hc-404 .sec-lead, #hc-kon .sec-lead {
  max-width: 42ch;
}

#hc-uu .eyebrow-center, #hc-faq .eyebrow-center, #hc-404 .eyebrow-center, #hc-kon .eyebrow-center {
  display: flex;
  justify-content: center;
}

#hc-uu .text-center, #hc-faq .text-center, #hc-404 .text-center, #hc-kon .text-center {
  text-align: center;
}





/* ============================================================
   #hc-uu — Über uns
   ============================================================ */

#hc-uu .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-uu .crumb a:hover{color:var(--primary);}
#hc-uu .crumb .sep{opacity:.5;}
#hc-uu .crumb .here{color:var(--muted);}

#hc-uu .ab-hero{padding:48px 0 56px;min-height:586px;display:flex;flex-direction:column;justify-content:center;background:var(--hero-grad);background-attachment:fixed;}
@media(max-width:1080px){#hc-uu .ab-hero{min-height:0;background-attachment:scroll;}}
#hc-uu .ab-hero h1{font-size:clamp(38px,5.6vw,72px);line-height:.97;letter-spacing:-.025em;margin-top:18px;}
#hc-uu .ab-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-uu .ab-hero .lead{font-size:18px;color:var(--muted);max-width:54ch;margin:24px 0 30px;line-height:1.65;}
#hc-uu .ab-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:center;}
#hc-uu .hero-cta{display:flex;gap:10px;flex-wrap:wrap;}

#hc-uu .ab-portrait{position:relative;height:480px;display:grid;place-items:center;}
#hc-uu .ab-portrait::before{
  content:"";position:absolute;inset:-6% -10%;
  background:radial-gradient(circle at 60% 45%, color-mix(in srgb,var(--primary) 38%,transparent), transparent 65%);
  filter:blur(36px);z-index:0;
}
#hc-uu .pframe{
  position:relative;z-index:2;width:78%;max-width:380px;aspect-ratio:4/5;border-radius:var(--r-xl);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft), 0 36px 80px -30px rgba(0,0,0,.4);
  overflow:hidden;display:grid;place-items:end;padding:24px;
}
#hc-uu .pframe image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
#hc-uu .ptag{
  position:absolute;top:18px;left:18px;z-index:3;
  background:var(--card);border-radius:var(--r-pill);padding:7px 12px;
  font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text);
  box-shadow:0 6px 18px -10px rgba(0,0,0,.5);
}
#hc-uu .pname{
  position:relative;z-index:3;background:color-mix(in srgb,var(--brand-navy) 86%,transparent);
  color:#fff;backdrop-filter:blur(8px);
  padding:14px 18px;border-radius:var(--r-md);width:100%;
}
#hc-uu .pname b{font-family:var(--font-display);font-size:18px;display:block;}
#hc-uu .pname span{font-size:12px;opacity:.8;}
#hc-uu .floater{
  position:absolute;z-index:3;background:var(--card);border-radius:var(--r-md);
  padding:10px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-soft), 0 18px 40px -20px rgba(0,0,0,.4);
  animation:hcUuFloat 6s ease-in-out infinite;
}
#hc-uu .floater.f1{top:6%;right:0;}
#hc-uu .floater.f2{bottom:14%;left:-4%;animation-delay:-3s;}
#hc-uu .floater svg{color:var(--primary);}
#hc-uu .floater:nth-of-type(2) svg{color:var(--accent);}
@keyframes hcUuFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@media(prefers-reduced-motion:reduce){#hc-uu .floater{animation:none;}}

#hc-uu .ab-stats{display:grid;grid-template-columns:repeat(4,auto);gap:30px;padding-top:30px;margin-top:30px;border-top:1px solid var(--border-soft);}
#hc-uu .ab-stat b{font-family:var(--font-display);font-weight:800;font-size:30px;display:block;line-height:1;letter-spacing:-.01em;}
#hc-uu .ab-stat span{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.14em;margin-top:6px;display:block;}
/* Marker-Style für nicht-belegte/Platzhalter-Werte */
#hc-uu placeholder[data-real="false"]{
  display:inline-block;font-family:var(--font-display);font-style:normal;
  color:var(--muted);border-bottom:1.5px dashed var(--accent);padding:0 2px;
}
#hc-uu placeholder[data-real="false"]::before{content:"";}

/* story timeline */
#hc-uu .story-grid{display:grid;grid-template-columns:240px 1fr;gap:54px;align-items:start;}
#hc-uu .story-eyebrow{position:sticky;top:120px;}
#hc-uu .yr-big{font-family:var(--font-display);font-weight:800;font-size:64px;line-height:1;margin-top:16px;background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-uu .story-eyebrow p{margin-top:14px;font-size:14px;color:var(--muted);max-width:30ch;line-height:1.6;}

#hc-uu .timeline{display:flex;flex-direction:column;}
#hc-uu .tl-item{display:grid;grid-template-columns:140px 1fr;gap:30px;padding:26px 0;border-top:1px solid var(--border-soft);align-items:flex-start;}
#hc-uu .tl-item:first-child{border-top:none;padding-top:6px;}
#hc-uu .tl-yr{font-family:var(--font-display);font-weight:800;font-size:36px;color:var(--primary);letter-spacing:-.01em;line-height:1;font-feature-settings:"tnum";}
#hc-uu .tl-item:nth-child(even) .tl-yr{color:var(--accent);}
#hc-uu .tl-yr small{display:block;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.12em;margin-top:6px;}
#hc-uu .tl-body h4{font-family:var(--font-display);font-weight:700;font-size:22px;margin:0 0 8px;line-height:1.2;}
#hc-uu .tl-body p{font-size:15px;color:var(--muted);line-height:1.7;}
#hc-uu .tl-body .tag{display:inline-block;margin-top:12px;}

/* values / promises */
#hc-uu .promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
#hc-uu .promise{
  --c:var(--primary);
  background:var(--card);border-radius:var(--r-lg);padding:24px;
  box-shadow:inset 0 0 0 1px var(--border-soft);transition:.25s var(--ease);
  position:relative;overflow:hidden;
}
#hc-uu .promise:nth-child(even){--c:var(--accent);}
#hc-uu .promise:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--c), 0 24px 50px -28px var(--c);}
#hc-uu .promise .pic{
  width:50px;height:50px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);margin-bottom:16px;
}
#hc-uu .promise h4{font-family:var(--font-body);font-weight:700;font-size:17px;margin:0 0 8px;color:var(--text);}
#hc-uu .promise p{font-size:13.5px;color:var(--muted);line-height:1.6;}

/* whatnot/discord band */
#hc-uu .channel-band{
  display:grid;grid-template-columns:1fr 1fr;gap:18px;
}
#hc-uu .channel{
  --c:var(--primary);
  background:var(--card);border-radius:var(--r-lg);padding:28px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:flex-start;
  transition:.25s var(--ease);
}
#hc-uu .channel:nth-child(even){--c:var(--accent);}
#hc-uu .channel:hover{box-shadow:inset 0 0 0 1px var(--c), 0 24px 50px -28px var(--c);transform:translateY(-3px);}
#hc-uu .channel .ic{width:54px;height:54px;border-radius:16px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);display:grid;place-items:center;flex:none;}
#hc-uu .channel h3{font-family:var(--font-display);font-size:22px;margin:0 0 6px;}
#hc-uu .channel p{font-size:14px;color:var(--muted);line-height:1.6;margin:0 0 14px;}
#hc-uu .channel a.cta{
  display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13.5px;
  color:var(--c);text-decoration:none;
}
#hc-uu .channel a.cta:hover{transform:translateX(3px);}

/* about-card / quote */
#hc-uu .quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center;}
#hc-uu .quote-card{
  background:var(--card);border-radius:var(--r-xl);padding:38px;
  box-shadow:inset 0 0 0 1px var(--border-soft), 0 30px 70px -32px rgba(0,0,0,.25);
  position:relative;
}
#hc-uu .quote-mark{position:absolute;top:24px;right:28px;font-family:var(--font-display);font-size:88px;line-height:1;color:var(--accent);opacity:.18;}
#hc-uu .quote-text{font-family:var(--font-display);font-weight:600;font-size:22px;line-height:1.4;color:var(--text);margin:0 0 22px;}
#hc-uu .quote-sig{display:flex;align-items:center;gap:14px;}
#hc-uu .quote-sig .av{width:46px;height:46px;border-radius:50%;background:var(--ribbon);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:18px;}
#hc-uu .quote-sig b{display:block;font-family:var(--font-display);font-size:15px;}
#hc-uu .quote-sig span{font-size:12.5px;color:var(--muted);}

/* CTA-Strip */
#hc-uu .uu-cta{
  text-align:center;background:var(--surface);border-radius:var(--r-xl);padding:48px 30px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
}
#hc-uu .uu-cta h2{font-size:clamp(28px,3.4vw,44px);margin:0;}
#hc-uu .uu-cta .lead{color:var(--muted);max-width:50ch;margin:14px auto 22px;font-size:16px;line-height:1.6;}
#hc-uu .uu-cta .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

@media(max-width:1080px){
  #hc-uu .ab-hero-grid{grid-template-columns:1fr;gap:40px;}
  #hc-uu .ab-portrait{height:380px;order:-1;}
  #hc-uu .story-grid{grid-template-columns:1fr;gap:30px;}
  #hc-uu .story-eyebrow{position:static;}
  #hc-uu .promise-grid{grid-template-columns:repeat(2,1fr);}
  #hc-uu .channel-band{grid-template-columns:1fr;}
  #hc-uu .quote-grid{grid-template-columns:1fr;gap:30px;}
  #hc-uu .ab-stats{grid-template-columns:repeat(2,auto);gap:22px;}
}
@media(max-width:640px){
  #hc-uu .tl-item{grid-template-columns:1fr;gap:8px;}
  #hc-uu .promise-grid{grid-template-columns:1fr;}
}


/* ============================================================
   #hc-faq — FAQ
   ============================================================ */

#hc-faq .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-faq .crumb a:hover{color:var(--primary);}
#hc-faq .crumb .sep{opacity:.5;}
#hc-faq .crumb .here{color:var(--muted);}

#hc-faq .faq-hero{padding:38px 0 34px;}
#hc-faq .faq-hero h1{font-size:clamp(34px,5vw,60px);margin-top:14px;line-height:1.02;letter-spacing:-.02em;}
#hc-faq .faq-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-faq .faq-hero .lead{max-width:60ch;margin-top:18px;font-size:17px;color:var(--muted);line-height:1.65;}

/* search */
#hc-faq .faq-search{
  display:flex;align-items:center;gap:10px;
  background:var(--surface);border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--border);
  padding:8px 8px 8px 20px;margin-top:26px;max-width:560px;
}
#hc-faq .faq-search svg{color:var(--dim);flex:none;}
#hc-faq .faq-search input{
  flex:1;border:none;background:transparent;outline:none;height:42px;
  font-family:var(--font-body);font-size:15px;color:var(--text);
}
#hc-faq .faq-search input::placeholder{color:var(--dim);}
#hc-faq .faq-search .clr{
  width:40px;height:40px;border-radius:50%;color:var(--dim);
  display:none;place-items:center;background:var(--card-hi);
}
#hc-faq .faq-search.has-q .clr{display:grid;}
#hc-faq .faq-search.has-q .clr:hover{color:var(--primary);}

#hc-faq .faq-meta{
  display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);
}
#hc-faq .faq-meta b{color:var(--text);}

/* topic chips */
#hc-faq .topic-strip{
  display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin:36px 0 0;
}
@media(max-width:1080px){#hc-faq .topic-strip{grid-template-columns:repeat(3,1fr);}}
@media(max-width:560px){#hc-faq .topic-strip{grid-template-columns:1fr;}}
#hc-faq .topic{
  --c:var(--primary);
  display:flex;align-items:center;gap:14px;padding:18px 18px;
  background:var(--surface);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);
  text-decoration:none;color:inherit;transition:.22s var(--ease);
}
#hc-faq .topic:nth-child(even){--c:var(--accent);}
#hc-faq .topic:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--c), 0 18px 40px -26px var(--c);}
#hc-faq .topic .ic{
  width:44px;height:44px;border-radius:13px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);
}
#hc-faq .topic b{display:block;font-size:14.5px;color:var(--text);font-weight:700;}
#hc-faq .topic span{font-size:12.5px;color:var(--muted);}

/* category groups */
#hc-faq .faq-group{--c:var(--primary);padding:36px 0;border-top:1px solid var(--border-soft);scroll-margin-top:100px;}
#hc-faq .faq-group:nth-of-type(even){--c:var(--accent);}
#hc-faq .faq-group:first-of-type{border-top:none;padding-top:0;}
#hc-faq .faq-group h2{
  font-family:var(--font-display);font-weight:800;font-size:clamp(24px,2.6vw,32px);
  margin:0 0 4px;display:flex;align-items:center;gap:14px;letter-spacing:-.01em;
}
#hc-faq .faq-group h2 .gn{
  width:38px;height:38px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);
  font-family:var(--font-display);font-weight:800;font-size:15px;
}
#hc-faq .faq-group .gsub{color:var(--muted);font-size:14.5px;margin:0 0 18px;padding-left:52px;}

/* accordion */
#hc-faq .faq-acc{display:flex;flex-direction:column;}
#hc-faq .qa{
  background:var(--card);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  margin-bottom:10px;overflow:hidden;
  transition:box-shadow .22s var(--ease);
}
#hc-faq .qa[open]{box-shadow:inset 0 0 0 1px var(--c), 0 18px 40px -28px var(--c);}
#hc-faq .qa summary{
  display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;
  list-style:none;font-size:15.5px;font-weight:600;color:var(--text);line-height:1.4;
}
#hc-faq .qa summary::-webkit-details-marker{display:none;}
#hc-faq .qa .qi{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--border-soft);
  display:grid;place-items:center;color:var(--muted);
  transition:.25s var(--ease);font-weight:800;
}
#hc-faq .qa[open] summary .qi{background:var(--c);color:var(--primary-ink);transform:rotate(45deg);box-shadow:none;}
#hc-faq .qa-body{
  padding:0 22px 22px 66px;color:var(--muted);font-size:14.5px;line-height:1.7;
}
#hc-faq .qa-body p{margin:0 0 10px;}
#hc-faq .qa-body p:last-child{margin-bottom:0;}
#hc-faq .qa-body ul{margin:6px 0 10px;padding-left:18px;list-style:none;}
#hc-faq .qa-body ul li{position:relative;padding-left:14px;margin-bottom:6px;}
#hc-faq .qa-body ul li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:var(--c);}
#hc-faq .qa-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
#hc-faq .qa-body strong,#hc-faq .qa-body b{color:var(--text);font-weight:700;}

#hc-faq .nores{padding:40px 24px;text-align:center;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);display:none;}
#hc-faq .nores.show{display:block;}
#hc-faq .nores h4{font-size:18px;margin:0 0 8px;}
#hc-faq .nores p{color:var(--muted);font-size:14.5px;margin:0 0 14px;}

#hc-faq .faq-help{
  background:var(--hero-grad);border-radius:var(--r-xl);padding:38px 30px;text-align:center;
  box-shadow:inset 0 0 0 1px var(--border-soft);margin-top:30px;
}
#hc-faq .faq-help h3{font-size:clamp(22px,2.6vw,30px);margin:0 0 8px;}
#hc-faq .faq-help p{color:var(--muted);margin:0 auto 20px;max-width:48ch;font-size:15px;line-height:1.6;}
#hc-faq .faq-help-row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}
#hc-faq .faq-body-wrap{max-width:880px;margin:0 auto;}


/* ============================================================
   #hc-404 — 404
   ============================================================ */

#hc-404 .nf-shell{
  min-height:calc(100vh - 200px);
  display:flex;align-items:center;justify-content:center;
  padding:60px 0 80px;background:var(--hero-grad);
  position:relative;overflow:hidden;
}
#hc-404 .nf-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;max-width:1100px;width:100%;}
@media(max-width:980px){#hc-404 .nf-grid{grid-template-columns:1fr;gap:30px;text-align:center;}}

#hc-404 .nf-copy .eyebrow{justify-content:flex-start;}
@media(max-width:980px){#hc-404 .nf-copy .eyebrow{justify-content:center;}}
#hc-404 .nf-num{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(110px,18vw,200px);line-height:.85;letter-spacing:-.06em;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
  margin:18px 0 6px;
}
#hc-404 h1{font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.02em;margin:0;}
#hc-404 h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-404 .nf-copy p{color:var(--muted);font-size:16px;line-height:1.6;max-width:48ch;margin:14px 0 24px;}
@media(max-width:980px){#hc-404 .nf-copy p{margin-left:auto;margin-right:auto;}}

#hc-404 .nf-search{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--border);
  padding:6px 6px 6px 20px;max-width:480px;
}
@media(max-width:980px){#hc-404 .nf-search{margin:0 auto;}}
#hc-404 .nf-search svg{color:var(--dim);flex:none;}
#hc-404 .nf-search input{
  flex:1;border:none;background:transparent;outline:none;height:46px;
  font-family:var(--font-body);font-size:15px;color:var(--text);
}
#hc-404 .nf-search input::placeholder{color:var(--dim);}
#hc-404 .nf-search button{
  padding:0 22px;height:46px;border-radius:var(--r-pill);
  background:var(--primary);color:var(--primary-ink);font-weight:700;font-size:14px;
  display:inline-flex;align-items:center;gap:7px;transition:.2s;border:none;cursor:pointer;
}
#hc-404 .nf-search button:hover{transform:translateY(-2px);}

#hc-404 .nf-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px;}
@media(max-width:980px){#hc-404 .nf-cta{justify-content:center;}}

/* mascot scene */
#hc-404 .nf-scene{position:relative;height:480px;display:grid;place-items:center;}
@media(max-width:980px){#hc-404 .nf-scene{height:320px;}}
#hc-404 .nf-scene::before{
  content:"";position:absolute;inset:-12% -8%;
  background:radial-gradient(circle at 50% 45%, color-mix(in srgb,var(--primary) 36%,transparent), transparent 60%);
  filter:blur(40px);z-index:0;
}
#hc-404 .nf-island{position:relative;width:300px;height:300px;z-index:2;display:grid;place-items:end center;}
#hc-404 .nf-island image-slot{
  position:relative;z-index:3;width:80%;aspect-ratio:1/1;display:block;
  filter:drop-shadow(0 30px 30px rgba(0,0,0,.3));
  animation:hc404Floaty 4s ease-in-out infinite;
}
@keyframes hc404Floaty{0%,100%{transform:translateY(0) rotate(-3deg);}50%{transform:translateY(-14px) rotate(3deg);}}
@media(prefers-reduced-motion:reduce){#hc-404 .nf-island image-slot{animation:none;}}
#hc-404 .nf-base{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:280px;height:60px;border-radius:50%;
  background:radial-gradient(ellipse at center, color-mix(in srgb,var(--primary) 30%,transparent), transparent 70%);
  filter:blur(8px);z-index:1;
}
#hc-404 .nf-card{
  --c:var(--primary);
  position:absolute;background:var(--card);border-radius:var(--r-md);
  padding:11px 14px;font-size:13px;font-weight:600;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-soft), 0 18px 40px -20px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:9px;z-index:4;
}
#hc-404 .nf-card svg{color:var(--c);}
#hc-404 .nf-card.c1{top:12%;left:-4%;animation:hc404Floaty 6s ease-in-out infinite;}
#hc-404 .nf-card.c2{bottom:18%;right:-4%;animation:hc404Floaty 7s ease-in-out infinite reverse;animation-delay:-2s;--c:var(--accent);}
#hc-404 .nf-card.c3{top:42%;right:12%;animation:hc404Floaty 5.5s ease-in-out infinite;animation-delay:-3s;}
#hc-404 .nf-spark{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--primary);box-shadow:0 0 16px 4px color-mix(in srgb,var(--primary) 50%,transparent);z-index:2;}
#hc-404 .nf-spark.s1{top:18%;right:22%;animation:hc404Twinkle 2.4s ease-in-out infinite;}
#hc-404 .nf-spark.s2{bottom:30%;left:18%;animation:hc404Twinkle 2.4s ease-in-out infinite;animation-delay:.8s;width:5px;height:5px;background:var(--accent);box-shadow:0 0 16px 4px color-mix(in srgb,var(--accent) 50%,transparent);}
#hc-404 .nf-spark.s3{top:62%;right:8%;animation:hc404Twinkle 2.4s ease-in-out infinite;animation-delay:1.6s;width:6px;height:6px;}
@keyframes hc404Twinkle{0%,100%{opacity:.3;transform:scale(.7);}50%{opacity:1;transform:scale(1.2);}}

/* discord band — own row below hero */
#hc-404 .nf-discord{
  margin:0 auto;max-width:880px;
  background:var(--card);border-radius:var(--r-xl);padding:26px 30px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
  display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;
}
#hc-404 .nf-discord .ic{
  width:54px;height:54px;border-radius:16px;background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);
  display:grid;place-items:center;flex:none;
}
#hc-404 .nf-discord h3{font-family:var(--font-display);font-size:20px;margin:0 0 4px;}
#hc-404 .nf-discord p{margin:0;font-size:14px;color:var(--muted);}
@media(max-width:720px){
  #hc-404 .nf-discord{grid-template-columns:1fr;text-align:center;}
  #hc-404 .nf-discord .ic{margin:0 auto;}
}

/* popular links */
#hc-404 .nf-popular{padding:50px 0 60px;}
#hc-404 .nf-pop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:24px;}
@media(max-width:980px){#hc-404 .nf-pop-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:480px){#hc-404 .nf-pop-grid{grid-template-columns:1fr;}}
#hc-404 .nf-pop{
  --c:var(--primary);
  display:flex;align-items:center;gap:14px;padding:18px 18px;
  background:var(--surface);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border-soft);
  text-decoration:none;color:inherit;transition:.22s var(--ease);
}
#hc-404 .nf-pop:nth-child(even){--c:var(--accent);}
#hc-404 .nf-pop:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--c),0 18px 40px -26px var(--c);}
#hc-404 .nf-pop .ic{width:42px;height:42px;border-radius:12px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);}
#hc-404 .nf-pop b{display:block;font-size:14.5px;color:var(--text);font-weight:700;}
#hc-404 .nf-pop span{font-size:12.5px;color:var(--muted);}


/* ============================================================
   #hc-kon — Kontakt-Karten-Block
   (wird ABOVE das JTL-Pflicht-Formular auf nLinkart=13 injiziert)
   ============================================================ */

#hc-kon{padding:40px 0 30px;}
#hc-kon .kon-head{margin:0 auto 26px;max-width:680px;text-align:center;}
#hc-kon .kon-head .eyebrow{justify-content:center;}
#hc-kon .kon-head h2{font-family:var(--font-display);font-weight:800;font-size:clamp(26px,3.2vw,38px);margin:14px 0 12px;line-height:1.05;letter-spacing:-.02em;}
#hc-kon .kon-head h2 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-kon .kon-head p{margin:0 auto;max-width:54ch;font-size:15.5px;line-height:1.65;color:var(--muted);}

#hc-kon .kon-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  max-width:1100px;margin:0 auto;
}
@media(max-width:1080px){#hc-kon .kon-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:520px){#hc-kon .kon-grid{grid-template-columns:1fr;}}

#hc-kon .kon-card{
  --c:var(--primary);
  position:relative;
  background:var(--card);border-radius:var(--r-lg);padding:24px 22px 22px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
  text-decoration:none;color:inherit;
  display:flex;flex-direction:column;gap:14px;
  transition:.22s var(--ease);
}
#hc-kon .kon-card:nth-child(even){--c:var(--accent);}
#hc-kon .kon-card:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--c), 0 24px 50px -28px var(--c);
}
#hc-kon .kon-card .ic{
  width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c);
  transition:.22s var(--ease);
}
#hc-kon .kon-card:hover .ic{background:var(--c);color:var(--primary-ink);}
#hc-kon .kon-card .kon-label{font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--c);}
#hc-kon .kon-card h3{font-family:var(--font-display);font-weight:700;font-size:19px;margin:0;line-height:1.15;letter-spacing:-.01em;}
#hc-kon .kon-card p{margin:0;font-size:13.5px;color:var(--muted);line-height:1.55;}
#hc-kon .kon-card .meta{
  margin-top:auto;display:flex;align-items:center;gap:8px;
  font-size:12.5px;color:var(--text);font-weight:600;
}
#hc-kon .kon-card .meta .dot{width:7px;height:7px;border-radius:50%;background:var(--c);}
#hc-kon .kon-card .arr{
  position:absolute;top:22px;right:22px;color:var(--dim);transition:.2s var(--ease);
}
#hc-kon .kon-card:hover .arr{color:var(--c);transform:translate(2px,-2px);}

#hc-kon .kon-foot{
  margin:24px auto 0;max-width:780px;
  display:flex;gap:10px;justify-content:center;align-items:center;
  font-size:13px;color:var(--muted);flex-wrap:wrap;text-align:center;
}
#hc-kon .kon-foot b{color:var(--text);}
#hc-kon .kon-foot .sep{opacity:.5;}

/* Hinweis-Strip nur in Standalone-Preview sichtbar */
#hc-kon[data-preview="standalone"] + .kon-preview-note{
  max-width:720px;margin:18px auto 0;padding:14px 18px;
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border-radius:var(--r-md);font-size:13px;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);
}


/* ============================================================
   #hc-srch — Suche
   ============================================================ */

#hc-srch .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-srch .crumb a:hover{color:var(--primary);}
#hc-srch .crumb .sep{opacity:.5;}
#hc-srch .crumb .here{color:var(--muted);}

#hc-srch .sr-hero{padding:34px 0 0;position:relative;}
#hc-srch .sr-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ribbon);opacity:.45;}
#hc-srch .sr-hero h1{font-size:clamp(28px,3.6vw,42px);line-height:1.05;letter-spacing:-.02em;margin:8px 0 0;}
#hc-srch .sr-hero h1 .q{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}

#hc-srch .sr-bar{
  display:flex;align-items:center;gap:10px;
  background:var(--card);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--border);
  padding:6px 6px 6px 20px;max-width:680px;margin:22px 0 4px;
}
#hc-srch .sr-bar svg{color:var(--dim);flex:none;}
#hc-srch .sr-bar input{flex:1;border:none;background:transparent;outline:none;height:50px;font-family:var(--font-body);font-size:15.5px;color:var(--text);}
#hc-srch .sr-bar input::placeholder{color:var(--dim);}
#hc-srch .sr-bar button{padding:0 22px;height:50px;border-radius:var(--r-pill);background:var(--primary);color:var(--primary-ink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:7px;border:none;cursor:pointer;transition:.2s;}
#hc-srch .sr-bar button:hover{transform:translateY(-2px);}

#hc-srch .sr-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);padding:18px 0 22px;}
#hc-srch .sr-meta b{color:var(--text);}
#hc-srch .sr-meta a.reset{color:var(--primary);font-weight:600;}

#hc-srch .sr-tabs{display:flex;gap:6px;border-bottom:1px solid var(--border-soft);margin:14px 0 22px;flex-wrap:wrap;}
#hc-srch .sr-tabs button{padding:14px 18px;font-weight:700;font-size:14.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s;background:none;border:0;border-bottom:2px solid transparent;display:inline-flex;align-items:center;gap:10px;cursor:pointer;}
#hc-srch .sr-tabs button.on{color:var(--text);border-color:var(--primary);}
#hc-srch .sr-tabs button .b{font-size:11px;font-weight:700;background:var(--surface-2);padding:2px 9px;border-radius:var(--r-pill);color:var(--dim);font-feature-settings:"tnum";}
#hc-srch .sr-tabs button.on .b{background:var(--primary);color:var(--primary-ink);}

#hc-srch .sr-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px;}
#hc-srch .sr-chips .c{padding:8px 14px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.18s;border:none;}
#hc-srch .sr-chips .c:hover{color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);}
#hc-srch .sr-chips .c.on{background:var(--primary);color:var(--primary-ink);box-shadow:none;}

#hc-srch .sr-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:1080px){#hc-srch .sr-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){#hc-srch .sr-grid{grid-template-columns:repeat(2,1fr);}}

#hc-srch .sr-suggest{
  background:color-mix(in srgb,var(--primary) 8%,var(--card));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--primary) 26%,transparent);
  border-radius:var(--r-md);padding:14px 18px;margin-bottom:22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;color:var(--text);
}
#hc-srch .sr-suggest svg{color:var(--primary);flex:none;}
#hc-srch .sr-suggest a{color:var(--primary);font-weight:700;text-decoration:underline;text-underline-offset:2px;}

#hc-srch .sr-empty{
  text-align:center;padding:50px 24px;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border-soft);max-width:560px;margin:0 auto;
}
#hc-srch .sr-empty image-slot{width:120px;height:120px;margin:0 auto 14px;display:block;}
#hc-srch .sr-empty h3{font-size:22px;margin:0 0 8px;font-family:var(--font-display);font-weight:800;letter-spacing:-.015em;}
#hc-srch .sr-empty p{color:var(--muted);max-width:42ch;margin:0 auto 18px;font-size:14.5px;line-height:1.55;}
#hc-srch .sr-empty .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

#hc-srch .sr-sets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
@media(max-width:980px){#hc-srch .sr-sets{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#hc-srch .sr-sets{grid-template-columns:1fr;}}
#hc-srch .sr-set{
  --c:var(--primary);
  display:flex;align-items:center;gap:14px;padding:18px;
  background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border-soft);
  text-decoration:none;color:inherit;transition:.22s var(--ease);
}
#hc-srch .sr-set:nth-child(even){--c:var(--accent);}
#hc-srch .sr-set:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--c),0 18px 40px -26px var(--c);}
#hc-srch .sr-set .logo{width:60px;height:60px;border-radius:14px;flex:none;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;}
#hc-srch .sr-set .logo image-slot{width:100%;height:100%;display:block;}
#hc-srch .sr-set b{display:block;font-size:14.5px;color:var(--text);font-weight:700;line-height:1.25;}
#hc-srch .sr-set span{font-size:12.5px;color:var(--muted);}

#hc-srch .sr-help{display:flex;flex-direction:column;gap:10px;}
#hc-srch .sr-help a{display:flex;align-items:flex-start;gap:14px;padding:16px 20px;background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1px var(--border-soft);text-decoration:none;color:inherit;transition:.18s;}
#hc-srch .sr-help a:hover{box-shadow:inset 0 0 0 1px var(--primary);}
#hc-srch .sr-help .ic{width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);}
#hc-srch .sr-help b{display:block;font-size:14.5px;color:var(--text);font-weight:700;}
#hc-srch .sr-help span{font-size:13px;color:var(--muted);line-height:1.45;}
#hc-srch .sr-help b mark, #hc-srch .sr-help span mark{background:color-mix(in srgb,var(--primary) 22%,transparent);color:var(--text);font-weight:700;padding:0 2px;border-radius:3px;}

#hc-srch .sr-pane{display:none;}
#hc-srch .sr-pane.on{display:block;}


/* ============================================================
   #hc-brand — Marken-Detailseite-Template
   Generisch verwendbar; Beispiel-Daten = Pokémon.
   Live: Init via initListing (custom.js) + ready()-Array.
   ============================================================ */

#hc-brand .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-brand .crumb a:hover{color:var(--primary);}
#hc-brand .crumb .sep{opacity:.5;}
#hc-brand .crumb .here{color:var(--muted);}

#hc-brand .bd-hero{padding:42px 0 36px;background:var(--hero-grad);}
#hc-brand .bd-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
@media(max-width:1080px){#hc-brand .bd-hero-grid{grid-template-columns:1fr;gap:30px;}}
#hc-brand .bd-hero h1{font-size:clamp(36px,5.4vw,68px);line-height:.98;letter-spacing:-.025em;margin-top:18px;}
#hc-brand .bd-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-brand .bd-hero .lead{font-size:17px;color:var(--muted);max-width:54ch;margin:22px 0 28px;line-height:1.65;}

/* Brand-Logo-Slot oben links im Hero (Image-Slot, KEIN Hardcoded-Logo wegen IP-Regel §8) */
#hc-brand .bd-brandline{display:inline-flex;align-items:center;gap:14px;}
#hc-brand .bd-brandlogo{
  width:54px;height:54px;border-radius:14px;
  background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft);
  overflow:hidden;flex:none;
}
#hc-brand .bd-brandlogo image-slot{width:100%;height:100%;display:block;}

/* Quick-Filter unter dem H1 */
#hc-brand .bd-quick{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 22px;}
#hc-brand .bd-quick button{
  --c:var(--primary);
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:var(--r-pill);
  background:var(--card);box-shadow:inset 0 0 0 1.5px var(--border);
  font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--text);
  border:none;cursor:pointer;transition:.2s var(--ease);
}
#hc-brand .bd-quick button:nth-child(even){--c:var(--accent);}
#hc-brand .bd-quick button:hover{box-shadow:inset 0 0 0 1.5px var(--c);color:var(--c);}
#hc-brand .bd-quick button .qd{width:8px;height:8px;border-radius:50%;background:var(--c);}

/* Hero Stats */
#hc-brand .bd-stats{display:flex;gap:30px;padding-top:22px;margin-top:22px;border-top:1px solid var(--border-soft);}
#hc-brand .bd-stat b{font-family:var(--font-display);font-weight:800;font-size:28px;display:block;line-height:1;letter-spacing:-.01em;}
#hc-brand .bd-stat .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-brand .bd-stat span{font-size:12px;font-weight:600;color:var(--dim);text-transform:uppercase;letter-spacing:.14em;margin-top:6px;display:block;}

/* Hero-Visual: 3 Holo-Cards fan (Image-Slots) */
#hc-brand .bd-visual{position:relative;height:480px;display:grid;place-items:center;}
@media(max-width:1080px){#hc-brand .bd-visual{height:360px;}}
#hc-brand .bd-visual::before{
  content:"";position:absolute;inset:-8% -10%;
  background:radial-gradient(circle at 55% 45%, color-mix(in srgb,var(--primary) 30%,transparent), transparent 60%);
  filter:blur(36px);z-index:0;
}
#hc-brand .bd-card{
  position:absolute;width:38%;max-width:200px;aspect-ratio:63/88;border-radius:16px;
  background:var(--card);box-shadow:inset 0 0 0 1.5px var(--border-soft), 0 30px 60px -24px rgba(0,0,0,.4);
  overflow:hidden;
}
#hc-brand .bd-card image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
#hc-brand .bd-card.l{left:8%;top:24%;transform:rotateZ(-8deg);}
#hc-brand .bd-card.m{left:50%;top:48%;transform:translate(-50%,-50%) rotateZ(2deg);z-index:2;width:42%;max-width:230px;}
#hc-brand .bd-card.r{right:8%;bottom:18%;transform:rotateZ(8deg);}

/* Set-Ribbon (§10 Inventar Markup-Vertrag) */
#hc-brand .bd-ribbon-section{padding:18px 0 22px;}
#hc-brand .bd-ribbon{display:flex;gap:10px;overflow-x:auto;padding:4px 4px 14px;scroll-snap-type:x mandatory;-ms-overflow-style:none;scrollbar-width:none;}
#hc-brand .bd-ribbon::-webkit-scrollbar{display:none;}
#hc-brand .set-tile{
  flex:none;min-width:140px;width:160px;scroll-snap-align:start;
  background:var(--card);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  padding:14px 14px 12px;text-align:center;cursor:pointer;
  transition:.22s var(--ease);position:relative;border:none;
}
#hc-brand .set-tile:hover{box-shadow:inset 0 0 0 1px var(--primary), 0 18px 38px -24px color-mix(in srgb,var(--primary) 60%,transparent);transform:translateY(-2px);}
#hc-brand .set-tile.is-on{box-shadow:inset 0 0 0 2px var(--primary),0 18px 38px -24px color-mix(in srgb,var(--primary) 60%,transparent);}
#hc-brand .set-badge{
  position:absolute;top:8px;right:8px;font-size:9.5px;font-weight:800;letter-spacing:.08em;
  padding:3px 7px;border-radius:6px;text-transform:uppercase;
}
#hc-brand .set-badge.b-new{background:var(--primary);color:var(--primary-ink);}
#hc-brand .set-badge.b-pre{background:var(--accent);color:#fff;}
#hc-brand .set-logo{height:54px;display:grid;place-items:center;margin-bottom:8px;background:var(--surface-2);border-radius:8px;overflow:hidden;}
#hc-brand .set-logo image-slot{width:100%;height:100%;display:block;}
#hc-brand .set-name{font-family:var(--font-display);font-weight:700;font-size:12.5px;color:var(--text);line-height:1.2;}
#hc-brand .set-date{font-size:10.5px;color:var(--muted);margin-top:4px;letter-spacing:.04em;}

/* Body-Layout: Sidebar + Grid */
#hc-brand .bd-body{display:grid;grid-template-columns:280px 1fr;gap:28px;align-items:flex-start;padding:18px 0 40px;}
@media(max-width:980px){#hc-brand .bd-body{grid-template-columns:1fr;}}

/* Filter-Sidebar */
#hc-brand .bd-side{
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  padding:20px 22px;
  position:sticky;top:96px;
  max-height:calc(100vh - 110px);overflow-y:auto;
}
@media(max-width:980px){#hc-brand .bd-side{position:static;max-height:none;}}
#hc-brand .bd-side .fgroup{padding:14px 0;border-top:1px solid var(--border-soft);}
#hc-brand .bd-side .fgroup:first-child{border-top:none;padding-top:0;}
#hc-brand .bd-side .fgroup h4{font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;}
#hc-brand .bd-side label{
  display:flex;align-items:center;gap:10px;padding:6px 0;font-size:14px;color:var(--text);cursor:pointer;
}
#hc-brand .bd-side input[type=radio], #hc-brand .bd-side input[type=checkbox]{
  accent-color:var(--primary);width:16px;height:16px;
}
#hc-brand .bd-side .count{margin-left:auto;font-size:11px;color:var(--dim);font-feature-settings:"tnum";}

/* Product-Grid (Vertrag §11 Inventar) */
#hc-brand .bd-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;}
@media(max-width:1280px){#hc-brand .bd-grid{grid-template-columns:repeat(3,1fr);}}
@media(max-width:760px){#hc-brand .bd-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:440px){#hc-brand .bd-grid{grid-template-columns:1fr;}}

#hc-brand .prod{
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  text-decoration:none;color:inherit;display:flex;flex-direction:column;
  transition:.22s var(--ease);overflow:hidden;position:relative;
}
#hc-brand .prod:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--primary),0 24px 50px -28px var(--primary);}
#hc-brand .prod .pim{position:relative;aspect-ratio:1/1;background:var(--surface-2);}
#hc-brand .prod .pim image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
#hc-brand .prod .ptag{
  position:absolute;top:10px;left:10px;font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:6px;background:var(--primary);color:var(--primary-ink);
}
#hc-brand .prod[data-availability="vorbestellung"] .ptag{background:var(--accent);color:#fff;}
#hc-brand .prod[data-availability="ausverkauft"] .ptag{background:var(--card-hi);color:var(--muted);}
#hc-brand .prod .pbody{padding:14px 16px 18px;display:flex;flex-direction:column;gap:6px;flex:1;}
#hc-brand .prod h3{font-family:var(--font-body);font-weight:700;font-size:14.5px;color:var(--text);margin:0;line-height:1.25;}
#hc-brand .prod .pmeta{display:flex;gap:8px;font-size:11.5px;color:var(--muted);font-weight:600;letter-spacing:.03em;}
#hc-brand .prod .pmeta span{padding:2px 7px;border-radius:6px;background:var(--card-hi);}
#hc-brand .prod .pprice{margin-top:auto;font-family:var(--font-display);font-weight:800;font-size:18px;color:var(--primary);}

#hc-brand .bd-grid-empty{
  grid-column:1/-1;
  text-align:center;padding:50px 24px;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border-soft);
}
#hc-brand .bd-grid-empty h3{font-family:var(--font-display);font-weight:800;font-size:20px;margin:0 0 8px;}
#hc-brand .bd-grid-empty p{color:var(--muted);font-size:14.5px;margin:0 0 16px;}


/* ============================================================
   #hc-nl — Newsletter-Landingpage
   ============================================================ */

#hc-nl .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-nl .crumb a:hover{color:var(--primary);}
#hc-nl .crumb .sep{opacity:.5;}
#hc-nl .crumb .here{color:var(--muted);}

#hc-nl .nl-hero{padding:48px 0 50px;min-height:586px;display:flex;flex-direction:column;justify-content:center;background:var(--hero-grad);}
@media(max-width:1080px){#hc-nl .nl-hero{min-height:0;}}
#hc-nl .nl-hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center;}
@media(max-width:1080px){#hc-nl .nl-hero-grid{grid-template-columns:1fr;gap:30px;}}
#hc-nl .nl-hero h1{font-size:clamp(38px,5.4vw,68px);line-height:.98;letter-spacing:-.025em;margin-top:18px;}
#hc-nl .nl-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-nl .nl-hero .lead{font-size:18px;color:var(--muted);max-width:46ch;margin:22px 0 26px;line-height:1.6;}

/* Form-Card */
#hc-nl .nl-form-card{
  background:var(--card);border-radius:var(--r-xl);padding:28px;
  box-shadow:inset 0 0 0 1px var(--border-soft), 0 30px 70px -30px color-mix(in srgb,var(--primary) 25%,transparent);
  max-width:520px;
}
#hc-nl .nl-form-card h3{font-family:var(--font-display);font-weight:800;font-size:22px;margin:0 0 4px;letter-spacing:-.01em;}
#hc-nl .nl-form-card .eyebrow{margin-bottom:14px;}
#hc-nl .nl-form-row{display:flex;gap:8px;}
#hc-nl .nl-form-row input{
  flex:1;background:var(--surface);border:none;border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px var(--border);
  padding:0 18px;height:52px;font-family:var(--font-body);font-size:15px;color:var(--text);outline:none;transition:.18s;
}
#hc-nl .nl-form-row input:focus{box-shadow:inset 0 0 0 2px var(--primary), 0 0 0 4px color-mix(in srgb,var(--primary) 14%,transparent);}
#hc-nl .nl-form-row button{
  padding:0 24px;height:52px;border-radius:var(--r-pill);
  background:var(--primary);color:var(--primary-ink);font-family:var(--font-body);font-weight:700;font-size:15px;
  box-shadow:var(--glow);transition:.2s;display:inline-flex;align-items:center;gap:8px;border:none;cursor:pointer;
}
#hc-nl .nl-form-row button:hover{transform:translateY(-2px);}

#hc-nl .nl-prefs{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px;}
#hc-nl .nl-pref{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-soft);font-size:12.5px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;}
#hc-nl .nl-pref input{display:none;}
#hc-nl .nl-pref:has(input:checked){background:color-mix(in srgb,var(--primary) 16%,var(--surface));color:var(--primary);box-shadow:inset 0 0 0 1px var(--primary);}
#hc-nl .nl-pref:hover{color:var(--text);}

/* DOI-Hinweis */
#hc-nl .nl-doi{
  margin-top:20px;padding:14px 16px;
  background:color-mix(in srgb,var(--accent) 8%,var(--card));
  border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--accent) 35%,transparent);
  font-size:12.5px;color:var(--text);line-height:1.55;
  display:flex;gap:10px;align-items:flex-start;
}
#hc-nl .nl-doi svg{flex:none;color:var(--accent);margin-top:1px;}
#hc-nl .nl-doi b{display:block;font-size:13px;margin-bottom:4px;}
#hc-nl .nl-doi a{color:var(--accent);text-decoration:underline;}

/* Visual: Envelope */
#hc-nl .nl-visual{position:relative;height:540px;display:grid;place-items:center;}
@media(max-width:1080px){#hc-nl .nl-visual{height:380px;order:-1;}}
#hc-nl .nl-visual::before{content:"";position:absolute;inset:-8% -10%;background:radial-gradient(circle at 55% 45%, color-mix(in srgb,var(--primary) 38%,transparent), transparent 65%);filter:blur(36px);z-index:0;}
#hc-nl .env{position:relative;width:78%;max-width:420px;aspect-ratio:5/4;border-radius:24px;background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft), 0 36px 80px -30px rgba(0,0,0,.4);transform:rotate(-3deg);z-index:2;overflow:hidden;}
#hc-nl .env-flap{position:absolute;top:0;left:0;right:0;height:55%;background:var(--primary);clip-path:polygon(0 0,100% 0,50% 100%);z-index:2;}
#hc-nl .env-letter{position:absolute;left:8%;right:8%;top:18%;bottom:8%;background:var(--surface-2);border-radius:14px;box-shadow:inset 0 0 0 1px var(--border-soft), 0 12px 30px -16px rgba(0,0,0,.25);padding:18px;z-index:1;display:flex;flex-direction:column;gap:7px;}
#hc-nl .env-letter h5{font-family:var(--font-display);font-weight:800;font-size:14px;margin:0;letter-spacing:-.01em;color:var(--text);}
#hc-nl .env-letter small{font-size:9px;color:var(--dim);font-weight:600;letter-spacing:.1em;text-transform:uppercase;}
#hc-nl .env-letter .ln{height:6px;background:var(--card-hi);border-radius:3px;}
#hc-nl .env-letter .ln.short{width:60%;}
#hc-nl .env-letter .ln.med{width:78%;}
#hc-nl .env-letter .env-cards{display:flex;gap:6px;margin-top:6px;}
#hc-nl .env-letter .env-cards .mc{flex:1;aspect-ratio:63/88;background:var(--foil);border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.3);}

#hc-nl .float-card{
  position:absolute;background:var(--card);border-radius:var(--r-md);
  padding:12px 14px;display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--border-soft), 0 18px 40px -20px rgba(0,0,0,.4);
  z-index:3;animation:hcNlFloat 7s ease-in-out infinite;
}
#hc-nl .float-card svg{color:var(--primary);}
#hc-nl .float-card.f1{top:8%;right:0;}
#hc-nl .float-card.f2{bottom:6%;left:-2%;animation-delay:-3.5s;}
#hc-nl .float-card.f2 svg{color:var(--accent);}
@keyframes hcNlFloat{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
@media(prefers-reduced-motion:reduce){#hc-nl .float-card{animation:none;}}

/* Mehrwert-Argumente */
#hc-nl .benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;}
@media(max-width:1080px){#hc-nl .benefit-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#hc-nl .benefit-grid{grid-template-columns:1fr;}}
#hc-nl .benefit{
  --c:var(--primary);
  background:var(--card);border-radius:var(--r-lg);padding:24px;
  box-shadow:inset 0 0 0 1px var(--border-soft);transition:.25s var(--ease);
}
#hc-nl .benefit:nth-child(even){--c:var(--accent);}
#hc-nl .benefit:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--c), 0 24px 50px -28px var(--c);}
#hc-nl .benefit .bic{width:52px;height:52px;border-radius:14px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);margin-bottom:16px;}
#hc-nl .benefit h4{font-family:var(--font-body);font-weight:700;font-size:16px;margin:0 0 8px;color:var(--text);}
#hc-nl .benefit p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0;}

/* Frequency-Selektor */
#hc-nl .freq{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;}
#hc-nl .freq label{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:var(--r-pill);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border-soft);font-size:13px;font-weight:600;color:var(--muted);cursor:pointer;transition:.15s;}
#hc-nl .freq label input{display:none;}
#hc-nl .freq label:has(input:checked){background:var(--primary);color:var(--primary-ink);box-shadow:none;}


/* ============================================================
   #hc-vz — Versand & Zahlung Detail
   ============================================================ */

#hc-vz .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-vz .crumb a:hover{color:var(--primary);}
#hc-vz .crumb .sep{opacity:.5;}
#hc-vz .crumb .here{color:var(--muted);}

#hc-vz .vz-hero{padding:36px 0 30px;}
#hc-vz .vz-hero h1{font-size:clamp(34px,5vw,60px);line-height:1.02;letter-spacing:-.02em;margin-top:14px;}
#hc-vz .vz-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-vz .vz-hero .lead{max-width:60ch;margin-top:18px;font-size:17px;color:var(--muted);line-height:1.65;}
#hc-vz .vz-hero .vz-meta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;font-size:13px;color:var(--muted);}
#hc-vz .vz-hero .vz-meta .lm{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:var(--r-pill);background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-soft);font-weight:600;color:var(--text);}

#hc-vz .vz-body{display:grid;grid-template-columns:220px 1fr;gap:48px;padding:18px 0 50px;align-items:flex-start;}
@media(max-width:980px){#hc-vz .vz-body{grid-template-columns:1fr;gap:18px;}}
#hc-vz .vz-toc{position:sticky;top:96px;padding:20px 22px;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);}
@media(max-width:980px){#hc-vz .vz-toc{position:static;}}
#hc-vz .vz-toc h4{font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;}
#hc-vz .vz-toc nav{display:flex;flex-direction:column;gap:6px;}
#hc-vz .vz-toc a{padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);text-decoration:none;transition:.15s;}
#hc-vz .vz-toc a:hover{background:var(--card-hi);color:var(--primary);}
#hc-vz .vz-toc a.active{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:600;}

#hc-vz .vz-prose{max-width:760px;}
#hc-vz .vz-block{padding:32px 0;border-top:1px solid var(--border-soft);scroll-margin-top:96px;}
#hc-vz .vz-block:first-of-type{border-top:none;padding-top:6px;}
#hc-vz .vz-block h2{display:flex;align-items:center;gap:14px;font-family:var(--font-display);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:-.01em;margin:0 0 14px;}
#hc-vz .vz-block h2 .num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);
  font-family:var(--font-display);font-weight:800;font-size:13px;flex:none;
}
#hc-vz .vz-block:nth-of-type(even) h2 .num{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);}
#hc-vz .vz-block p{font-size:15.5px;color:var(--muted);line-height:1.7;margin:0 0 12px;}
#hc-vz .vz-block p b{color:var(--text);font-weight:700;}
#hc-vz .vz-block a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}

/* Tabellen */
#hc-vz .vz-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border-soft);margin:6px 0 16px;
}
#hc-vz .vz-table th{
  background:var(--card-hi);font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-soft);
}
#hc-vz .vz-table td{padding:14px 16px;border-bottom:1px solid var(--border-soft);font-size:14.5px;color:var(--text);vertical-align:top;}
#hc-vz .vz-table tr:last-child td{border-bottom:none;}
#hc-vz .vz-table td small{display:block;color:var(--muted);font-size:12.5px;margin-top:4px;line-height:1.45;font-weight:400;}
#hc-vz .vz-table td.amount{font-family:var(--font-display);font-weight:800;color:var(--primary);font-size:16px;white-space:nowrap;text-align:right;width:1%;}
#hc-vz .vz-table td.amount-free{color:var(--accent);}

/* Highlight-Box Goody */
#hc-vz .vz-goody{
  background:color-mix(in srgb,var(--primary) 8%,var(--card));
  border:1px solid color-mix(in srgb,var(--primary) 32%,transparent);
  border-radius:var(--r-lg);padding:18px 22px;margin:6px 0 18px;
  display:flex;gap:14px;align-items:flex-start;
}
#hc-vz .vz-goody svg{color:var(--primary);flex:none;margin-top:2px;}
#hc-vz .vz-goody b{display:block;color:var(--text);margin-bottom:4px;}
#hc-vz .vz-goody p{margin:0;font-size:14px;color:var(--muted);line-height:1.55;}

#hc-vz .vz-fact-list{display:flex;flex-direction:column;gap:0;background:var(--card);border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px var(--border-soft);overflow:hidden;margin:8px 0 12px;}
#hc-vz .vz-fact-row{display:grid;grid-template-columns:1fr auto;gap:18px;padding:14px 18px;border-top:1px solid var(--border-soft);font-size:14.5px;}
#hc-vz .vz-fact-row:first-child{border-top:none;}
#hc-vz .vz-fact-row .k{color:var(--muted);font-weight:600;}
#hc-vz .vz-fact-row .v{color:var(--text);font-weight:700;text-align:right;}

#hc-vz .vz-pay-grid{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 14px;}
#hc-vz .vz-pay-grid .pc{
  padding:7px 14px;border-radius:var(--r-pill);
  background:var(--card);box-shadow:inset 0 0 0 1px var(--border-soft);
  font-size:13px;font-weight:700;color:var(--text);
}

#hc-vz .vz-cta{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap;}


/* ============================================================
   #hc-geo — GEO-Antwortseiten
   (KI-/Featured-Snippet-optimierte Antwort-Pages)
   Festes Format: Hero+Kurzantwort, Empfehlung, Vergleich, Details,
   FAQ, Quellen — siehe Briefing §D.
   ============================================================ */

#hc-geo .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);margin-bottom:14px;flex-wrap:wrap;}
#hc-geo .crumb a:hover{color:var(--primary);}
#hc-geo .crumb .sep{opacity:.5;}
#hc-geo .crumb .here{color:var(--muted);}

#hc-geo .geo-hero{padding:36px 0 30px;}
#hc-geo .geo-hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(28px,4.2vw,48px);line-height:1.1;letter-spacing:-.02em;
  margin:14px 0 0;color:var(--text);max-width:24ch;
}

#hc-geo .geo-body{
  display:grid;grid-template-columns:220px 1fr;gap:48px;
  padding:0 0 40px;align-items:flex-start;
}
@media(max-width:980px){#hc-geo .geo-body{grid-template-columns:1fr;gap:18px;}}

#hc-geo .geo-toc{
  position:sticky;top:96px;padding:20px 22px;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border-soft);
}
@media(max-width:980px){#hc-geo .geo-toc{position:static;}}
#hc-geo .geo-toc h4{font-family:var(--font-body);font-weight:700;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:0 0 12px;}
#hc-geo .geo-toc nav{display:flex;flex-direction:column;gap:6px;}
#hc-geo .geo-toc a{padding:8px 12px;border-radius:8px;font-size:13.5px;color:var(--muted);text-decoration:none;transition:.15s;}
#hc-geo .geo-toc a:hover{background:var(--card-hi);color:var(--primary);}
#hc-geo .geo-toc a.active{background:color-mix(in srgb,var(--primary) 12%,transparent);color:var(--primary);font-weight:600;}

#hc-geo .geo-prose{max-width:760px;}

/* Kurzantwort — die Wichtige Box */
#hc-geo .geo-short{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:24px 28px;
  margin-bottom:28px;
  box-shadow:inset 0 0 0 1.5px var(--primary), 0 22px 50px -28px color-mix(in srgb,var(--primary) 35%,transparent);
  position:relative;
  scroll-margin-top:96px;
}
#hc-geo .geo-short::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--primary);border-radius:var(--r-lg) 0 0 var(--r-lg);
}
#hc-geo .geo-short .label{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--primary);margin-bottom:10px;
}
#hc-geo .geo-short .label::before{
  content:"";width:18px;height:2px;background:var(--primary);border-radius:2px;
}
#hc-geo .geo-short p{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(16px,1.7vw,19px);line-height:1.55;color:var(--text);margin:0;
  text-wrap:pretty;
}

/* Empfehlung — BlackEye512 Sammler-Statement */
#hc-geo .geo-recommend{
  background:color-mix(in srgb,var(--accent) 10%,var(--card));
  border-radius:var(--r-lg);
  padding:24px 28px;
  margin-bottom:28px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 32%,transparent);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:flex-start;
  scroll-margin-top:96px;
}
#hc-geo .geo-recommend .av{
  width:54px;height:54px;border-radius:50%;background:var(--ribbon);color:#fff;
  display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:20px;flex:none;
}
#hc-geo .geo-recommend .who{
  font-family:var(--font-body);font-weight:700;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--accent);margin-bottom:8px;
}
#hc-geo .geo-recommend .who b{color:var(--text);}
#hc-geo .geo-recommend p{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:16.5px;line-height:1.6;color:var(--text);text-wrap:pretty;
}

/* Vergleichstabelle */
#hc-geo .geo-compare{margin-bottom:28px;scroll-margin-top:96px;}
#hc-geo .geo-compare h2{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,26px);
  margin:0 0 14px;letter-spacing:-.01em;
}
#hc-geo .geo-table{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border-radius:var(--r-lg);overflow:hidden;
  border:1px solid var(--border-soft);
}
#hc-geo .geo-table th{
  background:var(--card-hi);font-family:var(--font-display);font-weight:700;font-size:12.5px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--text);
  padding:14px 16px;text-align:left;border-bottom:1px solid var(--border-soft);
}
#hc-geo .geo-table th:not(:first-child){text-align:center;}
#hc-geo .geo-table td{
  padding:14px 16px;border-bottom:1px solid var(--border-soft);font-size:14.5px;color:var(--text);vertical-align:top;
}
#hc-geo .geo-table td:not(:first-child){text-align:center;color:var(--muted);}
#hc-geo .geo-table tr:last-child td{border-bottom:none;}
#hc-geo .geo-table td.k{font-weight:700;color:var(--text);width:35%;}

/* Details/Erklärung — Longform */
#hc-geo .geo-details{margin-bottom:28px;scroll-margin-top:96px;}
#hc-geo .geo-details h2{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,26px);
  margin:0 0 14px;letter-spacing:-.01em;
}
#hc-geo .geo-details p, #hc-geo .geo-details ul, #hc-geo .geo-details ol{
  font-size:15.5px;line-height:1.75;color:var(--text);margin:0 0 14px;text-wrap:pretty;
}
#hc-geo .geo-details p b, #hc-geo .geo-details ul b{color:var(--text);font-weight:700;}
#hc-geo .geo-details a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
#hc-geo .geo-details ul, #hc-geo .geo-details ol{padding-left:22px;}
#hc-geo .geo-details ul li, #hc-geo .geo-details ol li{margin-bottom:6px;}
#hc-geo .geo-details h3{
  font-family:var(--font-display);font-weight:700;font-size:18px;
  margin:18px 0 8px;letter-spacing:-.01em;color:var(--text);
}

/* Folge-FAQ — reuse #hc-faq Akkordeon-Stil aber scoped */
#hc-geo .geo-faq{margin-bottom:28px;scroll-margin-top:96px;}
#hc-geo .geo-faq h2{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,26px);
  margin:0 0 14px;letter-spacing:-.01em;
}
#hc-geo .qa{
  background:var(--card);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  margin-bottom:10px;overflow:hidden;
  transition:box-shadow .22s var(--ease);
}
#hc-geo .qa[open]{box-shadow:inset 0 0 0 1px var(--primary), 0 18px 40px -28px var(--primary);}
#hc-geo .qa summary{
  display:flex;align-items:center;gap:14px;padding:16px 20px;cursor:pointer;
  list-style:none;font-size:15px;font-weight:600;color:var(--text);line-height:1.4;
}
#hc-geo .qa summary::-webkit-details-marker{display:none;}
#hc-geo .qa .qi{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--border-soft);
  display:grid;place-items:center;color:var(--muted);font-weight:800;
  transition:.25s var(--ease);
}
#hc-geo .qa[open] summary .qi{background:var(--primary);color:var(--primary-ink);transform:rotate(45deg);box-shadow:none;}
#hc-geo .qa-body{padding:0 20px 20px 62px;color:var(--muted);font-size:14.5px;line-height:1.7;}
#hc-geo .qa-body p{margin:0 0 8px;}
#hc-geo .qa-body p:last-child{margin-bottom:0;}
#hc-geo .qa-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}

/* Quellen */
#hc-geo .geo-sources{
  background:var(--card);
  border-radius:var(--r-lg);
  padding:20px 24px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
  scroll-margin-top:96px;
}
#hc-geo .geo-sources h2{
  font-family:var(--font-display);font-weight:800;font-size:clamp(18px,2vw,22px);
  margin:0 0 12px;letter-spacing:-.01em;
}
#hc-geo .geo-sources ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;}
#hc-geo .geo-sources li{padding-left:24px;position:relative;font-size:14px;line-height:1.5;}
#hc-geo .geo-sources li::before{
  content:"";position:absolute;left:0;top:9px;width:14px;height:2px;background:var(--primary);border-radius:2px;
}
#hc-geo .geo-sources li.ext::before{background:var(--accent);}
#hc-geo .geo-sources a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;font-weight:600;}
#hc-geo .geo-sources li.ext a{color:var(--accent);}
#hc-geo .geo-sources .src-type{
  display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);margin-right:8px;
}

/* Final-CTA-Strip */
#hc-geo .geo-cta{
  text-align:center;background:var(--hero-grad);border-radius:var(--r-xl);
  padding:30px 28px;margin-top:28px;
}
#hc-geo .geo-cta h3{font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,28px);margin:0 0 8px;letter-spacing:-.01em;}
#hc-geo .geo-cta p{margin:0 auto 18px;max-width:50ch;color:var(--muted);font-size:14.5px;line-height:1.6;}
#hc-geo .geo-cta .ctas{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;}

/* Template-Hilfen — Marker für leere Felder im Template */
#hc-geo .tpl-placeholder{
  background:color-mix(in srgb,var(--accent) 10%,transparent);
  border:1px dashed color-mix(in srgb,var(--accent) 50%,transparent);
  border-radius:6px;padding:2px 8px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--accent);
}


/* ============================================================
   #hc-cookie — DSGVO-Cookie-Consent-Banner
   Tag-Manager-ready: feuert window.dispatchEvent('hc-consent-changed')
   mit detail = { necessary, statistics, marketing }.
   Persistenz: localStorage['hc-consent-v1'] = JSON.
   Wird fix unten am Viewport-Rand gerendert, bis Consent gegeben.
   ============================================================ */

#hc-cookie{
  position:fixed;left:14px;right:14px;bottom:14px;z-index:80;
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:0 24px 60px -18px rgba(0,0,0,.35), inset 0 0 0 1px var(--border);
  padding:18px 20px;
  max-width:840px;margin:0 auto;
  font-family:var(--font-body);color:var(--text);
  transform:translateY(0);opacity:1;
  transition:transform .35s var(--ease), opacity .25s var(--ease);
}
#hc-cookie[hidden]{display:none;}
#hc-cookie[data-state="dismissed"]{transform:translateY(120%);opacity:0;pointer-events:none;}
@media(prefers-reduced-motion:reduce){#hc-cookie{transition:none;}}

#hc-cookie .ck-head{
  display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:flex-start;
}
@media(max-width:640px){#hc-cookie .ck-head{grid-template-columns:auto 1fr;}}
#hc-cookie .ck-ic{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--primary) 14%,transparent);color:var(--primary);flex:none;
}
#hc-cookie .ck-text h3{
  font-family:var(--font-display);font-weight:800;font-size:18px;margin:0 0 4px;letter-spacing:-.01em;
}
#hc-cookie .ck-text p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);}
#hc-cookie .ck-text a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}

#hc-cookie .ck-close{
  width:34px;height:34px;border-radius:50%;background:var(--card-hi);color:var(--muted);
  display:grid;place-items:center;border:none;cursor:pointer;transition:.18s;
}
#hc-cookie .ck-close:hover{color:var(--text);background:color-mix(in srgb,var(--primary) 12%,var(--card-hi));}
@media(max-width:640px){#hc-cookie .ck-close{grid-column:2;justify-self:flex-end;}}

#hc-cookie .ck-categories{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0 14px;
}
@media(max-width:720px){#hc-cookie .ck-categories{grid-template-columns:1fr;}}

#hc-cookie .ck-cat{
  background:var(--card-hi);border-radius:var(--r-md);padding:14px 16px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
  display:flex;flex-direction:column;gap:6px;
}
#hc-cookie .ck-cat-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
#hc-cookie .ck-cat-head b{font-family:var(--font-body);font-weight:700;font-size:14px;color:var(--text);}
#hc-cookie .ck-cat-head .ck-req{
  font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);
}
#hc-cookie .ck-cat p{margin:0;font-size:12px;line-height:1.5;color:var(--muted);}

/* Toggle-Switch */
#hc-cookie .ck-switch{
  --w:42px;--h:24px;
  position:relative;display:inline-block;width:var(--w);height:var(--h);flex:none;
}
#hc-cookie .ck-switch input{
  opacity:0;width:0;height:0;position:absolute;
}
#hc-cookie .ck-slider{
  position:absolute;inset:0;cursor:pointer;
  background:var(--card);box-shadow:inset 0 0 0 1.5px var(--border);
  border-radius:var(--h);transition:.22s var(--ease);
}
#hc-cookie .ck-slider::before{
  content:"";position:absolute;left:3px;top:50%;transform:translateY(-50%);
  width:calc(var(--h) - 6px);height:calc(var(--h) - 6px);border-radius:50%;
  background:var(--text);transition:.22s var(--ease);
}
#hc-cookie .ck-switch input:checked + .ck-slider{
  background:var(--primary);box-shadow:none;
}
#hc-cookie .ck-switch input:checked + .ck-slider::before{
  left:calc(var(--w) - var(--h) + 3px);background:var(--primary-ink);
}
#hc-cookie .ck-switch input:disabled + .ck-slider{
  cursor:not-allowed;opacity:.7;
  background:color-mix(in srgb,var(--primary) 40%,var(--card));
}
#hc-cookie .ck-switch input:focus-visible + .ck-slider{
  outline:2px solid var(--primary);outline-offset:2px;
}

/* Buttons */
#hc-cookie .ck-actions{
  display:flex;gap:10px;flex-wrap:wrap;
}
#hc-cookie .ck-actions .btn{
  font-family:var(--font-body);font-weight:700;font-size:13.5px;
  padding:11px 20px;border-radius:var(--r-pill);border:none;cursor:pointer;
  transition:.2s var(--ease);
}
#hc-cookie .ck-actions .btn-accept-all{
  background:var(--primary);color:var(--primary-ink);box-shadow:var(--glow);
}
#hc-cookie .ck-actions .btn-accept-all:hover{transform:translateY(-2px);}
#hc-cookie .ck-actions .btn-save{
  background:transparent;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);
}
#hc-cookie .ck-actions .btn-save:hover{box-shadow:inset 0 0 0 1.5px var(--primary);color:var(--primary);}
#hc-cookie .ck-actions .btn-reject{
  background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--border-soft);
}
#hc-cookie .ck-actions .btn-reject:hover{color:var(--text);box-shadow:inset 0 0 0 1.5px var(--border);}


/* ============================================================
   #hc-trust — Trust-Signal-Strip
   Wiederverwendbarer 5-Punkt-Block:
     Echter Inhaber · Whatnot-Stream · DSGVO · DE-Versand · Hotline
   Einbau: in Listing-, Produkt-, Hub-Seiten als eigene <section>.
   ============================================================ */

#hc-trust{
  background:var(--card);
  border-radius:var(--r-lg);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  padding:18px 22px;
  margin:24px 0;
}

#hc-trust .ts-grid{
  display:grid;grid-template-columns:repeat(5,1fr);gap:6px 18px;align-items:center;
}
@media(max-width:1080px){#hc-trust .ts-grid{grid-template-columns:repeat(3,1fr);gap:14px 18px;}}
@media(max-width:640px){#hc-trust .ts-grid{grid-template-columns:1fr 1fr;gap:12px;}}
@media(max-width:420px){#hc-trust .ts-grid{grid-template-columns:1fr;}}

#hc-trust .ts-item{
  --c:var(--primary);
  display:flex;align-items:center;gap:12px;
  padding:6px 0;
  position:relative;
}
#hc-trust .ts-item:nth-child(even){--c:var(--accent);}
#hc-trust .ts-item:not(:last-child)::after{
  content:"";position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  width:1px;height:30px;background:var(--border-soft);
}
@media(max-width:1080px){
  #hc-trust .ts-item:not(:last-child)::after{display:none;}
}

#hc-trust .ts-ic{
  width:38px;height:38px;border-radius:11px;flex:none;display:grid;place-items:center;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:var(--c);
}
#hc-trust .ts-body{display:flex;flex-direction:column;gap:2px;line-height:1.25;}
#hc-trust .ts-body b{font-family:var(--font-body);font-weight:700;font-size:13.5px;color:var(--text);}
#hc-trust .ts-body span{font-size:11.5px;color:var(--muted);}

/* Compact-Variante für schmale Slots (z. B. unter Hero) */
#hc-trust.is-compact{padding:10px 16px;margin:14px 0;}
#hc-trust.is-compact .ts-grid{gap:6px 14px;}
#hc-trust.is-compact .ts-ic{width:30px;height:30px;border-radius:9px;}
#hc-trust.is-compact .ts-body b{font-size:12.5px;}
#hc-trust.is-compact .ts-body span{font-size:11px;}

/* Live-Status-Punkt für Whatnot-Stream-Indikator */
#hc-trust .ts-live{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);
  display:inline-block;margin-right:6px;vertical-align:middle;
  animation:hcTrustPulse 2s ease-in-out infinite;
}
@keyframes hcTrustPulse{
  0%,100%{box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 22%,transparent);}
  50%{box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 8%,transparent);}
}
@media(prefers-reduced-motion:reduce){#hc-trust .ts-live{animation:none;}}


/* ============================================================
   #hc-po — Pre-Order Cinematic Landing Pages
   Apple-Style-Storytelling, ABER in Brand-Book-Palette
   (Orange/Purple/Teal/Cream/Navy) und mit Epilogue/Space Grotesk.
   Keine neuen Farben, keine neuen Schriften.

   Pattern:
     - Edge-to-edge Hero (90vh)
     - Sticky-Pin-Sections (image stays, text scrolls)
     - Massive type-scale, generous whitespace
     - Alternierende Cream/Navy-Blocks für Rhythmus
     - Big-Numbers-Grid für Specs
     - Eine Aussage pro Scroll-Position
   ============================================================ */

#hc-po{
  /* Sektionen geben sich Atem ohne globale Body-Tricks */
  --po-section-pad: clamp(60px, 8vw, 120px);
  --po-h1: clamp(48px, 9vw, 140px);
  --po-h2: clamp(34px, 6vw, 80px);
  --po-h3: clamp(22px, 2.6vw, 32px);
  --po-claim: clamp(22px, 2.6vw, 34px);
}
#hc-po .crumb{display:flex;gap:8px;align-items:center;font-size:13px;color:var(--dim);padding:14px 0 0;flex-wrap:wrap;}
#hc-po .crumb a:hover{color:var(--primary);}
#hc-po .crumb .sep{opacity:.5;}
#hc-po .crumb .here{color:var(--muted);}

/* ===== HERO ===== */
#hc-po .po-hero{
  min-height:90vh;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:var(--po-section-pad) 0;position:relative;overflow:hidden;
  background:var(--hero-grad);
}
#hc-po .po-hero::before{
  content:"";position:absolute;inset:-10% -10%;z-index:0;
  background:radial-gradient(circle at 50% 40%, color-mix(in srgb,var(--primary) 30%,transparent), transparent 60%);
  filter:blur(48px);
}
#hc-po .po-hero .wrap{position:relative;z-index:1;}
#hc-po .po-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:700;font-size:13px;
  letter-spacing:.28em;text-transform:uppercase;
  color:var(--primary);margin-bottom:30px;
}
#hc-po .po-eyebrow::before{content:"";width:30px;height:2px;background:var(--primary);border-radius:2px;}
#hc-po .po-hero h1{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--po-h1);line-height:.92;letter-spacing:-.045em;
  color:var(--text);margin:0;max-width:18ch;
  text-wrap:balance;
}
#hc-po .po-hero h1 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-po .po-hero h1 .out{
  -webkit-text-stroke:1.5px var(--text);color:transparent;
  font-style:italic;
}
#hc-po .po-hero .po-sub{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(18px,2vw,24px);color:var(--muted);
  margin:28px auto 0;max-width:60ch;line-height:1.4;
}
#hc-po .po-hero .po-meta{
  display:flex;justify-content:center;gap:36px;flex-wrap:wrap;margin:36px 0 38px;
}
#hc-po .po-hero .po-meta-cell{font-family:var(--font-body);}
#hc-po .po-hero .po-meta-cell .k{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:6px;
}
#hc-po .po-hero .po-meta-cell .v{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(18px,2.4vw,28px);color:var(--text);letter-spacing:-.01em;
  font-feature-settings:"tnum";
}
#hc-po .po-hero .po-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-bottom:50px;}
#hc-po .po-hero .po-cta .btn{font-size:16px;padding:18px 32px;}
#hc-po .po-hero .po-stage{
  width:100%;max-width:680px;aspect-ratio:16/11;
  position:relative;border-radius:var(--r-xl);overflow:hidden;
  background:var(--card);
  box-shadow:0 60px 120px -40px rgba(0,0,0,.5), inset 0 0 0 1px var(--border-soft);
}
#hc-po .po-hero .po-stage image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}

/* Countdown / Pre-Order-Band */
#hc-po .po-band{
  background:var(--brand-navy);color:#fff;
  padding:22px 0;
}
:root[data-theme="reef"] #hc-po .po-band{background:var(--brand-navy);}
#hc-po .po-band-grid{
  display:grid;grid-template-columns:1fr auto 1fr;gap:30px;align-items:center;
  font-family:var(--font-body);
}
@media(max-width:760px){#hc-po .po-band-grid{grid-template-columns:1fr;text-align:center;}}
#hc-po .po-band b{
  font-family:var(--font-display);font-weight:800;font-size:clamp(20px,2.4vw,30px);
  color:#fff;display:block;letter-spacing:-.01em;
}
#hc-po .po-band span{font-size:13px;color:rgba(255,255,255,.7);letter-spacing:.06em;}
#hc-po .po-band .po-countdown{display:flex;gap:10px;justify-content:center;}
#hc-po .po-band .po-cd-cell{
  background:rgba(255,255,255,.08);border-radius:10px;
  padding:10px 16px;min-width:64px;text-align:center;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
#hc-po .po-band .po-cd-num{
  display:block;font-family:var(--font-display);font-weight:800;font-size:24px;
  color:var(--primary);line-height:1;font-feature-settings:"tnum";
}
#hc-po .po-band .po-cd-lbl{
  display:block;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.6);margin-top:4px;
}

/* ===== SPOTLIGHTS (sticky image + scrolling text) ===== */
#hc-po .po-spot{
  padding:var(--po-section-pad) 0;
  border-bottom:1px solid var(--border-soft);
}
#hc-po .po-spot:nth-of-type(even){background:var(--surface-2);}
#hc-po .po-spot-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;
}
@media(max-width:1080px){#hc-po .po-spot-grid{grid-template-columns:1fr;gap:30px;}}
#hc-po .po-spot.is-reverse .po-spot-img{order:2;}
@media(max-width:1080px){#hc-po .po-spot.is-reverse .po-spot-img{order:0;}}

#hc-po .po-spot-img{
  position:relative;aspect-ratio:4/5;border-radius:var(--r-xl);overflow:hidden;
  background:var(--card);box-shadow:0 30px 80px -30px rgba(0,0,0,.35), inset 0 0 0 1px var(--border-soft);
}
#hc-po .po-spot-img image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}

#hc-po .po-spot-text .eyebrow{margin-bottom:18px;}
#hc-po .po-spot-text h2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--po-h2);line-height:.95;letter-spacing:-.035em;
  color:var(--text);margin:0 0 24px;text-wrap:balance;
}
#hc-po .po-spot-text h2 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-po .po-spot-text h2 em{
  font-style:normal;-webkit-text-stroke:1.5px var(--text);color:transparent;
}
#hc-po .po-spot-text .po-claim{
  font-family:var(--font-display);font-weight:500;
  font-size:var(--po-claim);line-height:1.3;
  color:var(--muted);margin:0 0 18px;text-wrap:pretty;
}
#hc-po .po-spot-text p{
  font-size:16px;line-height:1.7;color:var(--muted);margin:0 0 14px;text-wrap:pretty;
}
#hc-po .po-spot-text ul{
  margin:18px 0 0;padding:0;list-style:none;
}
#hc-po .po-spot-text ul li{
  position:relative;padding:10px 0 10px 36px;font-size:15px;color:var(--text);
  border-top:1px solid var(--border-soft);
}
#hc-po .po-spot-text ul li:last-child{border-bottom:1px solid var(--border-soft);}
#hc-po .po-spot-text ul li::before{
  content:"";position:absolute;left:0;top:14px;width:22px;height:22px;border-radius:50%;
  background:color-mix(in srgb,var(--primary) 16%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ef820e' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:center;
}

/* ===== BIG-NUMBERS SPECS ===== */
#hc-po .po-specs{
  padding:var(--po-section-pad) 0;
  text-align:center;
  background:var(--brand-navy);color:#fff;
}
#hc-po .po-specs h2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--po-h2);line-height:.95;letter-spacing:-.035em;
  color:#fff;margin:0 0 12px;
}
#hc-po .po-specs .po-claim{
  color:rgba(255,255,255,.7);font-family:var(--font-display);font-weight:500;
  font-size:clamp(16px,1.8vw,20px);margin:0 auto 60px;max-width:50ch;
}
#hc-po .po-specs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px 50px;align-items:flex-start;
}
@media(max-width:1080px){#hc-po .po-specs-grid{grid-template-columns:repeat(2,1fr);gap:40px 30px;}}
@media(max-width:480px){#hc-po .po-specs-grid{grid-template-columns:1fr;gap:30px;}}
#hc-po .po-spec{position:relative;}
#hc-po .po-spec .num{
  display:block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(48px,7vw,96px);line-height:.9;letter-spacing:-.05em;
  background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;
  font-feature-settings:"tnum";
}
#hc-po .po-spec .lbl{
  display:block;font-family:var(--font-body);font-weight:600;font-size:14px;
  color:rgba(255,255,255,.75);margin-top:8px;letter-spacing:.04em;
}
#hc-po .po-spec .sub{
  display:block;font-size:12px;color:rgba(255,255,255,.5);margin-top:4px;
}

/* ===== IM LIEFERUMFANG ===== */
#hc-po .po-included{
  padding:var(--po-section-pad) 0;
}
#hc-po .po-included h2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--po-h2);line-height:.95;letter-spacing:-.035em;
  text-align:center;margin:0 auto 14px;
}
#hc-po .po-included .po-claim{
  text-align:center;font-family:var(--font-display);font-weight:500;
  font-size:clamp(16px,1.8vw,20px);color:var(--muted);margin:0 auto 50px;max-width:50ch;
}
#hc-po .po-incl-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;
}
@media(max-width:980px){#hc-po .po-incl-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){#hc-po .po-incl-grid{grid-template-columns:1fr;}}
#hc-po .po-incl{
  background:var(--card);border-radius:var(--r-lg);padding:24px;
  box-shadow:inset 0 0 0 1px var(--border-soft);
  display:flex;flex-direction:column;gap:14px;
}
#hc-po .po-incl .po-incl-img{
  aspect-ratio:4/3;border-radius:var(--r-md);background:var(--surface-2);overflow:hidden;
  position:relative;
}
#hc-po .po-incl image-slot{position:absolute;inset:0;width:100%;height:100%;display:block;}
#hc-po .po-incl b{font-family:var(--font-display);font-weight:700;font-size:18px;color:var(--text);letter-spacing:-.01em;}
#hc-po .po-incl span{font-size:13.5px;color:var(--muted);line-height:1.55;}

/* ===== PRE-ORDER CTA STRIP ===== */
#hc-po .po-cta-strip{
  padding:var(--po-section-pad) 0;
  text-align:center;
  background:var(--hero-grad);
}
#hc-po .po-cta-strip h2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--po-h2);line-height:.95;letter-spacing:-.035em;margin:0 0 18px;
}
#hc-po .po-cta-strip .price{
  display:inline-block;font-family:var(--font-display);font-weight:800;
  font-size:clamp(34px,4.8vw,58px);line-height:1;color:var(--primary);
  margin:14px 0 8px;letter-spacing:-.02em;font-feature-settings:"tnum";
}
#hc-po .po-cta-strip .price-note{
  font-size:13px;color:var(--muted);margin-bottom:30px;font-weight:600;
}
#hc-po .po-cta-strip .ctas{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
#hc-po .po-cta-strip .ctas .btn{font-size:16px;padding:18px 36px;}
#hc-po .po-cta-strip .pay-icons{
  margin-top:30px;display:flex;justify-content:center;gap:8px;flex-wrap:wrap;font-size:11.5px;color:var(--dim);
}
#hc-po .po-cta-strip .pay-icons .pc{
  padding:5px 11px;border-radius:var(--r-pill);background:var(--card);
  box-shadow:inset 0 0 0 1px var(--border-soft);font-weight:700;color:var(--text);font-size:12px;
}

/* ===== PRE-ORDER FAQ ===== */
#hc-po .po-faq{
  padding:var(--po-section-pad) 0;
  background:var(--surface-2);
}
#hc-po .po-faq .wrap{max-width:780px;}
#hc-po .po-faq h2{
  font-family:var(--font-display);font-weight:800;
  font-size:var(--po-h2);line-height:.95;letter-spacing:-.035em;
  text-align:center;margin:0 auto 36px;
}
#hc-po .po-faq details{
  background:var(--card);border-radius:var(--r-md);
  box-shadow:inset 0 0 0 1px var(--border-soft);
  margin-bottom:10px;overflow:hidden;transition:.22s var(--ease);
}
#hc-po .po-faq details[open]{box-shadow:inset 0 0 0 1px var(--primary), 0 18px 40px -28px var(--primary);}
#hc-po .po-faq summary{
  display:flex;align-items:center;gap:14px;padding:18px 22px;cursor:pointer;
  list-style:none;font-size:16px;font-weight:700;color:var(--text);
}
#hc-po .po-faq summary::-webkit-details-marker{display:none;}
#hc-po .po-faq summary .qi{
  width:28px;height:28px;border-radius:50%;flex:none;
  background:var(--card-hi);box-shadow:inset 0 0 0 1px var(--border-soft);
  display:grid;place-items:center;color:var(--muted);font-weight:800;
  transition:.25s var(--ease);
}
#hc-po .po-faq details[open] summary .qi{background:var(--primary);color:var(--primary-ink);transform:rotate(45deg);box-shadow:none;}
#hc-po .po-faq .qa-body{padding:0 22px 20px 64px;color:var(--muted);font-size:14.5px;line-height:1.7;}
#hc-po .po-faq .qa-body a{color:var(--primary);text-decoration:underline;text-underline-offset:2px;}
#hc-po .po-faq .qa-body b{color:var(--text);font-weight:700;}

/* ===== FINAL STATEMENT (zwei Wörter, riesig) ===== */
#hc-po .po-final{
  padding:calc(var(--po-section-pad) * 1.2) 0;
  text-align:center;
  background:var(--brand-navy);color:#fff;
}
#hc-po .po-final h2{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(56px,11vw,180px);line-height:.9;letter-spacing:-.06em;
  color:#fff;margin:0;
}
#hc-po .po-final h2 .grad{background:var(--ribbon);-webkit-background-clip:text;background-clip:text;color:transparent;}
#hc-po .po-final p{
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(18px,2vw,26px);color:rgba(255,255,255,.7);
  margin:30px auto 0;max-width:50ch;line-height:1.4;
}

/* Reveal-Klassen (custom.js setzt .anim-on auf <html>, IntersectionObserver toggelt .in) */
#hc-po .reveal{opacity:1;transform:none;}
:root.anim-on #hc-po .reveal{opacity:0;transform:translateY(40px);transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);}
:root.anim-on #hc-po .reveal.in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  :root.anim-on #hc-po .reveal{opacity:1;transform:none;transition:none;}
}