/* pxMEDIA.de — Referenz-Detailseiten (Paket B2, 23.09.2026)
   Eingebunden über META extraKopf der Erweiterung referenzen.mjs. Tokens aus
   tokens.css, Grundklassen (sektion, ebene, fenster, karte, chip-glas, knopf)
   aus basis.css. Kein data-reveal in den eigenen Blöcken — der Inhalt muss
   auch in Idas Fenster ohne Skript lesbar sein. Mobile-first: Grundlayout ist
   375 px, Desktop leitet sich über min-width ab. */

/* ---- Fakten + Aufgabe · Weg · Ergebnis ---- */
.ref-fakten{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:0 0 1.6rem;
  font-size:var(--fs-klein);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--c-text-2)}
.ref-fakten span+span::before{content:"×";color:var(--c-orange);margin-right:.9rem;font-weight:900}
.ref-spalten{display:grid;grid-template-columns:minmax(0,1fr);gap:1.4rem}
.ref-teil{padding:1.7rem 1.5rem 1.5rem}
.ref-teil__titel{margin:0 0 .8rem;font-size:var(--fs-klein);font-weight:900;letter-spacing:.14em;text-transform:uppercase;color:var(--c-orange)}
.ref-teil p{margin:0 0 .9rem;color:var(--c-text);font-size:var(--fs-text);line-height:1.65}
.ref-teil p:last-child{margin-bottom:0}
@media (min-width:900px){
  .ref-spalten{grid-template-columns:repeat(var(--n,1),minmax(0,1fr))}
  .ref-teil{padding:2rem 1.9rem 1.8rem}
}

/* ---- Medien-Kopf (Chip + Zeile) ---- */
.ref-medien__kopf{display:flex;align-items:center;gap:1rem;margin:0 0 1.4rem}
.ref-medien__kopf h2{margin:0;font-size:var(--fs-h3);line-height:1.15}
.ref-medien figure{margin:0}
.ref-medien figcaption{margin-top:.9rem;color:var(--c-text-2);font-size:.95rem;line-height:1.5}
.ref-medien figcaption a{color:var(--c-orange);font-weight:700}

/* ---- LOGO: Kreativprozess in Stufen (rein per CSS, ohne Skript) ---- */
.ref-stufen__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.ref-stufe{position:relative;border:1px solid var(--c-linie);border-radius:var(--radius);overflow:hidden;
  background:rgba(20,20,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ref-stufe img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  opacity:0;transform:translateY(18px) scale(.985);
  animation:ref-stufe-rein .8s var(--kurve) forwards;
  animation-delay:calc((var(--stufe,1) - 1) * .9s)}
.ref-stufe__nr{position:absolute;top:.7rem;left:.7rem;display:inline-flex;align-items:center;min-height:28px;
  padding:0 .6rem;border-radius:999px;border:1px solid rgba(242,149,14,.35);background:rgba(21,21,21,.85);
  box-shadow:0 0 14px #f2950e22;font-weight:900;font-size:.78rem;color:var(--c-orange);letter-spacing:.06em}
.ref-stufe__text{display:block;padding:.7rem .9rem .8rem;font-size:.9rem;font-weight:700;color:var(--c-text)}
@keyframes ref-stufe-rein{to{opacity:1;transform:none}}
@media (min-width:600px){.ref-stufen__liste{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ref-stufen__liste{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (prefers-reduced-motion:reduce){
  .ref-stufe img{animation:none;opacity:1;transform:none}
}
body.statisch .ref-stufe img{animation:none;opacity:1;transform:none}

/* ---- PRINT: Mockups · FOTO/KAMPAGNE: Galerie ---- */
.ref-mockups,.ref-galerie{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1rem}
.ref-mockups li,.ref-galerie li{border:1px solid var(--c-linie);border-radius:var(--radius);overflow:hidden;
  background:rgba(20,20,20,.72);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ref-mockups img,.ref-galerie img{display:block;width:100%;height:auto}
.ref-mockups span,.ref-galerie span{display:block;padding:.6rem .9rem .7rem;font-size:.88rem;color:var(--c-text-2)}
@media (min-width:600px){.ref-mockups,.ref-galerie{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.ref-galerie{grid-template-columns:repeat(4,minmax(0,1fr))}.ref-galerie img{aspect-ratio:1;object-fit:cover}}

/* ---- WEBSITE: Browser-Rahmen ---- */
.ref-browser{max-width:960px;margin:0 auto}
.ref-browser__kopf{display:flex;align-items:center;gap:.4rem;padding:.6rem .9rem;
  background:#1c1c1c;border:1px solid var(--c-linie);border-bottom:0;border-radius:12px 12px 0 0}
.ref-browser__kopf i{width:9px;height:9px;border-radius:50%;background:#3a3a3a}
.ref-browser__kopf i:first-child{background:#f2950e88}
.ref-browser__kopf b{margin-left:.6rem;font-weight:400;font-size:.78rem;color:var(--c-text-2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-browser img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover;object-position:top;
  border:1px solid var(--c-linie);border-radius:0 0 12px 12px;box-shadow:0 30px 80px #00000088}

/* ---- FILM ---- */
.ref-film{max-width:960px;margin:0 auto}
.ref-film video,.ref-film--anfrage img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
  background:#000;border:1px solid var(--c-linie);border-radius:var(--radius);box-shadow:0 30px 80px #00000088}
.ref-film--anfrage figcaption{font-weight:700;color:var(--c-text)}
.ref-medien .ref-film+.ref-medien__kopf,.ref-medien .ref-film+.ref-galerie,.ref-medien .ref-film+.ref-mockups{margin-top:2.4rem}

/* ---- In Idas Fenster: enger, ohne Glas-Doppelung ---- */
.dlg__seite .ref-stufen__liste,.dlg__seite .ref-galerie,.dlg__seite .ref-mockups{grid-template-columns:repeat(2,minmax(0,1fr))}
.dlg__seite .ref-spalten{grid-template-columns:minmax(0,1fr)}
.dlg__seite .ref-stufe,.dlg__seite .ref-mockups li,.dlg__seite .ref-galerie li{-webkit-backdrop-filter:none;backdrop-filter:none}