/* ═══════════════════════════════════════════════════════════════════════════
   teil-zr — Meta AI Smart Glasses und Nuance Audio
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026 (Auftrag 11): „Behalte unser Design bei."
   Darum keine eigene Welt: dieselbe Hülle (.sammel-teil), derselbe Kopf mit
   Nummer und Marke, dieselbe Einblendung. Neu ist nur, was der Abschnitt
   wirklich braucht — eine Punkteliste und ein gezeichnetes Zeichen.
   ═══════════════════════════════════════════════════════════════════════════ */

.neuheit-raster{
  display:grid; gap:clamp(1.2rem, 2.4vw, 2.4rem);
  align-items:center;
}
@media (min-width:940px){
  .neuheit-raster{ grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr) }
}

.neuheit-leitsatz{
  font-size:clamp(1.02rem,1.25vw,1.18rem); line-height:1.6;
  color:var(--text); margin:0 0 clamp(.9rem,1.6vw,1.3rem);
  max-width:46ch;
}

.neuheit-punkte{ list-style:none; margin:0 0 clamp(1rem,1.8vw,1.5rem); padding:0;
  display:grid; gap:.7rem }
.neuheit-punkte li{
  display:grid; gap:.1em;
  padding-left:1.5em; position:relative;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--weich), transform .5s var(--weich);
  transition-delay:calc(var(--nh-i, 1) * 70ms);
}
.einblenden.auf .neuheit-punkte li{ opacity:1; transform:none }
.neuheit-punkte li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:.6em; height:.6em; border-radius:50%;
  background:var(--gold);
}
.neuheit-punkte strong{ color:var(--blau); font-weight:800; font-size:.98rem }
.neuheit-punkte span{ color:var(--text-leise); font-size:.93rem; line-height:1.6 }

.neuheit-hinweis{
  font-size:.86rem; line-height:1.6; color:var(--text-leise);
  padding:.8em 1em; border-radius:var(--r-m);
  background:var(--gold-zart); border:1px solid rgba(203,176,130,.4);
  margin:0 0 clamp(1rem,1.6vw,1.3rem);
}

/* ── Das Zeichen ────────────────────────────────────────────────────────── */
.neuheit-bild{
  display:grid; place-items:center;
  padding:clamp(1.2rem,2.4vw,2.2rem);
  border-radius:var(--r-l);
  background:linear-gradient(160deg,
    color-mix(in oklab, var(--weiss) 86%, transparent),
    color-mix(in oklab, var(--blau-zart) 70%, transparent));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 12px 34px rgba(19,55,109,.08);
}
.nh-zeichen{ width:100%; max-width:360px; height:auto; color:var(--blau); overflow:visible }

/* Die Kamera bzw. die Mikrofone blinken ruhig; die Wellen laufen hinaus.
   Beides nur, wenn der Abschnitt sichtbar ist — nichts läuft im Verborgenen. */
.einblenden.auf .nh-blink{ animation:nh-blinken 3.2s ease-in-out infinite }
.einblenden.auf .nh-blink-2{ animation-delay:.4s }
@keyframes nh-blinken{
  0%,72%,100%{ fill:none; opacity:.55 }
  80%{ fill:var(--gold); opacity:1 }
}
.nh-welle path{ opacity:0 }
.einblenden.auf .nh-welle path{ animation:nh-wellen 2.6s var(--weich) infinite }
.einblenden.auf .nh-welle path:last-child{ animation-delay:.3s }
@keyframes nh-wellen{
  0%{ opacity:0; transform:translateX(-5px) }
  35%{ opacity:.9 }
  100%{ opacity:0; transform:translateX(7px) }
}
.nh-anzeige path{ stroke:var(--gold-tief) }
.einblenden.auf .nh-anzeige path{ animation:nh-zeile 3.4s var(--weich) infinite }
.einblenden.auf .nh-anzeige path:nth-child(2){ animation-delay:.25s }
.einblenden.auf .nh-anzeige path:nth-child(3){ animation-delay:.5s }
@keyframes nh-zeile{
  0%,60%,100%{ opacity:.35 }
  20%{ opacity:1 }
}

/* Der Chip in der Sprungleiste bekommt einen goldenen Punkt — neu ist neu. */
.chip-neu{ position:relative }
.chip-neu::after{
  content:""; position:absolute; top:.45em; right:.5em;
  width:6px; height:6px; border-radius:50%; background:var(--gold);
}

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (scripting: none){
  .neuheit-punkte li{ opacity:1; transform:none; transition:none }
  .nh-welle path{ opacity:.8 }
}
@media (prefers-reduced-motion: reduce){
  .neuheit-punkte li{ opacity:1; transform:none; transition:none }
  .einblenden.auf .nh-blink,
  .einblenden.auf .nh-welle path,
  .einblenden.auf .nh-anzeige path{ animation:none }
  .nh-welle path{ opacity:.8 }
}