/* MC v0.13j — Lightbox: eigene Bedienzone unter dem Foto.
   Vorher (v0.13i): Die Bedienleiste (PLAY / NORMAL, Hinweis, NEXT) klebte am unteren Bildrand
   (Editorial/Advertising: Überlappung ca. 13 px, übrige Bereiche ca. 9 px; Handy: ◀ ▶ von der Leiste verdeckt).
   Jetzt: Das Foto wird in einen Bereich oberhalb einer festen Bedienzone eingepasst. Die Zone hat Abstand zum Foto,
   eine eigene Zeile und einen Rand zur Fensterkante. Fotos werden nie beschnitten, sie werden nur proportional kleiner.
   Gilt für alle Bereiche mit Großansicht (Editorial, Advertising, Music, Travel, Personal Work).
   Feintuning: nur die Variablen --vz-* unten. */

html body[data-page] .vw{
  display:block;
  --vz-top:60px;      /* Kopfzeile (Titel, Zähler, Close) */
  --vz-gap:24px;      /* Luft zwischen Bildunterkante und Oberkante der Bedienzeile (Textabstand ca. +10 px) */
  --vz-row:36px;      /* Bedienzeile */
  --vz-row2:0px;      /* zweite Zeile (nur Handy: Kicker / Serienlink) */
  --vz-bot:22px;      /* Rand unter der Bedienzeile */
  --vz-zone:calc(var(--vz-gap) + var(--vz-row) + var(--vz-row2) + var(--vz-bot));
  --vwx:clamp(38px,4.2vw,78px);
  --vwy:calc(var(--vz-top) + var(--vz-zone));
}

html body[data-page] .vw-top{
  position:absolute;top:0;left:0;right:0;z-index:2;
  box-sizing:border-box;min-height:var(--vz-top);padding-top:16px;
}
html body[data-page] .vw-main{
  position:absolute;left:0;right:0;top:var(--vz-top);bottom:var(--vz-zone);
  padding:0 var(--vwx);display:flex;align-items:center;justify-content:center;min-height:0;
}
/* Foto: Höhe nie größer als der Bereich über der Bedienzone (Breitenformel der jeweiligen Seite bleibt bestehen) */
html body[data-page] .vw-main img{
  max-height:calc(100svh - var(--vwy));
  max-width:calc(100vw - 2*var(--vwx));
}

/* Bedienzone */
html body[data-page] .vw-foot{
  position:absolute;left:0;right:0;bottom:var(--vz-bot);z-index:2;
  height:var(--vz-row);min-height:0;box-sizing:border-box;padding:0 var(--gut);
  display:flex;align-items:center;justify-content:flex-start;gap:16px;flex-wrap:nowrap;
}
html body[data-page] .vw-foot .vw-show-controls{
  position:absolute;left:50%;top:0;height:100%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;gap:16px;white-space:nowrap;
}
html body[data-page] .vw-foot .vw-kicker{flex:0 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:26vw}
html body[data-page] .vw-foot .vw-kicker:empty{display:none}
html body[data-page] .vw-foot .vw-hint{margin-left:auto;white-space:nowrap}
html body[data-page] .vw-foot .vw-series{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:30vw;padding-top:0;padding-bottom:0;min-height:36px}

/* Niedriges Fenster: Zone kompakter, Foto wird dafür proportional kleiner; Zone bleibt sichtbar und klickbar */
@media (max-height:600px){
  html body[data-page] .vw{--vz-top:46px;--vz-gap:24px;--vz-row:34px;--vz-bot:12px}
  html body[data-page] .vw-top{padding-top:8px}
}

/* Handy (v0.13k): Foto + Bedienzone bilden EINE Gruppe. Die Gruppe wird in dem Raum unter der Kopfzeile vertikal zentriert,
   die Bedienzone folgt dem Foto im festen Abstand (--vz-gap). Kein bündiges Foto unten, kein zusätzlicher Leerraum oben.
   Zeile 1 = ◀ [PLAY ▶  NORMAL] ▶, Zeile 2 = Kicker / Serienlink (klein).
   Nebenfolge: Wechseln Hoch- und Querformate, wandert die Gruppe leicht mit (bei Vogue: alle Fotos Hochformat gleich). */
@media (max-width:760px){
  html body[data-page] .vw{
    display:flex;flex-direction:column;box-sizing:border-box;
    --vwx:12px;
    --vz-top:52px;--vz-gap:8px;--vz-row:44px;--vz-row2:28px;--vz-bot:calc(10px + env(safe-area-inset-bottom,0px));
    --vwy:calc(var(--vz-top) + var(--vz-gap) + var(--vz-row) + var(--vz-row2) + var(--vz-bot) + 16px);
    padding-bottom:var(--vz-bot);
  }
  html body[data-page] .vw-top{position:relative;flex:none;height:var(--vz-top);min-height:0;padding-top:12px}
  html body[data-page] .vw-main{position:relative;left:auto;right:auto;top:auto;bottom:auto;flex:none;margin-top:auto;padding:0 var(--vwx)}
  html body[data-page] .vw-foot{
    position:relative;left:auto;right:auto;bottom:auto;flex:none;width:100%;margin-top:var(--vz-gap);margin-bottom:auto;
    height:calc(var(--vz-row) + var(--vz-row2));
    display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);grid-template-rows:var(--vz-row) var(--vz-row2);
    align-items:center;gap:0 12px;
  }
  html body[data-page] .vw-foot .vw-show-controls{
    position:static;transform:none;height:auto;grid-column:1 / -1;grid-row:1;justify-self:center;gap:12px;
  }
  html body[data-page] .vw-foot .vw-kicker{grid-column:1;grid-row:2;justify-self:start;max-width:100%;font-size:10.5px!important;letter-spacing:.03em!important}
  html body[data-page] .vw-foot .vw-series{grid-column:2;grid-row:2;justify-self:end;max-width:100%;min-height:28px;font-size:10.5px;letter-spacing:.08em}
  html body[data-page] .vw-foot .vw-hint{display:none}
  /* ◀ ▶ liegen in der Bedienzeile links/rechts neben PLAY (bezogen auf die Unterkante des Fotos) */
  html body[data-page] .vw-nav{
    top:auto;bottom:calc(-1 * (var(--vz-gap) + var(--vz-row)));transform:none;height:var(--vz-row);width:27%;z-index:3;
  }
  html body[data-page] .vw-nav.prev{left:0;justify-content:start;padding-left:var(--gut)}
  html body[data-page] .vw-nav.next{right:0;justify-content:end;padding-right:var(--gut)}
}

/* ===== v0.13v: ← EDITORIAL (bzw. ← ADVERTISING / ← MUSIC & ACTORS) neben CLOSE × in der Lightbox ===== */
.vw-act{display:flex;align-items:center;gap:26px;flex:none}
.vw-back{font:500 11px/1 var(--sans);letter-spacing:.17em;text-transform:uppercase;padding:12px 0;color:inherit;text-decoration:none;opacity:.78;white-space:nowrap;transition:opacity .2s ease}
.vw-back[hidden]{display:none}
.vw-back:hover,.vw-back:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:5px}
.vw-back:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.vw-top .grp{min-width:0}
.vw.has-back .vw-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
@media (max-width:760px){
  .vw-act{gap:16px}
  .vw-back{letter-spacing:.1em;padding:12px 0}
  .vw.has-back .vw-top .grp{flex:1 1 auto;gap:12px}
  .vw.has-back .vw-title{font-size:18px;max-width:40vw}
  .vw.has-back .vw-count{white-space:nowrap}
}