/* === Lokale Web-Fonts (DSGVO: kein Google-CDN-Roundtrip) ============ */ @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/cinzel-decorative-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Cinzel Decorative'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/cinzel-decorative-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/playfair-display-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap; src: url('/wp-content/uploads/fonts/playfair-display-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/playfair-display-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap; src: url('/wp-content/uploads/fonts/playfair-display-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* === Ende Web-Fonts ============================================== */ /* Theme Name: BK Germany XVI Theme URI: https://bkgermany16.de/ Author: Gabriel Wais (gabelschnabel) Author URI: https://gabelschnabel.de/ Description: Klassisches WordPress-Theme für Blue Knights Germany XVI (Rhein-Ruhr). Reproduziert das Joomla-Cassiopeia-Layout 1:1 unter voller Layout-Hoheit (kein Block-Theme-Wrapper, keine theme.json-Constraints). Cassiopeia-CSS wird per wp_enqueue_style sauber in geladen. Version: 1.0.0 Requires at least: 6.5 Requires PHP: 8.1 License: All rights reserved Text Domain: bkgermany16 */ /* ========================================================================== 1. Grund-Setup & Variablen ========================================================================== */ :root { --bk-blue: #002366; --bk-gold: #FFD700; --bk-light-blue: #0d6efd; --bk-dark-blue: #001B4C; } body { /* Stahl-Graphit mit subtilem vertikalem Schimmer: oben heller, Mitte als Hauptton, unten leicht abgedunkelt — gibt einen Brushed-Metal-Eindruck ohne plakative Streifen. Dezent gehalten, damit der weiße Content darüber dominant bleibt. */ background-color: #506b85 !important; /* Fallback */ background-image: linear-gradient( 180deg, #5d7a96 0%, #506b85 45%, #455e75 100% ) !important; background-attachment: fixed !important; /* Schimmer-Linien wandern nicht beim Scrollen */ } /* ========================================================================== 2. Header (dunkelrot via Cassiopeia-Gradient, blau-goldener Border) ========================================================================== */ header.header, .container-header { /* Background EXPLIZIT auf header.header setzen mit !important — sonst zeichnet Cassiopeia den Gradient nur auf .container-header, das u.U. nicht mit dem wrappenden Inhalt mitwächst, und Reihe 2 fällt visuell aus dem Rot raus. */ background-color: #912b3b !important; background-image: linear-gradient(135deg, #912b3b 0%, #954b56 100%) !important; border-bottom: 8px solid var(--bk-blue) !important; /* position: sticky bewusst ENTFERNT — kollidierte mit body background-attachment: fixed und mit dem Wrap-Verhalten des Menüs. */ position: relative !important; z-index: 1000; box-shadow: 0 3px 6px rgba(0,0,0,0.15); /* Asymmetrisch: oben wenig, unten Atemluft. Gold-Streifen sitzt absolut am Bottom. */ padding: 8px 0 17px !important; min-height: 0 !important; height: auto !important; overflow: visible !important; } /* Cassiopeia .grid-child Defaults für das Header-Innere zähmen. */ .container-header .grid-child { padding: 0 !important; width: 100% !important; max-width: 1320px; margin: 0 auto; } .container-header .container-nav { /* Cassiopeia setzt flex-wrap: wrap + padding-bottom: 1em — beides aus für ein sauberes block-Layout in dem unsere flex-mod-menu wrappt. */ display: block !important; padding-bottom: 0 !important; width: 100%; } header.header::after { /* Gold-Streifen klebt am unteren Rand des padding-box, direkt über dem 8px-blauen border-bottom — KEINE Lücke durch padding-bottom. */ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--bk-gold); } /* Top-Menü als horizontale Flex-Liste — Cassiopeia-Defaults zur Sicherheit nochmal explizit setzen (greift auch falls template.min.css verzögert lädt). */ header.header .container-nav { max-width: 1280px; margin: 0 auto; padding: 0 16px; } header.header .mod-menu.nav { display: flex !important; flex-direction: row; flex-wrap: wrap; list-style: none; /* Container-Breite zwingt 8 Items auf 2 Reihen wrap (asymmetrisch). */ max-width: 720px; margin: 0 auto !important; padding: 0 !important; gap: 8px 10px; justify-content: center; } /* Cassiopeia setzt auf >li margin-left: 1.55em für 2..n. Das sprengt unser Layout und summiert über die Reihen hinweg ungleich. Wir nehmen ausschließlich gap. */ header.header .mod-menu.nav > li, header.header .mod-menu.nav > li + li { margin: 0 !important; } /* Cassiopeia hat einen ::after-Pseudo-Underline auf den Items, der bei Hover eine 2px-Linie animiert und auf den .active-Items aktiv ist. Bei unserem Schoko-Riegel-Look stört der — abschalten. */ header.header .mod-menu.nav > li:after, header.header .mod-menu.nav > li.active:after, header.header .mod-menu.nav > li:hover:after { display: none !important; } header.header .mod-menu.nav > li > a:hover, header.header .mod-menu.nav > li.active > a { text-decoration: none !important; } header.header .mod-menu.nav .nav-item { list-style: none; margin: 0; padding: 0; flex: 0 0 auto; } /* Schokoriegel: jeder Item sitzt als 3D-Riegel auf der Cassiopeia-"Tafel" — • konvexe Wölbung obendrauf (linear-gradient von oben hell nach unten dunkel) • 4-seitige Bevel-Kante (inset shadows: hell oben+links, dunkel unten+rechts) • tiefe Furche rundherum (outer dark shadow) • weiße Schrift mit kräftigem Schatten für Lesbarkeit Hover: Riegel wölbt sich stärker (Gradient + Schatten verstärken). */ header.header .mod-menu.nav .nav-item > a { display: inline-block; padding: 9px 12px !important; color: #ffffff !important; text-decoration: none; font-weight: 700 !important; font-size: 1rem; letter-spacing: 0.4px; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.6); border-radius: 5px; /* Konvexe Wölbung: oben heller (Lichtreflexion), Mitte dunkler, unten ein Touch dunkler */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.06) 35%, rgba(0, 0, 0, 0.12) 65%, rgba(0, 0, 0, 0.28) 100% ), rgba(0, 0, 0, 0.18); box-shadow: /* Bevel oben+links: hell */ inset 1px 1px 0 rgba(255, 255, 255, 0.45), inset 2px 2px 3px rgba(255, 255, 255, 0.15), /* Bevel unten+rechts: dunkel */ inset -1px -1px 0 rgba(0, 0, 0, 0.55), inset -2px -2px 4px rgba(0, 0, 0, 0.25), /* Tiefe Furche rundherum (outer dark) */ 0 0 0 1px rgba(0, 0, 0, 0.45), 0 3px 4px rgba(0, 0, 0, 0.45); transition: transform .18s ease, background .18s ease, box-shadow .18s ease; border-bottom: none !important; } header.header .mod-menu.nav .nav-item > a:hover, header.header .mod-menu.nav .nav-item > a:focus { color: #ffffff !important; transform: translateY(-1px); /* Stärker gewölbt = noch heller oben, noch dunkler unten */ background: linear-gradient(180deg, rgba(255, 255, 255, 0.32) 0%, rgba(255, 255, 255, 0.10) 35%, rgba(0, 0, 0, 0.16) 65%, rgba(0, 0, 0, 0.34) 100% ), rgba(0, 0, 0, 0.18); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.55), inset 2px 2px 4px rgba(255, 255, 255, 0.20), inset -1px -1px 0 rgba(0, 0, 0, 0.65), inset -2px -2px 5px rgba(0, 0, 0, 0.30), 0 0 0 1px rgba(0, 0, 0, 0.55), 0 5px 8px rgba(0, 0, 0, 0.55); border-bottom: none !important; } header.header .mod-menu.nav .nav-item.current > a, header.header .mod-menu.nav .nav-item.active > a, header.header .mod-menu.nav .nav-item.current-menu-item > a, header.header .mod-menu.nav .nav-item.current_page_item > a { color: #fff7c2 !important; /* leicht goldgelb */ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.7); /* Aktive Seite mit Gold-Wölbung statt schwarz-Wölbung */ background: linear-gradient(180deg, rgba(255, 215, 0, 0.40) 0%, rgba(255, 215, 0, 0.18) 50%, rgba(120, 90, 0, 0.30) 100% ), rgba(0, 0, 0, 0.18); box-shadow: inset 1px 1px 0 rgba(255, 235, 130, 0.65), inset -1px -1px 0 rgba(80, 60, 0, 0.6), inset 0 0 0 1px rgba(255, 215, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.45), 0 3px 5px rgba(0, 0, 0, 0.5); border-bottom: none !important; } /* Submenu (Dropdown) für .parent — kommt zum Zug sobald wir Submenüs im wp-admin anlegen. Aktuell flach, aber Stil bereit. */ header.header .mod-menu.nav .nav-item.parent { position: relative; } header.header .mod-menu.nav .nav-item.parent > ul { display: none; position: absolute; top: 100%; left: 0; background: #fff; list-style: none; margin: 0; padding: 8px 0; min-width: 220px; box-shadow: 0 8px 20px rgba(0,0,0,0.18); border-top: 3px solid var(--bk-gold); z-index: 1001; } header.header .mod-menu.nav .nav-item.parent:hover > ul, header.header .mod-menu.nav .nav-item.parent:focus-within > ul { display: block; } header.header .mod-menu.nav .nav-item.parent > ul li { list-style: none; margin: 0; padding: 0; } header.header .mod-menu.nav .nav-item.parent > ul li a { display: block; padding: 8px 18px; color: #000 !important; /* Dropdown-Schrift schwarz, gut lesbar */ text-shadow: none !important; text-decoration: none; font-weight: 500; font-size: 0.95rem; background: transparent; box-shadow: none; border-radius: 0; transition: background .15s, color .15s; } header.header .mod-menu.nav .nav-item.parent > ul li a:hover { background: var(--bk-blue); color: #fff !important; } /* ========================================================================== 3. Site-Grid (eigenes 2-Spalten-Layout) ========================================================================== */ .site-grid { display: grid; /* minmax(0, 1fr) statt 1fr — verhindert dass nowrap-Inhalte (z.B. der Title) den 1fr-Slot über die nominal gleiche Breite hinaus aufblasen. Damit ist die rechte Spalte oben EXAKT so breit wie unten. */ grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "top-l top-r" "side-l comp"; column-gap: 20px; row-gap: 20px; max-width: 1280px; margin: 0 auto; padding: 20px 16px; } /* WICHTIG — Cassiopeia überschreiben: - .grid-child padding-left/right: 2em → 0 (sonst Card-Versatz) - .container-sidebar-left/right width: calc(25% - 1em) → 100% (sonst schrumpft Sidebar weg) - .container-component width-Schrumpfung weg Damit füllen alle 4 Slots ihre Grid-Spalten exakt aus. */ .site-grid > .container-top-logo, .site-grid > .container-top-title, .site-grid > .container-sidebar-left, .site-grid > .container-component { padding: 0 !important; margin: 0 !important; /* width: 100% + justify-self: stretch zwingt das grid-item, den ganzen Spaltenslot auszufüllen. width: auto wäre "natürliche content width" — Title-Card war damit nur so breit wie der Schriftblock, nicht so breit wie der 1fr-Slot. */ width: 100% !important; justify-self: stretch !important; align-self: stretch !important; min-width: 0; box-sizing: border-box; } .site-grid .container-top-logo { grid-area: top-l !important; } .site-grid .container-top-title { grid-area: top-r !important; } .site-grid .container-sidebar-left { grid-area: side-l !important; } /* WICHTIG: Cassiopeia setzt zusätzlich grid-column-end: main-end mit gleicher Specificity, was eine implizite dritte 0-px-Spalte erzeugt und die Card 20 px nach rechts überstehen lässt. !important verhindert den Überschreiber. */ .site-grid .container-component { grid-area: comp !important; } @media (max-width: 768px) { .site-grid { grid-template-columns: 1fr; grid-template-areas: "top-a" "side-l" "comp"; } } /* ========================================================================== 4. Top-Reihe: Logo-Card und Title-Card sind direkte site-grid Children in eigenen grid-areas (top-l und top-r) — sie liegen damit GARANTIERT in derselben Spalte wie Sidebar (side-l) und Content (comp) darunter. ========================================================================== */ /* Logo-Card transparent: Logo schwebt direkt auf dem Stahlblau-Hintergrund. */ .bk-header-logo { background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; display: flex; align-items: center; justify-content: center; } /* Title-Card mit Motorrad-Banner-Hintergrund: ::before zeichnet das Bild verschwommen, ::after legt einen hellen Schleier drüber für Text-Lesbarkeit. */ .bk-header-title { position: relative; overflow: hidden; isolation: isolate; border: 1px solid rgba(0,0,0,0.12); border-radius: 6px; box-shadow: 0 4px 8px rgba(0,0,0,0.08); display: flex; align-items: center; justify-content: center; } .bk-header-title::before { content: ""; position: absolute; inset: -12px; /* etwas größer als Card → Blur-Rand bleibt unsichtbar */ background-image: url('/wp-content/uploads/header/banner-motorrad.jpg'); background-size: cover; background-position: center 60%; /* Industrie-Hintergrund eher mittig */ filter: blur(6px) saturate(0.85); z-index: -2; } .bk-header-title::after { content: ""; position: absolute; inset: 0; /* heller Schleier: 60 % weiß lässt das Motiv durchscheinen, hält Schrift lesbar */ background: rgba(255, 255, 255, 0.55); z-index: -1; } .bk-header-title .bk-title { position: relative; z-index: 1; } .bk-header-logo img { width: 224px !important; height: auto !important; max-height: none; margin: 0; } .bk-header-title { padding: 22px 28px; } .bk-title { width: 100%; text-align: center; display: flex; flex-direction: column; gap: 6px; } /* 3-zeiliger Titelstack: Vorzeile (Playfair Italic), Hauptzeile (Cinzel Decorative Bold), Untertitel (Playfair Italic, klein). */ .bk-title-pre { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(16px, 1.8vw, 22px); line-height: 1.1; color: var(--bk-blue); opacity: 0.85; text-shadow: 0 1px 2px rgba(255,255,255,0.6); margin-bottom: 2px; } .bk-title-main { font-family: 'Cinzel Decorative', 'Playfair Display', Georgia, serif; font-weight: 700; /* Eine Zeile, kein nowrap mehr nötig — durch das Aufteilen passt's locker. */ font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; color: var(--bk-blue); letter-spacing: 0.5px; text-shadow: 0 1px 2px rgba(255,255,255,0.65), 0 0 8px rgba(255,255,255,0.4); } .bk-title-sub { font-family: 'Playfair Display', Georgia, serif; font-weight: 500; font-style: italic; font-size: clamp(16px, 1.8vw, 22px); line-height: 1; color: var(--bk-blue); opacity: 0.85; text-shadow: 0 1px 2px rgba(255,255,255,0.6); margin-top: 2px; } @media (max-width: 768px) { .bk-header-grid { grid-template-columns: 1fr; row-gap: 16px; } .bk-header-logo img { width: 160px !important; } .bk-title-main { font-size: 22px; white-space: normal; } .bk-title-sub { font-size: 16px; } .bk-header-title { padding: 14px 18px; } } /* ========================================================================== 5. Sidebar-Module (3D-Look mit blauen Headern) ========================================================================== */ .sidebar-left .moduletable h3 { background-color: var(--bk-blue) !important; color: #ffffff !important; padding: 12px 15px !important; margin: 0 !important; font-size: 1.1rem; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 3px solid var(--bk-gold) !important; } .sidebar-left .moduletable { border: 1px solid #ccc !important; box-shadow: 0 8px 15px rgba(0,0,0,0.1) !important; overflow: hidden; background: #fff !important; margin-bottom: 20px; border-radius: 4px; } /* Mitgliederbereich-Button — sauber per CSS-Klasse statt inline-onmouseover */ .sidebar-left .bk-mitgliederbereich-button { display: flex; align-items: center; gap: 10px; background-color: var(--bk-blue); color: #ffffff; padding: 14px 18px; border-radius: 4px; border-left: 5px solid var(--bk-light-blue); text-decoration: none; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); transition: background-color .2s ease-in-out, border-left-color .2s ease-in-out, padding-left .2s ease-in-out; } .sidebar-left .bk-mitgliederbereich-button:hover, .sidebar-left .bk-mitgliederbereich-button:focus { background-color: var(--bk-light-blue); border-left-color: var(--bk-gold); padding-left: 23px; color: #ffffff; text-decoration: none; } /* ========================================================================== 6. Verstecken der System-Überschrift ========================================================================== */ .com-content-article__title, .page-header, .wp-block-post-title, .entry-title { display: none !important; } /* ========================================================================== 7. Footer ========================================================================== */ footer.footer, .container-footer { background-color: #802030 !important; padding: 8px 0 !important; min-height: 100px !important; display: flex !important; justify-content: center !important; align-items: center; width: 100% !important; } .bk-footer-content { background-color: var(--bk-blue) !important; color: #ffffff !important; padding: 20px 30px !important; display: flex; justify-content: center; align-items: center; gap: 40px; border-top: 3px solid var(--bk-gold); box-shadow: 0 4px 10px rgba(0,0,0,0.3); border-radius: 4px; } .footer-links a { color: var(--bk-gold) !important; font-weight: bold; text-decoration: none; margin-left: 12px; } .footer-links a:hover { text-decoration: underline; } @media (max-width: 768px) { .bk-footer-content { flex-direction: column; gap: 10px; text-align: center; } .footer-links a { display: inline-block; margin: 4px 8px; } } /* ========================================================================== 8. Back-to-top ========================================================================== */ #back-top { position: fixed; right: 20px; bottom: 20px; width: 44px; height: 44px; background: var(--bk-blue); color: #fff; border-radius: 50%; text-align: center; line-height: 44px; font-size: 22px; text-decoration: none; box-shadow: 0 4px 12px rgba(0,0,0,0.25); z-index: 999; transition: background .15s, transform .15s; } #back-top:hover { background: var(--bk-light-blue); transform: translateY(-2px); } /* ========================================================================== 9. Article-Body Defaults ========================================================================== */ main.com-content-article { background: #ffffff; border-radius: 6px; padding: 32px; box-shadow: 0 8px 20px rgba(0,0,0,0.08), 0 2px 4px rgba(0,0,0,0.04); border: 1px solid #e0e0e0; /* WICHTIG: ohne border-box rechnet die Card padding ZUSÄTZLICH zur 100% Breite und ragt damit 64px aus ihrem Spalten-Slot raus. */ box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; } main.com-content-article img { max-width: 100%; height: auto; } main.com-content-article h1, main.com-content-article h2, main.com-content-article h3 { color: var(--bk-blue); line-height: 1.3; } main.com-content-article a { color: var(--bk-light-blue); } @media (max-width: 768px) { main.com-content-article { padding: 18px; } } /* ========================================================================== 10. Kontaktformular (Shortcode [bk_contact_form]) ========================================================================== */ .bk-contact-form { display: grid; gap: 14px; max-width: 620px; } .bk-contact-form p { margin: 0; } .bk-contact-form label { display: grid; gap: 5px; font-weight: 600; color: var(--bk-blue); font-size: 1rem; } .bk-contact-form input[type="text"], .bk-contact-form input[type="email"], .bk-contact-form textarea { padding: 10px 12px; border: 1px solid #ccc; border-radius: 4px; font-size: 1rem; font-family: inherit; width: 100%; box-sizing: border-box; font-weight: 400; color: #222; } .bk-contact-form textarea { resize: vertical; min-height: 140px; } .bk-contact-form input:focus, .bk-contact-form textarea:focus { outline: 0; border-color: var(--bk-blue); box-shadow: 0 0 0 3px rgba(0,35,102,0.18); } .bk-contact-form button[type="submit"] { background: var(--bk-blue); color: #fff; border: 0; border-left: 5px solid var(--bk-gold); padding: 12px 26px; border-radius: 4px; font-weight: 700; font-size: 1rem; cursor: pointer; transition: background .15s, padding .15s; justify-self: start; } .bk-contact-form button[type="submit"]:hover { background: var(--bk-light-blue); padding-left: 31px; } /* Sicherheitsfrage-Input klein halten */ .bk-contact-form input[name="captcha"] { width: 8em !important; max-width: 100%; } /* ==== Jubi 25 Jahre (2026-05-21 bis 2026-07-19) ==== */ /* Grid: 3. Spalte rechts — nur ab 1260px (Tablets/nicht-16:9 bekommen Standard-2-Spalten) */ @media (min-width: 1260px) { .site-grid.has-jubi-col { max-width: none; margin: 0; padding: 20px 60px; grid-template-columns: 280px minmax(0, 1fr) 280px; grid-template-areas: "top-l top-r top-r" "side-l comp jubi-side"; } } .container-jubi-col { grid-area: jubi-side; grid-column: 3; grid-row: 2; align-self: start; display: flex; flex-direction: column; gap: 20px; margin: 1em 0 0 0; } .container-jubi-top { padding: 0 !important; margin: 0 !important; overflow: hidden; border-radius: 6px; } .container-jubi-top a { display: block; height: 100%; } .container-jubi-top img { width: 100%; height: auto; display: block; } @media (max-width: 1259px) { .site-grid.has-jubi-col { padding: 20px 16px; grid-template-columns: 280px minmax(0, 1fr); grid-template-areas: "top-l top-r" "side-l comp"; } .container-jubi-col { display: none !important; } } /* Mobile: has-jubi-col -> Single Column, Nav-Banner weg */ @media (max-width: 768px) { .site-grid.has-jubi-col { padding: 20px 16px; grid-template-columns: 1fr; grid-template-areas: "top-l" "top-r" "side-l" "comp"; margin: 0; } #jubi-nav-l, #jubi-nav-r { display: none !important; } .has-jubi-header header.header .container-nav { padding: 0 16px !important; } } /* Jubi: Nav-Container volle Breite -> Banner an Bildschirmraender */ @media (min-width: 1260px) { .has-jubi-header header.header .container-nav { max-width: none !important; padding: 0 60px !important; } } /* ==== BK22 Save-the-Date (Column 3) ==== */ .bk22-block { border-radius: 8px; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(0, 80, 180, 0.45); box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .bk22-block-img { width: 100%; height: auto; display: block; } .bk22-block-body { padding: 14px 16px 18px; } .bk22-block-friends { font-size: 0.72em; color: #7aaae8; text-transform: uppercase; letter-spacing: 0.09em; margin: 0 0 6px; line-height: 1.4; } .bk22-block-date { font-size: 1.05em; font-weight: 900; color: #4d8ed4; margin: 0 0 2px; line-height: 1.2; } .bk22-block-location { font-size: 0.78em; color: #999; margin: 0 0 12px; } .bk22-block-link { display: inline-block; background: #1a4a8a; color: #fff !important; text-decoration: none !important; padding: 7px 15px; border-radius: 4px; font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s; } .bk22-block-link:hover { background: #2255aa; } /* ==== Mission Triangel Teaser (Column 3, Row 3) ==== */ .container-jubi-mission { border-radius: 8px; overflow: hidden; background: #0a0a0a; border: 1px solid rgba(200, 60, 10, 0.35); box-shadow: 0 6px 20px rgba(0,0,0,0.5); } .jubi-mission-img { width: 100%; height: auto; display: block; } .jubi-mission-body { padding: 14px 16px 18px; } .jubi-mission-title { font-size: 1.1em; font-weight: 900; letter-spacing: 0.08em; color: #e8450a; text-transform: uppercase; margin: 0 0 3px; line-height: 1.2; } .jubi-mission-sub { font-size: 0.78em; color: #999; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 10px; } .jubi-mission-text { font-size: 0.82em; color: #ccc; line-height: 1.55; margin: 0 0 14px; } .jubi-mission-link { display: inline-block; background: #c0390b; color: #fff !important; text-decoration: none !important; padding: 7px 15px; border-radius: 4px; font-size: 0.8em; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; transition: background 0.2s; } .jubi-mission-link:hover { background: #e04810; } /* ==== Mission Triangel Detail-Seite ==== */ .mission-triangel-page h2 { color: #c0390b; font-size: 1.15em; margin-top: 1.8em; text-transform: uppercase; letter-spacing: 0.06em; } .mt-btn { display: inline-block; background: #c0390b; color: #fff !important; text-decoration: none !important; padding: 10px 20px; border-radius: 5px; font-weight: 700; font-size: 0.95em; margin: 4px 0; transition: background 0.2s; } .mt-btn:hover { background: #e04810; } .mt-btn-secondary { background: #444; } .mt-btn-secondary:hover { background: #555; } /* ==== Freunde & Partner Sidebar ==== */ .bk-partners-box h3 { background: #003366; color: #fff; padding: 6px 10px; margin: 0; font-size: .95rem; border-radius: 4px 4px 0 0; } .bk-partners-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 10px; background: #f4f6f9; border: 1px solid #c8d4e0; border-top: none; border-radius: 0 0 4px 4px; } .bk-partner-tile { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 0; padding: 8px 6px 7px; background: #fff; border: 1px solid #dde3eb; border-radius: 6px; text-decoration: none !important; color: #003366 !important; font-size: 0.68em; font-weight: 700; text-align: center; line-height: 1.2; height: 80px; box-sizing: border-box; overflow: hidden; transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .bk-partner-tile:hover { background: #eaf0f8; box-shadow: 0 2px 8px rgba(0,51,102,0.12); transform: translateY(-2px); text-decoration: none !important; } .bk-partner-tile span:last-child { display: block; width: 100%; margin-top: auto; padding-top: 4px; } .bk-partner-logo { display: block; width: 100%; height: 44px; object-fit: contain; object-position: center; flex-shrink: 0; } .bk-partner-badge { display: flex; align-items: center; justify-content: center; width: 48px; height: 44px; border-radius: 6px; color: #fff; font-size: 0.8em; font-weight: 900; letter-spacing: 0.03em; line-height: 1.3; text-align: center; flex-shrink: 0; }