/**
 * Inner Circle - Drop-Gate (Presale-Landingpage vor dem Shop)
 *
 * Self-contained: Diese Seite läuft OHNE Blocksy- und WooCommerce-CSS
 * (ic_drop_gate_dequeue_theme_assets in inc/drop-gate.php nimmt sie raus).
 * Deshalb stehen hier auch Reset, Tokens und @font-face - nichts davon
 * darf aus style.css erwartet werden.
 *
 * Namespace: .icdg-*   (Inner Circle Drop Gate)
 * Tokens gespiegelt aus style.css / theme.json - eine Farbe ändert sich
 * dort, ändert sie hier mit.
 */

/* ============================================================ *
 * Fonts - Pfade relativ zu assets/css/
 * ============================================================ */
@font-face{font-family:"Antry Sans";src:url("../fonts/antry-sans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Antry Sans";src:url("../fonts/antry-sans-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alte Haas Grotesk";src:url("../fonts/alte-haas-grotesk-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Alte Haas Grotesk";src:url("../fonts/alte-haas-grotesk-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url("../fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"UnifrakturMaguntia";src:url("../fonts/unifrakturmaguntia-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* ============================================================ *
 * Tokens
 * ============================================================ */
:root{
  --icdg-black:#050505; --icdg-off-black:#0d0d0e; --icdg-asphalt:#1a1a1b; --icdg-asphalt-2:#2a2a2c;
  --icdg-fog:#3a3a3d; --icdg-silver:#9b9a93; --icdg-bone:#d8d4cc; --icdg-bone-bright:#ebe7df;
  --icdg-accent:#7a0a0a; --icdg-accent-hot:#a31515;
  --icdg-ok:#6e9a4d; --icdg-err:#c44a4a;
  --icdg-font-display:"UnifrakturMaguntia",serif;
  --icdg-font-headline:"Antry Sans","Helvetica Neue",Arial,sans-serif;
  --icdg-font-body:"Alte Haas Grotesk",system-ui,-apple-system,sans-serif;
  --icdg-font-mono:"JetBrains Mono",ui-monospace,"SF Mono",monospace;
  --icdg-fs-micro:.6875rem; --icdg-fs-small:.8125rem;
  --icdg-ease:cubic-bezier(.22,1,.36,1);
  --icdg-dur:300ms; --icdg-dur-slow:600ms;
  --icdg-beat:400ms;                                  /* 150 BPM */
  --icdg-gutter:clamp(1.25rem,4vw,3rem);
  --icdg-w-narrow:720px; --icdg-w-medium:1080px; --icdg-w-wide:1440px;
  --icdg-z-panel:2; --icdg-z-grain:3; --icdg-z-bar:4; --icdg-z-skip:5;
}

/* ============================================================ *
 * Reset / Base
 * ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.icdg{
  background:var(--icdg-black); color:var(--icdg-bone);
  font-family:var(--icdg-font-body); font-size:1rem; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
.icdg img{display:block;max-width:100%;height:auto}
.icdg h1,.icdg h2,.icdg h3,.icdg b,.icdg strong{font-weight:400}
.icdg a{color:inherit}
.icdg ::selection{background:var(--icdg-accent);color:var(--icdg-bone-bright)}
.icdg :focus-visible{outline:2px solid var(--icdg-accent-hot);outline-offset:3px}
.icdg button,.icdg input{font:inherit;color:inherit}

.icdg-sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.icdg-skip{position:fixed;top:.75rem;left:.75rem;z-index:var(--icdg-z-skip);background:var(--icdg-bone-bright);
  color:var(--icdg-black);font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);
  padding:.6rem 1rem;text-decoration:none;transform:translateY(-300%);transition:transform var(--icdg-dur) var(--icdg-ease)}
.icdg-skip:focus{transform:none}

/* Korn über allem */
body.icdg::after{content:"";position:fixed;inset:0;z-index:var(--icdg-z-grain);pointer-events:none;
  background-image:var(--icdg-grain);background-size:240px;opacity:.05}

/* ============================================================ *
 * Typo-Grammatik
 * ============================================================ */
.icdg-ital{font-family:var(--icdg-font-headline);font-style:italic;font-weight:400;
  letter-spacing:-.02em;line-height:.95;color:var(--icdg-bone-bright)}
.icdg-mono{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.28em;text-transform:uppercase;color:var(--icdg-silver)}
.icdg-mono>span{white-space:nowrap}

/* ============================================================ *
 * Reveals - Enhancement über sichtbarem Default
 * ============================================================ */
.icdg-rv{opacity:1;transform:none}
.js .icdg-rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--icdg-ease),transform .7s var(--icdg-ease)}
.js .icdg-rv.is-in{opacity:1;transform:none}
/* Clip liegt auf dem KIND: ein voll geclipptes Element meldet im
   IntersectionObserver ratio 0 -> Reveal-Deadlock, und natives
   loading="lazy" startet nie. */
.js .icdg-rvclip>img{clip-path:inset(100% 0 0 0);transition:clip-path .9s var(--icdg-ease)}
.js .icdg-rvclip.is-in>img{clip-path:inset(0 0 0 0)}
@media (prefers-reduced-motion:reduce){
  .js .icdg-rv{opacity:1;transform:none;transition:none}
  .js .icdg-rvclip>img{clip-path:none;transition:none}
}

/* ============================================================ *
 * Hero
 * ============================================================ */
.icdg-hero{position:relative;min-height:100svh;display:flex;flex-direction:column;overflow:clip;isolation:isolate}
.icdg-hero__bg{position:absolute;inset:0;z-index:-2}
.icdg-hero__bg img{width:100%;height:100%;object-fit:cover;object-position:center 30%;
  filter:brightness(.62) contrast(1.06) saturate(.82)}
.js .icdg-hero__bg img{animation:icdg-kenburns 26s var(--icdg-ease) both}
@keyframes icdg-kenburns{from{transform:scale(1.1)}to{transform:scale(1)}}
.icdg-hero::before{content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 110%, rgba(5,5,5,.9) 28%, rgba(5,5,5,.18) 70%),
    linear-gradient(rgba(5,5,5,.5), rgba(5,5,5,.2) 40%, rgba(5,5,5,.82) 88%)}
.icdg-hero__strobe{position:absolute;inset:0;z-index:1;background:var(--icdg-bone-bright);opacity:0;pointer-events:none}
.js .icdg-hero__strobe{animation:icdg-strobe .5s steps(1) .15s}
@keyframes icdg-strobe{0%{opacity:0}14%{opacity:.16}22%{opacity:0}38%{opacity:.09}46%{opacity:0}64%{opacity:.05}70%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .js .icdg-hero__bg img,.js .icdg-hero__strobe{animation:none}
}

.icdg-hero__top{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:calc(var(--icdg-gutter) * .75) var(--icdg-gutter)}
.icdg-hero__mark{width:clamp(110px,14vw,150px);opacity:.92}
.icdg-hero__mark img{width:100%}
.icdg-chip{display:inline-flex;align-items:center;gap:.6em;font-family:var(--icdg-font-mono);
  font-size:var(--icdg-fs-micro);letter-spacing:.24em;text-transform:uppercase;color:var(--icdg-bone);
  border:1px solid var(--icdg-fog);padding:.55em 1em;background:rgba(5,5,5,.55);white-space:nowrap}
.icdg-dot{width:.5em;height:.5em;border-radius:50%;background:var(--icdg-silver);flex:none}
.icdg-dot--live{background:var(--icdg-accent-hot)}
.js .icdg-dot--live{animation:icdg-beat var(--icdg-beat) infinite}
@keyframes icdg-beat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.62);opacity:.55}}
@media (prefers-reduced-motion:reduce){.js .icdg-dot--live{animation:none}}

.icdg-hero__main{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;padding:1rem var(--icdg-gutter) .5rem}
.icdg-hero__list{margin-bottom:clamp(1rem,2.5vh,1.6rem)}
.icdg-hero__title{font-size:clamp(3rem,10vw,5.5rem);text-wrap:balance;max-width:12ch}
.icdg-hero__sub{max-width:44ch;margin-top:1rem;color:var(--icdg-bone);
  font-size:clamp(.9375rem,1.3vw,1.0625rem);text-wrap:pretty}
.icdg-hero__price{margin-top:1rem;font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);
  letter-spacing:.24em;text-transform:uppercase;color:var(--icdg-bone-bright)}
.icdg-hero__price b{font-weight:400;border-bottom:2px solid var(--icdg-accent-hot);padding-bottom:.15em}

/* Hero-Entrance */
.js .icdg-enter>*{opacity:0;transform:translateY(26px)}
.js.icdg-hero-in .icdg-enter>*{opacity:1;transform:none;
  transition:opacity .8s var(--icdg-ease),transform .8s var(--icdg-ease)}
.js.icdg-hero-in .icdg-enter>:nth-child(2){transition-delay:.07s}
.js.icdg-hero-in .icdg-enter>:nth-child(3){transition-delay:.14s}
.js.icdg-hero-in .icdg-enter>:nth-child(4){transition-delay:.21s}
.js.icdg-hero-in .icdg-enter>:nth-child(5){transition-delay:.28s}
.js.icdg-hero-in .icdg-enter>:nth-child(6){transition-delay:.35s}
.js.icdg-hero-in .icdg-enter>:nth-child(7){transition-delay:.42s}
@media (prefers-reduced-motion:reduce){
  .js .icdg-enter>*{opacity:1;transform:none;transition:none}
}

/* ============================================================ *
 * CTA-Buttons
 * ============================================================ */
.icdg-cta{display:inline-block;position:relative;isolation:isolate;text-decoration:none;
  font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);letter-spacing:.26em;
  text-transform:uppercase;color:var(--icdg-bone-bright);background:var(--icdg-accent);
  border:1px solid var(--icdg-accent);padding:1.05em 2.2em;cursor:pointer;
  transition:color var(--icdg-dur) var(--icdg-ease)}
.icdg-cta::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--icdg-accent-hot);
  transform:scaleX(0);transform-origin:left;transition:transform var(--icdg-dur-slow) var(--icdg-ease)}
.icdg-cta:hover::before,.icdg-cta:focus-visible::before{transform:scaleX(1)}
.icdg-cta--ghost{background:transparent;border-color:var(--icdg-fog);color:var(--icdg-bone)}
.icdg-cta--ghost::before{background:var(--icdg-asphalt)}
.icdg-hero__ctas{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;margin-top:1.6rem}

/* Sekundärer Textlink (z.B. "Direkt zum Drop") */
.icdg-textlink{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);letter-spacing:.24em;
  text-transform:uppercase;color:var(--icdg-silver);text-decoration:none;
  border-bottom:1px solid var(--icdg-fog);padding-bottom:.25em;
  transition:color var(--icdg-dur) var(--icdg-ease),border-color var(--icdg-dur) var(--icdg-ease)}
.icdg-textlink:hover,.icdg-textlink:focus-visible{color:var(--icdg-bone-bright);border-color:var(--icdg-accent-hot)}

/* Der Weg in den Shop.
   Solange nichts vorbestellt werden kann, ist das eine Nebentür - ein
   ruhiger Textlink. Läuft der Presale, macht ic-drop-gate.js daraus die
   Hauptaktion (is-primary), und die Liste tritt einen Schritt zurück. */
.icdg-shoplink{display:inline-block;font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.24em;text-transform:uppercase;color:var(--icdg-silver);text-decoration:none;
  border-bottom:1px solid var(--icdg-fog);padding-bottom:.25em;
  transition:color var(--icdg-dur) var(--icdg-ease),border-color var(--icdg-dur) var(--icdg-ease)}
.icdg-shoplink:hover,.icdg-shoplink:focus-visible{color:var(--icdg-bone-bright);border-color:var(--icdg-accent-hot)}
.icdg-shoplink.is-primary{position:relative;isolation:isolate;font-size:var(--icdg-fs-small);
  letter-spacing:.26em;color:var(--icdg-bone-bright);background:var(--icdg-accent);
  border:1px solid var(--icdg-accent);padding:1.05em 2.2em;
  transition:color var(--icdg-dur) var(--icdg-ease)}
.icdg-shoplink.is-primary::before{content:"";position:absolute;inset:0;z-index:-1;
  background:var(--icdg-accent-hot);transform:scaleX(0);transform-origin:left;
  transition:transform var(--icdg-dur-slow) var(--icdg-ease)}
.icdg-shoplink.is-primary:hover::before,.icdg-shoplink.is-primary:focus-visible::before{transform:scaleX(1)}
.icdg-hero__ctas{margin-top:1.3rem}
/* Auf Rot ist der Textlink hell, die Primärvariante hell auf dunkel. */
.icdg-door .icdg-shoplink{color:rgba(235,231,223,.8);border-bottom-color:rgba(235,231,223,.4)}
.icdg-door .icdg-shoplink:hover,.icdg-door .icdg-shoplink:focus-visible{color:var(--icdg-bone-bright);border-bottom-color:var(--icdg-bone-bright)}
.icdg-door .icdg-shoplink.is-primary{background:var(--icdg-bone-bright);border-color:var(--icdg-bone-bright);
  color:var(--icdg-accent);font-size:1rem;padding:1.15em 2.6em}
.icdg-door .icdg-shoplink.is-primary::before{background:var(--icdg-black)}
.icdg-door .icdg-shoplink.is-primary:hover,.icdg-door .icdg-shoplink.is-primary:focus-visible{color:var(--icdg-bone-bright)}

/* ============================================================ *
 * DIE LISTE - das Conversion-Element
 *
 * Kein Input-Kasten, sondern eine Zeile: man trägt sich auf einer
 * Liste ein. Der rote Block am Ende ist der Stempel.
 * ============================================================ */
.icdg-list{width:min(100%,34rem);margin-inline:auto;text-align:left}
.icdg-list--wide{width:min(100%,38rem)}
/* Im zentrierten Hero braucht das linksbündige Formular eine sichtbare
   Kante, sonst wirkt der Wechsel der Ausrichtung wie ein Fehler. */
.icdg-hero__main .icdg-list{margin-top:clamp(1.4rem,3vh,2.2rem);padding-top:clamp(1.1rem,2.5vh,1.6rem);
  border-top:1px solid var(--icdg-fog)}
.icdg-list__label{display:block;margin-bottom:.55rem;font-family:var(--icdg-font-mono);
  font-size:var(--icdg-fs-micro);letter-spacing:.28em;text-transform:uppercase;color:var(--icdg-bone-bright)}
.icdg-list__label::before{content:"/ ";color:var(--icdg-accent-hot)}
.icdg-list__pitch{margin-bottom:1.2rem;color:var(--icdg-bone);font-size:var(--icdg-fs-small);
  line-height:1.55;text-wrap:pretty}

.icdg-list__row{display:flex;align-items:stretch;gap:.75rem}
@media (max-width:520px){.icdg-list__row{flex-direction:column;gap:.75rem}}

/* Gefülltes Feld mit Unterkante statt Kasten: über dem Hero-Foto muss die
   Eingabe als Eingabe lesbar sein, ohne dass ein Card-Rahmen entsteht. */
.icdg-list__field{flex:1;min-width:0;position:relative;display:flex;align-items:center;
  background:rgba(5,5,5,.55);border-bottom:2px solid var(--icdg-silver);
  padding:0 .85rem;transition:border-color var(--icdg-dur) var(--icdg-ease),background var(--icdg-dur) var(--icdg-ease)}
.icdg-list__field::before{content:"/";position:absolute;left:.85rem;color:var(--icdg-accent-hot);
  font-family:var(--icdg-font-mono);opacity:0;transform:translateX(-.4em);
  transition:opacity var(--icdg-dur) var(--icdg-ease),transform var(--icdg-dur) var(--icdg-ease)}
.icdg-list__field:focus-within{border-bottom-color:var(--icdg-accent-hot);background:rgba(5,5,5,.75)}
.icdg-list__field:focus-within::before{opacity:1;transform:none}
.icdg-list__field:focus-within .icdg-list__input{padding-left:1.1em}

.icdg-list__input{width:100%;background:transparent;border:0;outline:0;
  font-family:var(--icdg-font-mono);font-size:.9375rem;letter-spacing:.06em;
  color:var(--icdg-bone-bright);padding:.95rem 0;
  transition:padding-left var(--icdg-dur) var(--icdg-ease)}
.icdg-list__input::placeholder{color:var(--icdg-silver);opacity:1}
.icdg-list__input:-webkit-autofill{-webkit-text-fill-color:var(--icdg-bone-bright);
  -webkit-box-shadow:0 0 0 60px #0b0b0c inset;caret-color:var(--icdg-bone-bright)}

.icdg-list__submit{flex:none;white-space:nowrap}
@media (max-width:520px){.icdg-list__submit{width:100%;text-align:center}}
.icdg-list__submit[disabled]{opacity:.6;cursor:progress}

/* Während des Presales gewinnt der Kauf. Damit im Hero nicht zwei rote
   Flächen um dieselbe Aufmerksamkeit kämpfen, tritt der Eintragen-Button
   dort in die zweite Reihe zurück - in der Tür-Sektion bleibt er, wie er
   ist, weil dort keine Konkurrenz steht. */
.icdg-phase-live .icdg-hero__main .icdg-list__submit{
  background:transparent;border-color:var(--icdg-fog);color:var(--icdg-bone)}
.icdg-phase-live .icdg-hero__main .icdg-list__submit::before{background:var(--icdg-asphalt)}

/* Honeypot - nie sichtbar, nie fokussierbar */
.icdg-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}

/* Consent - hängender Einzug, kein Flex (Checkbox bleibt an Zeile 1) */
.icdg-list__consent{display:block;margin-top:.95rem;padding-left:1.85em;text-indent:-1.85em;
  color:var(--icdg-bone);font-size:var(--icdg-fs-small);line-height:1.5;cursor:pointer}
.icdg-list__consent input{width:1em;height:1em;margin-right:.75em;text-indent:0;
  vertical-align:-.05em;accent-color:var(--icdg-accent-hot);cursor:pointer}
.icdg-list__consent a{color:var(--icdg-bone-bright);text-underline-offset:.2em}
.icdg-list__fine{margin-top:.6rem;color:var(--icdg-silver);font-size:var(--icdg-fs-micro);
  line-height:1.5;letter-spacing:.02em}
.icdg-list__fine a{color:var(--icdg-bone)}

/* Status-Meldungen */
.icdg-list__msg{margin-top:1rem;font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);
  letter-spacing:.08em;line-height:1.5;padding:.7rem .9rem;border:1px solid var(--icdg-fog)}
.icdg-list__msg--err{color:#e79a9a;border-color:#5e2020;background:rgba(122,10,10,.16)}
.icdg-list__msg[hidden]{display:none}

/* Erfolg - ersetzt das Formular */
.icdg-done{border:1px solid var(--icdg-fog);padding:1.6rem 1.5rem;background:rgba(13,13,14,.72)}
.icdg-done[hidden]{display:none}
.icdg-done__mark{display:block;width:2.25rem;height:2.25rem;margin-bottom:1rem}
.icdg-done__title{font-family:var(--icdg-font-headline);font-style:italic;font-size:1.75rem;
  color:var(--icdg-bone-bright);line-height:1.1}
.icdg-done__body{margin-top:.8rem;color:var(--icdg-bone);font-size:.9375rem;line-height:1.55;text-wrap:pretty}
.icdg-done__body b{color:var(--icdg-bone-bright)}
.icdg-done__hint{margin-top:.9rem;font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.2em;text-transform:uppercase;color:var(--icdg-silver)}

/* Auf rotem Grund (Tür-Sektion) invertieren */
.icdg-door .icdg-list__label{color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__label::before{color:rgba(235,231,223,.6)}
.icdg-door .icdg-list__pitch{color:rgba(235,231,223,.92)}
.icdg-door .icdg-list__field{border-bottom-color:rgba(235,231,223,.45)}
.icdg-door .icdg-list__field::before{color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__field:focus-within{border-bottom-color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__input{color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__input::placeholder{color:rgba(235,231,223,.62)}
.icdg-door .icdg-list__input:-webkit-autofill{-webkit-text-fill-color:var(--icdg-bone-bright);
  -webkit-box-shadow:0 0 0 60px #6a0909 inset}
.icdg-door .icdg-list__consent{color:rgba(235,231,223,.92)}
.icdg-door .icdg-list__consent input{accent-color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__consent a{color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__fine{color:rgba(235,231,223,.72)}
.icdg-door .icdg-list__fine a{color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__msg{border-color:rgba(235,231,223,.45);color:var(--icdg-bone-bright)}
.icdg-door .icdg-list__msg--err{background:rgba(5,5,5,.3);border-color:rgba(235,231,223,.55);color:var(--icdg-bone-bright)}
.icdg-door .icdg-done{border-color:rgba(235,231,223,.45);background:rgba(5,5,5,.22)}
.icdg-door .icdg-done__title,.icdg-door .icdg-done__body b{color:var(--icdg-bone-bright)}
.icdg-door .icdg-done__body{color:rgba(235,231,223,.92)}
.icdg-door .icdg-done__hint{color:rgba(235,231,223,.75)}
.icdg-door .icdg-cta{background:var(--icdg-bone-bright);border-color:var(--icdg-bone-bright);color:var(--icdg-accent)}
.icdg-door .icdg-cta::before{background:var(--icdg-black)}
.icdg-door .icdg-cta:hover,.icdg-door .icdg-cta:focus-visible{color:var(--icdg-bone-bright)}

/* ============================================================ *
 * Countdown
 * ============================================================ */
.icdg-count{margin-top:clamp(1.2rem,3vh,1.9rem)}
.icdg-count[hidden]{display:none}
.icdg-count__label{margin-bottom:.8rem}
.icdg-count__grid{display:flex;gap:0;border:1px solid var(--icdg-fog);background:rgba(5,5,5,.55)}
.icdg-count__cell{padding:.7rem .9rem;min-width:clamp(4rem,11vw,5rem)}
.icdg-count__cell+.icdg-count__cell{border-left:1px solid var(--icdg-fog)}
.icdg-count__num{font-family:var(--icdg-font-mono);font-size:clamp(1.4rem,4vw,2rem);
  color:var(--icdg-bone-bright);font-variant-numeric:tabular-nums;letter-spacing:.04em;line-height:1}
.icdg-count__unit{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);letter-spacing:.3em;
  color:var(--icdg-silver);text-transform:uppercase;margin-top:.4rem}
.js .icdg-count__num.is-tick{animation:icdg-tick var(--icdg-beat) var(--icdg-ease)}
@keyframes icdg-tick{0%{opacity:.35}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.js .icdg-count__num.is-tick{animation:none}}

.icdg-hero__bottom{display:flex;justify-content:center;padding:.75rem var(--icdg-gutter) 1.75rem}
.icdg-cue{display:inline-flex;flex-direction:column;align-items:center;gap:.7rem;color:var(--icdg-silver);
  font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);letter-spacing:.32em;
  text-transform:uppercase;text-decoration:none}
.icdg-cue__line{width:1px;height:44px;background:linear-gradient(var(--icdg-silver),transparent);
  overflow:hidden;position:relative}
.js .icdg-cue__line::after{content:"";position:absolute;inset:0;
  background:linear-gradient(var(--icdg-accent-hot),transparent);
  transform:translateY(-100%);animation:icdg-cue 2.2s var(--icdg-ease) infinite}
@keyframes icdg-cue{0%{transform:translateY(-100%)}55%{transform:translateY(0)}100%{transform:translateY(100%)}}
@media (prefers-reduced-motion:reduce){.js .icdg-cue__line::after{animation:none;transform:none}}

/* ============================================================ *
 * Marquee
 * ============================================================ */
.icdg-marquee{border-top:1px solid var(--icdg-fog);border-bottom:1px solid var(--icdg-fog);
  overflow:clip;padding:1.1rem 0;background:var(--icdg-off-black)}
.icdg-marquee__track{display:flex;gap:0;width:max-content}
.js .icdg-marquee__track{animation:icdg-marquee 36s linear infinite}
@keyframes icdg-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.js .icdg-marquee__track{animation:none}}
.icdg-marquee__seq{display:flex;align-items:baseline;gap:2.6rem;padding-right:2.6rem;white-space:nowrap}
.icdg-marquee__word{font-family:var(--icdg-font-headline);font-style:italic;
  font-size:clamp(1.15rem,2.4vw,1.7rem);color:var(--icdg-bone-bright);letter-spacing:.04em}
/* Wordmark im Lauftext als SVG, nicht als Blackletter-Font: das echte Logo
   ist die Wordmark-Datei, die Schrift war nur eine Annäherung. Höhe an die
   Grösse der Nachbar-Worte gekoppelt, align-self:center, weil ein Bild keine
   Schriftlinie hat und die Sequenz auf baseline ausgerichtet ist. */
.icdg-marquee__mark{align-self:center;display:flex}
.icdg-marquee__mark img{display:block;width:auto;height:clamp(1.1rem,2.4vw,1.7rem);opacity:.92}
.icdg-marquee__code{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);
  letter-spacing:.3em;color:var(--icdg-silver);align-self:center}

/* ============================================================ *
 * Sektionen
 * ============================================================ */
.icdg-section{padding:clamp(5rem,12vh,9rem) var(--icdg-gutter)}
.icdg-inner{max-width:var(--icdg-w-wide);margin:0 auto}
.icdg-inner--medium{max-width:var(--icdg-w-medium)}
.icdg-inner--narrow{max-width:var(--icdg-w-narrow)}

/* Das Piece */
.icdg-piece{background:var(--icdg-black)}
.icdg-piece__grid{display:grid;gap:clamp(2.5rem,6vw,5rem);align-items:start}
@media (min-width:900px){.icdg-piece__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}}
.icdg-piece__copy{position:sticky;top:clamp(2rem,8vh,5rem)}
@media (max-width:899px){.icdg-piece__copy{position:static}}
.icdg-piece__kicker{color:var(--icdg-bone-bright);letter-spacing:.3em}
.icdg-piece__kicker::before{content:"/ ";color:var(--icdg-accent-hot)}
.icdg-piece__title{font-size:clamp(2.2rem,4.5vw,3.6rem);margin-top:1.1rem;text-wrap:balance}
.icdg-piece__text{margin-top:1.5rem;max-width:52ch;color:var(--icdg-bone);text-wrap:pretty}
.icdg-piece__specs{margin-top:2.5rem;border-top:1px solid var(--icdg-fog)}
.icdg-piece__specs div{display:flex;justify-content:space-between;gap:1.5rem;
  padding:.85rem 0;border-bottom:1px solid var(--icdg-fog)}
.icdg-piece__specs dt{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.26em;text-transform:uppercase;color:var(--icdg-silver)}
.icdg-piece__specs dd{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);
  letter-spacing:.1em;color:var(--icdg-bone-bright);text-align:right;text-transform:uppercase}
.icdg-piece__cta{margin-top:2.4rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.icdg-piece__media{display:grid;gap:1.1rem}
.icdg-piece__img{position:relative;overflow:clip;background:var(--icdg-off-black)}
.icdg-piece__img img{width:100%}
.js .icdg-piece__img [data-icdg-parallax]{will-change:transform;scale:1.12}
.icdg-piece__img--detail{max-width:62%;justify-self:end;margin-top:-14%;
  border:1px solid rgba(58,58,61,.6);box-shadow:0 30px 80px rgba(0,0,0,.55)}
@media (max-width:599px){.icdg-piece__img--detail{max-width:74%;margin-top:-10%}}
.icdg-piece__caption{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.26em;text-transform:uppercase;color:var(--icdg-silver);padding-top:.4rem}

/* Datenblatt (weiß) */
.icdg-sheet{background:#fff;color:#0d0d0e}
.icdg-sheet .icdg-mono{color:#5c5b55}
.icdg-sheet__head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  border-bottom:2px solid #0d0d0e;padding-bottom:1rem;flex-wrap:wrap}
.icdg-sheet__title{font-size:clamp(1.9rem,3.6vw,2.9rem);color:#0d0d0e}
.icdg-sheet__grid{display:grid;gap:clamp(2rem,5vw,4rem);margin-top:clamp(2rem,5vh,3.5rem);position:relative}
@media (min-width:760px){.icdg-sheet__grid{grid-template-columns:1fr 1fr}}
.icdg-sheet__fig{position:relative}
.icdg-sheet__fig img{width:100%}
.icdg-sheet__fig figcaption{display:flex;justify-content:space-between;gap:1rem;
  font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);letter-spacing:.24em;
  text-transform:uppercase;color:#0d0d0e;border-top:1px solid #0d0d0e;padding-top:.7rem;margin-top:.4rem}
.icdg-sheet__fig figcaption span:last-child{color:#5c5b55}
.icdg-reg{position:absolute;width:18px;height:18px;pointer-events:none}
.icdg-reg::before,.icdg-reg::after{content:"";position:absolute;background:#0d0d0e}
.icdg-reg::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-50%)}
.icdg-reg::after{top:50%;left:0;right:0;height:1px;transform:translateY(-50%)}
.icdg-reg--tl{top:-9px;left:-9px}.icdg-reg--tr{top:-9px;right:-9px}
.icdg-reg--bl{bottom:-9px;left:-9px}.icdg-reg--br{bottom:-9px;right:-9px}
.icdg-stamp{position:absolute;right:clamp(0px,3vw,2rem);top:-2.4rem;rotate:-7deg;z-index:1;
  border:2px solid var(--icdg-accent);color:var(--icdg-accent);padding:.7em 1.1em;text-align:center;
  font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);letter-spacing:.22em;
  text-transform:uppercase;background:rgba(255,255,255,.82)}
.icdg-stamp b{display:block;font-weight:400;font-size:1.35em;letter-spacing:.14em}
.js .icdg-stamp{transform:scale(1.25);opacity:0;
  transition:transform .5s var(--icdg-ease) .35s,opacity .5s var(--icdg-ease) .35s}
.js .icdg-sheet__grid.is-in .icdg-stamp{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){.js .icdg-stamp{transform:none;opacity:1;transition:none}}
.icdg-sheet__note{margin-top:clamp(2rem,5vh,3rem);display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.22em;text-transform:uppercase;color:#5c5b55}

/* Manifest */
.icdg-manifest{position:relative;isolation:isolate;overflow:clip;background:var(--icdg-black)}
.icdg-manifest__bg{position:absolute;inset:0;z-index:-1}
.icdg-manifest__bg img{width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:.16;filter:brightness(.85) saturate(.6)}
.icdg-manifest__bg::after{content:"";position:absolute;inset:0;
  background:radial-gradient(90% 80% at 50% 50%, transparent 20%, var(--icdg-black) 90%)}
.icdg-manifest__rule{width:1px;height:clamp(3rem,9vh,5.5rem);background:var(--icdg-accent-hot);
  margin:0 auto clamp(2rem,5vh,3rem)}
.js .icdg-manifest__rule{transform:scaleY(0);transform-origin:top;transition:transform 1s var(--icdg-ease)}
.js .icdg-manifest__rule.is-in{transform:none}
@media (prefers-reduced-motion:reduce){.js .icdg-manifest__rule{transform:none;transition:none}}
.icdg-manifest__lines{display:grid;gap:clamp(1.6rem,4vh,2.6rem);text-align:center}
.icdg-manifest__line{font-family:var(--icdg-font-headline);font-style:italic;font-weight:400;
  font-size:clamp(1.45rem,3.4vw,2.5rem);line-height:1.25;color:var(--icdg-bone);text-wrap:balance}
.icdg-manifest__line em{font-style:italic;color:var(--icdg-bone-bright)}
.icdg-manifest__close{margin-top:clamp(2.6rem,7vh,4.5rem);text-align:center}
/* Hausfont statt Blackletter: "In noise we trust." ist ein Satz, kein Logo -
   die Wordmark-Datei kann hier nichts ersetzen, also die Headline-Font. */
.icdg-manifest__ic{font-family:var(--icdg-font-headline);font-style:italic;font-weight:400;
  font-size:clamp(2.2rem,5.5vw,3.8rem);letter-spacing:.02em;
  color:var(--icdg-bone-bright)}
.icdg-manifest__src{margin-top:1.2rem}

/* Fakten */
.icdg-facts{background:var(--icdg-off-black);border-top:1px solid var(--icdg-fog)}
.icdg-facts__title{font-size:clamp(2rem,4vw,3rem)}
.icdg-facts__list{margin-top:2.5rem;border-top:1px solid var(--icdg-fog)}
.icdg-facts__list div{display:grid;grid-template-columns:minmax(7rem,14rem) 1fr;gap:1rem;
  padding:1.05rem 0;border-bottom:1px solid var(--icdg-fog);align-items:baseline}
@media (max-width:520px){.icdg-facts__list div{grid-template-columns:1fr;gap:.3rem}}
.icdg-facts__list dt{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.28em;text-transform:uppercase;color:var(--icdg-silver)}
.icdg-facts__list dd{color:var(--icdg-bone-bright);font-size:1.0625rem}
.icdg-facts__list dd small{display:block;color:var(--icdg-silver);font-size:var(--icdg-fs-small);margin-top:.2rem}
.icdg-facts__legal{margin-top:1.6rem;color:var(--icdg-silver);font-size:var(--icdg-fs-small);
  max-width:70ch;text-wrap:pretty}
.icdg-facts__legal a{color:var(--icdg-bone)}

/* Tür (Rot-Drench) */
.icdg-door{position:relative;overflow:clip;background:var(--icdg-accent);color:var(--icdg-bone-bright);
  display:flex;align-items:center;justify-content:center;text-align:center;isolation:isolate}
.icdg-door::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(110% 95% at 50% 50%, rgba(122,10,10,0) 35%, rgba(38,3,3,.55) 100%)}
.icdg-door__panel{position:absolute;inset:0;z-index:var(--icdg-z-panel);
  background:var(--icdg-black);pointer-events:none}
.icdg-door__panel--l{right:50%}
.icdg-door__panel--r{left:50%}
html:not(.js) .icdg-door__panel{display:none}
.js .icdg-door__panel{transition:transform 1.1s var(--icdg-ease)}
.js .icdg-door.is-open .icdg-door__panel--l{transform:translateX(-101%)}
.js .icdg-door.is-open .icdg-door__panel--r{transform:translateX(101%)}
@media (prefers-reduced-motion:reduce){
  .js .icdg-door__panel{transition:opacity .6s var(--icdg-ease)}
  .js .icdg-door.is-open .icdg-door__panel--l,
  .js .icdg-door.is-open .icdg-door__panel--r{transform:none;opacity:0}
}
.icdg-door__inner{padding:clamp(4.5rem,11vh,7.5rem) var(--icdg-gutter);max-width:var(--icdg-w-medium);width:100%}
.icdg-door__list{color:rgba(235,231,223,.75)}
.icdg-door__title{font-size:clamp(2.6rem,7vw,5rem);margin-top:1.2rem;color:var(--icdg-bone-bright);text-wrap:balance}
.icdg-door__sub{margin-top:1.3rem;color:rgba(235,231,223,.92);max-width:52ch;margin-inline:auto;text-wrap:pretty}
.icdg-door__form{margin-top:2.4rem;text-align:left}
.icdg-door__ctas{margin-top:2.4rem;display:flex;justify-content:center}
.icdg-door .icdg-cta--door{font-size:1rem;padding:1.15em 2.6em}
.icdg-door__count{margin-top:2rem;font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-small);
  letter-spacing:.26em;text-transform:uppercase;color:rgba(235,231,223,.85);font-variant-numeric:tabular-nums}
.icdg-door__count[hidden]{display:none}

/* Footer */
.icdg-footer{background:var(--icdg-black);border-top:1px solid var(--icdg-fog);
  padding:3.5rem var(--icdg-gutter) 7.5rem}
.icdg-footer__inner{max-width:var(--icdg-w-wide);margin:0 auto;display:flex;flex-wrap:wrap;
  gap:2rem;justify-content:space-between;align-items:flex-start}
.icdg-footer__brand img{width:120px;opacity:.85}
.icdg-footer__slogan{margin-top:1rem;font-family:var(--icdg-font-headline);font-style:italic;color:var(--icdg-silver)}
.icdg-footer__nav{display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center}
.icdg-footer__nav a{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);
  letter-spacing:.26em;text-transform:uppercase;color:var(--icdg-bone);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:.2em;
  transition:border-color var(--icdg-dur) var(--icdg-ease),color var(--icdg-dur) var(--icdg-ease)}
.icdg-footer__nav a:hover,.icdg-footer__nav a:focus-visible{border-color:var(--icdg-accent-hot);color:var(--icdg-bone-bright)}
.icdg-footer__fine{max-width:var(--icdg-w-wide);margin:2.6rem auto 0;padding-top:1.4rem;
  border-top:1px solid var(--icdg-asphalt-2);color:var(--icdg-silver);font-size:var(--icdg-fs-small);
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem}

/* Sticky-Bar */
.icdg-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--icdg-z-bar);
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
  background:rgba(5,5,5,.94);border-top:1px solid var(--icdg-fog);
  padding:.65rem var(--icdg-gutter);transform:translateY(110%);
  transition:transform var(--icdg-dur-slow) var(--icdg-ease)}
.js body.icdg.is-bar-on .icdg-bar{transform:none}
@media (prefers-reduced-motion:reduce){
  .icdg-bar{transition:opacity var(--icdg-dur) var(--icdg-ease);opacity:0}
  .js body.icdg.is-bar-on .icdg-bar{opacity:1}
}
.icdg-bar__label{font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);letter-spacing:.22em;
  text-transform:uppercase;color:var(--icdg-bone);display:flex;align-items:center;gap:.7em;min-width:0}
.icdg-bar__label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.icdg-bar .icdg-cta{padding:.8em 1.6em;flex:none}
@media (min-width:900px){
  .icdg-bar{left:auto;right:1.25rem;bottom:1.25rem;border:1px solid var(--icdg-fog);gap:1.5rem;
    padding:.65rem .75rem .65rem 1.4rem;transform:translateY(140%)}
}

/* Reste aus globalen wp_footer-Renderern des Themes.
   Der Header-Warenkorb-Link wird per JS in den Blocksy-Header verschoben -
   den gibt es hier nicht, also bliebe er ungestylt am Seitenende stehen. */
.icdg .ic-header-cart{display:none!important}

/* Admin-Hinweisleiste - nur für eingeloggte Shop-Manager */
.icdg-adminbar{position:fixed;top:0;left:0;right:0;z-index:calc(var(--icdg-z-skip) + 1);
  background:var(--icdg-bone-bright);color:var(--icdg-black);
  font-family:var(--icdg-font-mono);font-size:var(--icdg-fs-micro);letter-spacing:.14em;
  padding:.5rem var(--icdg-gutter);display:flex;gap:1.2rem;flex-wrap:wrap;
  align-items:center;justify-content:center;text-align:center}
.icdg-adminbar a{color:var(--icdg-accent);font-weight:700}

/* ---------------------------------------------------------------
   Navigation im Drop-Gate (ergaenzt 12.08.2026)
   Das Gate rendert ein eigenes Dokument ohne Site-Header; ohne diese
   Leiste war /shop/ eine Sackgasse.
   --------------------------------------------------------------- */
.icdg-hero__top { gap: 1.5rem; flex-wrap: wrap; }
.icdg-nav { flex: 1 1 auto; }
.icdg-nav__list {
  display: flex; flex-wrap: wrap; gap: 1.4rem;
  margin: 0; padding: 0; list-style: none;
  justify-content: center;
}
.icdg-nav__list a {
  font-family: var(--icdg-font-mono, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .18em; text-transform: uppercase;
  color: rgba(235,231,223,.72); text-decoration: none;
  padding: .25rem 0; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.icdg-nav__list a:hover,
.icdg-nav__list a:focus-visible { color: #ebe7df; border-bottom-color: #ebe7df; }
.icdg-nav__list .current-menu-item > a { color: #ebe7df; }
@media (max-width: 700px) {
  .icdg-nav__list { justify-content: flex-start; gap: 1rem; }
  .icdg-nav__list a { font-size: .62rem; letter-spacing: .14em; }
}

/* Preis-Haltung im Piece-Abschnitt (14.08.2026). Dieselbe Aussage wie auf
   der Produktseite - sie ist Markenkern, nicht Beiwerk, und gehoert dorthin,
   wo ueber das Piece geredet wird. */
.icdg-piece__creed{margin-top:1.6rem;padding:.9rem 1.1rem;border-left:2px solid var(--icdg-accent);
  background:rgba(255,255,255,.03);color:var(--icdg-bone);font-size:var(--icdg-fs-small);
  line-height:1.55;max-width:52ch}
.icdg-piece__creed b{display:block;font-family:var(--icdg-font-headline);font-style:italic;
  font-weight:400;font-size:1.2em;color:var(--icdg-bone-bright);margin-bottom:.25rem}

/* Kopfzeichen des Drop-Gates: Monogramm statt Wordmark (17.08.2026).
   Die alte Regel war breitenbasiert (width: clamp(110px,14vw,150px)) - das
   passt zur breiten Wordmark, das hochformatige Monogramm waere damit ueber
   300px hoch geworden. Jetzt hoehenbasiert mit denselben Werten wie der
   Seitenkopf der uebrigen Seiten (style.css ~Zeile 512), damit das Zeichen
   ueberall gleich gross ist. */
.icdg-hero__mark{width:auto;height:clamp(34px,3.4vw,44px);opacity:.92}
.icdg-hero__mark a{display:inline-block;height:100%}
.icdg-hero__mark img{width:auto;height:100%;display:block}
