/* DFP Page Transition – Zwischenscreen. Bewegung macht dfp-page-transition.js mit GSAP. Hier liegen nur Lage, Farben und Typografie. Die Werte kommen aus Einstellungen → Page Transition (als CSS-Variablen auf :root). Die Angaben hier sind nur Rückfallwerte. */ :root { --dfp-pt-bg: #ff0000; --dfp-pt-color: #fff; --dfp-pt-font-family: inherit; --dfp-pt-font-size: clamp(2.5rem, 8vw, 7rem); --dfp-pt-font-weight: 700; --dfp-pt-line-height: 1; --dfp-pt-letter-spacing: -0.02em; --dfp-pt-text-transform: none; --dfp-pt-text-max-width: 100%; --dfp-pt-svg-width: min(60vw, 520px); --dfp-pt-svg-max-height: 60vh; --dfp-pt-padding: 2rem; --dfp-pt-z: 100000; } .dfp-pt { position: fixed; inset: 0; z-index: var(--dfp-pt-z); display: flex; align-items: center; justify-content: center; box-sizing: border-box; padding: var(--dfp-pt-padding); overflow: hidden; background: var(--dfp-pt-page-bg, var(--dfp-pt-bg)); color: var(--dfp-pt-page-color, var(--dfp-pt-color)); pointer-events: none; visibility: hidden; transform: translate3d(100%, 0, 0); will-change: transform; } /* Ankunft aus einem Übergang: Das Inline-Skript im setzt die Klasse, noch bevor der Browser die Seite zeichnet – so blitzt nichts auf. */ html.dfp-pt-entering .dfp-pt { visibility: visible; transform: none; pointer-events: auto; } .dfp-pt__inner { max-width: var(--dfp-pt-text-max-width); text-align: center; } .dfp-pt__text { font-family: var(--dfp-pt-font-family); font-size: var(--dfp-pt-font-size); font-weight: var(--dfp-pt-font-weight); line-height: var(--dfp-pt-line-height); letter-spacing: var(--dfp-pt-letter-spacing); text-transform: var(--dfp-pt-text-transform); overflow-wrap: anywhere; } .dfp-pt__svg svg, .dfp-pt__svg img { display: block; width: var(--dfp-pt-svg-width); max-height: var(--dfp-pt-svg-max-height); height: auto; margin-inline: auto; }