/* * GOLBASI.DE – GLOBALES DESIGN * Bereiche: Farben, Typografie, Navigation, Oberflächen, Homepage, Footer */ /* 1. Farben und Typografie */ :root { --og-pink: #ff065f; --og-green: #00ff00; --og-blue: #3366cc; --og-black: #000000; --og-white: #ffffff; --og-glass: rgba(255, 255, 255, .025); --og-glass-strong: rgba(255, 255, 255, .045); --og-glass-border: rgba(255, 255, 255, .24); --og-glass-highlight: rgba(255, 255, 255, .38); --og-font: Roboto, Helvetica, Arial, sans-serif; } html, body, #Wrapper, #Content { background-color: var(--og-black) !important; } body, p, li, dd, dt, table, input, textarea, select, label, blockquote, figcaption, .wp-block-post-content { color: var(--og-white); font-family: var(--og-font) !important; font-weight: 400; } h1, h2, h3, h4, h5, h6, .title, .entry-title, .post-title, .fancy_heading .title, .title_wrapper .title, .column_heading .title, .mcb-item-heading-inner { color: var(--og-white) !important; font-family: var(--og-font) !important; font-weight: 800 !important; font-style: normal !important; letter-spacing: .01em; text-rendering: optimizeLegibility; } strong, b { font-family: var(--og-font) !important; font-weight: 800; } a { color: var(--og-pink); font-family: var(--og-font); text-decoration-color: currentColor; } a:hover, a:focus-visible { color: var(--og-green) !important; } ::selection { color: var(--og-black); background: var(--og-pink); } :focus-visible { outline: 3px solid var(--og-green) !important; outline-offset: 3px; } /* 2. Liquid-Glass-Navigation */ #Top_bar:not(.is-sticky), #Top_bar.is-sticky { left: 16px !important; right: auto !important; width: calc(100% - 32px) !important; border: 1px solid var(--og-glass-border) !important; background: var(--og-glass) !important; box-shadow: 0 16px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .42), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .06) !important; -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.08); backdrop-filter: blur(16px) saturate(185%) brightness(1.08); overflow: visible; } #Top_bar:not(.is-sticky) { border-radius: 26px; animation: ogTopBounce .88s cubic-bezier(.22, .82, .32, 1.04) both; transform-origin: top center; } #Top_bar.is-sticky { top: 8px !important; border-radius: 22px !important; animation: ogStickyBounce .88s cubic-bezier(.22, .82, .32, 1.04) both; transform-origin: top center; } #Top_bar:not(.is-sticky)::before, #Top_bar.is-sticky::before { content: ""; position: absolute; inset: 1px; z-index: 0; border-radius: inherit; background: linear-gradient( 180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 32%, transparent 72% ); pointer-events: none; } #Top_bar > .container { position: relative; z-index: 1; } #Top_bar > .container, #Top_bar > .container > .column, #Top_bar .top_bar_left, #Top_bar .top_bar_right, #Top_bar .logo, #Top_bar #logo, #Top_bar .menu_wrapper, #Top_bar #menu, #Top_bar #menu > ul.menu, #Top_bar #menu > ul.menu > li, #Top_bar #menu > ul.menu > li > a, #Top_bar #menu > ul.menu > li > a > span { background: transparent !important; background-image: none !important; } /* Desktop: Logo links, gesamte Navigation rechts */ @media (min-width: 960px) { #Top_bar .top_bar_left { display: flex !important; align-items: center; width: 100% !important; } #Top_bar .logo { flex: 0 0 auto; } #Top_bar .menu_wrapper { position: relative; display: flex !important; flex: 1 1 auto; justify-content: flex-end; width: auto !important; margin: 0 !important; float: none !important; } #Top_bar #menu { width: auto !important; margin-left: auto !important; float: none !important; } #Top_bar #menu > ul.menu { display: flex !important; align-items: center; justify-content: flex-end; width: auto !important; } } /* Navigationstexte */ #Top_bar .menu > li > a, #Top_bar .menu > li > a span { color: var(--og-white) !important; font-family: var(--og-font) !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.25; text-decoration: none !important; border-bottom: 0 !important; box-shadow: none !important; } #Top_bar .menu > li > a:hover, #Top_bar .menu > li > a:hover span, #Top_bar .menu > li.hover > a, #Top_bar .menu > li.hover > a span { color: var(--og-pink) !important; } #Top_bar .menu li.current-menu-item > a, #Top_bar .menu li.current-menu-item > a span, #Top_bar .menu li.current_page_item > a, #Top_bar .menu li.current_page_item > a span, #Top_bar .menu li.current-menu-ancestor > a, #Top_bar .menu li.current-menu-ancestor > a span { color: var(--og-green) !important; background: transparent !important; } #Top_bar .menu > li > a::after, #Top_bar .menu > li > a span:not(.description)::after, #Top_bar .menu li ul li a::after { display: none !important; content: none !important; border: 0 !important; } /* Untermenüs */ #Top_bar .menu li ul, .mfn-menu-submenu { border: 1px solid var(--og-glass-border) !important; border-radius: 18px !important; background: var(--og-glass) !important; box-shadow: 0 16px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .42), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .06) !important; -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.08) !important; backdrop-filter: blur(16px) saturate(185%) brightness(1.08) !important; overflow: hidden; } #Top_bar .menu li ul li a, #Top_bar .menu li ul li a span, .mfn-menu-submenu a, .mfn-menu-submenu a span { color: var(--og-white) !important; font-family: var(--og-font) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.35 !important; text-decoration: none !important; } #Top_bar .menu li ul li a:hover, #Top_bar .menu li ul li a:hover span, #Top_bar .menu li ul li.hover > a, #Top_bar .menu li ul li.hover > a span, .mfn-menu-submenu a:hover, .mfn-menu-submenu a:hover span { color: var(--og-pink) !important; } /* Animiertes Logo */ #Top_bar #logo { position: relative; } #Top_bar #logo img { opacity: 0 !important; } #Top_bar #logo::after { content: ""; position: absolute; inset: 15px 0; background-color: var(--og-pink); -webkit-mask: url("https://golbasi.de/wp-content/uploads/2026/08/OG_Logo_R.png") left center / contain no-repeat; mask: url("https://golbasi.de/wp-content/uploads/2026/08/OG_Logo_R.png") left center / contain no-repeat; animation: ogLogoPalette 15s ease-in-out infinite; pointer-events: none; } @keyframes ogLogoPalette { 0%, 100% { background-color: var(--og-pink); } 33.333% { background-color: var(--og-green); } 66.666% { background-color: var(--og-blue); } } @keyframes ogStickyBounce { 0% { transform: translateY(-14px) scale(.994); } 52% { transform: translateY(4px) scale(1.003); } 74% { transform: translateY(-2px) scale(.999); } 100% { transform: translateY(0) scale(1); } } @keyframes ogTopBounce { 0% { transform: translateY(10px) scale(.996); } 52% { transform: translateY(-3px) scale(1.002); } 74% { transform: translateY(1px) scale(.999); } 100% { transform: translateY(0) scale(1); } } /* 3. Wiederkehrende Liquid-Glass-Oberflächen */ .post-item, .portfolio-item, .widget, .accordion .question, .faq .question, .pricing-box, .get_in_touch, .infobox, .team, .testimonials_slider, blockquote, .alert, .woocommerce ul.products li.product, .woocommerce form.checkout, .woocommerce form.login, .woocommerce form.register, .woocommerce-cart-form, .cart_totals, .shop_table, .woocommerce-MyAccount-navigation, .woocommerce-MyAccount-content, .wpcf7 form, .mfn-box, .mfn-card { box-sizing: border-box; border: 1px solid var(--og-glass-border) !important; border-radius: 22px !important; background: linear-gradient( 135deg, var(--og-glass-strong), rgba(255, 255, 255, .018) 52%, var(--og-glass) ) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 -1px 0 rgba(255, 255, 255, .035); -webkit-backdrop-filter: blur(16px) saturate(155%); backdrop-filter: blur(16px) saturate(155%); } .post-item, .portfolio-item, .widget, .accordion .question, .faq .question, .woocommerce ul.products li.product, .mfn-card { transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .post-item:hover, .portfolio-item:hover, .widget:hover, .accordion .question:hover, .faq .question:hover, .woocommerce ul.products li.product:hover, .mfn-card:hover { border-color: rgba(0, 255, 0, .72) !important; box-shadow: 0 20px 54px rgba(0, 0, 0, .30), 0 0 0 1px rgba(0, 255, 0, .16), inset 0 1px 0 rgba(255, 255, 255, .20); transform: translateY(-2px); } /* Formulare */ input:not([type="checkbox"]):not([type="radio"]), textarea, select { color: var(--og-white) !important; border: 1px solid var(--og-glass-border) !important; border-radius: 14px !important; background: rgba(255, 255, 255, .032) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .09); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } input:focus, textarea:focus, select:focus { border-color: var(--og-green) !important; box-shadow: 0 0 0 3px rgba(0, 255, 0, .16) !important; } /* Buttons */ .button, button, input[type="button"], input[type="submit"], .wp-element-button { color: var(--og-black) !important; border: 1px solid var(--og-pink) !important; border-radius: 999px !important; background: rgba(255, 6, 95, .88) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 28px rgba(255, 6, 95, .16); font-family: var(--og-font) !important; font-weight: 800 !important; } .button:hover, button:hover, input[type="button"]:hover, input[type="submit"]:hover, .wp-element-button:hover { color: var(--og-black) !important; border-color: var(--og-green) !important; background: rgba(0, 255, 0, .90) !important; } /* Metadaten */ .post-meta, .post-meta a, .entry-meta, .entry-meta a, .author-date, .date_label, .post-head .date, .post-footer, .post-footer a, .category, .category a, small.meta, .meta { color: var(--og-blue) !important; font-family: var(--og-font) !important; font-weight: 400 !important; } /* 4. Homepage-Grundlayout */ .home { background: var(--og-black); } .home #Header_wrapper { position: absolute !important; inset: -50px 0 auto; z-index: 100; width: 100%; background: transparent !important; } .home #Header { background: transparent !important; } .home #Content { padding-top: 0 !important; } .home #Content > .content_wrapper, .home #Content .sections_group, .home #Content .entry-content, .home #Content .section.the_content, .home #Content .section_wrapper, .home #Content .the_content_wrapper { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .home .entry-content > .wp-block-group { margin-block-start: 0; margin-block-end: 0; } /* Hero */ .og-video-hero { position: relative; width: 100%; height: 100vh; min-height: 620px; overflow: hidden; background: var(--og-black); isolation: isolate; } .og-video-hero__media, .og-video-hero__shade, .og-video-hero__fade, .og-video-hero__interaction-shield { position: absolute; inset: 0; } .og-video-hero__media { z-index: 0; overflow: hidden; opacity: 0; animation: ogVideoReveal 5s ease-in-out forwards; } .og-video-hero__media video { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; border: 0; object-fit: cover; pointer-events: none; transform: translate(calc(-50% + var(--og-pan-x, 0px)), -50%) scale(1.12); transition: transform .9s cubic-bezier(.22, .61, .36, 1); will-change: transform; } .og-video-hero__shade { display: none; } .og-video-hero__fade { z-index: 4; background: linear-gradient( 180deg, transparent 46%, rgba(0, 0, 0, .18) 58%, rgba(0, 0, 0, .58) 74%, rgba(0, 0, 0, .92) 88%, var(--og-black) 96%, var(--og-black) 100% ); box-shadow: inset 0 -2px 0 var(--og-black); pointer-events: none; } .og-video-hero__interaction-shield { z-index: 5; cursor: default; pointer-events: auto; } @keyframes ogVideoReveal { from { opacity: 0; } to { opacity: 1; } } /* Textbereich */ .og-home-content { width: 100%; box-sizing: border-box; padding: 96px 32px 72px; background: var(--og-black); } .og-home-content__inner { width: min(100%, 1160px); margin: 0 auto; } .og-home-content__intro { max-width: 900px; margin: 0 auto 68px; text-align: center; } .og-home-content h2, .og-home-content h3 { margin-top: 0; } .og-home-content h2 { margin-bottom: 24px; color: var(--og-pink) !important; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.1; } .og-home-content h3 { margin-bottom: 18px; color: var(--og-green) !important; font-size: clamp(24px, 2.5vw, 34px); line-height: 1.16; } .og-home-content p { margin: 0; color: var(--og-white); font-size: clamp(17px, 1.35vw, 20px); line-height: 1.65; } .og-home-content__columns { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px; width: 100%; } .og-home-content__block { min-width: 0; } /* 5. Wiederverwendbare Karten */ .og-card-section { width: 100%; box-sizing: border-box; padding: 36px 32px 128px; background: var(--og-black); } .og-card-section__inner { width: min(100%, 1160px); margin: 0 auto; } .og-card-grid { display: grid !important; gap: 28px; width: 100%; } .og-card-grid--primary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .og-card-grid--secondary { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 860px; margin: 28px auto 0; } .og-glass-card { position: relative; min-height: 310px; box-sizing: border-box; margin: 0; border: 1px solid var(--og-glass-border) !important; border-radius: 26px; background: var(--og-glass); box-shadow: 0 16px 44px rgba(0, 0, 0, .24), inset 0 1px 0 rgba(255, 255, 255, .42), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .06); -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.08); backdrop-filter: blur(16px) saturate(185%) brightness(1.08); overflow: hidden; isolation: isolate; transform-origin: center; } .og-glass-card--secondary { min-height: 245px; border-radius: 22px; } .og-glass-card__media { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; margin: 0 !important; } .og-glass-card__media img { width: 100%; height: 100%; object-fit: cover; opacity: .48; transform: scale(1.035); transition: opacity .65s ease, transform 1s cubic-bezier(.22, .61, .36, 1); } .og-glass-card::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .70); transition: background-color .65s ease; pointer-events: none; } .og-glass-card__content { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; min-height: inherit; box-sizing: border-box; padding: 32px; } .og-glass-card h3 { margin: 0 0 14px; color: var(--og-pink) !important; font-size: clamp(32px, 3.2vw, 46px); line-height: 1.08; } .og-glass-card p { margin: 0; color: var(--og-white); font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; } .og-glass-card--secondary h3 { color: var(--og-white) !important; font-size: clamp(26px, 2.5vw, 34px); font-weight: 700 !important; } .og-glass-card--secondary p { font-size: clamp(15px, 1.1vw, 17px); color: rgba(255, 255, 255, .86); } @media (hover: hover) and (pointer: fine) { .og-glass-card:hover { animation: ogCardElastic .78s cubic-bezier(.22, .82, .32, 1.04); border-color: rgba(255, 6, 95, .68) !important; } .og-glass-card:hover::after { background-color: rgba(0, 0, 0, .36); } .og-glass-card:hover .og-glass-card__media img { opacity: .82; transform: scale(1.075); } } @keyframes ogCardElastic { 0% { transform: scale(1); } 34% { transform: scale(.982, .97); } 58% { transform: scale(1.009, 1.014); } 76% { transform: scale(.996, .993); } 100% { transform: scale(1); } } /* 6. Footer */ #Footer { box-sizing: border-box; width: calc(100% - 32px) !important; margin: 16px !important; border: 1px solid var(--og-glass-border) !important; border-radius: 26px !important; background: var(--og-glass) !important; box-shadow: 0 18px 48px rgba(0, 0, 0, .28), inset 1px 0 0 rgba(255, 255, 255, .12), inset 0 -1px 0 rgba(255, 255, 255, .06) !important; -webkit-backdrop-filter: blur(16px) saturate(185%) brightness(1.08); backdrop-filter: blur(16px) saturate(185%) brightness(1.08); overflow: hidden; } #Footer::before { display: none !important; content: none !important; } #Footer .widgets_wrapper, #Footer .footer_copy, #Footer .footer_copy .container, #Footer .container, #Footer .column { background: transparent !important; background-image: none !important; } #Footer .footer_copy { border-top-color: rgba(255, 255, 255, .12) !important; } #Footer .footer_copy .container { box-sizing: border-box; padding-left: 21px !important; padding-right: 21px !important; } #Footer a { color: var(--og-pink) !important; } #Footer a:hover, #Footer a:focus-visible { color: var(--og-green) !important; } #back_to_top, #back_to_top i { color: var(--og-white) !important; } #back_to_top:hover, #back_to_top:hover i, #back_to_top:focus-visible, #back_to_top:focus-visible i { color: var(--og-black) !important; } .shop_table th, .shop_table td, table th, table td { border-color: rgba(255, 255, 255, .12) !important; } /* 7. Responsive */ @media (max-width: 959px) { #Top_bar:not(.is-sticky), #Top_bar.is-sticky { left: 8px !important; width: calc(100% - 16px) !important; border-radius: 20px !important; } #Top_bar.is-sticky { top: 6px !important; border-radius: 18px !important; } } @media (max-width: 767px) { .og-video-hero { min-height: 560px; } .og-video-hero__media video { transform: translate(-50%, -50%) scale(1.08); transition: none; } .og-home-content { padding: 68px 24px 54px; } .og-home-content__intro { margin-bottom: 50px; text-align: left; } .og-home-content__columns { grid-template-columns: 1fr; gap: 44px; } .og-home-content p { line-height: 1.6; } .og-card-section { padding: 28px 20px 88px; } .og-card-grid--primary, .og-card-grid--secondary { grid-template-columns: 1fr; } .og-card-grid--secondary { max-width: none; margin-top: 22px; } .og-glass-card, .og-glass-card--secondary { min-height: 250px; border-radius: 20px; } .og-glass-card__content { padding: 26px; } #Footer { width: calc(100% - 16px) !important; margin: 8px !important; border-radius: 20px !important; } #Footer .footer_copy .container { padding-left: 16px !important; padding-right: 16px !important; } } /* 8. Barrierefreiheit */ @media (prefers-reduced-motion: reduce) { #Top_bar:not(.is-sticky), #Top_bar.is-sticky, #Top_bar #logo::after, .og-video-hero__media, .og-glass-card { animation: none !important; } .og-video-hero__media { opacity: 1; } .og-glass-card__media img, .og-glass-card::after { transition: none !important; } } /* 5a. Kartenraster und gemeinsamer Parallax-Hintergrund */ .og-card-section { position: relative; isolation: isolate; overflow: hidden; } .og-card-section::before { content: ""; position: absolute; inset: -90px 0; z-index: 0; background: url("https://golbasi.de/wp-content/uploads/2026/09/generated-image-4-1024x585.png") center center / cover no-repeat; transform: translate3d(0, var(--og-card-parallax-y, 0), 0) scale(1.12); will-change: transform; } .og-card-section::after { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(0, 0, 0, .58); pointer-events: none; } .og-card-section > .wp-block-group__inner-container, .og-card-section__inner, .og-card-section__inner > .wp-block-group__inner-container { position: relative; z-index: 2; width: min(100%, 1160px) !important; max-width: 1160px !important; margin-inline: auto !important; } .og-card-grid { display: block !important; width: 100% !important; max-width: none !important; } .og-card-grid > .wp-block-group__inner-container { display: grid !important; width: 100% !important; max-width: none !important; gap: 28px !important; } .og-card-grid--primary > .wp-block-group__inner-container { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .og-card-grid--secondary > .wp-block-group__inner-container { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .og-card-grid > .wp-block-group__inner-container > .og-glass-card { width: 100% !important; max-width: none !important; margin: 0 !important; } .og-glass-card { background: var(--og-glass) !important; } .og-glass-card::after { display: none !important; content: none !important; } .og-glass-card > .wp-block-group__inner-container { min-height: inherit; height: 100%; } .og-glass-card__content { display: flex !important; align-items: center; justify-content: center; min-height: inherit; padding: 54px 32px 30px; text-align: center; transform: translateY(12px); } .og-glass-card__content > .wp-block-group__inner-container { width: 100%; max-width: none !important; } .og-glass-card h3, .og-glass-card p { text-align: center; } @media (hover: hover) and (pointer: fine) { .og-glass-card:hover { background: rgba(255, 255, 255, .055) !important; } } @media (max-width: 959px) { .og-card-grid > .wp-block-group__inner-container { gap: 26px !important; } } @media (max-width: 767px) { .og-card-grid--primary > .wp-block-group__inner-container, .og-card-grid--secondary > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr) !important; gap: 24px !important; } .og-card-grid--secondary { margin-top: 24px !important; } .og-glass-card__content { padding: 46px 26px 28px; transform: translateY(8px); } .og-card-section::before { inset: -60px -30px; transform: translate3d(0, 0, 0) scale(1.06); } } @media (prefers-reduced-motion: reduce) { .og-card-section::before { transform: scale(1.08); } } /* Harmonische vertikale Ausrichtung der Karteninhalte */ .og-glass-card__content { align-items: center !important; justify-content: center !important; text-align: center; } .og-glass-card__content > .wp-block-group__inner-container { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: 100%; } .og-glass-card h3, .og-glass-card p { width: 100%; margin: 0 !important; text-align: center; } .og-glass-card h3, .og-glass-card--secondary h3 { color: var(--og-green) !important; line-height: 1.1; } .og-glass-card p { line-height: 1.5; } /* 9. Einheitliches 25-px-Abstandssystem und responsive Textspalten */ :root { --og-space-1: 25px; --og-space-2: 50px; --og-space-3: 75px; --og-space-4: 100px; } .og-home-content { padding: var(--og-space-3) var(--og-space-1) var(--og-space-2); } .og-home-content__intro { margin-bottom: var(--og-space-2); } .og-home-content h2 { margin-bottom: var(--og-space-1); } .og-home-content__columns { display: block !important; width: 100% !important; max-width: none !important; } .og-home-content__columns > .wp-block-group__inner-container { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: var(--og-space-2) !important; width: 100% !important; max-width: none !important; } .og-home-content__columns > .wp-block-group__inner-container > .og-home-content__block { width: 100% !important; max-width: none !important; margin: 0 !important; } .og-card-section { padding: var(--og-space-1) var(--og-space-1) var(--og-space-4); } .og-card-grid > .wp-block-group__inner-container { gap: var(--og-space-1) !important; } .og-card-grid--secondary { margin-top: var(--og-space-1); } .og-glass-card__content { padding: var(--og-space-2) var(--og-space-1) var(--og-space-1); } @media (max-width: 767px) { .og-home-content { padding: var(--og-space-2) var(--og-space-1); } .og-home-content__intro { margin-bottom: var(--og-space-2); } .og-home-content__columns > .wp-block-group__inner-container { grid-template-columns: minmax(0, 1fr) !important; gap: var(--og-space-2) !important; } .og-card-section { padding: var(--og-space-1) var(--og-space-1) var(--og-space-3); } .og-card-grid--primary > .wp-block-group__inner-container, .og-card-grid--secondary > .wp-block-group__inner-container { gap: var(--og-space-1) !important; } .og-card-grid--secondary { margin-top: var(--og-space-1) !important; } .og-glass-card__content { padding: var(--og-space-2) var(--og-space-1) var(--og-space-1); } } /* 10. Transparente, gleichmäßig eingebettete Karten */ .og-card-section { padding-top: var(--og-space-3); padding-bottom: var(--og-space-3); } .og-card-section::before { background-position: center center; } .og-glass-card { border-color: rgba(255, 255, 255, .16) !important; background: rgba(255, 255, 255, .012) !important; box-shadow: 0 14px 36px rgba(0, 0, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .24), inset 1px 0 0 rgba(255, 255, 255, .07), inset 0 -1px 0 rgba(255, 255, 255, .035); } .og-glass-card--secondary { min-height: 125px !important; } .og-glass-card--secondary > .wp-block-group__inner-container, .og-glass-card--secondary .og-glass-card__content { min-height: 125px !important; } .og-glass-card--secondary .og-glass-card__content { padding: 15px 20px !important; transform: none; } .og-glass-card--secondary .og-glass-card__content > .wp-block-group__inner-container { gap: 10px; } .og-glass-card--secondary h3 { font-size: clamp(24px, 2.2vw, 30px); } .og-glass-card--secondary p { font-size: clamp(14px, 1vw, 16px); line-height: 1.4; } @media (hover: hover) and (pointer: fine) { .og-glass-card:hover { background: rgba(255, 255, 255, .032) !important; } } @media (max-width: 767px) { .og-card-section { padding-top: var(--og-space-2); padding-bottom: var(--og-space-2); } .og-glass-card--secondary, .og-glass-card--secondary > .wp-block-group__inner-container, .og-glass-card--secondary .og-glass-card__content { min-height: 125px !important; } }


/* Nur der Seiteninhalt wird viewportbreit; Header und Sticky-Menü bleiben unverändert. */
.home #Content {
  position: relative;
  left: 50%;
  width: 100vw !important;
  max-width: none !important;
  margin: 0 !important;
  transform: translateX(-50%);
}

/* 25-px-Raster: Hero → Text von 75 auf 50 px reduziert. */
.og-home-content {
  padding-top: var(--og-space-2) !important;
}

/* Gemeinsames Maßsystem und eine globale Inhaltsbreite. */
:root {
  --og-space-1: 24px;
  --og-space-2: 48px;
  --og-space-3: 72px;
  --og-space-4: 100px;
  --og-site-gutter: 32px;
  --og-site-max-width: 1200px;
}
.home #Top_bar,
.home .og-home-content__inner,
.home .og-card-section__inner,
.home #Footer {
  box-sizing: border-box !important;
  width: min(calc(100vw - (2 * var(--og-site-gutter))), var(--og-site-max-width)) !important;
  max-width: var(--og-site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home #Header #Top_bar,
body.home #Footer {
  box-sizing: border-box !important;
  width: min(calc(100vw - (2 * var(--og-site-gutter))), var(--og-site-max-width)) !important;
  min-width: 0 !important;
  max-width: var(--og-site-max-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.home #Header #Top_bar {
  left: 0 !important;
  right: 0 !important;
}
body.home #Footer {
  position: relative;
  left: 50% !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: translateX(-50%);
}
.home .og-home-content,
.home .og-card-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.home .og-home-content__inner > .wp-block-group__inner-container,
.home .og-card-section__inner > .wp-block-group__inner-container,
.home .og-card-grid,
.home .og-card-grid > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;
}
@media (max-width: 767px) {
  :root {
    --og-site-gutter: 20px;
  }
}

/* Der Bereich selbst bleibt bildfrei; das Motiv lebt ausschließlich in jeder Karte. */
.og-card-section {
  position: relative;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
}
.og-card-section::before,
.og-card-section::after {
  display: none !important;
}
.og-card-section > .wp-block-group__inner-container,
.og-card-section__inner,
.og-card-section__inner > .wp-block-group__inner-container {
  width: min(100%, 1160px) !important;
  max-width: 1160px !important;
  margin-inline: auto !important;
}
.og-card-grid,
.og-card-grid > .wp-block-group__inner-container {
  width: 100% !important;
  max-width: none !important;
}
.og-card-grid--secondary {
  max-width: none !important;
}

/* Jede Karte besitzt ihre eigene, unabhängig reagierende Bildebene. */
.og-glass-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  background: #0b0b0b !important;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22) !important;
  transform: none;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.og-glass-card::before {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("https://golbasi.de/wp-content/uploads/2026/09/generated-image-4.png") center center / cover no-repeat;
  opacity: .64;
  filter: grayscale(1) brightness(.52);
  transition: filter .8s ease, opacity .8s ease;
  pointer-events: none;
}
.og-card-grid--primary > .wp-block-group__inner-container > .og-glass-card:nth-child(1)::before {
  background-image: url("https://golbasi.de/wp-content/uploads/2026/09/OG_Texte-680x460.png");
}
.og-card-grid--primary > .wp-block-group__inner-container > .og-glass-card:nth-child(2)::before,
.og-card--music::before {
  background-image: url("https://golbasi.de/wp-content/uploads/2026/09/OG_Musikmachen-1.png") !important;
  background-position: center center !important;
  background-size: cover !important;
}
.og-card--music::before{display:none!important}
.og-card--music .og-glass-card__media{position:absolute!important;inset:0;z-index:0;width:100%;height:100%;margin:0!important}
.og-card--music .og-glass-card__media img{display:block;width:100%;height:100%;object-fit:cover;opacity:.64;filter:grayscale(1) brightness(.52);transition:filter .8s ease,opacity .8s ease}
.og-card--music::after{z-index:1}
.og-card--music .og-glass-card__content{z-index:2}
.og-card--music:hover .og-glass-card__media img{opacity:.90;filter:grayscale(0) brightness(.86)}
.og-card-grid--primary > .wp-block-group__inner-container > .og-glass-card:nth-child(3)::before {
  background-image: url("https://golbasi.de/wp-content/uploads/2026/09/OG_Kunst-680x460.png");
}
.og-card-grid--secondary > .wp-block-group__inner-container > .og-glass-card::before {
  background-image: url("https://golbasi.de/wp-content/uploads/2026/09/OG_Basis-1024x585.png");
}

.og-glass-card::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .38);
  transition: background-color .8s ease;
  pointer-events: none;
}
.og-glass-card:hover {
  border-color: rgba(255, 255, 255, .34) !important;
  animation: ogCardElastic .72s cubic-bezier(.22, .82, .32, 1.04) !important;
}
.og-glass-card:hover::before {
  opacity: .90;
  filter: grayscale(0) brightness(.86);
}
.og-glass-card:hover::after {
  background: rgba(0, 0, 0, .24);
}
.og-glass-card__content {
  position: relative;
  z-index: 1;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .92);
}

@media (max-width: 767px) {
  .og-home-content {
    padding-top: var(--og-space-1) !important;
  }
  .og-card-section {
    margin-bottom: var(--og-space-1) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .og-card-section::before,
  .og-card-section::after {
    transition: none;
  }
}


.og-home-content{padding-top:50px!important;padding-bottom:var(--og-space-4,100px)!important}
.og-section-spacer{height:var(--og-space-4,100px)}
.og-counter-section{box-sizing:border-box;width:min(calc(100vw - (2 * var(--og-site-gutter,32px))),var(--og-site-max-width,1200px));max-width:var(--og-site-max-width,1200px);margin:0 auto var(--og-space-4,100px);padding:48px 32px;border:1px solid rgba(255,255,255,.18);border-radius:26px;background:#080808}
.og-counter{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%}
.og-counter__unit{min-width:0;padding:0 24px;text-align:center;border-right:1px solid rgba(255,255,255,.16)}
.og-counter__unit:last-child{border-right:0}
.og-counter__unit h3{margin:0 0 18px;color:#fff!important;font-size:clamp(16px,1.4vw,22px);font-weight:600;line-height:1.2}
.og-counter__unit strong{display:block;color:var(--og-pink,#ff065f);font-size:clamp(46px,6vw,84px);font-weight:700;font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.04em;line-height:1}
@media(max-width:767px){.og-counter-section{width:calc(100vw - 40px);padding:32px 20px;border-radius:20px}.og-counter{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:32px}.og-counter__unit{padding:0 12px}.og-counter__unit:nth-child(2){border-right:0}.og-counter__unit:nth-child(n+3){padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}.og-counter__unit h3{margin-bottom:12px}}
.home #Top_bar:not(.is-sticky),
.home #Top_bar.is-sticky{
  background:var(--og-glass)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(20px) saturate(185%) brightness(1.08)!important;
  backdrop-filter:blur(20px) saturate(185%) brightness(1.08)!important;
}
.home #Top_bar:not(.is-sticky)::after,
.home #Top_bar.is-sticky::after{display:none!important}
.home #Top_bar>.container{position:relative;z-index:2}
.home #Top_bar #menu > ul > li > ul.sub-menu{
  position:absolute;
  box-sizing:border-box!important;
  padding:10px!important;
  border:1px solid var(--og-glass-border)!important;
  border-radius:18px!important;
  background:var(--og-glass)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(16px) saturate(185%) brightness(1.08)!important;
  backdrop-filter:blur(16px) saturate(185%) brightness(1.08)!important;
  overflow:hidden!important;
  isolation:isolate;
}
.home #Top_bar #menu > ul > li > ul.sub-menu::before{
  content:"";
  position:absolute;
  inset:1px;
  z-index:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.085) 0%,rgba(255,255,255,.025) 32%,transparent 72%);
  pointer-events:none;
}
.home #Top_bar #menu > ul > li > ul.sub-menu > li{
  position:relative;
  z-index:1;
  border:0!important;
  background:transparent!important;
}
.home #Top_bar #menu > ul > li > ul.sub-menu > li > a{
  border:0!important;
  border-radius:10px!important;
  background:transparent!important;
  color:var(--og-white)!important;
  text-shadow:none!important;
  transition:color 180ms ease!important;
}
.home #Top_bar #menu > ul > li > ul.sub-menu > li > a:hover{
  background:transparent!important;
  color:var(--og-pink)!important;
}


.og-portal-submenu{
  position:fixed!important;
  z-index:99999!important;
  display:block!important;
  box-sizing:border-box!important;
  min-width:240px;
  padding:10px!important;
  border:1px solid var(--og-glass-border)!important;
  border-radius:18px!important;
  background:var(--og-glass)!important;
  box-shadow:0 16px 44px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.42),inset 1px 0 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(255,255,255,.06)!important;
  -webkit-backdrop-filter:blur(16px) saturate(185%) brightness(1.08)!important;
  backdrop-filter:blur(16px) saturate(185%) brightness(1.08)!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity 180ms ease,transform 180ms ease,visibility 180ms ease;
  overflow:hidden!important;
}
.og-portal-submenu.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .og-portal-submenu{background:rgba(48,48,52,.94)!important}
}
.og-portal-submenu>li{border:0!important;background:transparent!important}
.og-portal-submenu>li>a{display:block!important;padding:12px 18px!important;border:0!important;border-radius:10px!important;background:transparent!important;color:var(--og-white)!important;font-size:17px!important;font-weight:800!important;line-height:1.35!important;text-decoration:none!important}
.og-portal-submenu>li>a:hover,.og-portal-submenu>li.current-menu-item>a{color:var(--og-pink)!important}


.og-magazine-section{box-sizing:border-box;width:min(calc(100vw - (2 * var(--og-site-gutter,32px))),var(--og-site-max-width,1200px));max-width:var(--og-site-max-width,1200px);margin:0 auto}
.og-magazine-section>.wp-block-group__inner-container{width:100%!important;max-width:none!important}
.og-magazine-filter{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px;box-sizing:border-box;width:100%;max-width:none;margin:0 auto 32px;padding:8px;border:1px solid var(--og-glass-border,rgba(255,255,255,.2));border-radius:999px;background:var(--og-glass,rgba(255,255,255,.08));box-shadow:0 16px 44px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.28);-webkit-backdrop-filter:blur(16px) saturate(185%) brightness(1.08);backdrop-filter:blur(16px) saturate(185%) brightness(1.08)}
.og-magazine-filter button{appearance:none!important;margin:0!important;padding:11px 20px!important;border:0!important;border-radius:999px!important;background:transparent!important;box-shadow:none!important;color:#929292!important;font:inherit;font-size:15px!important;font-weight:750!important;line-height:1!important;cursor:pointer;transition:color .25s ease,transform .25s ease}
.og-magazine-filter button:hover{background:transparent!important;color:var(--og-pink,#ff065f)!important}
.og-magazine-filter button.is-active,.og-magazine-filter button.is-active:hover{background:transparent!important;color:#fff!important}
.og-magazine-filter button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.og-magazine-grid{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px!important;margin:0!important;padding:0!important;list-style:none!important;transition:opacity .5s ease,transform .5s ease}
.og-magazine-grid.is-leaving{opacity:0;pointer-events:none}
.og-magazine-grid>li{position:relative;display:flex;flex-direction:column;min-width:0;height:440px;margin:0!important;padding:0 22px 24px!important;border:1px solid rgba(255,255,255,.16);border-radius:22px;background:#0b0b0b;overflow:hidden;transition:opacity .45s ease,transform .45s ease,border-color .35s ease}
.og-magazine-grid .wp-block-latest-posts__featured-image{order:-1;width:calc(100% + 44px);margin:0 -22px 20px!important;overflow:hidden}
.og-magazine-grid .wp-block-latest-posts__featured-image a{display:block}
.og-magazine-grid .wp-block-latest-posts__featured-image img{display:block;width:100%!important;height:170px!important;max-width:none!important;object-fit:cover;filter:saturate(.82) brightness(.78);transition:filter .55s ease,transform .7s cubic-bezier(.22,.61,.36,1)}
.og-magazine-grid .wp-block-latest-posts__post-title{display:-webkit-box;min-height:60px;max-height:60px;margin:0 0 9px;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;color:#fff!important;font-size:clamp(20px,1.8vw,27px);font-weight:800;line-height:1.12;text-decoration:none}
.og-magazine-grid .wp-block-latest-posts__post-date{margin:0 0 9px;color:var(--og-blue,#3366cc);font-size:13px;font-weight:700}
.og-magazine-grid .wp-block-latest-posts__post-excerpt{display:-webkit-box;height:65.25px;max-height:65.25px;margin:0;color:rgba(255,255,255,.76);font-size:15px;line-height:1.45;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.og-magazine-grid .og-read-more{display:inline-flex;align-items:center;justify-content:center;align-self:flex-start;margin-top:25px;padding:8px 14px;border-radius:999px;background:var(--og-pink,#ff065f);color:#fff!important;font-size:13px;font-weight:800;line-height:1;text-decoration:none;box-shadow:0 8px 22px rgba(255,6,95,.22);transition:background-color .25s ease,transform .25s ease,box-shadow .25s ease}
.og-magazine-empty{grid-column:1/-1!important;height:auto!important;min-height:160px;align-items:center;justify-content:center;color:rgba(255,255,255,.72)}
.og-magazine-all{display:flex;justify-content:center;margin-top:25px}.og-magazine-all a{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:999px;background:var(--og-pink,#ff065f);color:#fff!important;font-size:14px;font-weight:800;line-height:1;text-decoration:none;box-shadow:0 8px 22px rgba(255,6,95,.22);transition:background-color .25s ease,color .25s ease,transform .25s ease,box-shadow .25s ease}.og-magazine-all a:hover{background:#fff;color:var(--og-pink,#ff065f)!important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,6,95,.32)}
@media(hover:hover) and (pointer:fine){.og-magazine-filter button:hover{transform:translateY(-1px)}.og-magazine-grid>li:hover{animation:ogCardElastic .72s cubic-bezier(.22,.82,.32,1.04)}.og-magazine-grid .og-read-more:hover{background:#fff;color:var(--og-pink,#ff065f)!important;transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,6,95,.32)}}
@media(max-width:959px){.og-magazine-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:767px){.og-magazine-section{width:calc(100vw - 40px)}.og-magazine-filter{justify-content:flex-start;width:100%;box-sizing:border-box;margin-bottom:24px;padding:7px;border-radius:20px;overflow-x:auto;flex-wrap:nowrap}.og-magazine-filter button{flex:0 0 auto;padding:10px 16px}.og-magazine-grid{grid-template-columns:1fr}.og-magazine-grid>li{height:440px}.og-magazine-grid .wp-block-latest-posts__featured-image img{height:190px!important}}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.og-magazine-filter{background:rgba(42,42,46,.94)}}
@media(prefers-reduced-motion:reduce){.og-magazine-grid,.og-magazine-grid>li,.og-magazine-grid img,.og-magazine-filter button{transition:none!important}}



/* ========================================================================
   Design tokens
   Zentral gepflegte Werte für die Navigation. Wiederkehrende Komponenten
   sollen diese Variablen verwenden statt eigene Einzelwerte zu definieren.
   ======================================================================== */
:root {
  --og-white: #fff;
  --og-pink: #f78da7;
  --og-glass: rgba(22, 22, 24, .56);
  --og-glass-fallback: rgba(34, 34, 38, .94);
  --og-glass-border: rgba(255, 255, 255, .20);
  --og-glass-highlight: rgba(255, 255, 255, .085);
  --og-glass-radius: 24px;
  --og-glass-blur: 16px;
  --og-nav-height: 64px;
  --og-nav-mobile-gutter: 16px;
  --og-nav-mobile-top: 12px;
  --og-menu-gap: 8px;
}

/* ========================================================================
   Hauptnavigation / Liquid Glass
   Inhalte bleiben über WordPress-Menüs und die Betheme-Logoeinstellung
   bearbeitbar; CSS steuert ausschließlich Darstellung und Responsivität.
   ======================================================================== */
#Top_bar {
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  isolation: isolate;
}

#Top_bar::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  background: var(--og-glass);
  -webkit-backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  pointer-events: none;
}

#Top_bar::before {
  z-index: 1;
}

#Top_bar > .container {
  position: relative;
  z-index: 2;
}

/* ========================================================================
   Desktop-Dropdown
   ======================================================================== */
#Top_bar .menu > li > ul.sub-menu {
  position: absolute;
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--og-glass-border);
  border-radius: 18px;
  background: var(--og-glass);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, .24),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 1px 0 0 rgba(255, 255, 255, .12),
    inset 0 -1px 0 rgba(255, 255, 255, .06);
  -webkit-backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  backdrop-filter: blur(var(--og-glass-blur)) saturate(185%) brightness(1.08);
  overflow: hidden;
  isolation: isolate;
}

#Top_bar .menu > li > ul.sub-menu::before {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, var(--og-glass-highlight) 0%, rgba(255, 255, 255, .025) 32%, transparent 72%);
  pointer-events: none;
}

#Top_bar .menu > li > ul.sub-menu > li {
  position: relative;
  z-index: 1;
  border: 0;
  background: transparent;
}

#Top_bar .menu > li > ul.sub-menu > li > a {
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--og-white);
  text-shadow: none;
  transition: color 180ms ease;
}

#Top_bar .menu > li > ul.sub-menu > li > a:hover,
#Top_bar .menu > li > ul.sub-menu > li.current-menu-item > a {
  background: transparent;
  color: var(--og-pink);
}

/* ========================================================================
   Mobile Navigation
   Kompakte Leiste mit sichtbarem Logo links und Menüschalter rechts.
   ======================================================================== */
@media only screen and (max-width: 959px) {
  #Top_bar {
    width: calc(100% - (2 * var(--og-nav-mobile-gutter))) !important;
    min-height: var(--og-nav-height) !important;
    margin: var(--og-nav-mobile-top) var(--og-nav-mobile-gutter) 0 !important;
    border-radius: var(--og-glass-radius) !important;
  }

  #Top_bar > .container,
  #Top_bar .column.one,
  #Top_bar .top_bar_left {
    width: 100% !important;
    max-width: none !important;
    min-height: var(--og-nav-height) !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  #Top_bar .top_bar_left {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px;
    padding: 0 10px 0 16px !important;
  }

  #Top_bar .logo {
    display: block !important;
    position: static !important;
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    flex: 0 1 auto;
  }

  #Top_bar #logo {
    display: flex !important;
    align-items: center;
    height: 48px !important;
    line-height: 1;
    padding: 0 !important;
  }

  #Top_bar #logo img.logo-mobile,
  #Top_bar #logo img.logo-mobile-sticky {
    display: block !important;
    width: auto !important;
    max-width: min(48vw, 180px);
    max-height: 40px !important;
  }

  #Top_bar .menu_wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    position: static !important;
    float: none !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 48px !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    z-index: 9999 !important;
  }

  #Top_bar a.responsive-menu-toggle {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    min-width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .24) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .10) !important;
    color: var(--og-white) !important;
    line-height: 1 !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 10000 !important;
  }

  /* Eigenes Hamburger-Symbol: unabhängig vom Icon-Font immer klar sichtbar. */
  #Top_bar a.responsive-menu-toggle i {
    display: none !important;
  }

  #Top_bar a.responsive-menu-toggle::before {
    content: "";
    display: block;
    width: 24px;
    height: 2px;
    border-radius: 2px;
    background: var(--og-white);
    box-shadow: 0 -7px 0 var(--og-white), 0 7px 0 var(--og-white);
  }

  #Top_bar #menu {
    top: calc(100% + var(--og-menu-gap)) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border: 1px solid var(--og-glass-border);
    border-radius: 18px !important;
    background: var(--og-glass-fallback);
    -webkit-backdrop-filter: blur(var(--og-glass-blur)) saturate(185%);
    backdrop-filter: blur(var(--og-glass-blur)) saturate(185%);
    overflow: hidden !important;
  }

  #Top_bar #menu ul,
  #Top_bar #menu li,
  #Top_bar #menu li a {
    background: transparent;
  }

  #Top_bar #menu li a {
    color: var(--og-white);
  }

  #Top_bar #menu li.current-menu-item > a,
  #Top_bar #menu li a:hover {
    color: var(--og-pink);
  }

  /* „Arbeiten" ist mobil beim Öffnen des Hauptmenüs immer aufgeklappt. */
  #Top_bar #menu .menu-item-has-children > ul.sub-menu,
  #Top_bar #menu li.submenu > ul.sub-menu {
    display: block !important;
    position: static !important;
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 0 10px 18px !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    overflow: visible !important;
  }

  #Top_bar #menu .menu-item-has-children > ul.sub-menu::before,
  #Top_bar #menu li.submenu > ul.sub-menu::before {
    display: none !important;
  }

  #Top_bar #menu .menu-item-has-children > .menu-toggle,
  #Top_bar #menu li.submenu > .menu-toggle {
    display: none !important;
  }

  #Top_bar #menu .menu-item-has-children > ul.sub-menu > li > a,
  #Top_bar #menu li.submenu > ul.sub-menu > li > a {
    padding: 0 20px 0 34px !important;
  }
}

/* ========================================================================
   Fallback für Browser ohne Backdrop-Filter
   ======================================================================== */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #Top_bar::after,
  #Top_bar .menu > li > ul.sub-menu,
  #Top_bar #menu {
    background: var(--og-glass-fallback);
  }
}