/* IntelliTuning Konfigurator-Lizenz – Live-Demo der Karten „Classic oder Modern“ (uidemo.js) und hochwertiger Karten-Hover.
   Eigene Präfixe itkl-, immer mit .itkl qualifiziert. Tempo-Variable --itkl-spd: 1 normal, 1.2 gehovert (uidemo.js zieht weich nach); alle Dauern per calc().
   Farblogik: Classic (Standard) komplett türkis, Modern (.gold) golden; der türkise Ring im Modern-Demo ist der echte Akzent der Modern-UI. */

/* ---------- Karte: Grundzustand, Variablen, Übergang (überbietet .itkl.js .itkl-rv.in aus konf.css) ---------- */
.itkl .itkl-uigrid>.itkl-uic{--itkl-spd:1;--rx:0deg;--ry:0deg;position:relative;isolation:isolate}
.itkl .itkl-uigrid>.itkl-uic.itkl-uic,.itkl.js .itkl-uigrid>.itkl-uic.itkl-rv.in{transition:opacity .7s ease,transform .55s cubic-bezier(.22,1,.36,1),box-shadow .55s cubic-bezier(.22,1,.36,1),border-color .45s ease;transition-delay:0s!important}
.itkl .itkl-uigrid>.itkl-uic.itkl-hov{--itkl-spd:1.2}

/* Lichtstreifen: zieht beim Überfahren einmal von links nach rechts, springt unsichtbar zurück */
.itkl .itkl-uigrid>.itkl-uic::after{content:"";position:absolute;inset:-1px;z-index:5;pointer-events:none;border-radius:inherit;opacity:0;transform:translateX(-120%);transition:none;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.10) 48%,rgba(255,255,255,.02) 56%,transparent 66%)}
.itkl .itkl-uigrid>.itkl-uic.gold::after{background:linear-gradient(115deg,transparent 30%,rgba(255,243,207,.13) 48%,rgba(255,243,207,.03) 56%,transparent 66%)}
.itkl .itkl-uigrid>.itkl-uic.itkl-hov::after{opacity:1;transform:translateX(120%);transition:transform .9s cubic-bezier(.22,1,.36,1)}

@media (hover:hover){
  /* Anheben + Neigung (±2°, --rx/--ry aus uidemo.js), Rand leuchtet: Classic türkis, Modern gold.
     Während des Hovers ersetzt ein deckender Fond das Glas (backdrop-filter), sonst müsste jede Neigungsänderung die Fläche dahinter neu blurren
     (Ruckeln auf schwachen Geräten, Raster-/Flimmerartefakte in Safari). Vor #04070a ist der Wechsel nicht sichtbar. */
  .itkl .itkl-uigrid>.itkl-uic.itkl-uic.itkl-hov{transform:translate3d(0,-8px,0) perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry));border-color:rgba(69,227,211,.5);box-shadow:0 28px 64px -30px rgba(69,227,211,.5),0 0 0 1px rgba(69,227,211,.18),inset 0 1px 0 rgba(255,255,255,.06);-webkit-backdrop-filter:none;backdrop-filter:none;background:linear-gradient(160deg,rgba(20,34,38,.96),rgba(10,18,21,.94))}
  .itkl .itkl-uigrid>.itkl-uic.itkl-uic.gold.itkl-hov{border-color:rgba(255,236,180,.85);box-shadow:0 34px 90px -34px rgba(232,200,115,.85),0 0 46px -12px rgba(232,200,115,.45),0 0 0 1px rgba(255,236,180,.35),inset 0 1px 0 rgba(255,240,200,.12)}
}

/* ---------- Screenshot: kein Zoom mehr (ersetzt .itkl .itkl-shot:hover img aus konf.css), nur ein sehr leichter Lichtgewinn ---------- */
.itkl .itkl-uic .itkl-shot{isolation:isolate}
.itkl .itkl-uic .itkl-shot,.itkl .itkl-uic .itkl-shot:is(:hover,:focus,:active,:visited){color:#fff;text-decoration:none;box-shadow:none}
.itkl .itkl-uic .itkl-shot img,.itkl .itkl-uic .itkl-shot:hover img{transform:none;filter:saturate(1) brightness(1);transition:filter .6s cubic-bezier(.22,1,.36,1)}
.itkl .itkl-uigrid>.itkl-uic.itkl-hov .itkl-shot img{filter:saturate(1.03) brightness(1.04)}
/* Modern: Bild 5 px breiter als die Box, damit beim Ruckeln kein Rand aufblitzt */
/* 1.0.8: Bild exakt in der Box lassen (keine Verbreiterung), sonst stimmen die Prozent-Positionen der Ringe nicht mehr */
.itkl .itkl-uic.gold .itkl-shot img{width:100%;max-width:100%;margin-left:0}
.itkl .itkl-uic .itkl-shot img.itkl-nudge{animation:itklDmNudge calc(.32s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1)}
.itkl .itkl-uic .itkl-shot img.itkl-nudge.itkl-back{animation-name:itklDmNudgeB}
/* Ruck nur ±2 px: eine Andeutung der Drehung, kein „Bildfehler“ an BMW, Knopf und Hinweisleiste */
@keyframes itklDmNudge{0%{transform:translateX(0)}35%{transform:translateX(2px)}100%{transform:translateX(0)}}
@keyframes itklDmNudgeB{0%{transform:translateX(0)}35%{transform:translateX(-2px)}100%{transform:translateX(0)}}

/* Pill „Live ausprobieren“: bleibt über dem Overlay, wird gehovert heller – Classic mit türkisem, Modern (.gold) mit goldenem Rand */
.itkl .itkl-uic .itkl-shot-play{z-index:3;transition:background-color .5s cubic-bezier(.22,1,.36,1),border-color .5s cubic-bezier(.22,1,.36,1),box-shadow .5s cubic-bezier(.22,1,.36,1),transform .5s cubic-bezier(.22,1,.36,1)}
.itkl .itkl-uigrid>.itkl-uic.itkl-hov .itkl-shot-play,.itkl .itkl-uic .itkl-shot:hover .itkl-shot-play{background:rgba(16,26,30,.96);border-color:rgba(69,227,211,.7);color:#fff;box-shadow:0 0 0 1px rgba(69,227,211,.2),0 12px 30px -14px rgba(69,227,211,.55);transform:translateY(-2px)}
.itkl .itkl-uigrid>.itkl-uic.itkl-hov .itkl-shot-play .itkl-ic,.itkl .itkl-uic .itkl-shot:hover .itkl-shot-play .itkl-ic{color:#45e3d3}
.itkl .itkl-uigrid>.itkl-uic.gold.itkl-hov .itkl-shot-play,.itkl .itkl-uic.gold .itkl-shot:hover .itkl-shot-play{border-color:rgba(232,200,115,.8);box-shadow:0 0 0 1px rgba(232,200,115,.22),0 12px 30px -14px rgba(232,200,115,.6)}
.itkl .itkl-uigrid>.itkl-uic.gold.itkl-hov .itkl-shot-play .itkl-ic,.itkl .itkl-uic.gold .itkl-shot:hover .itkl-shot-play .itkl-ic{color:#e8c873}

/* ---------- Overlay (per JS eingefügt): fängt keine Klicks, leichte Vignette ganz unten für den Pill (lässt die Logo-Reihe bei 72 % frei) ---------- */
.itkl .itkl-uic .itkl-demo{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.itkl .itkl-uic .itkl-demo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,7,10,0) 78%,rgba(4,7,10,.32))}

/* ---------- Classic (türkis): Zeiger, Rahmen-Glow, Ring-Ripple, Tipp-Linie ---------- */
.itkl .itkl-dm-cur{position:absolute;left:0;top:0;width:22px;height:22px;transform-origin:1.5px 1.5px;will-change:transform;opacity:0;fill:#fff;stroke:#0b1215;stroke-width:1.3;stroke-linejoin:round;filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)) drop-shadow(0 5px 12px rgba(69,227,211,.45));transition:opacity .4s ease}
.itkl .itkl-dm-cur.ok{opacity:1}
.itkl .itkl-dm-cur.dn{filter:drop-shadow(0 1px 1px rgba(0,0,0,.65)) drop-shadow(0 2px 8px rgba(69,227,211,.7))}
/* Rahmen 15 % × 21 % der Box = eine Logo-Kachel von tile-classic.webp samt Luft */
.itkl .itkl-dm-frame{position:absolute;left:50%;top:50%;width:15%;height:21%;border:2px solid rgba(69,227,211,.6);border-radius:10px;box-shadow:0 0 18px rgba(69,227,211,.35),inset 0 0 14px rgba(69,227,211,.14);transform:translate(-50%,-50%);opacity:0;transition:opacity calc(.35s / var(--itkl-spd,1)) ease}
.itkl .itkl-dm-frame.on{opacity:1;animation:itklDmPop calc(.5s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1)}
@keyframes itklDmPop{0%{opacity:0;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.itkl .itkl-dm-rip{position:absolute;left:50%;top:50%;width:5%;aspect-ratio:1/1;border-radius:50%;border:2px solid rgba(69,227,211,.85);box-shadow:0 0 12px rgba(69,227,211,.4);transform:translate(-50%,-50%);opacity:0}
.itkl .itkl-dm-rip.on{animation:itklDmRip calc(.6s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1) forwards}
@keyframes itklDmRip{0%{opacity:.9;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) scale(2.2)}}
/* Tipp-Linie auf der Textzeile des Suchfelds (Text ab x≈3 %, Feldmitte y≈18 %) */
.itkl .itkl-dm-type{position:absolute;left:3%;top:18%;width:24%;height:2px;margin-top:-1px;border-radius:2px;background:linear-gradient(90deg,rgba(69,227,211,.95),rgba(69,227,211,.55));box-shadow:0 0 10px rgba(69,227,211,.6);transform:scaleX(1);transform-origin:0 50%;opacity:0;transition:opacity calc(.4s / var(--itkl-spd,1)) ease}
.itkl .itkl-dm-type.on{opacity:1;animation:itklDmType calc(.9s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1)}
@keyframes itklDmType{0%{transform:scaleX(0)}100%{transform:scaleX(1)}}

/* ---------- Modern: Leuchtring, Goldpuls, Mausrad ---------- */
.itkl .itkl-dm-ring{position:absolute;left:12.2%;top:40.2%;width:11%;aspect-ratio:1/1;border-radius:50%;border:2px solid rgba(69,227,211,.55);box-shadow:0 0 16px rgba(69,227,211,.45),0 0 2px rgba(69,227,211,.6),inset 0 0 12px rgba(69,227,211,.16);transform:translate(-50%,-50%);transition:left calc(.26s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1),top calc(.26s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1)}
.itkl .itkl-dm-pulse{position:absolute;left:50%;top:20%;width:14%;aspect-ratio:1/1;border-radius:50%;border:2px solid rgba(232,200,115,.7);box-shadow:0 0 22px rgba(232,200,115,.4);transform:translate(-50%,-50%);opacity:0}
.itkl .itkl-demo.mid .itkl-dm-pulse{animation:itklDmPulse calc(1.4s / var(--itkl-spd,1)) ease-out infinite}
@keyframes itklDmPulse{0%{opacity:.75;transform:translate(-50%,-50%) scale(.8)}100%{opacity:0;transform:translate(-50%,-50%) scale(1.5)}}
.itkl .itkl-dm-mouse{position:absolute;right:16px;bottom:16px;width:34px;height:52px;overflow:visible;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.itkl .itkl-dm-mouse .b{fill:rgba(4,8,10,.6);stroke:rgba(69,227,211,.9);stroke-width:2}
.itkl .itkl-dm-mouse .w{fill:rgba(69,227,211,.08);stroke:rgba(69,227,211,.8);stroke-width:1.6}
.itkl .itkl-dm-mouse .n{fill:#45e3d3;opacity:.35}
.itkl .itkl-dm-mouse.tick .n{animation:itklDmNotch calc(.42s / var(--itkl-spd,1)) cubic-bezier(.22,1,.36,1)}
.itkl .itkl-dm-mouse.tick.back .n{animation-name:itklDmNotchB}
@keyframes itklDmNotch{0%{transform:translateY(-4px);opacity:.2}30%{opacity:1}100%{transform:translateY(4px);opacity:.35}}
@keyframes itklDmNotchB{0%{transform:translateY(4px);opacity:.2}30%{opacity:1}100%{transform:translateY(-4px);opacity:.35}}
.itkl .itkl-dm-mouse .t{fill:none;stroke:rgba(69,227,211,.28);stroke-width:1.6;stroke-linecap:round}
.itkl .itkl-dm-mouse.tick .t{animation:itklDmTick calc(.5s / var(--itkl-spd,1)) ease-out both}
.itkl .itkl-dm-mouse.tick .t2{animation-delay:calc(.11s / var(--itkl-spd,1))}
.itkl .itkl-dm-mouse.tick .t3{animation-delay:calc(.22s / var(--itkl-spd,1))}
.itkl .itkl-dm-mouse.tick.back .t1{animation-delay:calc(.22s / var(--itkl-spd,1))}
.itkl .itkl-dm-mouse.tick.back .t3{animation-delay:0s}
@keyframes itklDmTick{0%{stroke:rgba(69,227,211,.28)}35%{stroke:#eafffd;stroke-width:2.2}100%{stroke:rgba(69,227,211,.28)}}

/* ---------- Handy: kleinerer Zeiger und kleinere Maus, keine Neigung ---------- */
@media (max-width:560px){
  .itkl .itkl-dm-cur{width:18px;height:18px}
  .itkl .itkl-dm-mouse{width:26px;height:40px;right:12px;bottom:12px}
  .itkl .itkl-uigrid>.itkl-uic.itkl-uic.itkl-hov{transform:translate3d(0,-8px,0)}
}

/* ---------- Reduzierte Bewegung: nur Endzustand, keine Übergänge ---------- */
@media (prefers-reduced-motion:reduce){
  .itkl .itkl-uigrid>.itkl-uic.itkl-uic,.itkl .itkl-uic .itkl-shot-play,.itkl .itkl-uic .itkl-shot img,.itkl .itkl-dm-cur,.itkl .itkl-dm-ring,.itkl .itkl-dm-frame,.itkl .itkl-dm-type{transition:none}
  .itkl .itkl-uigrid>.itkl-uic::after{display:none}
  .itkl .itkl-uigrid>.itkl-uic.itkl-uic.itkl-hov{transform:none}
  .itkl .itkl-dm-frame.on,.itkl .itkl-dm-rip.on,.itkl .itkl-dm-type.on,.itkl .itkl-demo.mid .itkl-dm-pulse,.itkl .itkl-dm-mouse.tick .n,.itkl .itkl-dm-mouse.tick .t,.itkl .itkl-uic .itkl-shot img.itkl-nudge{animation:none}
  .itkl .itkl-demo.mid .itkl-dm-pulse{opacity:.55}
}