@charset "UTF-8";/* Custom logo sizing */ #sp-logo .sp-default-logo, #sp-logo .sp-retina-logo { height: 45px; width: auto; max-height: 45px; max-width: 100%; } /* rscomments action-bar buttons: override template's absolute position from templates/flex/css/frontend-edit.css that mis-positions rscomments tooltips (B / I / S / Quote / Code / Preview). */ .rscomments-action-btns a.btn.hasTooltip { position: relative; } /* JomSocial frontpage: remove the 50px padding that template.css puts on #sp-main-body (line 3385-3387), plus collapse the empty #sp-page-title section so the landing cover image sits flush below the header. */ .com-community #sp-main-body { padding-top: 0; } .com-community #sp-page-title { display: none; } /* Container-Width +15% (2026-09-19, 8): Header und Main-Body-Wrapper sollen 15 % breiter sein als Bootstrap-Standard (1140 px → 1311 px bei xl, 1320 px → 1518 px bei xxl). Wirkt auf alle Helix3-generierten
-Wrapper, einschließlich PageBuilder-Sections mit sppb-row-container / sppb-container-inner (nur width:100% im eigenen CSS, kein eigenes max-width). NICHT betroffen: das interne
im SP-PageBuilder-Slider-Add-on (eigene max-width:1140 px in components/com_sppagebuilder/assets/css/ sppagebuilder.css) — bewusst belassen, der Slider-Inhalt soll zentriert bleiben. (2026-10-31, 13) Der `body`-Präfix im xxl-Block ist Pflicht: Helix3 erzeugt per Inline-CSS `@media (min-width: 1400px) { .container { max-width: 1140px } }` (plugins/system/helix3/core/helix3.php:289-298 — der Parameter `container_width` ist im Template-Style nicht gesetzt, Default 1140, also greift der Zweig). Inline-CSS wird nach allen Stylesheets ausgegeben und hätte bei gleicher Spezifität gewonnen: der Container wäre ab 1400 px auf 1140 px zurückgesprungen, obwohl hier 1518 px gewollt sind (sichtbarer Sprung 1311 px → 1140 px, je breiter der Monitor, desto schmaler der Inhalt). `body .container` (Spezifität 0,1,1) schlägt `.container` (0,1,0) — ohne !important und ohne Eingriff in den Helix3-Plugin-Code. */ @media (min-width: 1200px) { .container, .container-sm, .container-md, .container-lg, .container-xl { max-width: 1311px; } } @media (min-width: 1400px) { body .container, body .container-sm, body .container-md, body .container-lg, body .container-xl, body .container-xxl { max-width: 1518px; } } /* Leere right-Spalte ausblenden (2026-09-19, 11): Auf Seiten ohne sichtbares Modul in der `right`-Position (z. B. Homepage, wo mod_grab_vendor via AMM lädt, aber leer rendert, weil kein Vendor-Menü aktiv ist) ist die col-lg-3-Spalte (328 px @ 1311 px Container) nur leerer Ballast. Wir blenden sie aus, wenn das innere `.sp-lr`-Element keinen Modul-Inhalt hat, und dehnen die Component-Spalte auf col-lg-12 aus. Helix3 rendert die leere right-Spalte als
ohne Kind-Elemente (`:empty`); auf Vendor-Seiten enthält .sp-lr .sp-module/.sp-module-* Kind-Elemente und bleibt sichtbar. AMM (advancedmodules) lädt mod_grab_vendor menuid-unabhängig → wir brauchen diese clientseitige Lösung, weil serverseitig keine Filterung möglich ist. */ #sp-main-body:has(#sp-right .sp-lr:empty) #sp-right { display: none; } #sp-main-body:has(#sp-right .sp-lr:empty) #sp-component { flex: 0 0 100%; max-width: 100%; } /* GTranslate-Weltkugel in den Vordergrund holen (2026-09-19, 12): Das Modul mod_gtranslate (id=10308) sitzt im Header-Bereich hinter dem Logo-Menü-Dropdown und dem OffCanvas-Menü-Icon (alle haben z-index >= 1000). Wir geben der Globe-Wrapper einen eigenen, höheren z-index, damit sie auf JEDER Seite (auch Homepage) sichtbar über den anderen Header-Elementen schwebt. position:relative ist nötig, damit der z-index wirkt. */ #gt-wrapper-10308, .gtranslate_wrapper { position: relative; z-index: 9999; } /* GTranslate-Weltkugel LINKS neben der Such-Lupe (2026-09-23): Im DOM kommt die Globe-Hülle NACH dem Such-Modul (siehe templates/flex/html/layouts/helix3/frontend/modules.php Zeile 65), visuell liegt sie deshalb rechts von der Lupe. Flexbox + order:-1 rückt sie vor das Such-Modul — Globe links, Lupe rechts. Die Lupe (44 px breit) sitzt nicht mehr absolute-zentriert, sondern am Ende der Flex-Zeile (justify-content: flex-end), weil die zentrierte Variante bei zwei Geschwistern visuell unbalanciert wirkt. padding-right:25px lässt Globe + Lupe nicht bis an den rechten Spaltenrand kleben, sondern gibt 25 px Atemraum zur Spaltenkante. */ #sp-topsearch .sp-column { display: flex; align-items: center; justify-content: flex-end; padding-right: 25px; } #sp-topsearch .gtranslate_wrapper { order: -1; margin-right: 10px; margin-left: 0; } /* Mobile-Header rechtsbündig (2026-09-26, korrigiert 2026-09-26): Auf Smartphones/Tablets (unterhalb des `lg`-Breakpoints, <992 px) bleibt das Logo links, die drei übrigen Bedienelemente werden rechtsbündig gepackt. DOM-Reihenfolge in der Header-.row: - sp-logo col-5 col-md-5 col-lg-2 (mobile: 42 %) - sp-menu col-4 col-md-5 col-lg-8 (mobile: 33 %) - sp-topsearch col-1 col-md-1 col-lg-2 (mobile: 8 %) - gtranslate_wrapper (keine col-Klasse!) Zusammen 10/12 Spalten + die col-lose Globe-Hülle → linksbündig in den vergebenen Spalten, rechts 2/12 Leerraum. Die Bestellung im DOM entspricht NICHT der gewünschten visuellen Reihenfolge. Gewünschte Visual-Reihenfolge (links → rechts): Logo | Weltkugel | Striche | Lupe Fix: - Alle drei Inhalts-Spalten + die Globe-Hülle auf flex: 0 0 auto !important, damit sie auf Content-Breite schrumpfen (Logo ≈ 90 px, Globe 33 px, Striche ≈ 30 px, Lupe mit padding-right:25 px ≈ 70 px). - margin-left: auto auf .gtranslate_wrapper → saugt den Restraum als linke Margin auf und schiebt Globe + alle nachfolgenden Flex-Items (Striche, Lupe) nach rechts. - order-Properties setzen die Visual-Reihenfolge unabhängig vom DOM. Logo: order 0 (Default, bleibt links), Globe: order 1, Striche: order 2, Lupe: order 3. - Gaps: 12 px zwischen Globe und Striche, 8 px zwischen Striche und Lupe (User-Wunsch: „etwas Abstand" zwischen Kugel und Menü, „etwas kleinem Abstand" zwischen Menü und Lupe). Die 25 px padding-right auf der inneren .sp-column (aus der bestehenden Desktop-Regel Zeile 91–96) geben der Lupe zusätzlich Atemraum zum rechten Bildschirmrand. Desktop (>=992 px) bleibt unberührt — dort greifen weiterhin die col-lg-*-Breiten plus die bestehende #sp-topsearch .sp-column- Flex-Regel. */ @media (max-width: 991.98px) { /* KRITISCH: template.css Zeile 886–891 setzt #sp-header .container > .row #sp-logo .sp-column { position: absolute; top: 0; } (Spezifität 0,3,2 — 3 IDs + 2 Klassen) und #sp-header ist position:relative. Folge: Das Logo-Bild hängt absolut am Header oben links, das Flex-Item #sp-logo selbst hat KEIN In-Flow- Content (nur Gutter-Padding) und ist deshalb ~24 px breit. Das 150 px breite Logo-Image überlappt damit den Bereich, in den margin-left:auto die Icons (Globe/Menü/Lupe) schiebt — sie landen visuell unter dem Logo-Bild statt rechts daneben. Auf Mobile heben wir das absolute positioning auf, damit das Flex- Item die echte Bildbreite einnimmt. Selektor wird mit identischer Spezifität wiederholt (statt !important), damit die Override-Regel garantiert gegen die template.css-Regel gewinnt. */ #sp-header .container > .row #sp-logo .sp-column { position: static; top: auto; } /* Logo und Menü-Icon vertikal mittig in der Header-Zeile ausrichten. flex-wrap: nowrap erzwingt eine einzige Zeile — sonst bricht Bootstrap bei Überlauf auf eine neue Zeile um (Standard `.row { flex-wrap: wrap }`). */ #sp-header .container > .row { align-items: center; flex-wrap: nowrap; } /* Beide sichtbaren Items auf Inhaltsbreite schrumpfen. col-5 / col-4 setzen prozentuale Breiten, die durch flex: 0 0 auto + width: auto überschrieben werden. */ #sp-logo, #sp-menu { flex: 0 0 auto !important; width: auto !important; max-width: none; } /* Row-Reihenfolge: Logo (0) | Menü (1, 6 px rechts vom Logo). Menü sitzt DIREKT neben dem Logo (User-Wunsch "daneben das Menü, aber nicht mit so einem großen Abstand"). */ #sp-menu { order: 1; margin-left: 6px; } /* GTranslate-Weltkugel auf Mobile ausblenden (User-Wunsch 2026-09-26). display:none entfernt die Hülle komplett aus dem Layout. Selektor deckt sowohl die Standard-Hülle als auch die spezifische ID des Moduls ab. Auf Desktop bleibt die Weltkugel sichtbar (Regel liegt innerhalb der Mobile-Media-Query). */ .gtranslate_wrapper, #gt-wrapper-10308 { display: none !important; } /* Such-Symbol auf Mobile ausblenden (User-Wunsch 2026-09-26, "Nimm in der mobilen Version der Webseite auch das Lupe (Suche) Symbol weg"). .top-search-wrapper enthält sowohl die Lupe (.icon-top-wrapper mit den i.pe-7s-search/-close Icons) als auch das aufgeklappte Suchfeld (.top-search-input-wrap). Beides wird komplett entfernt. #sp-topsearch bleibt im DOM als leerer col-1-Container — der schadet aber nicht, weil das display:flex-Override von früher (Rev. 4) ebenfalls entfernt wurde und der leere Container 0 Layout-Footprint hat. ACHTUNG: Die Suche ist auf Mobile dann nur noch über andere Wege erreichbar (Menüpunkt, Footer, direkter URL-Aufruf von /component/finder/search). Falls das ein Problem ist, kann die Regel wieder entfernt und stattdessen die Lupe mit einem angepassten Layout eingeblendet werden. */ .top-search-wrapper { display: none !important; } /* Sicherheitsnetz: Wenn Logo (bis 150 px) + Menü (~46 px) auf sehr schmalen Viewports (≤ 280 px) den Container überschreitet, horizontales Scrollen unterdrücken. */ #sp-header .container { overflow: hidden; } } /* GTranslate-Weltkugel auf ca. halbe Größe + 10 % (2026-09-23): Das Widget rendert mit hartcodiertem width:60px / height:60px (css wird via JS in cdn.gtranslate.net/widgets/latest/globe.js inline injiziert, siehe Variable globe_size=60 in gtranslateSettings[10308]). Mit !important überschreiben wir diese Inline-Deklaration auf 33×33 px (= 30 px halbe Größe × 1.1); background-size skaliert die eingebettete SVG-Icon-Grafik (viewBox 32×32) sauber in den neuen Kasten. Satelliten-Umlaufbahn beim Click-Expand wird weiterhin mit globe_size=60 in der JS berechnet (r0 = 1.375 × 60 = 82.5 px Radius) — kein Konflikt, weil Satelliten .gsatelite ohnehin position:absolute sind und keinen Flow- Footprint haben. Wrapper-Layout-Footprint schrumpft dadurch von 60 auf 33 px, weshalb col-lg-2 (≈219 px) jetzt mehr Atemraum hat. */ .gglobe { width: 33px !important; height: 33px !important; background-size: 33px 33px !important; } /* Block-Rahmen um mod_grab_vendor (2026-09-20): Auf Vendor-Seiten (z. B. /instrumente/a-b-c/acustica-audio) bekommt das Modul einen dezenten Card-Look — feiner Rahmen, abgerundete Ecken, heller Hintergrund, etwas Padding und ein leichter Schatten. Wirkt nur, wenn das Modul tatsächlich Inhalt rendert (`:has(.mod-grab-vendor)`), damit leere Modul-Container auf Seiten ohne Vendor-Match (von der vorherigen Empty-Right-Column-Regel bereits überdeckt) keinen leeren Kasten zeigen. */ .sp-module:has(.mod-grab-vendor) { border: 1px solid #e0e0e0; border-radius: 6px; padding: 1.25rem; background: #ffffff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } /* Heading-Größe leicht reduzieren (2026-09-20, 3): Die `Angebote von `-Überschrift war mit `h6`-Klasse auf 1 rem gesetzt — in der schmalen 328-px-Sidebar wirkt das etwas groß. Wir reduzieren auf 0.875 rem (≈14 px) ohne das semantische `

` aufzugeben (Screenreader & SEO bleiben korrekt). Bleibt `fw-bold`. (2026-09-21): An die „Neueste Songs"-Heading angepasst (mod_music_latest_player.css:22), damit alle Headings in der rechten Sidebar konsistent aussehen: 0.8 rem, Stärke 600, margin-bottom 0.15 rem. `!important` nötig, weil Bootstrap `fw-bold` und `mb-3` mit `!important` deklariert sind. */ .mod-grab-vendor-heading { font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 0.15rem !important; } /* Horizontale Trennlinien zwischen den Deal-Einträgen (2026-09-20): Statt nur `mb-2`-Margin zwischen den
  • -Items bekommt jedes `.mod-grab-vendor-row` (außer dem ersten) eine sichtbare Top-Border. `#bbb` ist deutlich kräftiger als der bisherige optische Abstand, bleibt aber dezent genug, um den Card-Look nicht zu überladen. */ .mod-grab-vendor .mod-grab-vendor-row { border-top: 1px solid #bbb; padding-top: 0.5rem; margin-top: 0.5rem; } .mod-grab-vendor .mod-grab-vendor-row:first-child { border-top: 0; padding-top: 0; margin-top: 0; } /* Größeres Padding-Top vor der Heading „Neueste Instrumente/Effekte" (2026-09-21). WICHTIG: Diese beiden Module werden vom sp_xhtml-Chrome NICHT in
    eingewickelt (anders als mod_finder/mod_menu auf der gleichen Seite — warum auch immer, vermutlich AMM-Override) — daher kann die Card-Look- Variante `.sp-module:has(.mod-recent-section-articles)` aus §6.21 nicht greifen. Stattdessen margin-top direkt auf die Heading. */ /* Größeres Padding-Top vor der Heading „Neueste Instrumente/Effekte" (2026-09-21). WICHTIG: Diese beiden Module werden vom sp_xhtml-Chrome NICHT in
    eingewickelt (anders als mod_finder/mod_menu auf der gleichen Seite — warum auch immer, vermutlich AMM-Override) — daher kann die Card-Look- Variante `.sp-module:has(.mod-recent-section-articles)` aus §6.21 nicht greifen. Stattdessen margin-top direkt auf die Heading. Typografie (Größe, Stärke, Abstand) an die „Neueste Songs"- Heading aus mod_music_latest_player.css:22 angepasst, damit beide Headings in der rechten Sidebar konsistent aussehen: font-size 0.8 rem, font-weight 600, margin-bottom 0.15 rem. `!important` nötig, weil Bootstrap `fw-bold` und `mb-3` mit `!important` deklariert sind. */ .mod-recent-section-articles-heading { margin-top: 0.5rem; font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 0.15rem !important; } /* Heading „Blog Artikel" typografisch konsistent zu den anderen Sidebar-Headings (Neueste Instrumente/Effekte, Angebote von ): 0.8 rem / 600 / 0.15 rem margin-bottom. margin-top:0.5rem wie bei mod_recent_section_articles, damit zwischen den drei Sidebar-Modulen (Blog Artikel → Neueste Instrumente/Effekte → Angebote von ) ein erkennbarer Atemraum bleibt. `!important` wegen Bootstrap fw-bold/mb-3. (2026-09-23, 6) */ .mod-blog-articles-heading { margin-top: 0.5rem; font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 0.15rem !important; } /* Heading „YouTube Feed Pro" typografisch konsistent zu den anderen Sidebar-Headings (Neueste Songs, Blog Artikel, Neueste Instrumente/ Effekte, Angebote von ): 0.8 rem / 600 / 0.15 rem margin-bottom / margin-top 0.5 rem. Das YTF-Modul rendert seine Überschrift als

    und erbt damit die auffälligen Default-Werte aus template.css:3418–3440 (font-size:140%, box-shadow inset, padding-right:30px, display:table, :after-Pseudo-Element mit 2-px-Underline). Wir neutralisieren all das und zielen per :has() auf genau die .sp-module-Wrapper, die auch eine .ytf-container enthalten, damit andere Module mit .sp-module-title unberührt bleiben. `!important` wegen Bootstrap fw-bold/mb-3. (2026-09-24) */ .sp-module:has(.ytf-container) > h3.sp-module-title { margin-top: 0.5rem; font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 0.15rem !important; box-shadow: none; padding-right: 0; display: block; line-height: 1.2; text-transform: none; letter-spacing: normal; } .sp-module:has(.ytf-container) > h3.sp-module-title:after { display: none; } /* Heading „YouTube" (mod_youtubeportal_category) typografisch konsistent zu den anderen Sidebar-Headings (Neueste Songs, Blog Artikel, Neueste Instrumente/Effekte, Angebote von ): 0.8 rem / 600 / 0.15 rem margin-bottom / margin-top 0.5 rem. `!important` wegen Bootstrap fw-bold/mb-3. (2026-09-27) */ .mod-youtubeportal-category-heading { margin-top: 0.5rem; font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 0.15rem !important; } /* Heading „Nuendo" (mod_youtube) typografisch konsistent zu den anderen Sidebar-Headings (Neueste Songs, Blog Artikel, Neueste Instrumente/ Effekte, Angebote von , mod_youtubeportal_category): 0.8 rem / 600 / 0.15 rem margin-bottom / margin-top 0.5 rem. `!important` wegen Bootstrap h6-Default und mb-3. Im Template (tmpl/default.php) ist `fw-bold` bereits entfernt — die hier gesetzte font-weight: 600 ergibt das Standard-Sidebar- Gewicht (semibold, nicht bold). (2026-09-27) */ .mod-youtube-heading { margin-top: 0.5rem; font-size: 0.8rem !important; font-weight: 600 !important; margin-bottom: 0.15rem !important; } /* Layout „horizontal" (tmpl/horizontal.php) für mod_youtube: jedes Video wird als Media-Card (Thumbnail links, Titel rechts) in einer Zeile gerendert. Vorteil in der schmalen col-lg-3-Sidebar gegenüber dem Default-Vertikal-Layout: 4 Videos passen mit ~70 px Thumbnail + Restbreite für den Titel in eine Zeile, statt vertikal viel Höhe wegzunehmen. Selektor `.mod-youtube-horizontal` (auf der ul) garantiert, dass das Default-Vertikal-Layout unberührt bleibt. (2026-09-27) */ .mod-youtube-horizontal .mod-youtube-item { display: flex; align-items: flex-start; gap: 0.5rem; margin-bottom: 0.5rem; } .mod-youtube-horizontal .mod-youtube-item:last-child { margin-bottom: 0; } .mod-youtube-horizontal .mod-youtube-thumb { flex: 0 0 auto; width: 70px; line-height: 0; } .mod-youtube-horizontal .mod-youtube-thumb img { display: block; width: 70px; height: auto; border-radius: 4px; } .mod-youtube-horizontal .mod-youtube-link { flex: 1 1 auto; font-size: 0.75rem; font-weight: 500; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; word-break: break-word; } /* Heading „Latest Posts From Our Blog" (mod_ajax_intro_articles) — manuell im Template gerendert (default.php), weil SP-PageBuilder's „Module"-Addon Joomla's Standard-Chrome umgeht und `showtitle=1` sonst keine Wirkung hat. Typografie an die Sidebar-Headings aus §6.24 angepasst: 0.8 rem / 600 / margin-bottom 0.15 rem. Da das Modul auf der Homepage in einer SP-PageBuilder-Section sitzt (nicht in einer schmalen Sidebar), margin-top: 0.5 rem für Atemraum zur vorigen Section. (2026-09-27) Der darunter sichtbare SP-PageBuilder-

    -Titel in section-id-1481572489 („Die aktuellsten Beiträge im Blog") wird hier ebenfalls auf 0.8 rem / 600 reduziert (PageBuilder-Default wäre 27.2 px = ~1.7 rem — viel zu groß für die Optik der rechten Sidebar). Spezifischer Selektor über die Section-ID, damit andere PageBuilder-Section-Titles unangetastet bleiben. (2026-09-27, 2) Die manuell gerenderte h3-Heading wird ausgeblendet, damit unter dem PageBuilder-Titel keine Duplikat-Heading steht. Beide Targets ergeben zusammen genau einen Titel auf 0.8 rem — konsistent mit den Headings der Sidebar-Module aus §6.24. */ .mod-ajax-intro-articles-heading { font-size: 0.8rem !important; font-weight: 600 !important; margin-top: 0.5rem; margin-bottom: 0.15rem !important; } #section-id-1481572489 .sppb-addon-title { font-size: 0.8rem !important; font-weight: 600 !important; margin-top: 0; margin-bottom: 0.15rem !important; } #ajax_posts_144 .mod-ajax-intro-articles-heading { display: none !important; } /* Video-Titel innerhalb der mod_youtubeportal_category-Cards (h4): Bootstrap-Default für h4 ist 1.5 rem — viel zu groß für die schmale rechte Sidebar. Die YouTube-Video-Titel sind i. d. R. lang (50+ Zeichen) und spannen deshalb mehrere Zeilen — mit dem ursprünglichen font-weight 600 wirken sie in der schmalen Sidebar visuell zu schwer im Vergleich zu den Item-Titeln der anderen Sidebar-Module (mod_recent_section_articles, mod_blog_articles, mod_grab_vendor), die als ohne font-weight-Override bei 14 px / regular (font-weight 400) rendern. Ziel: optisch zu diesen Item-Titeln passen. Wir setzen font-size: 0.75 rem (≈12 px) — kleiner als das Heading (0.8 rem), damit Titel nicht visuell dominieren font-weight: 500 (medium) — leichter als bold (600), aber noch ablesbar als Titel line-height: 1.3 — etwas Atemraum zwischen den Zeilen Auf den inneren ebenfalls anwenden, weil einige Template-CSS- Regeln auf .sp-module-content a { font-size: ... } zielen. Höhere Spezifität (.mod-youtubeportal-category .mod-youtubeportal- category-title) statt nur einer Klasse, damit unser !important garantiert gegen Bootstrap & Helix3-Default gewinnt. `!important` wegen Bootstrap h4-Default. (2026-09-27) */ .mod-youtubeportal-category .mod-youtubeportal-category-title, .mod-youtubeportal-category .mod-youtubeportal-category-title a { font-size: 0.75rem !important; font-weight: 500 !important; line-height: 1.3; margin: 0.15rem 0 !important; padding: 0; } /* Listen-Bullets vor jedem Video-Eintrag entfernen. Bootstrap-/Browser- Default für
      ist list-style:disc mit padding-left ~40px — das skaliert nicht in die schmale rechte Sidebar und produziert einen ungewollten Bullet-Punkt neben jedem Video-Titel. Auch das Standard- Padding links entfernen, damit die Thumbnail-Bilder bündig mit dem Heading anfangen. (2026-09-27) */ .mod-youtubeportal-category-list { list-style: none !important; padding-left: 0 !important; margin-left: 0 !important; } /* Lightbox-Modal für mod_youtubeportal_category. Bootstrap-5.3.8 wird vom Helix3-Template ohnehin geladen, daher kein eigenes Modal-JS nötig. Das Modal selbst wird vom Modul-Template (tmpl/default.php) gerendert und per Event-Delegation auf data-yt-id-Links geöffnet. Hier nur die kosmetischen Anpassungen: - Modal max. 75 % der Viewport-Höhe (sonst überdeckt es die Sidebar komplett und der User sieht nicht mehr, wo das Video herkommt). - Hintergrund-Overlay etwas abgedunkelter (rgba 0,0,0,0.85) — der Fokus liegt klar auf dem Video. - modal-content ohne Border und mit runden Ecken. - iframe füllt die Bootstrap .ratio-16x9-Box 1:1, kein schwarzer Trauerrand um das Video. - Backdrop-Klick und ESC schließen das Modal (Bootstrap-Default). (2026-09-27) */ .mod-yt-lightbox .modal-dialog { max-height: 75vh; } .mod-yt-lightbox .modal-content { border: 0; border-radius: 8px; background: #000; } .mod-yt-lightbox .modal-header { border-bottom: 1px solid rgba(255, 255, 255, 0.1); color: #f5f5f5; background: #1a1a1a; } .mod-yt-lightbox .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } .mod-yt-lightbox .modal-body { background: #000; } .mod-yt-lightbox .modal-backdrop.show { opacity: 0.85; } .mod-yt-lightbox iframe { display: block; width: 100%; height: 100%; border: 0; }