/* ════════════════════════════════════════════════════════════════════════ ONO OS · Molecule · ono-global-footer Cross-Page Footer für die NiceUnits-Familie + alle ONO-OS Apps. - Auto-inject vor via .js [data-ono-global-footer-auto] - Brand-Pills (NiceAtoms/NiceEfforts/NiceBrandings/NiceOrigins/NiceColors) - Legal-Links (Impressum, Datenschutz, AGB, Lizenz, Kontakt) - Status-line (build-version, license, copyright) - Tokens: phi-tokens + ono-theme · Haffer Typo - Dark/Light theme aware via [data-theme] / prefers-color-scheme - Opt-out per page: ════════════════════════════════════════════════════════════════════════ */ @font-face { font-family: 'Haffer'; src: url('/fonts/Haffer-382.woff2') format('woff2'); font-weight: 382; font-display: swap; } @font-face { font-family: 'Haffer'; src: url('/fonts/Haffer-618.woff2') format('woff2'); font-weight: 618; font-display: swap; } .ono-global-footer { --gf-bg: var(--bg-tile, var(--muted, #F0EDE5)); --gf-fg: var(--fg, var(--foreground, #1A1A1A)); --gf-fg-muted: color-mix(in srgb, var(--fg, #1A1A1A) 60%, transparent); --gf-line: var(--line, var(--border, rgba(0,0,0,0.08))); --gf-accent: var(--orange, #FD9501); width: 100%; background: var(--gf-bg); color: var(--gf-fg); border-top: 1px solid var(--gf-line); font-family: 'Haffer', -apple-system, BlinkMacSystemFont, 'Inter', system-ui, sans-serif; font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1, 'ss01' 1, 'ss03' 1, 'ss04' 1, 'ss05' 1, 'tnum' 1, 'zero' 1; font-size: var(--type-xxs, 13px); text-transform: lowercase; padding: var(--space-2xl, 76px) var(--space-l, 29px) var(--space-l, 29px); } .ono-global-footer__inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-xl, 47px); } @media (max-width: 760px) { .ono-global-footer__inner { grid-template-columns: 1fr 1fr; gap: var(--space-l, 29px); } .ono-global-footer__brand-col { grid-column: 1 / -1; } } .ono-global-footer__brand-col { display: flex; flex-direction: column; gap: var(--space-s, 13px); } .ono-global-footer__brand { display: flex; align-items: center; gap: 10px; font-weight: 618; font-size: var(--type-s, 20px); text-transform: none; text-decoration: none; color: var(--gf-fg); } /* Heilige Regel: Schrift NIEMALS einfärben auf hover. */ .ono-global-footer__brand:hover, .ono-global-footer__brand:focus, .ono-global-footer__brand:visited { color: var(--gf-fg); } .ono-global-footer__brand img { width: 28px; height: 28px; } .ono-global-footer__tagline { color: var(--gf-fg); line-height: 1.55; max-width: 320px; } .ono-global-footer__col h4 { font-size: 11px; font-weight: 618; letter-spacing: 0.06em; text-transform: lowercase; color: var(--gf-accent); margin: 0 0 var(--space-s, 13px); } .ono-global-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .ono-global-footer__col a { color: var(--gf-fg); text-decoration: none; transition: text-decoration-color 0.15s; display: inline-block; } /* Heilige Regel: Schrift NIEMALS einfärben auf hover. Stattdessen underline. */ .ono-global-footer__col a:hover { text-decoration: underline; text-decoration-color: var(--gf-accent); text-underline-offset: 4px; } .ono-global-footer__col a.is-brand { text-transform: none; } /* Socials + Licenses Row (zwischen main grid und bottom-bar) */ .ono-global-footer__socials { max-width: 1180px; margin: var(--space-xl, 47px) auto 0; padding-top: var(--space-l, 29px); border-top: 1px solid var(--gf-line); display: flex; gap: var(--space-s, 13px); justify-content: flex-start; flex-wrap: wrap; } .ono-global-footer__social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gf-line); color: var(--gf-fg); background: transparent; text-decoration: none; transition: background 0.15s, border-color 0.15s; } .ono-global-footer__social:hover, .ono-global-footer__social:focus { background: color-mix(in srgb, var(--gf-fg) 8%, transparent); border-color: var(--gf-fg); /* Heilige Regel: Schrift/Icon-Farbe NIEMALS auf hover wechseln */ color: var(--gf-fg); } .ono-global-footer__social svg { width: 20px; height: 20px; } /* Bottom-Bar */ .ono-global-footer__bottom { max-width: 1180px; margin: var(--space-xl, 47px) auto 0; padding-top: var(--space-l, 29px); border-top: 1px solid var(--gf-line); display: flex; flex-wrap: wrap; gap: var(--space-m, 18px); justify-content: space-between; align-items: center; font-size: 11px; color: var(--gf-fg); } .ono-global-footer__bottom .legal-tiny { display: flex; gap: var(--space-m, 18px); flex-wrap: wrap; } .ono-global-footer__bottom a { color: var(--gf-fg); text-decoration: none; } .ono-global-footer__bottom a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Dark theme */ [data-theme="dark"] .ono-global-footer { --gf-bg: #18181B; --gf-fg: #FAFAF6; --gf-fg-muted: #FAFAF6; --gf-line: rgba(255,255,255,0.08); } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .ono-global-footer { --gf-bg: #18181B; --gf-fg: #FAFAF6; --gf-fg-muted: #FAFAF6; --gf-line: rgba(255,255,255,0.08); } }