/* ============================================================ modern.css — Naturseife-Theme: Creme + Eukalyptus + Taupe Keine Google Fonts, nur System-Fonts Wird als letztes im geladen → überschreibt Bootstrap ============================================================ */ :root { --soap-cream: #FAF6F0; --soap-cream-dark: #EDE4D8; --soap-green: #4A7A5C; --soap-green-dark: #3A6149; --soap-green-light: #EAF3EE; --soap-taupe: #C4A882; --soap-taupe-light: #F5EDE0; --soap-text: #2A2A25; --soap-muted: #6B6559; --soap-white: #FFFFFF; --soap-radius: 0.5rem; --soap-shadow: 0 2px 14px rgba(74, 122, 92, 0.10); --soap-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; } /* ---------------------------------------------------------- Base ---------------------------------------------------------- */ body { font-family: var(--soap-font) !important; background-color: var(--soap-cream) !important; color: var(--soap-text) !important; padding-top: 74px !important; line-height: 1.75 !important; } /* ---------------------------------------------------------- Typography ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--soap-font) !important; color: var(--soap-green-dark) !important; font-weight: 700 !important; } h1 { font-size: clamp(1.6rem, 4.5vw, 2.4rem) !important; letter-spacing: -0.02em !important; margin-bottom: 1.25rem !important; } h2 { font-size: clamp(1.15rem, 3vw, 1.55rem) !important; border-left: 4px solid var(--soap-taupe) !important; padding-left: 0.75rem !important; margin-top: 2rem !important; margin-bottom: 0.75rem !important; } p { line-height: 1.8 !important; margin-bottom: 1rem !important; } p.lead { font-size: 1.1rem !important; color: var(--soap-green) !important; font-style: italic !important; border-left: 3px solid var(--soap-green-light) !important; padding-left: 1rem !important; margin-bottom: 1.5rem !important; } a { color: var(--soap-green) !important; text-decoration: none !important; } a:hover { color: var(--soap-green-dark) !important; text-decoration: underline !important; } strong, b { color: var(--soap-green-dark) !important; } /* ---------------------------------------------------------- Navigation ---------------------------------------------------------- */ nav.navbar, .navbar.bg-light, .navbar-light.bg-light { background-color: var(--soap-white) !important; border-bottom: 2px solid var(--soap-taupe) !important; box-shadow: 0 2px 10px rgba(74, 122, 92, 0.08) !important; padding-top: 0.65rem !important; padding-bottom: 0.65rem !important; } .navbar-brand { font-weight: 800 !important; font-size: 1.2rem !important; color: var(--soap-green-dark) !important; letter-spacing: -0.02em !important; padding: 0 !important; } .navbar-brand:hover { color: var(--soap-green) !important; } .nav-link { color: var(--soap-text) !important; font-weight: 500 !important; padding-left: 0.75rem !important; padding-right: 0.75rem !important; } .nav-link:hover, .nav-link:focus { color: var(--soap-green) !important; } .dropdown-menu { background-color: var(--soap-white) !important; border: 1px solid var(--soap-cream-dark) !important; border-radius: var(--soap-radius) !important; box-shadow: var(--soap-shadow) !important; padding: 0.4rem 0 !important; } .dropdown-item { color: var(--soap-text) !important; font-size: 0.92rem !important; padding: 0.45rem 1.1rem !important; } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--soap-green-light) !important; color: var(--soap-green-dark) !important; } .navbar-toggler { border-color: var(--soap-taupe) !important; border-radius: var(--soap-radius) !important; } .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(74, 122, 92, 0.25) !important; } /* ---------------------------------------------------------- Cookie Banner ---------------------------------------------------------- */ .alert-warning.fixed-top { background-color: var(--soap-taupe-light) !important; border-color: var(--soap-taupe) !important; border-bottom: 2px solid var(--soap-taupe) !important; color: var(--soap-text) !important; font-size: 0.88rem !important; border-radius: 0 !important; } .btn-close { opacity: 0.6 !important; } .btn-close:hover { opacity: 1 !important; } /* ---------------------------------------------------------- Main Content Layout ---------------------------------------------------------- */ .container { max-width: 880px !important; } /* Article card */ .container.my-5 { background-color: var(--soap-white) !important; border-radius: calc(var(--soap-radius) * 2) !important; padding: 2.5rem 3rem !important; box-shadow: var(--soap-shadow) !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; } /* Index page simple container */ .container:not(.my-5) > h1:first-child { color: var(--soap-green-dark) !important; } /* ---------------------------------------------------------- Affiliate-Button (.großer-button) — responsive Override Originale Styles stecken im Body-