/* ========================================================= BKV – Einheitliche moderne Typografie ========================================================= */ /* * Inter wird verwendet, wenn die Schrift über Helix / lokal geladen ist. * Falls nicht, greift automatisch die moderne Systemschrift. */ :root { --bkv-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; --bkv-blue: #007dc3; --bkv-blue-dark: #0063c6; --bkv-page-bg: #f5f7fa; --bkv-surface: #ffffff; --bkv-border: #e4e9ef; --bkv-text-soft: #667085; } body { font-family: var(--bkv-font); font-size: 14px; line-height: 1.56; text-decoration: none; /* Modernes Hybrid-Layout: keine äußere Website-Box mehr */ width: 100%; max-width: none; margin: 0; padding: 0; /* * Wichtig: Der äußere Seitenhintergrund ist jetzt ebenfalls * die dezente Content-Farbe. So kann rund um das Themenbild * kein weißer Helix-Hintergrund mehr durchscheinen. */ background: var(--bkv-page-bg); } input, button, textarea, select { font-family: var(--bkv-font); } h1, h2, h3, h4, h5, h6 { font-family: var(--bkv-font); font-weight: 600; } h2 { font-size: 24px; } /* Navigation explizit vereinheitlichen, da Helix eigene Fonts setzen kann */ /* ========================================================= SEITENÜBERSCHRIFTEN ========================================================= */ /* Joomla Seitentitel / Beitragsüberschrift */ #sp-main-body h1, #sp-main-body .page-header h1, #sp-main-body .article-header h1 { font-size: 30px !important; line-height: 1.2 !important; font-weight: 600 !important; margin-bottom: 18px !important; } /* ========================================================= HYBRID LAYOUT – Full Width Shell + begrenzter Inhalt ========================================================= */ .body-wrapper, .body-innerwrapper { width: 100%; max-width: none; margin-left: 0; margin-right: 0; /* Kein weißer Außen-Wrapper mehr */ background: var(--bkv-page-bg) !important; } /* ========================================================= SEITEN-SHELL ========================================================= */ html, body, .body-wrapper, .body-innerwrapper, #sp-main, #sp-section-1, #sp-main-body { background-color: var(--bkv-page-bg); } /*** Header Area ***/ /* Header Menu */ #sp-header { position: fixed; top: 0; left: 0; right: 0; height: 80px; width: 100%; max-width: none; background: linear-gradient( rgb(0, 129, 198), rgb(0, 99, 198) ); font-size: 12px; z-index: 9999; /* Dezente Trennung, ohne sichtbare Lücke zum Themenbild */ box-shadow: none !important; animation: none !important; transition: none !important; } /* * Der Header ist dauerhaft fixed und wird bereits über den oberen Abstand * von #sp-main ausgeglichen. Helix darf beim Scrollen keinen zweiten * Platzhalter in Dokumenthöhe einfügen, da die Ansicht sonst um genau eine * Headerhöhe springt. */ .body-innerwrapper > .sticky-header-placeholder { display: none !important; width: 0 !important; height: 0 !important; min-height: 0 !important; } /* * Der blaue Header läuft über die gesamte Browserbreite. * Logo und Navigation bleiben in einer ruhigen Inhaltsbreite. */ #sp-header > .container, #sp-header .container { width: 100% !important; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; } #sp-header .logo img, .logo-image, .logo-image-phone { height: 62px; width: auto; max-height: 62px; object-fit: contain; margin-left: 30px; } #sp-page-title { margin-top: 80px; } .sp-megamenu-parent > li > a, .sp-megamenu-parent > li > span { color: #fff; } .sp-megamenu-parent > li > a:hover, .sp-megamenu-parent > li > span:hover { color: #fff; } #sp-menu .menu-fussball > .sp-dropdown { left:-250px !important; } #sp-menu .menu-tt > .sp-dropdown { left:-462px !important; width: 800px !important; } #sp-menu .menu-admin > .sp-dropdown { left:-380px !important; width: 450px !important; } #sp-menu { margin-right: 30px; color: #fff; } /* ========================================================= THEMENBILD / HERO Direkt am Header, mit weichen Übergängen ========================================================= */ #sp-section-1, #sp-section-1 > .row, #sp-title, #sp-title > .sp-column, #sp-title .sp-module, #sp-title .sp-module-content, #sp-title .mod-custom { position: relative; background: var(--bkv-page-bg) !important; } /* Themenbild Desktop */ @media (min-width: 768px) { #sp-title .mod-custom img { width: 100%; height: 300px !important; object-fit: cover; object-position: center bottom; } } /* ======================================================================== FUSSBALL-ÜBERSICHT – Anordnung analog zur Tischtennis-Übersicht ======================================================================== */ body.itemid-222 #sp-position1 .sp-module:has(#mod-custom139) { grid-column: 1 / span 8; grid-row: 1; } body.itemid-222 #sp-position1 .sp-module:has(#mod-custom140) { grid-column: 9 / span 4; grid-row: 1; } body.itemid-222 #sp-position1 .sp-module:has(.bkv-fb-overview-info) { grid-column: 9 / span 4; grid-row: 2; } body.itemid-222 #sp-position1 .sp-module:has(#mod-custom141) { grid-column: 1 / span 7; grid-row: 3; } body.itemid-222 #sp-position1 .sp-module:has(#mod-custom142) { grid-column: 8 / span 5; grid-row: 3; } body.itemid-222 #sp-position1 .sp-module:has(.bkv-fb-overview-info) > .sp-module-title { display: none; } .bkv-fb-overview-info { height: 100%; padding: 17px 19px 18px; border: 1px solid #d8e3ee; border-radius: 7px; background: #fff; box-shadow: 0 7px 16px rgba(16, 61, 101, .06); } .bkv-fb-overview-info h2 { margin: 0 0 11px; color: #075ca8; font-size: 16px; font-weight: 800; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; } .bkv-fb-overview-info__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; } .bkv-fb-overview-info__item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 14px; gap: 9px; align-items: center; min-height: 50px; padding: 7px 9px; border: 1px solid #dce7f0; border-radius: 5px; background: #f8fbfd; color: #12385b; text-decoration: none; transition: border-color .16s ease, background-color .16s ease, transform .16s ease; } .bkv-fb-overview-info__item:hover, .bkv-fb-overview-info__item:focus-visible { border-color: #9fc8e5; background: #eef8fe; color: #075ca8; text-decoration: none; transform: translateX(2px); } .bkv-fb-overview-info__icon { display: inline-flex; width: 24px; height: 24px; align-items: center; justify-content: center; border-radius: 50%; background: #e6f4fd; color: #0878c1; font-size: 12px; } .bkv-fb-overview-info__item strong, .bkv-fb-overview-info__item small { display: block; } .bkv-fb-overview-info__item strong { color: #12385b; font-size: 12px; font-weight: 800; line-height: 1.18; } .bkv-fb-overview-info__item small { margin-top: 2px; color: #55708c; font-size: 11px; line-height: 1.22; } .bkv-fb-overview-info__arrow { color: #0878c1; font-size: 14px; font-weight: 700; line-height: 1; text-align: right; } @media (max-width: 767px) { body.itemid-222 #sp-position1 .sp-module:has(#mod-custom139), body.itemid-222 #sp-position1 .sp-module:has(#mod-custom140), body.itemid-222 #sp-position1 .sp-module:has(.bkv-fb-overview-info), body.itemid-222 #sp-position1 .sp-module:has(#mod-custom141), body.itemid-222 #sp-position1 .sp-module:has(#mod-custom142) { grid-column: 1 / -1; grid-row: auto; } .bkv-fb-overview-info { padding: 15px; } } /* Fußball-Übersicht: sichtbare Platzhalter bis die Modul-Inhalte folgen. */ body.itemid-222 #sp-component .article-header, body.itemid-222 #sp-component .article-details .article-header { display: none !important; } body.itemid-222 #sp-position1 .sp-module:has(#mod-custom139), body.itemid-222 #sp-position1 .sp-module:has(#mod-custom140), body.itemid-222 #sp-position1 .sp-module:has(#mod-custom141), body.itemid-222 #sp-position1 .sp-module:has(#mod-custom142) { min-height: 170px; padding: 18px; border: 1px solid #d8e3ee; border-radius: 7px; background: #fff; box-shadow: 0 7px 16px rgba(16, 61, 101, .06); } /* FINAL: Startseiten-News im kompakten Zwischenlayout. Diese Regeln stehen absichtlich am Ende, damit ältere Tablet-Regeln mit zwei bzw. vier Spalten nicht erneut gewinnen. */ @media (min-width: 640px) and (max-width: 991.98px) { body.itemid-116 #sp-homepage-news .mod-articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item { height: 265px !important; max-height: 265px !important; min-height: 0 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content { padding: 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content::before { flex-basis: 70px !important; height: 70px !important; margin: -9px -9px 8px !important; } body.itemid-116 #sp-homepage-news .mod-articles-image, body.itemid-116 #sp-homepage-news .mod-articles-item-content > figure { margin: -9px -9px 8px !important; } body.itemid-116 #sp-homepage-news .mod-articles-image img, body.itemid-116 #sp-homepage-news .mod-articles-item-content > figure img { height: 70px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content > dl { gap: 4px 7px !important; margin-bottom: 6px !important; font-size: 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-category, body.itemid-116 #sp-homepage-news .mod-articles-item-content:has(.mod-articles-link[href*="/fussball/"]) .mod-articles-category::after, body.itemid-116 #sp-homepage-news .mod-articles-item-content:has(.mod-articles-link[href*="/tischtennis/"]) .mod-articles-category::after, body.itemid-116 #sp-homepage-news .mod-articles-item-content:has(.mod-articles-link[href*="/aktuelles-tischtennis/"]) .mod-articles-category::after { font-size: 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-title { margin-bottom: 5px !important; font-size: 12px !important; line-height: 1.2 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content > p { display: -webkit-box !important; overflow: hidden !important; margin-bottom: 0 !important; font-size: 10px !important; line-height: 1.35 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content::after { padding-top: 8px !important; font-size: 10px !important; } } /* ========================================================= TT-/FB-Administration: Joomla-Standardaktion ausblenden Diese Regeln stehen bewusst am Dateiende. Weiter oben wird der Bearbeiten-Button für gewöhnliche Beiträge global als Flex-Element gestaltet; ohne diese Reihenfolge würde diese globale Vorgabe die Ausblendung wieder aufheben. ========================================================= */ body.bkv-admin-area.com-content.view-article .article-can-edit, body.com-content.view-article:has(.bkv-league-filters) .article-can-edit, body.com-content.view-article:has(.bkv-league-filters) .article-can-edit > a, body.com-content.view-article:has(.bkv-league-filters) a[href*="task=article.edit"] { display: none !important; } /* Formularseite: Die Aktualisierungsangabe gehört nicht zur Downloadliste. Sie wird ausschließlich dort ausgeblendet; andere Beiträge behalten ihre Metadaten unverändert. */ body.bkv-formulare-page #sp-main-body .article-info, body.bkv-formulare-page #sp-main-body .article-details > .article-info, body.bkv-formulare-page #sp-main-body .article-details .article-info, body.bkv-formulare-page #sp-main-body .article-details time { display: none !important; } /* Fußball-Übersicht: dezenter Hinweis für noch leere Fachmodule. */ body.itemid-222 #sp-position1 .sp-module:has(.bkv-coming-soon) .sp-module-content, body.itemid-222 #sp-position1 .sp-module:has(.bkv-coming-soon) .sp-module-body, body.itemid-222 #sp-position1 .sp-module:has(.bkv-coming-soon) .custom { display: grid !important; min-height: 146px !important; place-items: center !important; } body.itemid-222 #sp-main-body .sp-module:has(.bkv-coming-soon) .sp-module-content, body.itemid-222 #sp-main-body .sp-module:has(.bkv-coming-soon) .sp-module-body, body.itemid-222 #sp-main-body .sp-module:has(.bkv-coming-soon) .custom { display: grid !important; min-height: 146px !important; place-items: center !important; } /* Die drei leeren Fußball-Fachmodule besitzen eigene Custom-IDs. */ #mod-custom139:has(.bkv-coming-soon), #mod-custom141:has(.bkv-coming-soon), #mod-custom142:has(.bkv-coming-soon) { display: grid !important; min-height: 146px !important; place-items: center !important; } #mod-custom139 .bkv-coming-soon, #mod-custom141 .bkv-coming-soon, #mod-custom142 .bkv-coming-soon { display: grid !important; justify-items: center !important; gap: 4px !important; padding: 18px 20px !important; color: #66798a !important; text-align: center !important; } #mod-custom139 .bkv-coming-soon__icon, #mod-custom141 .bkv-coming-soon__icon, #mod-custom142 .bkv-coming-soon__icon { display: grid !important; width: 27px !important; height: 27px !important; place-items: center !important; color: #0879c9 !important; background: #e9f4fb !important; border: 1px solid #cfe4f2 !important; border-radius: 50% !important; font-size: 20px !important; line-height: 1 !important; } #mod-custom139 .bkv-coming-soon strong, #mod-custom141 .bkv-coming-soon strong, #mod-custom142 .bkv-coming-soon strong { color: #24506f !important; font-size: 13px !important; font-weight: 700 !important; } #mod-custom139 .bkv-coming-soon small, #mod-custom141 .bkv-coming-soon small, #mod-custom142 .bkv-coming-soon small { color: #728394 !important; font-size: 12px !important; } body.itemid-222 .bkv-coming-soon { display: grid !important; justify-items: center !important; gap: 4px !important; padding: 18px 20px !important; color: #66798a !important; text-align: center !important; } body.itemid-222 .bkv-coming-soon__icon { display: grid !important; width: 27px !important; height: 27px !important; place-items: center !important; color: #0879c9 !important; background: #e9f4fb !important; border: 1px solid #cfe4f2 !important; border-radius: 50% !important; font-size: 20px !important; line-height: 1 !important; } body.itemid-222 .bkv-coming-soon strong { color: #24506f !important; font-size: 13px !important; font-weight: 700 !important; } body.itemid-222 .bkv-coming-soon small { color: #728394 !important; font-size: 12px !important; } /* Dieselbe Darstellung in den leeren Fußball-Karten der Startseite. */ body.itemid-116 .bkv-dashboard-section .bkv-sport-football > .sp-module:has(.bkv-coming-soon) .sp-module-content, body.itemid-116 .bkv-dashboard-section .bkv-sport-football > .sp-module:has(.bkv-coming-soon) .sp-module-body, body.itemid-116 .bkv-dashboard-section .bkv-sport-football > .sp-module:has(.bkv-coming-soon) .custom { display: grid !important; min-height: 94px !important; place-items: center !important; } body.itemid-116 .bkv-dashboard-section .bkv-sport-football .bkv-coming-soon { display: grid !important; justify-items: center !important; gap: 4px !important; padding: 12px 16px !important; color: #66798a !important; text-align: center !important; } body.itemid-116 .bkv-dashboard-section .bkv-sport-football .bkv-coming-soon__icon { display: grid !important; width: 27px !important; height: 27px !important; place-items: center !important; color: #0879c9 !important; background: #e9f4fb !important; border: 1px solid #cfe4f2 !important; border-radius: 50% !important; font-size: 20px !important; line-height: 1 !important; } body.itemid-116 .bkv-dashboard-section .bkv-sport-football .bkv-coming-soon strong { color: #24506f !important; font-size: 13px !important; font-weight: 700 !important; } body.itemid-116 .bkv-dashboard-section .bkv-sport-football .bkv-coming-soon small { color: #728394 !important; font-size: 12px !important; } /* Startseiten-News: Zwischen Tablet und Smartphone drei kompakte Karten. Erst im eigentlichen Smartphone-Layout (bis 639px) werden zwei Karten nebeneinander gezeigt. */ @media (min-width: 640px) and (max-width: 767.98px) { body.itemid-116 #sp-homepage-news > .container { padding-right: 18px !important; padding-left: 18px !important; } body.itemid-116 #sp-homepage-news .mod-articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content { padding: 11px 11px 13px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content::before { flex-basis: 102px !important; height: 102px !important; margin: -11px -11px 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-image, body.itemid-116 #sp-homepage-news .mod-articles-item-content > figure { margin: -11px -11px 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-image img, body.itemid-116 #sp-homepage-news .mod-articles-item-content > figure img { height: 102px !important; } body.itemid-116 #sp-homepage-news .mod-articles-title { font-size: 15px !important; line-height: 1.25 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content > p { font-size: 12px !important; line-height: 1.4 !important; } } /* Kompaktes Zwischenlayout: drei Karten von 640px bis Tablet-Breite. Dadurch wechselt das Raster nicht zu früh auf zwei übergroße Karten. */ @media (min-width: 640px) and (max-width: 991.98px) { body.itemid-116 #sp-homepage-news .mod-articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item { height: 265px !important; max-height: 265px !important; min-height: 0 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content { padding: 9px 9px 11px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content::before { flex-basis: 70px !important; height: 70px !important; margin: -9px -9px 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-image, body.itemid-116 #sp-homepage-news .mod-articles-item-content > figure { margin: -9px -9px 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-image img, body.itemid-116 #sp-homepage-news .mod-articles-item-content > figure img { height: 70px !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content > dl { gap: 6px 10px !important; margin-bottom: 7px !important; font-size: 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-category, body.itemid-116 #sp-homepage-news .mod-articles-item-content:has(.mod-articles-link[href*="/fussball/"]) .mod-articles-category::after, body.itemid-116 #sp-homepage-news .mod-articles-item-content:has(.mod-articles-link[href*="/tischtennis/"]) .mod-articles-category::after, body.itemid-116 #sp-homepage-news .mod-articles-item-content:has(.mod-articles-link[href*="/aktuelles-tischtennis/"]) .mod-articles-category::after { font-size: 9px !important; } body.itemid-116 #sp-homepage-news .mod-articles-title { margin-bottom: 5px !important; font-size: 12px !important; line-height: 1.2 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content > p { display: -webkit-box !important; overflow: hidden !important; margin-bottom: 0 !important; font-size: 10px !important; line-height: 1.35 !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3 !important; } body.itemid-116 #sp-homepage-news .mod-articles-item-content::after { padding-top: 9px !important; font-size: 10px !important; } } /* Fußball-Übersicht: Die Seite besteht ausschließlich aus den Modulen. */ body.itemid-222 #sp-component .article-can-edit, body.itemid-222 #sp-component a[href*="task=article.edit"] { display: none !important; } /* TT-/FB-Admin: Die Bearbeitung erfolgt über die Fachoberflächen, nicht über den Joomla-Standardbutton im Beitrag. */ body.bkv-admin-area .article-can-edit, body.bkv-admin-area a[href*="task=article.edit"] { display: none !important; } /* Direkte Absicherung für die TT-Liga-Verwaltung: Diese Fachansicht trägt ihren eigenen Filtercontainer und darf keinen Joomla-Beitragsbutton zeigen. */ body:has(.bkv-league-filters) .article-can-edit, body:has(.bkv-league-filters) a[href*="task=article.edit"] { display: none !important; } /* Die Grundregel für das Fußball-Menü enthält zusätzlich die Klasse .mod-menu und war dadurch spezifischer als die bisherige Mobilregel. Das Menü dockt nun bündig unter dem kompakten Mobil-Header an. */ @media (max-width: 767.98px) { body.itemid-222 #sp-position1 ul.mod-menu.menubkv-fb-area-menu.is-docked, body.itemid-222 #sp-position1 ul.menu.menubkv-fb-area-menu.is-docked { top: 46px !important; } } /* Finaler Mobil-Override: Die alten Desktop-Selektoren besitzen eine höhere Spezifität als die früheren Medienregeln. So docken beide Bereichsmenüs wirklich ohne weißen Zwischenraum direkt unter dem 46px-Header an. */ @media (max-width: 767.98px) { html body.itemid-222 #sp-position1 ul.mod-menu.menubkv-fb-area-menu.is-docked, html body.itemid-222 #sp-position1 ul.menu.menubkv-fb-area-menu.is-docked { top: 46px !important; left: 0 !important; width: 100% !important; margin: 0 !important; transform: none !important; } html body #sp-user1 ul.mod-menu.menubkv-tt-area-menu.is-docked, html body #sp-user1 ul.menu.menubkv-tt-area-menu.is-docked { top: 46px !important; left: 0 !important; width: 100% !important; margin: 0 !important; transform: none !important; } } /* Alle Meldungen: Kategorie-Alias ist „aktuelles-fussball“, nicht „fussball“. Damit greift das globale Fußball-Fallback auch in der Beitragsübersicht. */ body.itemid-161 .article-list.bkv-news-card .article:has(.article-header a[href*="/aktuelles-fussball/"])::before, body.itemid-161 .article-list.bkv-news-card .article:has(.article-header a[href*="/aktuelles-fußball/"])::before { background-image: url("/images/bkv-kategorien/fb.png") !important; background-position: left center !important; } body.itemid-161 .article-list.bkv-news-card .article:has(.article-header a[href*="/aktuelles-fussball/"]) .article-header::before, body.itemid-161 .article-list.bkv-news-card .article:has(.article-header a[href*="/aktuelles-fußball/"]) .article-header::before { content: "Fußball" !important; visibility: visible !important; } /* Globale News-Kacheln: Kategorienamen vereinheitlichen und fehlende Bilder ersetzen. */ .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fussball/"]) .mod-articles-category, .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fußball/"]) .mod-articles-category { font-size: 0 !important; } .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fussball/"]) .mod-articles-category .icon-folder-open, .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fußball/"]) .mod-articles-category .icon-folder-open { display: none !important; } .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fussball/"]) .mod-articles-category::after, .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fußball/"]) .mod-articles-category::after { content: "Fußball"; display: block; font-size: 11px; line-height: 14.85px; } .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fussball/"]):not(:has(.mod-articles-image)) .mod-articles-item-content::before, .bkv-news-grid .mod-articles-item:has(> .mod-articles-item-content > .mod-articles-title > .mod-articles-link[href*="/aktuelles-fußball/"]):not(:has(.mod-articles-image)) .mod-articles-item-content::before { content: ""; display: block; order: 1; width: calc(100% + 26px); height: 100px; margin: -11px -13px 0; background: url("/images/bkv-kategorien/fb.png") left center / cover no-repeat; flex: 0 0 100px; } @media (max-width: 767.98px) { body.itemid-222 #sp-position1 > .bkv-sport-card { width: calc(100% - 24px) !important; } } #sp-section-1 { width: 100%; max-width: none; margin: 0; overflow: hidden; } #sp-section-1 > .row { margin-left: 0 !important; margin-right: 0 !important; } #sp-title { width: 100%; max-width: 1440px; margin-left: auto; margin-right: auto; /* Bewusst kein Abstand zwischen Hauptheader und Themenbild */ padding: 0 !important; } #sp-title .mod-custom, #sp-title .mod-custom p, #sp-title .mod-custom figure { margin: 0 !important; padding: 0 !important; background: var(--bkv-page-bg) !important; } #sp-title .mod-custom img { display: block; width: 100%; height: auto; background: transparent !important; -webkit-mask-image: none !important; mask-image: none !important; } /* Header -> Themenbild: kurzer, bläulicher Overlay statt Abstand */ #sp-section-1::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 34px; /* * Header -> Themenbild: * Kein sichtbarer Abstand und keine harte Schattenkante. * Stattdessen läuft das Header-Blau kurz ins Bild aus. */ background: linear-gradient( to bottom, rgba(0, 99, 198, 0.55) 0%, rgba(0, 112, 198, 0.28) 35%, rgba(0, 112, 198, 0.10) 65%, rgba(0, 112, 198, 0) 100% ); z-index: 2; pointer-events: none; } /* Themenbild -> Content */ #sp-section-1::after { content: none !important; display: none !important; } #sp-main { width: 100%; max-width: none; margin-top: 80px; /* * Header ist fixed und 80px hoch. * #sp-main enthält Hero, Content UND Footer. * Deshalb muss genau dieser Container die restliche * Viewport-Höhe ausfüllen. */ min-height: calc(100vh - 80px); display: flex; flex-direction: column; } #sp-main-body { flex: 1 0 auto; width: 100%; max-width: none; padding: 20px 0 48px; background: var(--bkv-page-bg); } /* Inhalt weiterhin gut lesbar und nicht beliebig breit */ #sp-main-body > .container, #sp-main-body .container { width: 100%; max-width: 1240px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 28px; padding-right: 28px; } .article-list .article { background-color: #dee7f2; border-style: inset; } #main div.attachmentsList table tbody tr.even td, div.attachmentsList table tbody tr.even td { background-color: #E5F2F9; } #main div.attachmentsList caption, div.attachmentsList caption { display: none; } #main div.attachmentsList table thead th, div.attachmentsList table thead th { border: none; } /* ========================================================================== ARTIKELDETAILS – DOKUMENT-ANHÄNGE ========================================================================== */ body.com-content.view-article ul.fields-container:has(.bkv-document-attachment) { margin: 12px 0 0 0 !important; padding: 0 !important; list-style: none !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) > .field-label { display: none !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) > .field-value { display: block !important; margin: 0 !important; padding: 0 !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container { margin: 0 !important; padding: 0 !important; list-style: none !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container > li { margin: 0 !important; padding: 0 !important; list-style: none !important; font-size: 0 !important; line-height: 0 !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container > li::marker { content: "" !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container > li > .field-entry:first-of-type { display: none !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container > li > .field-entry:last-of-type { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container > li > .field-entry:last-of-type > .field-label { display: none !important; } body.com-content.view-article li.field-entry.anhaenge:has(.bkv-document-attachment) ul.fields-container > li > .field-entry:last-of-type > .field-value { display: block !important; margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; } .bkv-document-attachment { display: block !important; width: min(390px, 100%); margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.4 !important; } .bkv-document-attachment__link { display: flex !important; align-items: center; gap: 11px; min-height: 54px; padding: 8px 11px; color: #063d78 !important; background: #f9fbfd; border: 1px solid #d6e3ef; border-radius: 6px; box-shadow: 0 2px 7px rgba(5, 57, 113, 0.07); text-decoration: none !important; font-size: 14px !important; line-height: 1.4 !important; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .bkv-document-attachment__link:hover, .bkv-document-attachment__link:focus-visible { color: #063d78 !important; background: #fff; border-color: #78b4e8; box-shadow: 0 4px 12px rgba(5, 57, 113, 0.12); text-decoration: none !important; transform: translateY(-1px); } .bkv-document-attachment__type { display: grid !important; flex: 0 0 auto; place-items: center; width: 30px; height: 36px; padding: 2px; color: #dc3d35 !important; border: 2px solid currentColor; border-radius: 3px; font-size: 9px !important; font-weight: 800; line-height: 1 !important; letter-spacing: .03em; } .bkv-document-attachment__content { display: flex !important; flex: 1 1 auto; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px !important; line-height: 1.4 !important; } .bkv-document-attachment__name { overflow: hidden; color: #0b5594 !important; font-size: 14px !important; font-weight: 700; line-height: 1.25 !important; text-overflow: ellipsis; white-space: nowrap; } .bkv-document-attachment__meta { color: #7c8b99 !important; font-size: 12px !important; line-height: 1.2 !important; } .bkv-document-attachment__download { display: grid !important; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; color: #0675c9 !important; font-size: 14px !important; line-height: 1 !important; } .bkv-document-attachment__download svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 575.98px) { .bkv-document-attachment { width: 100%; } .bkv-document-attachment__link { min-height: 52px; gap: 9px; padding: 7px 9px; } .bkv-document-attachment__name { font-size: 13px !important; } } /* Button */ /* * Die folgenden Regeln stammen aus den alten Sportseiten. Sie dürfen nicht * in die Joomla-Frontend-Bearbeitung hineinwirken: Dort verwendet Joomla * dieselben Bootstrap-Klassen fuer TinyMCE und die Aktionsleiste. */ body.com-content.view-article #sp-main-body .btn.dropdown-toggle { display: none; } body.com-content.view-article #sp-main-body .btn-group.pull-right { width: 90px; padding-bottom: 10px; } body.com-content.view-article #sp-main-body .btn-group.pull-right >ul{ width: 90px; } body.com-content.view-article #sp-main-body .btn-group.pull-right >.dropdown-menu { position: relative; font-size: inherit; display: inherit; min-width: 0; height: 30px; padding: 4px; background-color: #006FC6; border: 1px solid transparent; box-shadow: 1px 1px #006FC6; background-clip: padding-box; border-radius: 0.25rem; } body.com-content.view-article #sp-main-body .btn-group.pull-right >.dropdown-menu>li { position: relative; font-size: inherit; text-align: center; vertical-align: center; width: 90px; } body.com-content.view-article #sp-main-body .btn-group.pull-right >.dropdown-menu>li>a { color: #fff; } body.com-content.view-article #sp-main-body .sppb-btn-primary { height: 31px !important; } body.com-content.view-article #sp-main-body .btn-primary, body.com-content.view-article #sp-main-body .sppb-btn-primary { max-width: 20%; max-height: 10%; } body.com-content.view-article #sp-main-body .btn-lg { max-width: 100% !important; width: 100% !important; } body.com-content.view-article #sp-main-body .btn-secondary { max-width: 20%; height: 10% !important; max-height: 10% !important; } .navspieltagback { margin-top: 10px !important; float: left; height: 30px; width: 100px !important; } .navspieltagnext { margin-top: 10px !important; float: right; height: 30px; width: 100px !important; } /* Select */ body.com-content.view-article #sp-main-body select:not(.form-select):not(.form-control) { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline-block; height: 32px; min-height: 32px; margin: 0 0 10px 3px; padding: 1px 22px 2px 8px; font-family: var(--bkv-font); font-size: 11.5px !important; font-weight: 500; line-height: 1.2 !important; box-sizing: border-box; text-align: center; text-align-last: center; color: #fff !important; /* * Gleiche Farbwirkung wie der Header. * Zusätzlich ein kleines CSS-Dreieck als Dropdown-Pfeil. */ background: linear-gradient(45deg, transparent 50%, #fff 50%) calc(100% - 11px) 13px / 5px 5px no-repeat, linear-gradient(135deg, #fff 50%, transparent 50%) calc(100% - 7px) 13px / 5px 5px no-repeat, linear-gradient( to bottom, rgb(0, 129, 198), rgb(0, 99, 198) ) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 7px !important; box-shadow: 0 2px 7px rgba(0, 99, 198, 0.16); outline: none; vertical-align: middle; transition: filter 0.18s ease, box-shadow 0.18s ease; } body.com-content.view-article #sp-main-body select:not(.form-select):not(.form-control):hover, body.com-content.view-article #sp-main-body select:not(.form-select):not(.form-control):focus { color: #fff !important; filter: brightness(1.04); box-shadow: 0 4px 10px rgba(0, 99, 198, 0.20); outline: none; } /* * Geöffnete Einträge: * Browserabhängig, wird von modernen Desktop-Browsern übernommen. */ body.com-content.view-article #sp-main-body select:not(.form-select):not(.form-control) option { color: #fff !important; background: rgb(0, 112, 198) !important; font-family: var(--bkv-font); font-size: 12px !important; font-weight: 400; } body.com-content.view-article #sp-main-body select.select-season { width: 64px !important; } body.com-content.view-article #sp-main-body select.select-round { width: 118px !important; } body.com-content.view-article #sp-main-body select.select-team { width: 150px !important; } /* Buttons */ .tooltip { position: relative; display: inline-block; } .tooltip .tooltiptext { visibility: hidden; width: 120px; background-color: black; color: #fff; text-align: center; border-radius: 6px; padding: 5px 0; /* Position the tooltip */ position: absolute; z-index: 1; } .tooltip:hover .tooltiptext { visibility: visible; } body.com-content.view-article #sp-main-body input[type=text], body.com-content.view-article #sp-main-body input[type=number] { font-size: 12px !important; } body.com-content.view-article #sp-main-body button, body.com-content.view-article #sp-main-body input[type=submit], body.com-content.view-article #sp-main-body input[type=button], body.com-content.view-article #sp-main-body optgroup { -webkit-appearance: none; -moz-appearance: none; appearance: none; display: inline; padding: 0; margin: 0px 3px 10px 0px; text-align: center; text-align: -webkit-center; text-align-last: center; font-size: inherit; /*height: 30px;*/ width: 150%; color:#fff; background-color: #006FC6; border: 1px solid transparent; /*box-shadow: 1px 1px #006FC6;*/ background-clip: padding-box; border-radius: 0.25rem; transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s; } .input-group-text { max-height: 38px; } body.com-content.view-article #sp-main-body input[type=password] { max-height: 38px; } .hidden { display: none; } /* Title */ .title h6 { color: #000000; font-size: 12px; font-weight: bold; text-transform: uppercase; letter-spacing: 2px; } .title h2 { font-size: 20px !important; font-weight: 600; /*line-height: 1.2em;*/ color: #000; /*margin: 30px 0 35px;*/ } .title.white h2 { color: #fff; } /* About */ .about-img img { -webkit-transition: .2s ease-in-out; -o-transition: .2s ease-in-out; transition: .2s ease-in-out; } .about-img img:hover { transform: scale(1.05); } /* Counter */ .counter .count, .counter #shiva { line-height: 100px; font-weight: 600; font-size: 85px; } .counter h4 { color: #fff; font-size: 18px; font-weight: 500; text-transform: uppercase; letter-spacing: 4.5px; } /* Services */ .services-item { position: relative; overflow: hidden; } .services-item:before { background: rgba(241, 241, 241, 0.2);; position: absolute; content: ""; -webkit-transform: skew(-45deg) translateX(150%); transform: skew(-45deg) translateX(150%); width: 200%; height: 200%; -webkit-transition: all .6s ease; transition: all .6s ease; opacity: 0; right: 0; bottom: 0; display: block; } .services-item:after { background: rgba(241, 241, 241, 0.2);; position: absolute; content: ""; -webkit-transform: skew(-45deg) translateX(-150%); transform: skew(-45deg) translateX(-150%); width: 200%; height: 200%; -webkit-transition: all .6s ease; transition: all .6s ease; opacity: 0; top: 0; left: 0; display: block; } .services-item:hover:before { -webkit-transform: skew(-45deg) translateX(50%); transform: skew(-45deg) translateX(50%); opacity: .75; } .services-item:hover:after { -webkit-transform: skew(-45deg) translateX(-50%); transform: skew(-45deg) translateX(-50%); opacity: .75; } .services-item:hover { cursor: pointer; } .services-item img { width: 100%; } /* My Services */ @-webkit-keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { from { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg); transform: perspective(400px) rotate3d(1, 0, 0, 90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg); transform: perspective(400px) rotate3d(1, 0, 0, -20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg); transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg); transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .my-item:hover h3 { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; color: #000 !important; } .my-item:hover { cursor: pointer } /* Skill */ .skill { position: relative; } .skill:before { height: 100%; width: 100%; left: 0; top: 0; content: ""; position: absolute; background: linear-gradient(135deg, rgba(0,0,0,0.33) 0%, rgba(246,131,56,0.67) 100%); z-index: -1; opacity: 1; transition: background 0.3s, border-radius 0.3s, opacity 0.3s; } .bar-skill .sppb-row-container { margin-top: -250px; background-color: #fff; border-radius: 10px; box-shadow: 0px 0px 30px 0px rgba(0,0,0,0.18); transition: background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s; padding: 90px 50px 20px; } .skill-left #skill li p { color: #000 !important; } .bar-skill #skill { list-style: none; position: relative; padding: 0 !important; background-image: none !important; } #skill li { margin-bottom: 100px; background: #000000; height: 10px; border-radius: 0px; } #skill li h3, #skill li p { position: relative; top: -28px; color: #999999; font-size: 19px; font-weight: 500; float: left; width: 50%; } #skill li p { text-align: right; font-size: 16px; } .bar { height: 10px; position:absolute; border-radius: 0px; } .graphic-design { width: 90%; -moz-animation:graphic-design 2s ease-out; -webkit-animation:graphic-design 2s ease-out; } .html-css { width: 80%; -moz-animation:html-css 2s ease-out; -webkit-animation:html-css 2s ease-out; } .jquery { width: 86%; -moz-animation:jquery 2s ease-out; -webkit-animation:jquery 2s ease-out; } @-moz-keyframes graphic-design {0% { width:0px;} 100%{ width:100%;} } @-moz-keyframes html-css { 0% { width:0px;} 100%{ width:90%;} } @-moz-keyframes jquery { 0% { width:0px;} 100%{ width:65%;} } @-moz-keyframes wordpress { 0% { width:0px;} 100%{ width:80%;} } @-webkit-keyframes graphic-design { 0% { width:0px;} 100%{ width:100%;} } @-webkit-keyframes html-css { 0% { width:0px;} 100%{ width:90%;} } @-webkit-keyframes jquery { 0% { width:0px;} 100%{ width:65%;} } @-webkit-keyframes wordpress { 0% { width:0px;} 100%{ width:80%;} } /* Client */ .client-item h3 { position: relative; z-index: 1; } /* Portfolio */ .sp-simpleportfolio .sp-simpleportfolio-filter>ul>li>a { font-size: 18px; padding: 5px 20px; } /* Blog */ .jmm-item .jmm-image.mod-article-image { overflow: hidden; } .jmm-image.mod-article-image img { transform: scale(1); -webkit-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; } .jmm-item:hover .jmm-image.mod-article-image img { transform: scale(1.12); filter: grayscale(100%); } /* Contact Info */ .contact-info h2, .contact-info h3 { font-size: 25px; } body.com-content.view-article #sp-main-body button.btn.btn-primary.validate { color: #fff !important; padding: 13px 20px; } /* ========================================================= FOOTER Zwei feste Hälften: Footer1 links / Footer2 rechts ========================================================= */ /* Footer1 – Links */ /* Footer2 – Social Icons + Copyright */ body:not(.view-form) #sp-main-body table { width: 100%; } body:not(.view-form) #sp-main-body table td { padding: .625em; text-align: center; font-size: .85em; color: #46484d; } body:not(.view-form) #sp-main-body table td a { display: block; text-decoration: none; color: #46484d; } body:not(.view-form) #sp-main-body table td a:hover, body:not(.view-form) #sp-main-body table td a:focus { text-decoration: none; color: inherit; } .Winner{ font-weight: bold; } body:not(.view-form) #sp-main-body table caption { font-size: 1.5em; margin: .5em 0 .75em; } body:not(.view-form) #sp-main-body table tr { border: 1px solid #ddd; padding: .35em; } body:not(.view-form) #sp-main-body table tr:hover { background: rgb(86, 120, 161, 0.4); } body:not(.view-form) #sp-main-body table tr:nth-child(odd) { background: rgb(229, 242, 249); } body:not(.view-form) #sp-main-body table tr:nth-child(odd):hover { background: rgb(86, 120, 161, 0.4); } body:not(.view-form) #sp-main-body table th { background: rgba(0, 0, 0, 0) linear-gradient(rgb(0, 129, 198), rgb(0, 99, 198)) repeat scroll 0 0; border: 0px; color: #fff; padding: .625em; text-align: center; font-size: 0.85em; letter-spacing: 0.1em; text-transform: uppercase; } body:not(.view-form) #sp-main-body table thead { border: 0px; } [data-href] { cursor: pointer; } /* Tooltip */ .gameinfo { cursor: pointer; } .spielinfo { padding-top: 10px; padding-bottom: 10px; } div.tooltip1 span { display: none !important; background: #333 !important; color: #fff !important; top: -5px; left: 105%; float: right; } div.tooltip1:hover span { display: inline-block !important; width: 120px !important; background-color: black !important; color: #fff !important; text-align: center !important; padding: 5px 0 !important; border-radius: 6px !important; /* Position the tooltip text - see examples below! */ z-index: 1 !important; } body.com-content.view-article #sp-main-body input[type=number]::-webkit-outer-spin-button, body.com-content.view-article #sp-main-body input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } body.com-content.view-article #sp-main-body input[type=number] { -moz-appearance:textfield; } .error { text-align:left; font-size:0.8em; border: 1px solid #333; background: #343835; color: #ffffff; box-shadow: 5px 5px 2px #444; width:80%; height:100%; padding:1.0em; margin:0.2em; margin:0 auto; margin-bottom: 10px; display: none; } /* ========================================================= DESKTOP NAVIGATION & MEGAMENU Icon-only im Header, normale Texte im MegaMenu ========================================================= */ /* ========================================================= OFFCANVAS MENU Nur Darstellung – Helix-Menüfunktion bleibt unverändert ========================================================= */ /* Dezenter BKV-Farbverlauf */ .offcanvas-menu { background: linear-gradient( 180deg, rgb(0, 129, 198) 0%, rgb(0, 123, 198) 45%, rgb(0, 112, 198) 100% ) !important; color: #fff !important; } /* Einheitliche Typografie */ .offcanvas-menu, .offcanvas-menu .offcanvas-inner, .offcanvas-menu .offcanvas-inner ul.menu, .offcanvas-menu .offcanvas-inner ul.menu li, .offcanvas-menu .offcanvas-inner ul.menu li > a, .offcanvas-menu .offcanvas-inner ul.menu li > span, .offcanvas-menu .offcanvas-inner ul.menu li > .menu-separator, .offcanvas-menu .offcanvas-inner ul.menu li > .nav-header { font-family: var(--bkv-font) !important; font-size: 15px !important; font-weight: 400 !important; color: #fff !important; opacity: 1 !important; text-decoration: none !important; } /* OffCanvas: Icons weiß, Text bleibt sichtbar */ .offcanvas-menu .offcanvas-inner ul.menu li > a > i, .offcanvas-menu .offcanvas-inner ul.menu li > span > i, .offcanvas-menu .offcanvas-inner ul.menu li > a .fa, .offcanvas-menu .offcanvas-inner ul.menu li > a .fas, .offcanvas-menu .offcanvas-inner ul.menu li > a .far, .offcanvas-menu .offcanvas-inner ul.menu li > a .fab, .offcanvas-menu .offcanvas-inner ul.menu li > span .fa, .offcanvas-menu .offcanvas-inner ul.menu li > span .fas, .offcanvas-menu .offcanvas-inner ul.menu li > span .far, .offcanvas-menu .offcanvas-inner ul.menu li > span .fab { color: #fff !important; } .offcanvas-menu .offcanvas-inner ul.menu li > a > i, .offcanvas-menu .offcanvas-inner ul.menu li > span > i { font-size: 14px !important; width: 20px !important; margin-right: 7px !important; text-align: center !important; } /* ------------------------- Ebene 1 BKV / Fußball / Tischtennis ... ------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li { margin: 0 !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > span, .offcanvas-menu .offcanvas-inner ul.menu > li > .menu-separator, .offcanvas-menu .offcanvas-inner ul.menu > li > .nav-header { min-height: 48px !important; padding: 12px 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; line-height: 24px !important; color: #fff !important; background: transparent !important; } /* ------------------------- Ebene 2 Allgemein / Stadtliga / A-Klasse ... ------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child { margin: 0 !important; padding-left: 18px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li { margin: 0 !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > span, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > .menu-separator, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > .nav-header { min-height: 40px !important; padding: 9px 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; line-height: 22px !important; color: #fff !important; background: transparent !important; } /* ------------------------- Ebene 3 Aktuelles / Tabelle / Spielplan ... ------------------------- */ .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child { margin: 0 !important; padding-left: 18px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li { margin: 0 !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > a, .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li > span { min-height: 36px !important; padding: 7px 0 !important; margin: 0 !important; display: flex !important; align-items: center !important; line-height: 22px !important; color: #fff !important; background: transparent !important; } /* Hover / aktiv / Fokus */ .offcanvas-menu .offcanvas-inner ul.menu li.active > a, .offcanvas-menu .offcanvas-inner ul.menu li.active > span, .offcanvas-menu .offcanvas-inner ul.menu li.current > a, .offcanvas-menu .offcanvas-inner ul.menu li.current > span, .offcanvas-menu .offcanvas-inner ul.menu li > a:hover, .offcanvas-menu .offcanvas-inner ul.menu li > span:hover, .offcanvas-menu a:focus, .offcanvas-menu span:focus { color: #fff !important; opacity: 1 !important; background: transparent !important; outline: none !important; box-shadow: none !important; } /* Pfeile / Toggler */ .offcanvas-menu .menu-toggler, .offcanvas-menu .menu-toggler::before, .offcanvas-menu .menu-toggler::after { color: #fff !important; opacity: 1 !important; } .offcanvas-menu .menu-toggler { min-width: 42px !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li > a .menu-toggler, .offcanvas-menu .offcanvas-inner ul.menu > li > span .menu-toggler { min-height: 48px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li .menu-toggler { min-height: 40px !important; } .offcanvas-menu .offcanvas-inner ul.menu > li > ul.menu-child > li > ul.menu-child > li .menu-toggler { min-height: 36px !important; } /* Schließen-X */ .offcanvas-menu .close-offcanvas, .offcanvas-menu .close-offcanvas:hover, .offcanvas-menu .close-offcanvas:focus { color: #fff !important; border-color: transparent !important; outline: none !important; box-shadow: none !important; } /* ========================================================= MOBILE HEADER / HAMBURGER Hintergrund vollständig transparent ========================================================= */ /* Hamburger-Striche: bewusst außerhalb der Media Query – exakt wie in der funktionierenden Version vor der CSS-Bereinigung. */ .burger-icon > span, #offcanvas-toggler .burger-icon > span, #offcanvas-toggler:hover .burger-icon > span, #offcanvas-toggler:focus .burger-icon > span, #offcanvas-toggler.active .burger-icon > span, .offcanvas-active .burger-icon > span { background-color: #fff !important; } /* ========================================================= MOBILE LAYOUT Smartphones bis 767px ========================================================= */ /* ========================================================= /* ========================================================= FRONTEND-BEARBEITUNG – Edit-Icons ausblenden Nur Darstellung; Bearbeitungsrechte bleiben erhalten ========================================================= */ /* Joomla Modul-Bearbeiten-Button */ a.jmodedit, .jmodedit, .jmodedit-tooltip { display: none !important; } /* Joomla Beitrags-Bearbeiten-Button */ .article-details .icons, .article-details ul.actions, .article-details .article-info + .icons, .article-details a[href*="task=article.edit"], .article-details a[href*="task=category.edit"], a[title*="Bearbeiten"], a[aria-label*="Bearbeiten"], a[title*="Edit"], a[aria-label*="Edit"] { display: none !important; } /* ========================================================= MODERNER CONTENT-BEREICH Offen statt Boxed – klare Breite, subtile Flächen ========================================================= */ /* * Kein "Kasten in der Seite": * Hintergrund leicht getönt, Inhalt offen und breit. */ #sp-main, #sp-main-body { background: var(--bkv-page-bg); } #sp-main-body > .container > .container-inner { background: transparent; border: 0; border-radius: 0; box-shadow: none; padding: 26px 0 34px; margin-top: 0; margin-bottom: 0; } /* * Der eigentliche Content nutzt die vorhandenen 1240px deutlich besser. * Kein zusätzlicher Innenkasten. */ #sp-main-body #sp-component, #sp-main-body .article-details { width: 100%; max-width: none; } /* * Einzelne Datenelemente bekommen Tiefe – nicht der komplette Inhalt. * Dadurch wirkt die Seite moderner, ohne wieder boxed auszusehen. */ #sp-main-body table, #sp-main-body .table-responsive { background: var(--bkv-surface); } /* ========================================================= ÜBERSCHRIFTEN – klarere visuelle Hierarchie ========================================================= */ #sp-main-body h1, #sp-main-body .page-header h1, #sp-main-body .article-header h1 { position: relative; padding-bottom: 13px !important; margin-bottom: 22px !important; color: #1f2937; } /* Kurzer BKV-Akzent unter der Hauptüberschrift */ #sp-main-body h1::after, #sp-main-body .page-header h1::after, #sp-main-body .article-header h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 999px; background: linear-gradient( 90deg, var(--bkv-blue), var(--bkv-blue-dark) ); } /* Unterüberschriften etwas ruhiger als die H1 */ #sp-main-body h2, #sp-main-body h3 { color: #273444; } /* ========================================================= TABELLEN – leichter, moderner, weniger "Verwaltung" ========================================================= */ #sp-main-body table { border-collapse: separate !important; border-spacing: 0 !important; width: 100%; background: #fff; border: 1px solid var(--bkv-border); border-radius: 9px; overflow: hidden; box-shadow: 0 3px 12px rgba(18, 38, 63, 0.035); } /* Alte äußere Zeilenrahmen entfernen */ #sp-main-body table tr { border: 0 !important; } /* Tabellenkopf weiterhin klar in BKV-Blau */ #sp-main-body table th { background: linear-gradient( 180deg, rgb(0, 129, 198), rgb(0, 105, 198) ) !important; border: 0 !important; border-bottom: 1px solid rgba(0, 82, 157, 0.25) !important; color: #fff; font-weight: 600; } /* Dezente Trennung statt kräftiger Rahmen */ #sp-main-body table td { border: 0 !important; border-bottom: 1px solid #edf1f5 !important; } /* Letzte Tabellenzeile ohne untere Linie */ #sp-main-body table tbody tr:last-child td { border-bottom: 0 !important; } /* Zebra-Streifen deutlich subtiler */ #sp-main-body table tr:nth-child(odd) { background: #f8fbfd !important; } #sp-main-body table tr:nth-child(even) { background: #ffffff !important; } /* Ruhiger Hover-Effekt */ #sp-main-body table tbody tr:hover, #sp-main-body table tbody tr:nth-child(odd):hover, #sp-main-body table tbody tr:nth-child(even):hover { background: #eef6fb !important; } /* Etwas mehr Luft zwischen mehreren Tabellen */ #sp-main-body table + table, #sp-main-body table + .table-responsive, #sp-main-body .table-responsive + table, #sp-main-body .table-responsive + .table-responsive { margin-top: 26px; } /* Mannschaftsansicht: Abstand vor Aufstellung/Aushilfen. #spielinfo wird von einem