/* ============================================================
   DeppFlow — Enhancements (Lamp-Hero, Karten-Modals, Legal-Shell)
   Additiv zum NEXUS-Design. Nutzt bestehende Tokens (--cyan etc.)
   ============================================================ */

/* ── 1. Lamp-Hero (Startseite) ─────────────────────────────── */
.lamp-hero{
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
}
.lamp-scene{
  position:relative;
  z-index:1;
  width:100%;
  height:0;
  display:flex;
  justify-content:center;
  pointer-events:none;
}
.lamp-scene > *{position:absolute}

.lamp-line{
  top:0;left:50%;
  transform:translate(-50%,-50%);
  height:2px;
  width:min(30rem,85vw);
  border-radius:2px;
  background:var(--cyan);
  box-shadow:0 0 18px 2px rgba(0,200,255,.55);
  animation:lampLine .8s var(--ease-expo) .3s both;
}
@keyframes lampLine{from{width:15rem;opacity:.5}}

.lamp-beam{
  top:1px;
  width:min(30rem,50vw);
  height:16rem;
  opacity:.85;
  mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 92%);
  animation:lampBeam .8s var(--ease-expo) .3s both;
}
.lamp-beam-left{
  right:50%;
  transform-origin:top right;
  background:conic-gradient(from 180deg at 100% 0%, rgba(0,200,255,.5) 0deg, transparent 42deg, transparent 360deg);
}
.lamp-beam-right{
  left:50%;
  transform-origin:top left;
  background:conic-gradient(from 138deg at 0% 0%, transparent 0deg, rgba(0,200,255,.5) 42deg, transparent 43deg);
}
@keyframes lampBeam{from{opacity:.3;transform:scaleX(.55)}}

.lamp-glow-soft{
  top:0;left:50%;
  transform:translate(-50%,-50%);
  width:min(28rem,70vw);
  height:9rem;
  border-radius:50%;
  background:var(--cyan);
  opacity:.28;
  filter:blur(70px);
}
.lamp-glow-core{
  top:0;left:50%;
  transform:translate(-50%,-45%);
  width:16rem;
  height:8rem;
  border-radius:50%;
  background:var(--cyan);
  opacity:.5;
  filter:blur(42px);
  animation:lampCore .8s var(--ease-expo) .3s both;
}
@keyframes lampCore{from{width:8rem}}

.lamp-content{
  position:relative;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  max-width:860px;
  padding:clamp(3.5rem,9vh,6rem) clamp(20px,4vw,48px) 40px;
  animation:lampRise .8s var(--ease-expo) .3s both;
}
@keyframes lampRise{from{opacity:0;transform:translateY(56px)}}

.lamp-content .nx-hero-lead{margin-left:auto;margin-right:auto}
.lamp-content .nx-hero-actions,
.lamp-content .nx-hero-chips{justify-content:center}

[data-theme="light"] .lamp-beam{opacity:.3}
[data-theme="light"] .lamp-glow-soft{opacity:.16}
[data-theme="light"] .lamp-glow-core{opacity:.28}

@media (prefers-reduced-motion: reduce){
  .lamp-line,.lamp-beam,.lamp-glow-core,.lamp-content{animation:none}
}

/* ── 2. Klickbare Inhalts-Karten (Affordanz ohne Textlabel) ── */
.card-interactive{cursor:pointer}
.card-interactive:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.card-interactive .card-plus{
  position:absolute;top:16px;right:16px;
  width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background:var(--bg-glass);
  color:var(--cyan);
  font-size:1rem;line-height:1;
  opacity:.5;transform:scale(.92);
  transition:opacity .3s var(--ease),transform .3s var(--ease-spring),background .3s var(--ease);
  z-index:3;pointer-events:none;
}
.card-interactive:hover .card-plus,
.card-interactive:focus-visible .card-plus{opacity:1;transform:scale(1);background:var(--cyan-dim)}

/* ── 3. Detail-Modal ───────────────────────────────────────── */
.df-modal-backdrop{
  position:fixed;inset:0;z-index:4000;
  display:flex;align-items:center;justify-content:center;
  padding:24px;
  background:rgba(2,4,14,.66);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;transition:opacity .26s var(--ease);
}
.df-modal-backdrop.is-open{opacity:1}
.df-modal{
  position:relative;
  width:min(620px,100%);
  max-height:min(84vh,780px);overflow:auto;
  background:var(--bg-2);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-xl);
  padding:38px 38px 32px;
  transform:translateY(16px) scale(.97);
  transition:transform .3s var(--ease-spring);
}
.df-modal::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:var(--grad-primary);opacity:.5;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;pointer-events:none;
}
.df-modal-backdrop.is-open .df-modal{transform:translateY(0) scale(1)}
.df-modal-body{position:relative}
.df-modal-eyebrow{
  display:inline-block;font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);margin-bottom:12px;
}
.df-modal h3{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.05rem);margin:0 0 16px;color:var(--text-1)}
.df-modal p{color:var(--text-2);line-height:1.7;margin:0 0 14px}
.df-modal ul{margin:0 0 16px;padding-left:1.15em;color:var(--text-2);line-height:1.7}
.df-modal li{margin-bottom:7px}
.df-modal strong{color:var(--text-1)}
.df-modal-close{
  position:absolute;top:18px;right:18px;
  width:42px;height:42px;border-radius:50%;
  border:1px solid var(--border);background:var(--bg-glass);
  color:var(--text-1);font-size:1.4rem;line-height:1;
  display:grid;place-items:center;
  transition:background .3s var(--ease),transform .3s var(--ease);
}
.df-modal-close:hover{background:var(--cyan-dim);transform:rotate(90deg)}
body.df-modal-open{overflow:hidden}
@media (prefers-reduced-motion: reduce){
  .df-modal-backdrop,.df-modal{transition:opacity .15s linear}
  .df-modal{transform:none}
  .df-modal-close:hover{transform:none}
}
@media (max-width:560px){.df-modal{padding:28px 20px 24px}}

/* ── 4. Legal-Seiten (Datenschutz / Impressum) im nx-Stil ──── */
.nx-legal{max-width:820px;margin:0 auto}
.nx-legal-card{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-xl);
  box-shadow:var(--shadow-lg);
  padding:clamp(28px,4vw,52px);
}
.nx-legal-card h2{
  font-family:var(--font-display);
  font-size:clamp(1.2rem,2vw,1.5rem);
  color:var(--text-1);
  margin:36px 0 12px;
}
.nx-legal-card h2:first-of-type{margin-top:0}
.nx-legal-card p,.nx-legal-card li{color:var(--text-2);line-height:1.75}
.nx-legal-card a{color:var(--cyan)}
.nx-legal-card code{font-family:var(--font-mono);font-size:.9em;background:var(--bg-glass);padding:2px 6px;border-radius:6px}
.nx-legal-card small{color:var(--text-3)}