/* ══════════════════════════════════════════ KANO CONSULTING — custom.css Contao + Bootstrap 5 Fonts im : Syne 500/600/700/800 + Roboto Condensed 300/400/600/700 ══════════════════════════════════════════ */ /* ────────────────────────────────────────── VARIABLEN ────────────────────────────────────────── */ :root { --color-text: #192b39; --color-bg: #f8f8ef; --color-black: #111111; --color-dark: #2d3028; --color-accent: #c8d96b; --color-white: #ffffff; --color-muted: #6c757d; --color-border: #dee2e6; --bs-primary: #c8d96b; --bs-primary-rgb: 200, 217, 107; --bs-body-color: #192b39; --bs-body-bg: #f8f8ef; --bs-link-color: #192b39; --bs-link-hover-color: #192b39; --bs-body-font-family: 'Syne', sans-serif; --font-syne: 'Syne', sans-serif; --font-roboto: 'Roboto Condensed', sans-serif; --fs-xs: 0.75rem; --fs-sm: 0.875rem; --fs-base: 1rem; --fs-md: 1.125rem; --fs-lg: 1.375rem; --fs-xl: 1.75rem; --fs-2xl: 2.25rem; --fs-3xl: 3rem; --fs-4xl: 5rem; --sp-xs: 0.5rem; --sp-sm: 1rem; --sp-md: 1.5rem; --sp-lg: 2.5rem; --sp-xl: 4rem; --sp-2xl: 6rem; } /* ────────────────────────────────────────── BASIS ────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-syne); font-weight: 400; font-size: var(--fs-base); color: var(--color-text); background-color: var(--color-bg); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* ────────────────────────────────────────── LAYOUT ────────────────────────────────────────── */ .container { max-width: 1600px; margin-left: auto; margin-right: auto; padding-left: var(--sp-md); padding-right: var(--sp-md); } .container-fluid { width: 100%; padding-left: var(--sp-md); padding-right: var(--sp-md); } @media (min-width: 1600px) { .container, .container-fluid { padding-left: var(--sp-lg); padding-right: var(--sp-lg); } } /* Artikel-Abstände */ .mod_article + .mod_article { margin-top: var(--sp-xl); } .mod_article.hero-section + .mod_article, .mod_article + .mod_article.hero-section { margin-top: 0; } @media (max-width: 767.98px) { .mod_article + .mod_article { margin-top: var(--sp-lg); } } /* ────────────────────────────────────────── TYPOGRAFIE ────────────────────────────────────────── */ h1 { font-family: var(--font-syne); font-weight: 800; font-size: clamp(var(--fs-3xl), 7vw, var(--fs-4xl)); line-height: 1; letter-spacing: -0.02em; color: var(--color-text); margin: 0 0 var(--sp-sm); } h2 { font-family: var(--font-roboto); font-weight: 700; font-size: clamp(var(--fs-2xl), 4vw, var(--fs-3xl)); line-height: 1.1; color: var(--color-text); margin: 0 0 var(--sp-sm); } h3 { font-family: var(--font-roboto); font-weight: 400; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-text); margin: 0 0 var(--sp-sm); } h4 { font-family: var(--font-syne); font-weight: 600; font-size: var(--fs-lg); color: var(--color-text); margin: 0 0 var(--sp-sm); } h5 { font-family: var(--font-syne); font-weight: 600; font-size: var(--fs-md); color: var(--color-text); margin: 0 0 var(--sp-sm); } h6 { font-family: var(--font-syne); font-weight: 600; font-size: var(--fs-base); color: var(--color-text); margin: 0 0 var(--sp-sm); } p { font-family: var(--font-syne); font-weight: 400; font-size: var(--fs-base); line-height: 1.75; color: var(--color-text); margin: 0 0 var(--sp-sm); } p.lead { font-family: var(--font-roboto); font-weight: 600; font-size: 1.5rem; line-height: 2.25rem; color: var(--color-text); } p.body-text { color: var(--color-muted); } small { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-sm { font-size: var(--fs-sm); } .text-md { font-size: var(--fs-md); } .text-lg { font-size: var(--fs-lg); } .text-xl { font-size: var(--fs-xl); } @media (max-width: 767.98px) { p.lead { font-size: 1.25rem; line-height: 1.8rem; } } /* ────────────────────────────────────────── LINKS ────────────────────────────────────────── */ a { color: var(--color-text); text-decoration: none; border-bottom: 1px solid var(--color-text); transition: opacity 0.2s ease; } a:hover { color: var(--color-text); opacity: 0.5; } a.no-underline, .navbar a, .btn { border-bottom: none; } a.link-accent { border-bottom-color: var(--color-accent); border-bottom-width: 2px; } /* ────────────────────────────────────────── BUTTONS ────────────────────────────────────────── */ .btn { font-family: var(--font-roboto); font-weight: 400; font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; padding: 0.6rem 1.6rem; border-radius: 0; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .btn-primary { background-color: var(--color-accent); border-color: var(--color-accent); color: var(--color-dark); } .btn-primary:hover, .btn-primary:focus { background-color: transparent; border-color: var(--color-accent); color: var(--color-text); } .btn-secondary { background-color: var(--color-text); border-color: var(--color-text); color: var(--color-white); } .btn-secondary:hover, .btn-secondary:focus { background-color: transparent; border-color: var(--color-text); color: var(--color-text); } .btn-outline-primary { border-color: var(--color-text); color: var(--color-text); background-color: transparent; } .btn-outline-primary:hover { background-color: var(--color-text); color: var(--color-white); } /* ────────────────────────────────────────── HEADER & NAVBAR — transparent, sticky ────────────────────────────────────────── */ #header { position: sticky; top: 0; z-index: 1030; background: transparent; } .navbar, nav, .bg-body-tertiary, .sticky-top { background: transparent !important; border-bottom: none; padding-top: 0; padding-bottom: 0; min-height: 70px; } .navbar-brand { font-family: var(--font-syne); font-weight: 600; font-size: var(--fs-2xl); color: var(--color-text) !important; letter-spacing: 0.1em; text-transform: uppercase; border-bottom: none; } .navbar-toggler:focus { box-shadow: none; } .offcanvas-body .nav-link { font-family: var(--font-roboto); font-weight: 400; font-size: var(--fs-md); color: var(--color-text); padding: var(--sp-sm) var(--sp-md); border-bottom: 1px solid var(--color-border); text-transform: uppercase; letter-spacing: 0.1em; } .offcanvas-body .nav-link:hover, .offcanvas-body .nav-link.active { opacity: 0.6; } /* ────────────────────────────────────────── HERO SECTION (Bild rechts, Text blend-mode) Artikel-Klasse: container hero-section ────────────────────────────────────────── */ .mod_article.hero-section { position: relative; overflow: hidden; margin-top: 0px !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Row: volle Höhe, kein Gutter */ .mod_article.hero-section .row { min-height: 70vh; margin-left: 0; margin-right: 0; } /* Bild-Spalte: randlos, volle Höhe */ .mod_article.hero-section .hero-image { padding: 0; } .mod_article.hero-section .hero-image figure { margin: 0; height: 100%; } .mod_article.hero-section .hero-image img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Text-Layer: absolut über dem Artikel */ .mod_article.hero-section .hero-text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding-top: 70px; padding-left: var(--sp-md); padding-right: var(--sp-md); pointer-events: none; z-index: 10; } @media (min-width: 1600px) { .mod_article.hero-section .hero-text { padding-left: var(--sp-lg); } } .mod_article.hero-section .hero-text > * { pointer-events: auto; } /* Typografie im Hero */ .mod_article.hero-section .hero-text h1 { font-family: var(--font-syne); font-weight: 600; font-size: clamp(var(--fs-3xl), 9vw, var(--fs-4xl)); line-height: 1; letter-spacing: -0.02em; color: var(--color-black); mix-blend-mode: exclusion; margin-bottom: var(--sp-xs); } .mod_article.hero-section .hero-text p { font-family: var(--font-syne); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-black); mix-blend-mode: exclusion; margin-bottom: var(--sp-xs); } .mod_article.hero-section .hero-text a { color: var(--color-black); mix-blend-mode: exclusion; border-bottom-color: var(--color-black); font-size: var(--fs-sm); letter-spacing: 0.1em; text-transform: uppercase; } .mod_article.hero-section .hero-text a:hover { opacity: 0.5; } /* Mobile */ @media (max-width: 767.98px) { .mod_article.hero-section { margin-top: 0 !important; } .mod_article.hero-section .row { min-height: 60vw; } .mod_article.hero-section .col-md-5 { display: none; } .mod_article.hero-section .hero-text { position: relative; inset: auto; padding: var(--sp-md) var(--sp-sm); } .mod_article.hero-section .hero-text h1, .mod_article.hero-section .hero-text p, .mod_article.hero-section .hero-text a { mix-blend-mode: normal; color: var(--color-text); } .mod_article.hero-section .hero-text a { border-bottom-color: var(--color-text); } } /* ────────────────────────────────────────── HERO FULLSCREEN (Bild füllt alles, Text darunter) Artikel-Klasse: container-fluid hero-fullscreen-article ────────────────────────────────────────── */ .mod_article.hero-fullscreen-article { position: relative; overflow: hidden; margin-top: -70px !important; padding: 0 !important; min-height: 75vh; display: flex; flex-direction: column; justify-content: flex-end; } .mod_article.hero-fullscreen-article::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient( to top, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0) 100% ); pointer-events: none; } .mod_article.hero-fullscreen-article .hero-fullscreen-bg { position: absolute; inset: 0; z-index: 0; } .mod_article.hero-fullscreen-article .hero-fullscreen-bg figure { margin: 0; height: 100%; } .mod_article.hero-fullscreen-article .hero-fullscreen-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mod_article.hero-fullscreen-article .hero-fullscreen-content { position: relative; z-index: 2; padding: var(--sp-lg) var(--sp-md) var(--sp-xl); } .mod_article.hero-fullscreen-article .hero-fullscreen-content h1 { font-family: var(--font-syne); font-weight: 600; font-size: clamp(var(--fs-3xl), 8vw, var(--fs-4xl)); line-height: 1; letter-spacing: -0.02em; color: var(--color-white); margin-bottom: var(--sp-sm); } .mod_article.hero-fullscreen-article .hero-fullscreen-content p { font-family: var(--font-syne); font-weight: 500; font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-white); } .mod_article.hero-fullscreen-article .hero-fullscreen-content a { color: var(--color-white); border-bottom: 2px solid var(--color-accent); text-transform: uppercase; letter-spacing: 0.06em; } @media (max-width: 767.98px) { .mod_article.hero-fullscreen-article { min-height: 80vw; margin-top: 0 !important; } } /* ────────────────────────────────────────── SECTIONS ────────────────────────────────────────── */ section { padding: var(--sp-xl) 0; } section.section-sm { padding: var(--sp-lg) 0; } section.section-lg { padding: var(--sp-2xl) 0; } .section-dark { background-color: var(--color-dark); } .section-dark h1, .section-dark h2, .section-dark h3, .section-dark h4, .section-dark p, .section-dark a { color: var(--color-bg); } .section-dark a { border-bottom-color: var(--color-accent); } .section-accent { background-color: var(--color-accent); } .section-accent h1, .section-accent h2, .section-accent h3, .section-accent p { color: var(--color-dark); } @media (max-width: 767.98px) { section { padding: var(--sp-lg) 0; } } /* ────────────────────────────────────────── FOOTER ────────────────────────────────────────── */ #footer { margin-top: var(--sp-xl); } .site-footer { background-color: var(--color-dark); padding: var(--sp-xl) 0 var(--sp-lg); } .site-footer, .site-footer p, .site-footer a { color: var(--color-bg); } .footer-logo { font-family: var(--font-syne); font-weight: 600; font-size: var(--fs-lg); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-bg); margin-bottom: var(--sp-sm); } .site-footer p { font-family: var(--font-roboto); font-weight: 300; font-size: var(--fs-sm); line-height: 1.8; margin-bottom: var(--sp-xs); } .site-footer a { font-size: var(--fs-sm); border-bottom: 1px solid transparent; } .site-footer a:hover { opacity: 0.6; border-bottom-color: var(--color-accent); } .footer-copy { font-size: var(--fs-xs); color: var(--color-muted); margin-top: var(--sp-sm); } @media (max-width: 767.98px) { .site-footer .col-12 { margin-bottom: var(--sp-md); } } /* ────────────────────────────────────────── NEWS KARTEN ────────────────────────────────────────── */ .news-card { background-color: var(--color-bg); display: flex; flex-direction: column; height: 100%; border-bottom: 2px solid var(--color-accent); } .news-card-img { overflow: hidden; } .news-card-img img { width: 100%; height: 220px; object-fit: cover; display: block; transition: transform 0.4s ease; } .news-card:hover .news-card-img img { transform: scale(1.03); } .news-card-body { padding: var(--sp-md) 0; display: flex; flex-direction: column; flex: 1; } .news-card-title { font-family: var(--font-syne); font-weight: 600; font-size: var(--fs-md); margin-bottom: var(--sp-xs); } .news-card-title a { color: var(--color-text); border-bottom: none; } .news-card-title a:hover { opacity: 0.6; } .news-card-teaser { font-family: var(--font-roboto); font-weight: 300; font-size: var(--fs-sm); color: var(--color-muted); line-height: 1.65; flex: 1; margin-bottom: var(--sp-sm); } .news-card-link { font-family: var(--font-roboto); font-weight: 400; font-size: var(--fs-sm); color: var(--color-text); border-bottom: 2px solid var(--color-accent); padding-bottom: 2px; align-self: flex-start; letter-spacing: 0.1em; text-transform: uppercase; transition: opacity 0.2s ease; } .news-card-link:hover { opacity: 0.5; } @media (max-width: 767.98px) { .news-card-img img { height: 200px; } } /* ────────────────────────────────────────── SCROLL ANIMATION ────────────────────────────────────────── */ .animate-on-scroll { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .animate-on-scroll.is-visible { opacity: 1; transform: translateY(0); } .animate-delay-1 { transition-delay: 0.1s; } .animate-delay-2 { transition-delay: 0.2s; } .animate-delay-3 { transition-delay: 0.3s; } .animate-delay-4 { transition-delay: 0.4s; } @media (prefers-reduced-motion: reduce) { .animate-on-scroll { opacity: 1; transform: none; transition: none; } } .container { padding-top: 40px; padding-bottom: 40px; } .mod_article.hero-section { min-height: 0; height: 60vh; }