/* Autowelt, Schritt 1c mit Nachtrag N1 (Owner, 17.09.2026, 00:40 Uhr): KINO auf allen Breiten.
   Foto 1 erscheint als Kinoband (18 % der Buehne, mittig, Rest Papier), je Rolle eine
   Kamerafahrt vom Detail zum ganzen Bild, zwischen den Rollen ein Lichtwischer. Breit: Foto
   Rand zu Rand, weisse Schrift unten links, Leiste senkrecht. Schmal: Fotoflaeche 4:5 oben,
   darunter auf Papier in Tinte Leiste, Rolle, Satz. Band, Fahrt und Wischer rechnet autoStage. */

/* ---------- Grundfassung (ohne Bewegung, ohne JavaScript, reduced motion) ---------- */
.journey-refined #marketing .auto-welt,.auto-welt{background:var(--era-paper,#f3f0e8);color:var(--era-ink,#183b32)}
.auto-intro{padding:72px var(--era-space,5vw) 34px;max-width:1100px}
.journey-refined #marketing .auto-intro .era-eyebrow,.auto-intro .era-eyebrow{color:var(--era-ink,#183b32);opacity:.72;margin-bottom:18px}
.auto-intro .m-display{font-family:var(--era-serif,Georgia,serif)!important;font-weight:400;letter-spacing:-.045em;line-height:1.02;font-size:clamp(44px,5.6vw,86px);margin:0;max-width:none;color:var(--era-ink,#183b32)}
.auto-intro .m-display em{font-weight:400}
.auto-zeile{max-width:46ch;margin:22px 0 0;font-size:17px;line-height:1.65;color:var(--era-ink,#183b32)}
.journey-refined #marketing .auto-room .m-stage,.auto-room .m-stage{background:var(--era-paper,#f3f0e8);color:var(--era-ink,#183b32)}
.auto-buehne{position:relative}
.auto-fotos{display:flex;flex-direction:column;gap:28px;margin:0}
.auto-foto{position:relative;margin:0;display:block}
.auto-foto img{display:block;width:100%;height:auto;object-fit:cover}
.auto-canvas,.auto-poster{display:none}
/* Bildmitte m je Foto (gemessen 16.09.2026); gilt fuer das Foto und seine Teile. */
/* Kein Beschnitt der Fotos im Zugaenglichkeitsbaum: object-position gilt fuer Foto und Fahrt. */
.auto-foto[data-auto-foto="0"] img{object-position:50% 64%}
.auto-foto[data-auto-foto="1"] img{object-position:50% 70%}
.auto-foto[data-auto-foto="2"] img{object-position:50% 49%}
.auto-foto[data-auto-foto="3"] img{object-position:50% 48%}
.auto-foto[data-auto-foto="4"] img{object-position:50% 67%}
.auto-bildtext{display:block;margin-top:10px;color:var(--era-ink,#183b32);font-size:15px;line-height:1.5}
.auto-bildtext strong{display:block;font-family:var(--era-serif,Georgia,serif);font-weight:400;font-size:24px;letter-spacing:-.02em}
.auto-text,.auto-leiste{display:none}
.auto-spot-zeile{margin:0;padding:18px var(--era-space,5vw) 64px}
.journey-refined #marketing .auto-welt .k-link,.auto-welt .k-link{color:var(--era-ink,#183b32);border-bottom-color:#839786}
.auto-lupe{position:absolute;right:14px;bottom:14px;display:inline-grid;place-items:center;width:48px;height:48px;padding:0;border:1px solid #fff;border-radius:50%;background:transparent;color:#fff;font:400 26px/1 var(--era-sans,Arial,sans-serif);cursor:pointer;text-shadow:0 1px 2px rgba(0,0,0,.35);z-index:4}
.auto-lupe:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ---------- Mit Bewegung, alle Breiten: klebende Buehne, Bogen, Teile ---------- */
.m-on .auto-intro{padding-bottom:10px}
/* Sechs Stationen (N3): Rolle 1 als Video ueber zwei, Rollen 2-5 je eine. */
.m-on .auto-room{height:720svh}
.m-on .auto-room .m-stage{overflow:hidden}
.m-on .auto-buehne{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden;will-change:clip-path;background:var(--era-paper,#f3f0e8);isolation:isolate}
.m-on .auto-fotos{position:absolute;inset:0;display:block;gap:0}
/* Rolle 1 laeuft auf dem Canvas (Auto-Intro), zwischen Foto 1 und den Fotos 2-5. */
.m-on .auto-canvas{display:block;position:absolute;inset:0;width:100%;height:100%;z-index:1;opacity:0}
/* 1j (Owner-Befund 17.09.2026): Erstzustand des Bands = leeres Band (Frame 0 der Rolle 1 als Poster, gleicher Ausschnitt wie
   der Canvas: cover, 50 % 64 %). Steht, bis die Folge fertig ist; nie ein Bild mit Wagen vor dem ersten Canvas-Bild. */
.m-on .auto-poster{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 64%;z-index:1;opacity:1;will-change:opacity}
.m-on .auto-foto:not([data-auto-foto="0"]){z-index:2}
.m-on .auto-foto{position:absolute;inset:0;will-change:transform,opacity;transform-origin:50% 50%}.m-on .auto-foto:not([data-auto-aktiv]){pointer-events:none}
.m-on .auto-foto img{width:100%;height:100%;object-fit:cover}
.m-on .auto-foto .auto-bild{position:absolute;inset:0}
.m-on .auto-bildtext{display:none}
.m-on .auto-spot-zeile{display:none}
.m-on .auto-lupe{display:none;transition:opacity .3s linear}
.m-on .auto-foto[data-auto-aktiv] .auto-lupe{display:inline-grid}
.m-on .auto-room:not([data-auto-offen]) .auto-lupe{opacity:0;pointer-events:none}
/* Rolle und Satz kommen bei jedem Wechsel von unten; Rolle 4 von rechts. */
.m-on .auto-text{display:block;position:absolute;z-index:3;pointer-events:none}
.m-on .auto-satzblock{position:absolute;left:0;bottom:0;width:100%;opacity:0;visibility:hidden;transform:translate3d(0,30px,0);transition:opacity .42s linear,transform .48s cubic-bezier(.22,.61,.36,1),visibility 0s linear .42s}
.m-on .auto-satzblock[data-auto-satz="3"]{transform:translate3d(40px,0,0)}
.m-on .auto-satzblock[data-auto-aktiv]{opacity:1;visibility:visible;transform:none;transition-delay:0s;pointer-events:auto}
.m-on .auto-name{margin:0;font-family:var(--era-serif,Georgia,serif);font-weight:400;font-size:clamp(28px,3vw,44px);line-height:1.05;letter-spacing:-.02em}
.m-on .auto-satz{margin:8px 0 0;font-size:16px;line-height:1.5;max-width:34ch}
.m-on .auto-satzblock .auto-spot{display:inline-flex;margin-top:14px;pointer-events:auto}
.m-on .auto-leiste{display:flex;margin:0;padding:0;list-style:none;z-index:4;position:absolute}
.m-on .auto-leiste li{margin:0}
/* N10 (Owner, 17.09.2026): keine Ziffern in den Scroll-Raeumen. Der Stationen-Schieber bleibt als Striche fuer die
   Tastatur; der Stationstext steht nur im aria-label. */
.m-on .auto-ziffer{display:flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;background:transparent;border:0;padding:12px 6px;cursor:pointer;transition:color .25s linear}
.m-on .auto-strich{display:block;width:22px;height:2px;border-radius:1px;background:currentColor}
.m-on .auto-ziffer:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* Breit: Foto Rand zu Rand, Schrift weiss unten links, Leiste senkrecht links. */
@media(min-width:1024px){
 .m-on .auto-leiste{flex-direction:column;gap:2px;left:var(--era-space,5vw);top:50%;transform:translateY(-50%)}
 .m-on .auto-ziffer{color:rgba(255,255,255,.45);text-shadow:0 1px 2px rgba(0,0,0,.35)}
 .m-on .auto-ziffer[aria-current=true],.m-on .auto-ziffer:focus-visible{color:#fff}
 .m-on .auto-text{left:calc(var(--era-space,5vw) + 52px);bottom:44px;width:min(25%,420px);color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.35)}
 .m-on .auto-satzblock .auto-spot{color:#fff;border-bottom-color:rgba(255,255,255,.7)}
 .m-on .auto-lupe{right:var(--era-space,5vw);bottom:40px}
}
/* Schmal: Fotoflaeche 4:5 oben, darunter auf Papier in Tinte Leiste, Rolle, Satz. */
@media(max-width:1023px){
 .m-on .auto-buehne{bottom:auto;height:min(125vw,62%)}
 .m-on .auto-leiste{flex-direction:row;gap:12px;left:var(--era-space,22px);top:calc(min(125vw,62%) + 16px)}
 .m-on .auto-ziffer{color:rgba(24,59,50,.45)}
 .m-on .auto-ziffer[aria-current=true],.m-on .auto-ziffer:focus-visible{color:var(--era-ink,#183b32)}
 .m-on .auto-text{left:var(--era-space,22px);right:var(--era-space,22px);top:calc(min(125vw,62%) + 54px);bottom:auto;color:var(--era-ink,#183b32)}
 .m-on .auto-satzblock{bottom:auto;top:0}
 .m-on .auto-name{font-size:clamp(30px,8.5vw,40px)}
 .m-on .auto-satzblock .auto-spot{color:var(--era-ink,#183b32);border-bottom-color:#839786}
 .m-on .auto-lupe{right:14px;bottom:14px}
 /* N6: Rolle 5 startet aus der Lichtleiste des dunklen Wagens (28 % / 58 % am Master); schmal rueckt der
    4:5-Ausschnitt nach links, damit das Detail mit >= 15 % Rand im Bild liegt. */
 .m-on .auto-foto[data-auto-foto="4"] img{object-position:35% 67%}
 .auto-intro{padding-top:56px;padding-bottom:22px}
}
@media(prefers-reduced-motion:reduce){.auto-foto,.auto-satzblock,.auto-ziffer,.auto-lupe{transition:none!important}}