/* ===================================================================== DIE WERBEEINBLENDUNG (29.09.2026) Filipe: „ich will es so krass wie es nur geht." --------------------------------------------------------------------- WARUM EINE EIGENE DATEI Dasselbe Band steht in der Reaction-Seite und in der Bühnenquelle, die OBS abfilmt. Zwei Fassungen altern unterschiedlich — dann sieht der Stream anders aus als das, worüber geredet wird. --------------------------------------------------------------------- DAS BAND IST GLAS, KEIN BALKEN Ein undurchsichtiger Streifen über einem Video nimmt fünf Prozent des Bildes weg und gibt nichts zurück. Dieses Band liegt als Verlauf darüber: unten dicht genug, dass jede Schrift trägt, oben offen. Man sieht das Video weiter — und liest trotzdem. Die Lichtkante oben ist dieselbe wie im Chat: eine haardünne helle Linie macht aus einer Fläche einen Körper. Ohne sie klebt das Band auf dem Bild statt davor zu liegen. ===================================================================== */ .werbung { position: absolute; inset: 0; pointer-events: none; /* niemand soll das Video verfehlen */ z-index: 46; /* über der Spendentafel (45), unter dem Pult */ --ecke-gross: 1; --band-hoch: 68px; } /* --------------------------------------------------------------------- DAS BAND ------------------------------------------------------------------- */ .werbung__band { position: absolute; left: 0; right: 0; bottom: 0; height: var(--band-hoch); overflow: hidden; display: flex; align-items: center; /* Der Verlauf trägt die Schrift, ohne das Bild zuzudecken. Gemessen: Bei 78 % Schwarz unten steht helle Schrift auch über einem weißen Videobild mit über 7:1 — die Hausgrenze für kleine Schrift liegt bei 4,5. */ background: linear-gradient(to top, rgba(6, 5, 14, .88) 0%, rgba(6, 5, 14, .74) 55%, rgba(6, 5, 14, 0) 100%); backdrop-filter: blur(3px) saturate(115%); -webkit-backdrop-filter: blur(3px) saturate(115%); } .werbung__band[hidden] { display: none; } /* DIE LICHTKANTE. Sie sitzt oben auf dem Verlauf und nicht am Rand des Kastens -- dort wäre sie eine Linie quer durchs Bild. */ .werbung__band::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(to right, transparent, rgba(255, 255, 255, .34) 18%, rgba(255, 255, 255, .34) 82%, transparent); } .werbung__lauf { display: flex; align-items: center; width: 100%; --dauer: 16s; } /* --------------------------------------------------------------------- EINE BOTSCHAFT ------------------------------------------------------------------- */ .werbung__stueck { display: flex; align-items: center; gap: 14px; padding: 0 34px; flex: none; min-width: 0; } .werbung__bild { width: 44px; height: 44px; object-fit: contain; flex: none; /* DER HUSKY IST SCHWARZ. Auf einem dunklen Videobild wäre er eine Silhouette in der Nacht. Zwei weiche helle Schatten legen eine Kontur darum -- dieselbe Lösung, die jeder Sender für sein Wasserzeichen nimmt. Auf hellem Grund fällt sie nicht auf. */ filter: drop-shadow(0 0 1px rgba(255, 255, 255, .9)) drop-shadow(0 0 6px rgba(255, 255, 255, .45)); } .werbung__texte { display: grid; gap: 1px; min-width: 0; } .werbung__text { font-size: 1.12rem; font-weight: 800; letter-spacing: .01em; color: #f4f1ff; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } .werbung__unter { font-size: .86rem; font-weight: 600; color: #c3bade; white-space: nowrap; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); } /* ==== DER RABATTCODE =============================================== Er ist der einzige Teil der Botschaft, den jemand ABSCHREIBEN soll. Alles andere liest man und vergisst es; „DOGI10" muss man festhalten. Deshalb bekommt er eine eigene Fläche: Ein Wort, das wie ein Feld aussieht, liest man als etwas zum Mitnehmen. Die Farbe ist Bernstein und nicht der Hausakzent -- sie steht auf jedem Videobild, auch auf einem violetten. */ .werbung__code { display: inline-block; margin: 0 .18em; padding: .06em .5em; border-radius: 7px; background: linear-gradient(180deg, #ffd479, #f0a52c); color: #24160a; font-weight: 900; letter-spacing: .06em; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 10px -2px rgba(240, 165, 44, .7); } /* --------------------------------------------------------------------- LAUFBAND ------------------------------------------------------------------- */ .werbung[data-art="laufband"] .werbung__lauf { width: max-content; animation: werbung-zieht var(--dauer) linear infinite; } .werbung__folge { display: flex; align-items: center; flex: none; } /* UM GENAU EINE FOLGE. Das Band trägt zweimal dieselbe Reihe; wandert es um 50 % seiner Breite, steht die zweite dort, wo die erste war, und der Sprung zurück ist unsichtbar. */ @keyframes werbung-zieht { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* --------------------------------------------------------------------- WECHSEL ------------------------------------------------------------------- */ .werbung[data-art="wechsel"] .werbung__lauf { display: grid; place-items: center; } .werbung__stueck--wechsel { grid-area: 1 / 1; /* alle übereinander -- die Höhe springt nicht */ opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; } .werbung__stueck--wechsel[data-dran="ja"] { opacity: 1; transform: none; } /* --------------------------------------------------------------------- DIE ECKEN — sechs Plätze --------------------------------------------------------------------- Die Lage steht im Stilblatt und nicht im Programm. Ein `data-platz="or"` ist eine Absicht; daraus `top` und `right` zu rechnen ist Darstellung. Wer beides in JavaScript legte, müsste jede Änderung an zwei Stellen nachziehen. ------------------------------------------------------------------- */ .werbung__ecke { position: absolute; width: calc(110px * var(--ecke-gross)); height: calc(110px * var(--ecke-gross)); display: grid; place-items: center; /* Ein Wasserzeichen steht im Bild und drängt sich nicht davor. 88 Prozent Deckung ist der Wert, bei dem es sichtbar bleibt und ein Gesicht darunter noch zu erkennen ist. */ opacity: .88; transition: opacity .3s ease; } .werbung__ecke[hidden] { display: none; } .werbung__ecke img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 0 2px rgba(255, 255, 255, .85)) drop-shadow(0 2px 10px rgba(0, 0, 0, .55)); } /* Der Abstand zum Rand wächst mit der Größe mit. Fest gesetzt klebte ein großes Logo am Rand und ein kleines schwämme in der Ecke. */ .werbung__ecke[data-platz="ol"] { top: calc(14px * var(--ecke-gross)); left: calc(14px * var(--ecke-gross)); } .werbung__ecke[data-platz="or"] { top: calc(14px * var(--ecke-gross)); right: calc(14px * var(--ecke-gross)); } .werbung__ecke[data-platz="om"] { top: calc(14px * var(--ecke-gross)); left: 50%; transform: translateX(-50%); } .werbung__ecke[data-platz="ul"] { bottom: calc(14px * var(--ecke-gross)); left: calc(14px * var(--ecke-gross)); } .werbung__ecke[data-platz="ur"] { bottom: calc(14px * var(--ecke-gross)); right: calc(14px * var(--ecke-gross)); } .werbung__ecke[data-platz="um"] { bottom: calc(14px * var(--ecke-gross)); left: 50%; transform: translateX(-50%); } /* WER UNTEN STEHT, WEICHT DEM BAND AUS. Sonst läge der Husky auf dem Rabattcode -- und zwar genau dann, wenn beides eingeschaltet ist, also im wichtigsten Fall. */ .werbung[data-art="laufband"] .werbung__ecke[data-platz="ul"], .werbung[data-art="laufband"] .werbung__ecke[data-platz="um"], .werbung[data-art="laufband"] .werbung__ecke[data-platz="ur"], .werbung[data-art="wechsel"] .werbung__ecke[data-platz="ul"], .werbung[data-art="wechsel"] .werbung__ecke[data-platz="um"], .werbung[data-art="wechsel"] .werbung__ecke[data-platz="ur"] { bottom: calc(var(--band-hoch) + 12px); } /* --------------------------------------------------------------------- DIE SPENDENTAFEL RÜCKT HOCH, WENN DAS BAND LÄUFT Sie steht bei `bottom: 84px`. Läuft das Band, lägen die Karten darauf. Gerechnet wird es hier und nicht im Programm: Das Band kennt die Tafel nicht, und die Tafel kennt das Band nicht -- `:has` sieht beide. ------------------------------------------------------------------- */ .leinwand:has(.werbung[data-art="laufband"]) .spendentafel, .leinwand:has(.werbung[data-art="wechsel"]) .spendentafel { bottom: 152px; } /* --------------------------------------------------------------------- AM FINGERGERÄT ------------------------------------------------------------------- */ @media (max-width: 560px) { .werbung { --band-hoch: 52px; } .werbung__stueck { gap: 10px; padding: 0 20px; } .werbung__bild { width: 34px; height: 34px; } .werbung__text { font-size: .94rem; } .werbung__unter { font-size: .76rem; } .werbung__ecke { width: calc(74px * var(--ecke-gross)); height: calc(74px * var(--ecke-gross)); } .leinwand:has(.werbung[data-art="laufband"]) .spendentafel, .leinwand:has(.werbung[data-art="wechsel"]) .spendentafel { bottom: 76px; } } /* --------------------------------------------------------------------- IN DER BÜHNENQUELLE --------------------------------------------------------------------- Dort gibt es keine Bedienung und keinen Chat -- das Bild ist so breit wie der Stream. Alles darf größer sein. ------------------------------------------------------------------- */ body[data-nur="buehne"] .werbung, .obs-buehne .werbung { --band-hoch: 92px; } body[data-nur="buehne"] .werbung__text, .obs-buehne .werbung__text { font-size: 1.5rem; } body[data-nur="buehne"] .werbung__unter, .obs-buehne .werbung__unter { font-size: 1.05rem; } body[data-nur="buehne"] .werbung__bild, .obs-buehne .werbung__bild { width: 60px; height: 60px; } body[data-nur="buehne"] .werbung__ecke, .obs-buehne .werbung__ecke { width: calc(170px * var(--ecke-gross)); height: calc(170px * var(--ecke-gross)); } /* Wer weniger Bewegung eingestellt hat, bekommt den Wechsel statt des Laufbands -- das entscheidet das Programm. Hier wird nur die Überblendung ruhiger, damit auch sie nicht springt. */ @media (prefers-reduced-motion: reduce) { .werbung__stueck--wechsel { transition: opacity .3s ease; transform: none; } .werbung__stueck--wechsel[data-dran="ja"] { transform: none; } }