/* GEO/screen Partnerbanner auf der Startseite, nur als Endless Sitebar. Den Container legt einbau.js an.
   Ab 1024 px Breite und einem Seitenverhältnis ab 5:4 steht die Sitebar fest am rechten Rand, der Inhalt rückt
   um ihre Breite ein und wird nie überdeckt. Darunter erscheint kein Banner und nichts wird reserviert.
   Die Grenze steht nur hier; einbau.js liest sie an --gs-format ab (sitebar oder aus).
   --gs-grund ist die Grundfarbe der Kreation (Pflaume, wie html und body im Banner): Der Streifen steht damit vom
   ersten Bild an still in ihrer Farbe, bis der Banner einmal einblendet. */
:root { --gs-format: aus; --gs-grund: #53052f; }
.gs-sitebar { display: none; }
.gs-sitebar iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (min-width: 1024px) and (min-aspect-ratio: 5/4) {
  :root { --gs-format: sitebar; }
  body { --gs-sb: calc(100vh * 1080 / 1920); padding-right: var(--gs-sb); }
  .gs-sitebar { display: block; position: fixed; top: 0; right: 0; width: var(--gs-sb); height: 100vh; background: var(--gs-grund); }
}

/* Vor einbau.js (läuft erst mit DOMContentLoaded) färbt dieser Platzhalter den reservierten Streifen, nur wenn Skripte
   laufen. Ohne Skript oder in Browsern ohne die Abfrage scripting bleibt der Streifen in der Seitenfarbe. Er liegt im
   Baum vor allem anderen und damit unter der Sitebar und jedem positionierten Element der Seite. */
@media (min-width: 1024px) and (min-aspect-ratio: 5/4) and (scripting: enabled) {
  body::before { content: ""; position: fixed; top: 0; right: 0; width: var(--gs-sb); height: 100vh; background: var(--gs-grund); pointer-events: none; }
}