/* ═══════════════════════════════════════════════════════════════════════════
   teil-zt — Meta AI Smart Glasses, dunkel
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026, nach dem ersten Livegang:

     „Hier könnte man noch für die AI Glasses mal eine Designvariante nehmen,
      die heraussticht. Mach einen schwarzen Hintergrund, solche Kacheln und
      Bildanimationen. … ein geiles, modernes Design, entweder wie bei
      meta.com oder wie die Hero-Seite. Ich würde eher das in Dunkel wählen,
      um da mal ein bisschen was abzuheben."

   ── Die Ausnahme, die hier bewusst gemacht wird ───────────────────────────
   Der Theme-Vertrag sagt: „Heller Grund, Blau nur als Akzent. Keine dunklen
   Vollflächen." **Dieser eine Abschnitt weicht davon ab**, auf seine
   ausdrückliche Ansage, und nur er. Sie steht darum auch in
   .quelle/VERTRAG.md als benannte Ausnahme — sonst baut sie der Nächste als
   Fehler zurück.

   Damit der Bruch nicht wie ein Versehen aussieht, bekommt die Fläche oben und
   unten einen weichen Übergang ins Creme: sie liegt wie eine Platte im hellen
   Blatt, nicht wie ein abgerissenes Stück.

   ── Die Farben kommen aus dem Material ────────────────────────────────────
   Nicht erfunden: Schwarz und das tiefe Rot der offiziellen
   Ray-Ban-x-Meta-Motive, dazu das Hausgold für die Akzente. So wirken Fläche
   und Bilder wie aus einem Guss.

   ── Was sich bewegt ───────────────────────────────────────────────────────
   Das große Bild wird beim Scrollen herangezogen (--meta-wuchs aus dem
   Skript, wie im Hörakustik-Abschnitt der Startseite — bewusst NICHT über
   animation-timeline:view(), weil .blatt ein Scrollbehälter ohne Scrollweg
   ist). Die vier Kacheln kommen versetzt herein, heben sich beim Überfahren
   und zoomen ihr Bild dabei leicht an.
   ═══════════════════════════════════════════════════════════════════════════ */

.meta-teil{
  --meta-wuchs:0;
  --meta-schwarz:#0C0A0B;
  --meta-rot:#3A0E14;
  --meta-hell:#F3EEEA;
  --meta-leise:#B9ADA8;
  position:relative;
  isolation:isolate;
  padding-block:clamp(3rem, 6vw, 6rem);
  margin-block:clamp(1.6rem, 3vw, 3rem);
  color:var(--meta-hell);
}
.meta-grund{
  position:absolute; inset:0; z-index:-1;
  border-radius:clamp(26px, 3vw, 44px);
  background:
    radial-gradient(120% 90% at 78% 12%, #5A1620 0%, rgba(90,22,32,0) 58%),
    radial-gradient(90% 70% at 8% 92%, #1A1013 0%, rgba(26,16,19,0) 60%),
    linear-gradient(165deg, var(--meta-schwarz), var(--meta-rot) 62%, #140B0E);
  box-shadow:0 30px 80px rgba(12,10,11,.28);
}
/* Weicher Rand nach oben und unten, damit die Platte im hellen Blatt liegt. */
.meta-grund::before,
.meta-grund::after{
  content:""; position:absolute; left:0; right:0; height:clamp(28px,4vw,56px);
  pointer-events:none;
}
.meta-grund::before{ top:0;    background:linear-gradient(180deg, rgba(251,247,240,.22), transparent);
  border-radius:clamp(26px,3vw,44px) clamp(26px,3vw,44px) 0 0 }
.meta-grund::after{ bottom:0; background:linear-gradient(0deg, rgba(251,247,240,.14), transparent);
  border-radius:0 0 clamp(26px,3vw,44px) clamp(26px,3vw,44px) }

/* ── Kopf ───────────────────────────────────────────────────────────────── */
.meta-teil .meta-kopf .sammel-zahl{ color:rgba(203,176,130,.55) }
.meta-teil .meta-kopf .marke{ color:var(--gold) }
.meta-teil .meta-kopf h2{ color:#fff }
.meta-teil .meta-kopf h2 .kursiv{ color:var(--gold) }

.meta-leitsatz{
  max-width:52ch; margin:clamp(.8rem,1.5vw,1.2rem) 0 clamp(1.4rem,2.6vw,2.4rem);
  font-size:clamp(1.02rem,1.3vw,1.22rem); line-height:1.6;
  color:var(--meta-leise);
}

/* ── Das große Bild, das beim Scrollen herankommt ───────────────────────── */
.meta-gross{
  margin:0 0 clamp(1rem,2vw,1.8rem);
  border-radius:clamp(18px,2.2vw,30px);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.meta-gross img{
  display:block; width:100%; height:auto;
  transform:scale(calc(1.01 + var(--meta-wuchs, 0) * .09));
  transform-origin:60% 50%;
}

/* ── Die vier Kacheln ───────────────────────────────────────────────────── */
/* Vier Kacheln gehen durch 4, 2 und 1 auf — durch 3 nicht. Ein auto-fit-Raster
   brach bei 1850 px gemessen auf 3 + 1 um und ließ „Hören" allein in der
   zweiten Zeile stehen. Darum feste Spaltenzahlen, so wie bei den acht
   Brillenkacheln der Startseite. */
.meta-kacheln{
  display:grid; gap:clamp(.7rem,1.3vw,1.1rem);
  grid-template-columns:repeat(4, minmax(0,1fr));
  margin-bottom:clamp(1.4rem,2.6vw,2.4rem);
}
@media (max-width:1180px){
  .meta-kacheln{ grid-template-columns:repeat(2, minmax(0,1fr)) }
}
@media (max-width:560px){
  .meta-kacheln{ grid-template-columns:minmax(0,1fr) }
}
.meta-kachel{
  display:flex; flex-direction:column;
  padding:clamp(.55rem,.9vw,.75rem);
  border-radius:clamp(16px,2vw,24px);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.1);
  opacity:0; transform:translateY(16px);
  transition:opacity .6s var(--weich), transform .6s var(--weich),
             background .4s var(--weich), border-color .4s var(--weich),
             box-shadow .4s var(--weich);
  transition-delay:calc(var(--mk-i, 1) * 80ms);
}
.einblenden.auf .meta-kachel{ opacity:1; transform:none }
.meta-kachel:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(203,176,130,.55);
  box-shadow:0 20px 44px rgba(0,0,0,.45);
}
.meta-bild{
  display:block; overflow:hidden; margin-bottom:.8rem;
  border-radius:clamp(11px,1.5vw,17px);
  background:var(--meta-schwarz);
  aspect-ratio:2/1;
}
.meta-bild img{
  width:100%; height:100%; object-fit:cover; display:block;
  transform:scale(1.01);
  transition:transform 1s var(--weich);
}
.meta-kachel:hover .meta-bild img{ transform:scale(1.07) }
.meta-kachel h3{
  margin:0 0 .25rem; padding-inline:.35rem;
  color:#fff; font-size:clamp(1rem,1.15vw,1.12rem);
}
.meta-kachel p{
  margin:0 0 .35rem; padding-inline:.35rem;
  color:var(--meta-leise); font-size:.9rem; line-height:1.55;
}

/* ── Die Fakten ─────────────────────────────────────────────────────────── */
.meta-fakten{
  display:grid; gap:clamp(.6rem,1.1vw,.9rem);
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 268px), 1fr));
  padding-top:clamp(1rem,1.8vw,1.6rem);
  border-top:1px solid rgba(255,255,255,.12);
}
.meta-fakt{
  display:grid; gap:.15em; padding-left:1.1em; position:relative;
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--weich), transform .5s var(--weich);
  transition-delay:calc(var(--mf-i, 1) * 70ms);
}
.einblenden.auf .meta-fakt{ opacity:1; transform:none }
.meta-fakt::before{
  content:""; position:absolute; left:0; top:.55em;
  width:.42em; height:.42em; border-radius:50%; background:var(--gold);
}
.meta-fakt strong{ color:#fff; font-weight:800; font-size:.95rem }
.meta-fakt span{ color:var(--meta-leise); font-size:.89rem; line-height:1.6 }

.meta-hinweis{
  margin:clamp(1rem,1.8vw,1.5rem) 0 0;
  font-size:.88rem; color:var(--meta-leise);
}
.meta-knopfreihe{ margin-top:clamp(1.2rem,2.2vw,1.9rem) }

/* ── Netze ──────────────────────────────────────────────────────────────── */
@media (scripting: none){
  .meta-kachel, .meta-fakt{ opacity:1; transform:none; transition:none }
  .meta-gross img{ transform:scale(1.01) }
}
@media (prefers-reduced-motion: reduce){
  .meta-kachel, .meta-fakt{ opacity:1; transform:none; transition:none }
  .meta-gross img{ transform:scale(1.01) }
  .meta-kachel:hover .meta-bild img{ transform:scale(1.01) }
}

@media (max-width:620px){
  .meta-teil{ padding-block:2.4rem }
  .meta-grund{ border-radius:20px }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Dieselbe Fläche in Blau: die Nuance Audio Hörbrille
   ───────────────────────────────────────────────────────────────────────────
   Christopher, 04.10.2026: „nur das Audio musst du auch optimieren auf der
   Hörakustikseite … das, was auf der Startseite zu sehen ist, designtechnisch,
   übernimmst du da bitte dafür."

   Also dieselbe Hülle, dieselbe Bewegung, nur die Farbwelt der
   Originalaufnahmen: tiefes Blau statt Rot. Die Klassennamen bleiben `meta-…`
   — historisch, und sie meinen inzwischen schlicht „die dunkle Fläche".
   ═══════════════════════════════════════════════════════════════════════════ */

.nuance-teil{
  --meta-schwarz:#070B14;
  --meta-rot:#12213D;          /* der zweite Ton, hier Blau */
  --meta-hell:#EDF1F7;
  --meta-leise:#A8B4C6;
}
.nuance-teil .meta-grund{
  background:
    radial-gradient(120% 90% at 78% 12%, #1E3A68 0%, rgba(30,58,104,0) 58%),
    radial-gradient(90% 70% at 8% 92%, #0B1424 0%, rgba(11,20,36,0) 60%),
    linear-gradient(165deg, var(--meta-schwarz), var(--meta-rot) 62%, #0A1220);
  box-shadow:0 30px 80px rgba(7,11,20,.30);
}

/* Die Originalbilder liegen nur in der mobilen Fassung vor (589–675 px; größere
   Varianten antworten mit 404, geprüft am 04.10.2026). Darum wird das große
   Bild gedeckelt statt hochgerechnet — lieber kleiner und scharf. */
/* Gemessen am 04.10.2026: bei 820 px Rahmen und dem Scroll-Zoom von 1,1 kam
   das Bild auf 900 px — aus 675 px echter Breite, also 1,33-fach hochgerechnet
   und entsprechend weich. Rahmen auf 700 px und der Zoom hier flacher: 739 px
   bei 675 px Quelle sind 1,09-fach, und das sieht man nicht mehr. */
.nu-gross{ max-width:700px; margin-inline:auto }
.nuance-teil .meta-gross img{
  transform:scale(calc(1.005 + var(--meta-wuchs, 0) * .05));
}
/* Die Produktaufnahmen sind hochformatig, nicht 2:1 wie die Ray-Ban-Banner. */
.nuance-teil .meta-bild{ aspect-ratio:1/1 }
.nuance-teil .meta-bild img{ object-fit:cover; object-position:50% 46% }

.meta-quelle{
  margin:clamp(.9rem,1.6vw,1.3rem) 0 0;
  font-size:.76rem; color:var(--meta-leise); opacity:.8;
}