/* MC v0.13i — Editorial-Strecke (Pilot: nur Vogue en Español, archive-31).
   Frei scrollbare Fotostrecke aus Kapiteln (Auftakt, enges Paar, asymmetrische Gruppe, Finale).
   Bildgrößen setzt story-strip-v013i.js in Pixeln nach Seitenverhältnis (keine Beschnitte, keine Verzerrung).
   Alles ist auf .mc-strip begrenzt; andere Stories und die Startseite werden von dieser Datei nicht berührt. */

/* Der Kopf scrollt auf Story-Seiten mit der Seite (v0.9s). Weil der Titel in den Auftakt wandert,
   greift die dortige :has(#view > .series-head)-Regel nicht mehr; hier gleichwertig ersetzt. */
body[data-page="editorial"]:has(.mc-strip) .site-head{position:absolute}

.mc-strip{max-width:1780px;margin:0 auto;padding:0 var(--gut);box-sizing:border-box}
/* v0.13j: Kapitelabstand vergrößert (vorher clamp(36px,6svh,64px) = 54 px bei 900 px Höhe). Der Abstand INNERHALB eines Paares (18 px, per Skript) bleibt unverändert. */
.mc-strip .strip-ch{display:flex;box-sizing:border-box;width:100%;margin:0 0 clamp(76px,11.5svh,108px)}
.mc-strip .strip-ch:last-child{margin-bottom:0}

/* Bildrahmen: exakt Seitenverhältnis des Fotos, Größe kommt aus dem Skript */
.mc-strip .strip-item{position:relative;flex:none;margin:0!important;padding:0!important;max-width:none!important;min-width:0}
.mc-strip .strip-item .ph{margin:0!important;width:100%!important;height:100%!important;max-width:none!important}
.mc-strip .strip-item .ph-btn{width:100%!important;height:100%!important;aspect-ratio:auto!important;background:transparent!important;box-shadow:none!important}
.mc-strip .strip-item .ph img{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;display:block;object-fit:contain!important;object-position:center!important;transform:none!important;transition:none!important}
.mc-strip .strip-item .ph:hover img{transform:none!important}
.mc-strip .strip-item:focus-within{outline:none}
.mc-strip .strip-item .ph-btn:focus-visible{outline:2px solid currentColor;outline-offset:4px}

/* Kapitel: Auftakt = Titel links im Weißraum + großes Einzelbild */
.mc-strip .strip-hero{align-items:center;gap:clamp(24px,3vw,48px);padding-top:calc(var(--head-h) + 8px)}
.mc-strip .strip-hero .strip-text{flex:0 0 clamp(230px,27%,400px);align-self:stretch;display:flex;flex-direction:column;min-width:0}
.mc-strip .strip-hero .strip-art{flex:1 1 auto;min-width:0;display:flex;justify-content:center;align-items:center}
body[data-page="editorial"] #view .mc-strip .strip-text .series-head{
  display:flex;flex-direction:column;align-items:flex-start;flex:1 1 auto;
  padding:0;margin:0;gap:10px;grid-template-columns:none;grid-template-areas:none}
body[data-page="editorial"] #view .mc-strip .strip-text .series-head .back{margin:0 0 auto;justify-self:auto}
body[data-page="editorial"] #view .mc-strip .strip-text .series-head h1{width:100%;margin:auto 0 0;grid-area:auto}
body[data-page="editorial"] #view .mc-strip .strip-text .series-head .meta{
  margin:0 0 auto;text-align:left;justify-self:auto;align-self:flex-start;
  flex-direction:column;align-items:flex-start;gap:6px}

/* Paar: enge Doppelseite */
.mc-strip .strip-pair{justify-content:center;align-items:flex-start}
/* Asymmetrische Gruppe: gemeinsame Standlinie unten, unterschiedliche Höhen */
.mc-strip .strip-stagger{justify-content:center;align-items:flex-end}
/* Einzelbild / Finale */
.mc-strip .strip-solo,.mc-strip .strip-finale{justify-content:center;align-items:flex-start}

/* v0.13k — Enthüllung: pro Foto öffnet sich einmal eine Maske (clip-path). Das Foto selbst wird nicht skaliert, nicht verschoben
   und nicht überblendet (keine Deckkraft-Animation). Endzustand: vollständiges Foto, danach clip-path:none (.is-done).
   --rv-from = Anfangsmaske (verdeckt), --rv-d = Dauer, --rv-delay wird per Skript gesetzt (zweites Foto versetzt). */
.mc-strip{--rv-ease:cubic-bezier(.7,0,.2,1)}
.mc-strip.is-armed .strip-item{clip-path:var(--rv-from,inset(100% 0 0 0));
  transition:clip-path var(--rv-d,.9s) var(--rv-ease) var(--rv-delay,0s)}
.mc-strip.is-armed .strip-item.is-in{clip-path:inset(0 0 0 0)}
/* v0.13l: Modus "force" (Standard der Testkopie): site.css setzt bei "reduzierte Bewegung" alle Übergänge auf 0,01 ms (!important).
   Die Enthüllung nimmt sich davon aus, solange .is-forced gesetzt ist. Modus "auto" lässt die Betriebssystem-Einstellung gelten. */
.mc-strip.is-armed.is-forced .strip-item{transition-property:clip-path!important;transition-duration:var(--rv-d,.9s)!important;transition-delay:var(--rv-delay,0s)!important;transition-timing-function:var(--rv-ease)!important}
.mc-strip.is-armed .strip-item.is-instant,.mc-strip.is-armed.is-forced .strip-item.is-instant{transition:none!important}
.mc-strip.is-armed .strip-item.is-done{clip-path:none;transition:none}
.mc-strip.is-armed.is-forced .strip-item.is-done{transition:none!important}
/* Auftakt: von unten nach oben */
.mc-strip .strip-hero .strip-item{--rv-from:inset(100% 0 0 0);--rv-d:1s}
/* Enges Paar: aus der Mittelfuge nach außen (linkes Foto öffnet nach links, rechtes nach rechts) */
.mc-strip .strip-pair .strip-item{--rv-from:inset(0 0 0 100%);--rv-d:.8s}
.mc-strip .strip-pair .strip-item.is-right{--rv-from:inset(0 100% 0 0)}
/* Asymmetrische Gruppe: von der gemeinsamen Standlinie (Unterkante) nach oben */
.mc-strip .strip-stagger .strip-item{--rv-from:inset(100% 0 0 0);--rv-d:.9s}
/* Einzelbild: von unten */
.mc-strip .strip-solo .strip-item{--rv-from:inset(100% 0 0 0);--rv-d:.9s}
/* Finale: ruhig aus der Mitte nach links und rechts */
.mc-strip .strip-finale .strip-item{--rv-from:inset(0 50% 0 50%);--rv-d:1.2s}
@media (prefers-reduced-motion:reduce){
  .mc-strip.is-armed:not(.is-forced) .strip-item{clip-path:none!important;transition:none!important}
}
@media print{.mc-strip.is-armed .strip-item{clip-path:none!important;transition:none!important}}

/* Handy: kein Mini-Paar. Alle Fotos 86–100 % der Breite, Versatz statt Leerraum, enge Abstände */
@media (max-width:760px){
  .mc-strip .strip-ch{margin-bottom:clamp(44px,6.5svh,56px)} /* v0.13j (vorher clamp(28px,5svh,40px)) */
  .mc-strip .strip-hero{display:block;padding-top:calc(var(--head-h) + 4px)}
  .mc-strip .strip-hero .strip-text{display:block}
  .mc-strip .strip-hero .strip-art{display:block;margin-top:clamp(18px,3svh,28px)}
  body[data-page="editorial"] #view .mc-strip .strip-text .series-head{gap:8px}
  body[data-page="editorial"] #view .mc-strip .strip-text .series-head .back{margin:0 0 clamp(10px,2svh,16px)}
  body[data-page="editorial"] #view .mc-strip .strip-text .series-head h1{margin:0}
  body[data-page="editorial"] #view .mc-strip .strip-text .series-head .meta{margin:0;flex-direction:row;flex-wrap:wrap;gap:6px 14px;align-items:baseline}
  .mc-strip .strip-pair,.mc-strip .strip-stagger{flex-direction:column;align-items:stretch;gap:12px}
  /* v0.13k Handy: Fotos stehen untereinander, daher jedes von unten (0,7 s), Auftakt 0,8 s */
  .mc-strip .strip-pair .strip-item,.mc-strip .strip-pair .strip-item.is-right,.mc-strip .strip-stagger .strip-item,.mc-strip .strip-solo .strip-item{--rv-from:inset(100% 0 0 0);--rv-d:.7s}
  .mc-strip .strip-hero .strip-item{--rv-d:.8s}
  .mc-strip .strip-pair .strip-item,.mc-strip .strip-stagger .strip-item{align-self:flex-start}
  .mc-strip .strip-pair .strip-item.is-right,.mc-strip .strip-stagger .strip-item.is-right{align-self:flex-end}
  .mc-strip .strip-solo,.mc-strip .strip-finale{justify-content:flex-start}
}

/* Story-Ende: ruhig, eine Zeile. Das letzte Foto dominiert, die Navigation bleibt Funktion. */
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 28px;
  margin:clamp(22px,4svh,40px) var(--gut) 0;padding:clamp(12px,2svh,18px) 0 clamp(26px,4svh,44px);
  border-top:1px solid var(--line)}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-heading{margin:0;gap:14px;opacity:.75}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-actions{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 28px}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-action{
  display:inline-flex;flex:none;justify-content:flex-start;min-height:0;min-width:0;padding:4px 0;border:0;background:transparent;color:var(--fg);
  font:500 11px/1.3 var(--sans);letter-spacing:.11em;text-transform:uppercase;text-decoration:none}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-action:hover,
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-action:focus-visible{
  background:transparent;color:var(--fg);text-decoration:underline;text-underline-offset:5px}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-next{justify-content:flex-start;gap:0}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-next-copy{flex-direction:row;align-items:baseline;gap:10px}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-next-label{font:500 11px/1.3 var(--sans);letter-spacing:.11em}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-next-title,
html body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-next-title{font-family:var(--sans)!important;font-size:12px!important;font-weight:400!important;line-height:1.3!important;letter-spacing:.02em!important;text-transform:none!important}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-actions{justify-content:flex-start}
@media (max-width:760px){
  body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h{justify-content:flex-start}
  body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-actions{gap:6px 22px}
}
body[data-page="editorial"] #view .mc-strip ~ .story-navigation-v012h .story-nav-preview{display:none}