wird auf Desktop auf die Frame-Breite begrenzt (max. 1110px innen), damit 300x600 links+rechts passen */ :root { --adnz-banner-min-height: 250px; --adnz-rail-gap: 24px; /* Abstand Sky <-> Content-Bereich */ --adnz-sky-width: 300px; /* Platz, der pro Seite für den Sky reserviert wird */ --adnz-sky-sticky-top: 16px; /* Abstand zum oberen Viewport-Rand im Sticky-Zustand */ --adnz-root-padding: var(--wp--style--root--padding-left, 24px); --adnz-content-max: 1110px; /* Empfehlung Audienzz: max. Content-Breite (innen, ohne Root-Padding) */ --adnz-content-min: 700px; /* Außenbreite von

(inkl. Root-Padding): so breit wie möglich, aber immer 2 x (Sky + Gap) frei lassen */ --adnz-frame-width: clamp( calc(var(--adnz-content-min) + 2 * var(--adnz-root-padding)), calc(100vw - 2 * (var(--adnz-sky-width) + var(--adnz-rail-gap)) - 20px), calc(var(--adnz-content-max) + 2 * var(--adnz-root-padding)) ); --adnz-content-top: 0px; /* wird per JS gemessen */ --adnz-content-height: 0px; /* wird per JS gemessen */ } body.netpoint-ads-frame { position: relative; /* Bezugsrahmen für die Rails */ } /* ------------------------------ Banner ------------------------------ */ .adnz-frame--banner { width: 100%; } .adnz-banner { box-sizing: border-box; min-height: var(--adnz-banner-min-height); display: flex; align-items: center; justify-content: center; margin: 0 auto; padding: 12px 0; overflow: visible; } .adnz-banner .netpoint-ad { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; } /* ------------------------------- Rails ------------------------------ */ .adnz-rail { display: none; /* nur ab Desktop-Breite sichtbar (s. u.) */ } /* Leere Spalten (z. B. ehemalige Sky-Spalten im Startseiten-Template) ausblenden */ .netpoint-ads-frame .wp-block-columns > .wp-block-column:not(:has(*)) { display: none; } @media (min-width: 1380px) { /* Content-Bereich (

) begrenzen: alignfull endet an der Frame-Kante, alignwide innen (max 1110px). Header/Footer bleiben unberührt (liegen außerhalb der Rails). */ .netpoint-ads-frame main { box-sizing: border-box; max-width: var(--adnz-frame-width); margin-left: auto !important; margin-right: auto !important; --wp--style--global--wide-size: calc(var(--adnz-frame-width) - 2 * var(--adnz-root-padding)); } .adnz-rail { display: block; position: absolute; top: var(--adnz-content-top); height: var(--adnz-content-height); width: 0; z-index: 5; pointer-events: none; } .adnz-rail__slot { position: sticky; top: var(--adnz-sky-sticky-top); width: max-content; line-height: 0; pointer-events: auto; } .adnz-rail__slot .netpoint-ad { margin: 0; text-align: left; } .adnz-rail--left { left: calc(50% - var(--adnz-frame-width) / 2 - var(--adnz-rail-gap)); } .adnz-rail--left .adnz-rail__slot { transform: translateX(-100%); /* rechte Kante am Content, expandiert nach links */ } .adnz-rail--right { left: calc(50% + var(--adnz-frame-width) / 2 + var(--adnz-rail-gap)); } /* Admin-Bar (eingeloggt) */ .admin-bar .adnz-rail__slot { top: calc(var(--adnz-sky-sticky-top) + 32px); } } /* ------------------------------ In-Feed ----------------------------- */ .netpoint-ad--infeed { margin: 32px auto; text-align: center; } /* -------------------------- twiago Natives -------------------------- */ /* Die twiago-Creatives bringen ihre eigene "Anzeige"-Kennzeichnung mit. */ .netpoint-ad--twiago-footer, .netpoint-ad--twiago-tile, .netpoint-ad--twiago-home { text-align: left; } .netpoint-ad--twiago-tile, .netpoint-ad--twiago-home { margin: 32px auto; } /* Native Footer steht VOR dem Footer-Template-Part, also außerhalb von

: auf dieselbe Breite wie der Content bringen (wide-size bzw. Frame-Breite bei aktiven Rails). */ .netpoint-ad--twiago-footer { box-sizing: border-box; width: 100%; max-width: var(--wp--style--global--wide-size, 1400px); margin: 32px auto 0; padding-left: var(--adnz-root-padding); padding-right: var(--adnz-root-padding); } @media (min-width: 1380px) { .netpoint-ads-frame .netpoint-ad--twiago-footer { max-width: var(--adnz-frame-width); } }