/* withira.com — Software-Katalog. Erbt Tokens/Klassen aus styles.css. */

/* ===== Räumliche Tiefe: der "Raum", in dem die App-Inseln schweben ===== */
.kat-space{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;perspective:1000px;background:var(--wi-grad-hero);}
.kat-space__grid{position:absolute;left:50%;top:78%;width:240%;height:150%;transform:translate(-50%,-50%) rotateX(76deg);
  background-image:linear-gradient(var(--wi-line) 1px,transparent 1px),linear-gradient(90deg,var(--wi-line) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(60% 60% at 50% 30%,#000,transparent 80%);opacity:.35;animation:katfloor 26s linear infinite;}
@keyframes katfloor{0%{background-position:0 0;}100%{background-position:0 64px;}}
.kat-space__stars{position:absolute;inset:0;opacity:.6;
  background:radial-gradient(2px 2px at 18% 24%,var(--wi-gold-glow),transparent),
    radial-gradient(2px 2px at 72% 58%,var(--wi-ai-cyan-soft),transparent),
    radial-gradient(1.5px 1.5px at 42% 82%,rgba(255,255,255,.22),transparent),
    radial-gradient(1.5px 1.5px at 88% 28%,var(--wi-gold-glow),transparent),
    radial-gradient(1.5px 1.5px at 9% 66%,rgba(255,255,255,.18),transparent);}
.kat-space__glow{position:absolute;left:50%;top:34%;width:680px;height:680px;transform:translate(-50%,-50%);
  background:radial-gradient(circle,var(--wi-ai-cyan-soft),transparent 60%);filter:blur(30px);opacity:.5;}

/* ===== Schwebende Inseln (Produktkarten) ===== */
.grid,.topgrid{perspective:1200px;}
.prod,.topcard{position:relative;transform-style:preserve-3d;
  transform:rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateZ(0);
  box-shadow:0 26px 44px -22px rgba(0,0,0,.7),0 6px 14px -8px var(--wi-gold-glow);}
/* Bodenschatten = "schwebt über dem Boden" */
.prod::after,.topcard::after{content:"";position:absolute;left:12%;right:12%;bottom:-16px;height:20px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 72%);filter:blur(5px);z-index:-1;
  transform:translateZ(-40px);transition:opacity .25s var(--wi-ease),transform .25s var(--wi-ease);opacity:.7;}
.prod:hover,.topcard:hover{box-shadow:0 40px 70px -26px rgba(0,0,0,.8),0 0 34px -8px var(--wi-gold-glow);}
.prod:hover::after,.topcard:hover::after{opacity:.95;left:8%;right:8%;}
/* sanftes Schweben (nur Top-10 — wenige, performant) */
.topcard{animation:island 7s ease-in-out infinite;}
.topcard:nth-child(2n){animation-delay:-2.3s;}
.topcard:nth-child(3n){animation-delay:-4.1s;}
.topcard:hover{animation-play-state:paused;}
@keyframes island{0%,100%{transform:translateY(0) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));}50%{transform:translateY(-9px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg));}}


/* ---- Katalog-Hero ---- */
.kat-hero{max-width:880px;margin:0 auto;text-align:center;padding:128px 24px 36px;}
.kat-hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5vw,4rem);line-height:1.08;margin:0 0 16px;}
.kat-hero__sub{font-size:clamp(1rem,1.4vw,1.16rem);color:var(--wi-text-dim);max-width:620px;margin:0 auto;}
.kat-hero__sub strong{color:var(--wi-text);}
.kat-hero__grow{display:inline-flex;align-items:center;gap:9px;justify-content:center;margin:18px auto 0;max-width:620px;
  font-size:13.5px;color:var(--wi-ai-cyan);background:var(--wi-ai-cyan-soft);border:1px solid color-mix(in srgb,var(--wi-ai-cyan) 30%,transparent);
  border-radius:999px;padding:9px 18px;line-height:1.4;}
.kat-hero__grow strong{color:var(--wi-text);}
.kat-hero__stats{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;margin-top:24px;color:var(--wi-text-dim);font-size:13.5px;}
.kat-hero__stats b{color:var(--wi-gold-hi);font-family:var(--serif);font-size:20px;display:block;}
.kat-hero__stats span{display:flex;flex-direction:column;align-items:center;gap:2px;}

/* ---- Ira Gesamt-Werbung ---- */
.ira-promo{max-width:1000px;margin:18px auto 0;display:grid;grid-template-columns:230px 1fr;gap:28px;align-items:center;
  background:radial-gradient(120% 140% at 0% 0%,#101a25,var(--wi-bg-1) 60%);border:1px solid var(--wi-line);
  border-radius:26px;padding:30px;}
.ira-promo__face{position:relative;display:flex;align-items:center;justify-content:center;height:230px;}
.ira-promo__halo{position:absolute;width:190px;height:190px;border-radius:50%;
  background:radial-gradient(circle,var(--wi-ai-cyan-soft),transparent 65%);filter:blur(10px);animation:breathe 4s ease-in-out infinite;}
.ira-promo__avatar{font-size:120px;position:relative;z-index:2;filter:drop-shadow(0 16px 24px rgba(0,0,0,.5));}
.ira-promo__video{position:relative;z-index:2;width:200px;height:230px;object-fit:cover;border-radius:18px;border:1px solid var(--wi-line);background:#0a0d12;}
.ira-promo__tag{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--wi-ai-cyan);margin-bottom:10px;}
.ira-promo__title{font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.6vw,2.1rem);margin:0 0 12px;}
.ira-promo__text{color:var(--wi-text-dim);font-size:15px;line-height:1.65;margin:0 0 18px;}
.ira-promo__actions{display:flex;gap:10px;flex-wrap:wrap;}
.ira-promo.is-speaking .ira-promo__halo{animation-duration:1.4s;}

/* ---- Top-10 ---- */
.topgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;}
.topcard{position:relative;display:flex;flex-direction:column;background:var(--wi-bg-2);border:1px solid color-mix(in srgb,var(--wi-gold) 26%,var(--wi-line));
  border-radius:18px;padding:20px;transition:transform .18s var(--wi-ease),border-color .25s,box-shadow .25s;}
.topcard:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--wi-gold) 55%,var(--wi-line));box-shadow:0 22px 44px -24px var(--wi-gold-glow);}
.topcard__rank{position:absolute;top:14px;right:14px;font-family:var(--serif);font-size:14px;color:#1a1408;background:var(--wi-grad-gold);
  width:30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;box-shadow:0 6px 16px -6px var(--wi-gold-glow);}
.topcard__icon{font-size:38px;}
.topcard__cat{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--wi-gold);margin-top:8px;}
.topcard h3{font-family:var(--serif);font-weight:400;font-size:22px;margin:3px 0 6px;}
.topcard__pitch{margin:0 0 14px;color:var(--wi-text-dim);font-size:13.5px;line-height:1.5;flex:1;}
.topcard__ira{display:flex;align-items:flex-start;gap:7px;font-size:12.5px;color:var(--wi-ai-cyan);margin-bottom:14px;}
.topcard__ira-dot{flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--wi-ai-cyan);box-shadow:0 0 8px var(--wi-ai-cyan);}
.topcard__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.topcard__price{font-family:var(--serif);font-size:22px;color:var(--wi-gold-hi);}
.topcard__btns{display:flex;gap:8px;}

/* ---- Steuerung / Filter ---- */
.kat-controls{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin:0 auto 18px;max-width:840px;}
.kat-search{display:flex;align-items:center;gap:9px;flex:1;min-width:240px;background:var(--wi-bg-2);border:1px solid var(--wi-line);border-radius:999px;padding:10px 16px;}
.kat-search svg{width:17px;height:17px;fill:none;stroke:var(--wi-gold);stroke-width:2;flex:none;}
.kat-search input{flex:1;min-width:0;background:transparent;border:none;color:var(--wi-text);font:inherit;font-size:14.5px;}
.kat-search input:focus{outline:none;}
.kat-select{background:var(--wi-bg-2);border:1px solid var(--wi-line);color:var(--wi-text);border-radius:999px;padding:10px 16px;font:inherit;font-size:14px;cursor:pointer;}
.kat-select:focus{outline:none;border-color:var(--wi-gold);}
.kat-count{text-align:center;color:var(--wi-text-dim);font-size:13px;margin:0 0 22px;}
.kat-empty{text-align:center;color:var(--wi-text-dim);padding:40px 0;}

/* ---- Produktkarten im Katalog ---- */
.kat-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.prod__buy{flex:none;background:var(--wi-grad-gold);color:#1a1408;border:none;border-radius:999px;padding:8px 16px;font:inherit;font-weight:700;font-size:13.5px;cursor:pointer;transition:transform .15s var(--wi-ease),filter .15s;}
.prod__buy:hover{transform:translateY(-1px);filter:brightness(1.05);}
.prod__buy:active{transform:scale(.96);}
.prod__tip{position:absolute;top:12px;left:12px;font-size:10px;font-weight:700;letter-spacing:.06em;color:#1a1408;background:var(--wi-grad-gold);border-radius:999px;padding:3px 9px;box-shadow:0 6px 16px -6px var(--wi-gold-glow);}
.prod.has-tip{border-color:color-mix(in srgb,var(--wi-gold) 30%,var(--wi-line));}
.prod__cat--clickable{cursor:pointer;}

/* In der Karte: "Ira erzählt"-Mini-Button für Top-10 */
.prod__irabtn{display:inline-flex;align-items:center;gap:6px;background:transparent;border:1px solid var(--wi-ai-cyan-soft);color:var(--wi-ai-cyan);
  border-radius:999px;padding:5px 11px;font:inherit;font-size:11.5px;cursor:pointer;margin-bottom:12px;}
.prod__irabtn:hover{border-color:var(--wi-ai-cyan);}

/* ---- Modal ---- */
.kat-modal{position:fixed;inset:0;z-index:90;display:flex;align-items:center;justify-content:center;padding:20px;}
.kat-modal[hidden]{display:none;}
.kat-modal__backdrop{position:absolute;inset:0;background:rgba(4,6,9,.74);backdrop-filter:blur(4px);}
.kat-modal__box{position:relative;z-index:1;width:min(560px,94vw);max-height:88vh;overflow:auto;background:var(--wi-bg-2);
  border:1px solid var(--wi-line);border-radius:22px;padding:28px;box-shadow:0 40px 90px -30px #000;}
.kat-modal__x{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--wi-line);
  background:var(--wi-bg-1);color:var(--wi-text-dim);font-size:15px;cursor:pointer;}
.kat-modal__x:hover{color:var(--wi-gold);border-color:var(--wi-gold);}
.mc-head{display:flex;align-items:center;gap:14px;margin-bottom:6px;}
.mc-icon{font-size:42px;}
.mc-title{font-family:var(--serif);font-weight:400;font-size:24px;margin:0;}
.mc-cat{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--wi-gold);}
.mc-ira{display:flex;gap:10px;background:radial-gradient(120% 140% at 0% 0%,#101a25,var(--wi-bg-1) 70%);border:1px solid var(--wi-line);border-radius:16px;padding:16px;margin:16px 0;}
.mc-ira__face{font-size:46px;flex:none;}
.mc-ira__video{flex:none;width:120px;height:213px;object-fit:cover;border-radius:12px;border:1px solid var(--wi-line);background:#0a0d12;}
.mc-ira__script{font-size:14.5px;line-height:1.6;color:var(--wi-text);margin:0;}
.mc-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:18px;flex-wrap:wrap;}
.mc-price{font-family:var(--serif);font-size:28px;color:var(--wi-gold-hi);}
.mc-price small{font-size:13px;color:var(--wi-text-dim);font-family:var(--sans);}
.mc-note{font-size:12.5px;color:var(--wi-text-dim);margin:14px 0 0;line-height:1.5;}
.mc-actions{display:flex;gap:10px;flex-wrap:wrap;}

/* ---- Toast ---- */
.kat-toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);z-index:95;max-width:90vw;
  background:linear-gradient(135deg,#1b2330,#10151d);color:var(--wi-text);border:1px solid var(--wi-ai-cyan-soft);
  border-radius:14px;padding:12px 18px;font-size:14px;font-weight:500;box-shadow:0 18px 40px -16px #000;opacity:0;transition:opacity .25s,transform .25s;}
.kat-toast.show{opacity:1;transform:translateX(-50%) translateY(-6px);}

/* ---- Responsive ---- */
@media (max-width:760px){
  .ira-promo{grid-template-columns:1fr;text-align:center;}
  .ira-promo__face{height:170px;}
  .ira-promo__avatar{font-size:92px;}
  .ira-promo__actions{justify-content:center;}
  .ira-promo__tag{justify-content:center;}
}
@media (max-width:560px){
  .kat-hero{padding:110px 16px 28px;}
  .kat-controls{flex-direction:column;}
  .kat-search{min-width:0;}
  .kat-grid,.topgrid{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .ira-promo__halo{animation:none !important;}
}