/* Targeted follow-up: the accepted rooms and typography remain the baseline. */
.m-on .r-arrival-complete .m-arrival-visual{transform:translateY(var(--arrival-video-shift,0px))}
.m-on .r-arrival-complete .m-arrival-title{opacity:1;z-index:4}
.m-on .r-arrival-complete .m-arrival-title .m-display{margin:0}
.journey-refined #marketing .m-tine .m-stage{--marketing-stage:#cf8b50;background:#cf8b50;background:var(--marketing-stage);color:#352215}
.era-film-play[hidden]{display:none!important}
.era-film-play>span>svg{display:block;width:22px;height:22px}
@media(min-width:701px) and (max-height:720px){
 .m-on .r-arrival-complete .m-arrival-title{top:2%}
 .m-on .r-arrival-complete .m-arrival-title .m-display{font-size:32px!important}
 .m-on .r-arrival-complete .m-arrival-title .era-eyebrow{display:none}
}
@media(max-width:700px){
 body.motion-home .era-footer.k-footer .footer-inner{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:25px 22px}
 body.motion-home .era-footer.k-footer .footer-brand,body.motion-home .era-footer.k-footer .footer-bottom{grid-column:1/-1;width:100%;max-width:none}
}

/* Chrome low-height entry: keep the address field above its full-width button. */
@media(min-width:701px) and (max-height:560px){
 .r-scanner .scanner-slot .r-scan-input{flex-direction:column}
 .r-scanner .scanner-slot #scanUrl{flex:none;width:100%}
 .r-scanner .scanner-slot #scanBtn{width:100%}
}

/* Brand-Finale als Filmraum, Clip A (Owner-Entscheid 17.09.2026). Gruen der Brand-Welt
   (--era-forest, rgb(18,61,53)), nie Papier, nie Weiss; Bildfolge auf Canvas wie der
   Ankunftsraum, am Ende das 4K-Standbild der Wand. Abgeloest: Standbild im Kasten auf Papier. */
.scene-brand-finale{background:var(--era-forest,#123d35);color:var(--era-paper,#f3f0e8)}
.scene-brand-finale .m-stage{background:var(--era-forest,#123d35);color:var(--era-paper,#f3f0e8)}
.bf-buehne{position:relative;width:100%;background:var(--era-forest,#123d35)}
/* Ohne Bewegung: nur das Standbild. motion.css setzt .m-stage img auf display:block und
   height:100 % (Spezifitaet 0,1,1); deshalb hier mit dem Abschnitt davor (gemessen 17.09.2026:
   das Poster mit Tine stand ueber dem Standbild). */
.scene-brand-finale .m-stage .bf-canvas,.scene-brand-finale .m-stage .bf-poster{display:none}
.scene-brand-finale .m-stage .bf-still{display:block;width:100%;height:auto;object-fit:contain}
/* 1j (Owner-Befund 17.09.2026: "Das soll nicht auf dem Bild drauf sein."): die zwei Saetze stehen NACH dem fertigen Bild
   als eigener Schritt unter dem Raum, auf Papier, mittig, in der Hausschrift der Schlusszeilen (erster Satz wie .ref-sea-end,
   zweiter als Fliesstext). Der Block liegt im Markup hinter dem Raum; mit Bewegung kommt er, sobald das Standbild nach oben
   Platz macht. Abgeloest: weisse Einblendung 59,4 % / 7,4 % ueber dem Standbild (.m-on .bf-text absolut, Fliesstext-Sans). */
.bf-text{display:grid;gap:14px;justify-items:center;text-align:center;margin:0;padding:48px var(--era-space,5vw) 64px;background:var(--era-paper,#f3f0e8);color:var(--era-ink,#183b32)}
.bf-text-satz{margin:0;max-width:30ch;font:400 clamp(29px,3.8vw,52px)/1.15 var(--era-serif);letter-spacing:-.02em;color:var(--era-ink,#183b32)}
.bf-text-lauf{margin:0;max-width:52ch;font:400 16px/1.6 var(--era-sans);color:var(--era-ink,#183b32)}
.bf-enlarge{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}
.bf-enlarge:focus-visible{outline:2px solid #fff;outline-offset:4px}
html:not(.m-on) .scene-brand-finale{padding:0 0 8px}
.m-on .scene-brand-finale{height:600svh}
.m-on .scene-brand-finale .m-stage{overflow:hidden}
.m-on .bf-buehne{position:absolute;inset:0;overflow:hidden}
.m-on .scene-brand-finale .m-stage .bf-canvas,.m-on .scene-brand-finale .m-stage .bf-poster,.m-on .scene-brand-finale .m-stage .bf-still{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;opacity:0;will-change:transform,opacity}
.m-on .bf-canvas{z-index:1}.m-on .bf-poster{z-index:0}.m-on .bf-still{z-index:2;transform-origin:50% 74%}
.m-on .bf-enlarge{right:var(--era-space,5vw);bottom:40px;opacity:0;transition:opacity .3s linear}
.m-on .scene-brand-finale[data-bf-ende] .bf-enlarge{opacity:1}
.m-on .scene-brand-finale:not([data-bf-ende]) .bf-enlarge{pointer-events:none}
@media(max-width:700px){
 .m-on .bf-buehne{inset:auto 0;top:50%;transform:translateY(-50%);aspect-ratio:16/9;height:auto}
 .m-on .scene-brand-finale .m-stage .bf-canvas,.m-on .scene-brand-finale .m-stage .bf-poster,.m-on .scene-brand-finale .m-stage .bf-still{object-fit:contain}
 .m-on .bf-enlarge{right:var(--era-space,22px);bottom:auto;top:calc(50% - 28.125vw - 62px)}
 .bf-text{padding:36px 22px 48px;gap:12px}.bf-text-satz{font-size:32px}.bf-text-lauf{font-size:15px;line-height:1.5}
}

/* 1j (Owner-Befund 17.09.2026, 1366x650): alle vier Tine-Fotos stehen ganz. Der Kasten traegt das Verhaeltnis des Fotos
   (motion.js tine), das Bild liegt mit contain darin, keine Verschiebung, kein Beschnitt. Ohne Bewegung stehen alle vier
   Fotos ganz und statisch untereinander. Liegt hier und nicht in marketing.css, weil marketing.css von jeder Seite geladen
   wird und nur die Startseite den Raum hat. Abgeloest (ueberstimmt per Spezifitaet): marketing.css:60 cover 50 % 57 %
   fuer das UGC-Foto (43 % der Bildhoehe weg) und motion.css cover fuer Gesicht und Arbeit. */
.m-on .m-stage .m-tine-photo img,.m-on .m-tine-photo img.tine-hoch-ugc{object-fit:contain!important;object-position:50% 50%!important}
html:not(.m-on) .m-stage .m-tine-photo{display:block}
html:not(.m-on) .m-stage .m-tine-photo img{width:100%;height:auto;max-height:70svh;object-fit:contain!important}
