/* ======================================================================
   ZAUNTURA — Konfigurator-Teaser (cf- namespace)
   Live, faux-3D gate preview. Tokens reused from styles.css (:root / .theme-dark)
   ====================================================================== */

/* ---- Card shell ------------------------------------------------------- */
.cf-card{
  position:relative;overflow:hidden;border-radius:24px;
  border:1px solid var(--line);
  background:linear-gradient(120deg, var(--surface), var(--bg-deep));
  padding:clamp(34px,5vw,72px);
  isolation:isolate;
}
/* faint aurora wash behind everything */
.cf-aurora{
  position:absolute;inset:-20% -10%;z-index:0;pointer-events:none;
  background:
    radial-gradient(46% 70% at 82% 38%, rgba(var(--accent-glow),.20), transparent 62%),
    radial-gradient(50% 80% at 18% 80%, rgba(var(--teal-glow),.16), transparent 64%);
  filter:saturate(1.1);
  animation:cf-aurora 22s ease-in-out infinite alternate;
}
@keyframes cf-aurora{
  0%  {transform:translate3d(0,0,0) scale(1)}
  100%{transform:translate3d(-3%,2%,0) scale(1.06)}
}
/* hairline grid */
.cf-grid-bg{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(70% 100% at 70% 40%, #000, transparent 78%);
          mask-image:radial-gradient(70% 100% at 70% 40%, #000, transparent 78%);
}

.cf-inner{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(32px,4vw,56px);
  align-items:center;
}

/* ---- Copy column ------------------------------------------------------ */
.cf-copy h2{margin:18px 0 0}
.cf-lead{margin:18px 0 26px}

.cf-stats{display:flex;align-items:center;gap:22px;margin:0 0 30px}
.cf-stat{display:flex;flex-direction:column;gap:2px}
.cf-stat-num{
  font-family:var(--font-display);font-weight:700;font-size:26px;letter-spacing:-.02em;
  color:var(--text);
}
.cf-stat-lab{font-size:12.5px;color:var(--text-dim);letter-spacing:.01em}
.cf-stat-div{width:1px;height:38px;background:var(--line)}
.cf-stat:first-child .cf-stat-lab{
  color:var(--accent);font-family:var(--font-display);font-weight:600;letter-spacing:.04em;
}

/* ---- Studio (preview) column ----------------------------------------- */
.cf-studio{
  position:relative;
  border:1px solid var(--line);border-radius:var(--r-card);
  background:rgba(14,17,19,.55);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:16px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:0 30px 80px -40px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
}

/* HUD */
.cf-hud{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.cf-pill{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:var(--r-pill);
  border:1px solid rgba(var(--accent-glow),.4);
  background:rgba(var(--accent-glow),.08);
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.14em;color:var(--accent);
}
.cf-pill-dot{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 0 rgba(var(--accent-glow),.7);
  animation:cf-blink 2.2s ease-in-out infinite;
}
@keyframes cf-blink{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(var(--accent-glow),.6)}
  50%    {opacity:.55;box-shadow:0 0 0 6px rgba(var(--accent-glow),0)}
}
.cf-readout{
  font-family:var(--font-display);font-size:11.5px;letter-spacing:.04em;
  color:var(--text-dim);text-align:right;
}

/* ---- Faux-3D stage ---------------------------------------------------- */
.cf-stage{
  position:relative;
  border-radius:14px;overflow:hidden;
  border:1px solid var(--line-soft);
  background:
    linear-gradient(180deg, rgba(63,167,160,.06), transparent 45%),
    linear-gradient(180deg, #10151a 0%, #0a0d10 60%, #070a0c 100%);
  aspect-ratio:16/10;
  perspective:1100px;
  perspective-origin:62% 42%;
}
.cf-scene{
  position:absolute;inset:0;
  transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-21deg);
  transition:transform .8s cubic-bezier(.3,.8,.4,1);
}

/* perspective floor */
.cf-floor{
  position:absolute;left:-30%;right:-30%;bottom:-2%;height:46%;
  background:
    linear-gradient(transparent, rgba(0,0,0,.5)),
    repeating-linear-gradient(90deg, rgba(199,206,211,.08) 0 1px, transparent 1px 56px);
  transform:rotateX(74deg);transform-origin:bottom center;
  -webkit-mask-image:linear-gradient(transparent, #000 40%);
          mask-image:linear-gradient(transparent, #000 40%);
}

/* posts / pillars */
.cf-posts{position:absolute;inset:0}
.cf-post{
  position:absolute;bottom:14%;width:4.5%;height:66%;border-radius:3px;
  background:linear-gradient(90deg,#2a3036,#171c20 60%,#0e1215);
  box-shadow:0 24px 40px -18px rgba(0,0,0,.8);
}
.cf-post-l{left:13%}
.cf-post-r{left:80%;transition:left .55s cubic-bezier(.3,.8,.4,1)}

/* the gate wrapper — width via --cf-w (percent of track) */
.cf-gate{
  position:absolute;bottom:16%;left:17%;height:60%;
  width:calc(11% + (var(--cf-w) / 100) * 56%);
  transform-style:preserve-3d;
  transition:width .5s cubic-bezier(.3,.8,.4,1), transform .9s cubic-bezier(.5,.05,.2,1);
}
.cf-leaf{
  position:absolute;inset:0;border-radius:4px;
  transform-style:preserve-3d;
  transition:transform .9s cubic-bezier(.5,.05,.2,1), filter .4s ease;
  background:var(--cf-fill);
  box-shadow:0 30px 50px -22px rgba(0,0,0,.85);
}
.cf-frame{
  position:absolute;inset:0;border-radius:4px;pointer-events:none;
  border:2px solid rgba(255,255,255,.10);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
/* vertical slats — rendered as a gradient stripe pattern */
.cf-slats{
  position:absolute;inset:5% 4%;border-radius:2px;
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.10) 0 2px,
    rgba(0,0,0,.16) 2px 4px,
    rgba(255,255,255,.04) 4px 11px,
    rgba(0,0,0,.20) 11px 13px
  );
  mix-blend-mode:overlay;
  transition:background-image .4s ease, transform .5s ease;
}
/* moving sheen highlight */
.cf-sheen{
  position:absolute;inset:0;border-radius:4px;pointer-events:none;
  background:linear-gradient(105deg, transparent 30%, rgba(255,255,255,.28) 48%, transparent 62%);
  background-size:240% 100%;background-position:120% 0;
  opacity:.0;transition:opacity .4s ease;
}
.cf-stage:hover .cf-sheen{opacity:1;animation:cf-sweep 2.6s ease-in-out infinite}
/* touch has no hover → run the sheen ambiently (motion allowed only) */
@media (hover:none) and (prefers-reduced-motion:no-preference){
  .cf-stage .cf-sheen{opacity:1;animation:cf-sweep 2.6s ease-in-out infinite}
}
@keyframes cf-sweep{0%{background-position:120% 0}100%{background-position:-40% 0}}

/* material: Stahl → darker, sharper sheen; Alu → softer */
.cf-stage[data-material="stahl"] .cf-leaf{filter:saturate(.85) brightness(.92) contrast(1.06)}
.cf-stage[data-material="stahl"] .cf-slats{
  background-image:repeating-linear-gradient(
    90deg,
    rgba(255,255,255,.06) 0 3px,
    rgba(0,0,0,.30) 3px 5px,
    rgba(255,255,255,.02) 5px 14px,
    rgba(0,0,0,.34) 14px 16px
  );
}
.cf-stage[data-material="alu"] .cf-leaf{filter:saturate(1.02) brightness(1.04)}

/* ── Type variants ── */
/* Sektional: horizontal slats */
.cf-stage[data-type="sektion"] .cf-slats{
  background-image:repeating-linear-gradient(
    0deg,
    rgba(255,255,255,.10) 0 12px,
    rgba(0,0,0,.22) 12px 15px
  );
}

/* ── OPEN animations (data-open="true") ── */
/* Schiebetor: slide sideways */
.cf-stage[data-type="schiebe"][data-open="true"] .cf-gate{
  transform:translateX(-86%);
}
/* Drehflügel: swing open on a hinge (left edge) */
.cf-stage[data-type="dreh"] .cf-gate{transform-origin:left center}
.cf-stage[data-type="dreh"][data-open="true"] .cf-gate{
  transform:rotateY(-72deg);
}
/* Sektional: lift up */
.cf-stage[data-type="sektion"] .cf-gate{transform-origin:top center}
.cf-stage[data-type="sektion"][data-open="true"] .cf-gate{
  transform:translateY(-72%) rotateX(38deg);
}

/* measure line under gate */
.cf-measure{
  position:absolute;left:17%;bottom:9%;
  width:calc(11% + (var(--cf-w,62) / 100) * 56%);
  display:flex;align-items:center;justify-content:center;
}
.cf-measure-line{
  position:absolute;left:0;right:0;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,rgba(var(--accent-glow),.6),transparent);
}
.cf-measure-val{
  position:relative;
  font-family:var(--font-display);font-size:10.5px;font-weight:600;letter-spacing:.06em;
  color:var(--accent-ink);background:var(--accent);
  padding:2px 8px;border-radius:var(--r-pill);
  box-shadow:0 4px 14px -4px rgba(var(--accent-glow),.8);
}

/* play / open control */
.cf-play{
  position:absolute;right:12px;bottom:12px;z-index:3;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 15px 9px 13px;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.16);
  background:rgba(10,13,15,.7);backdrop-filter:blur(6px);
  font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.03em;
  color:var(--text);cursor:pointer;transition:.25s;
}
.cf-play:hover{border-color:var(--accent);background:rgba(var(--accent-glow),.14)}
.cf-play-ico{
  width:0;height:0;border-style:solid;
  border-width:6px 0 6px 10px;border-color:transparent transparent transparent var(--accent);
  transition:.25s;
}
.cf-stage[data-open="true"] .cf-play-ico{
  width:9px;height:10px;border:none;border-left:3px solid var(--accent);border-right:3px solid var(--accent);
}

/* ---- Controls --------------------------------------------------------- */
.cf-controls{display:flex;flex-direction:column;gap:14px;padding:4px 4px 6px}
.cf-row{display:flex;flex-direction:column;gap:8px}
.cf-label{
  font-family:var(--font-display);font-size:11px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);
  display:flex;justify-content:space-between;align-items:baseline;
}
.cf-label-val{color:var(--accent);letter-spacing:.04em}

.cf-opts{display:flex;gap:8px;flex-wrap:wrap}
.cf-opt{
  font-family:var(--font-display);font-size:12px;
  padding:9px 14px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);color:var(--text-dim);
  background:transparent;transition:.22s;
}
.cf-opt:hover{border-color:var(--steel);color:var(--text)}
.cf-opt.is-on{
  border-color:var(--accent);color:var(--text);
  background:rgba(var(--accent-glow),.12);
  box-shadow:0 4px 16px -8px rgba(var(--accent-glow),.6);
}

.cf-swatches{display:flex;gap:9px;flex-wrap:wrap}
.cf-swatch{
  width:30px;height:30px;border-radius:8px;cursor:pointer;padding:0;
  background:var(--sw);border:2px solid transparent;transition:.2s;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);
}
@media (hover:hover){.cf-swatch:hover{transform:translateY(-2px)}}
.cf-swatch.is-on{
  border-color:#fff;
  box-shadow:0 0 0 2px rgba(var(--accent-glow),.5), inset 0 0 0 1px rgba(255,255,255,.2);
}

/* range slider */
.cf-range{
  -webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:99px;
  background:linear-gradient(90deg, var(--accent) var(--cf-pos,40%), rgba(255,255,255,.14) var(--cf-pos,40%));
  cursor:pointer;outline:none;
  touch-action:pan-y;  /* horizontal drag moves the thumb, vertical still scrolls */
}
.cf-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);
  box-shadow:0 2px 10px -2px rgba(0,0,0,.6);transition:transform .15s;
}
.cf-range::-webkit-slider-thumb:hover{transform:scale(1.12)}
.cf-range::-moz-range-thumb{
  width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid var(--accent);
}
.cf-range:focus-visible{box-shadow:0 0 0 3px rgba(var(--accent-glow),.35)}

/* full 3D configurator canvas (Konfigurator.html): let pointer-drag rotate
   the model instead of the browser stealing the gesture to scroll the page */
#kfg-canvas{touch-action:none}

/* ---- Responsive ------------------------------------------------------- */
@media (max-width:900px){
  .cf-inner{grid-template-columns:1fr}
  .cf-readout{text-align:left}
}
@media (max-width:480px){
  .cf-stage{aspect-ratio:4/3}
  .cf-stats{gap:16px}
  .cf-stat-num{font-size:22px}
}

/* ---- Reduced motion --------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .cf-aurora{animation:none}
  .cf-pill-dot{animation:none}
  .cf-stage:hover .cf-sheen{animation:none}
  .cf-scene{transform:rotateX(4deg) rotateY(-14deg);transition:none}
  .cf-gate,.cf-leaf,.cf-post-r{transition:none}
}