/* ============================================ Ihrschmuckankauf.de — Main Stylesheet Aesthetic: Clean Dark Gray & White ============================================ */ /* Fonts: loaded via — Roboto from Google Fonts (400 + 700 only) */ /* ---- CSS Variables ---- */ :root { /* Accent — monochrome scale (dark gray #343434) */ --gold: #343434; /* primary accent — dark gray */ --gold-mid: #4A4A4A; /* secondary accent */ --gold-light: #DADADA; /* lighter accent — hell auf dunkel */ --gold-lighter: #CCCCCC; /* muted accent */ --gold-dark: #1b1717; /* deepest accent */ /* Helle Hintergründe */ --bg: #FFFFFF; --bg-alt: #F4F4F4; --card-bg: #FFFFFF; --border: #D4D4D4; --border-light: #E8E8E8; /* Text */ --text-primary: #1E1E1E; /* 17:1 auf Weiß ✓ AAA */ --text-muted: #DADADA; /* Standard: hell auf dunkel. Wird in hellen Sections auf #5A5A5A gesetzt. */ --text-light: #8A8A8A; /* 3.5:1 – nur Großtext / decorativ */ /* Dunkle Sections */ --dark-section: #343434; --dark-card: #3D3D3D; --dark-border: #4A4A4A; /* Legacy-Aliasse — werden in Inline-Styles referenziert */ --black: #343434; --dark-bg: #343434; --white: #F4F4F4; /* Hellgrau auf Dunkel: 15:1 ✓ */ --white-muted: #DADADA; /* Gedämpft auf Dunkel, hell & lesbar */ /* Status */ --success: #1E6B3A; /* 5.6:1 auf Weiß ✓ AA */ /* Typografie — Roboto, nur Regular (400) und Bold (700) */ --font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Roboto', 'Helvetica Neue', Arial, sans-serif; /* Abstände & Extras */ --radius: 6px; --radius-lg: 14px; --transition: 0.25s ease; --shadow-gold: 0 0 32px rgba(0,0,0,0.10); --shadow-card: 0 2px 14px rgba(0,0,0,0.06); --shadow-hover: 0 6px 32px rgba(0,0,0,0.10); } /* ---- Reset & Base ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } /* Kein Italic — em wird fett statt kursiv */ em { font-style: normal; font-weight: 700; } body { background: var(--bg); color: var(--text-primary); font-family: var(--font-body); font-weight: 400; letter-spacing: 0; line-height: 1.7; overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img { max-width: 100%; display: block; } a { color: var(--gold-dark); text-decoration: none; transition: color var(--transition); } a:hover { color: var(--gold); } /* ---- Skip-Link (BFSG / WCAG 2.1 AA) ---- */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 99999; background: var(--gold); color: #FFFFFF; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; padding: 0.6rem 1.2rem; border-radius: var(--radius); text-decoration: none; transition: top 0.2s ease; } .skip-link:focus { top: 1rem; outline: 3px solid var(--gold-dark); outline-offset: 2px; } /* Papier-Textur entfernt — z-index 9999 blockierte in Chrome die Navbar-Links */ /* ============================================ LIGHT-SECTION VARIABLE REMAPPING Alle dark-* Vars werden in hellen Sections automatisch auf Light-Werte umgebogen — so funktionieren Inline-Styles ohne Änderung. ============================================ */ /* * HELLE OBERFLÄCHEN — Variablen zurück auf dunkle Textwerte setzen. * Gilt für alle Elemente mit weißem/hellem Hintergrund, * egal ob sie in einer section--dark stecken oder nicht. */ .section:not(.section--dark), .section--light, .section--card, .form-card, .calculator, .hero, .navbar, .dropdown, /* Weiße Karten, die auch in dunklen Sections auftauchen: */ .process__step, .category-card, .testimonial-card, .trust__stat-card, .trust__stat-card * { --text-muted: #5A5A5A; --text-light: #8A8A8A; --text-primary: #1E1E1E; --dark-card: var(--card-bg); --dark-border: var(--border); --dark-bg: var(--bg); --white: var(--text-primary); --white-muted: var(--text-muted); --gold-light: var(--gold); --gold-mid: var(--gold); } /* ============================================ TOP INFO BAR ============================================ */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: var(--dark-section); border-bottom: 1px solid var(--dark-border); height: 36px; } .topbar__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; padding: 0 2rem; max-width: 1280px; margin: 0 auto; } .topbar__left { display: flex; align-items: center; gap: 0.75rem; flex-wrap: nowrap; } .topbar__item { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: #DADADA; white-space: nowrap; text-decoration: none; } .topbar__item i { color: #FFFFFF; font-size: 0.7rem; } a.topbar__item:hover { color: #FFFFFF; } .topbar__sep { color: #444444; font-size: 0.75rem; } .topbar__wa { display: flex; align-items: center; gap: 0.5rem; font-size: 0.78rem; font-weight: 700; color: #FFFFFF; background: #25D366; padding: 0.2rem 0.85rem; border-radius: 3px; text-decoration: none; white-space: nowrap; transition: background var(--transition); } .topbar__wa i { font-size: 0.9rem; } .topbar__wa:hover { background: #1ebe5d; color: #FFFFFF; } /* ── Topbar Mobile Ticker ── */ .topbar__ticker { display: none; /* Desktop: versteckt */ } .topbar__tick { display: none; align-items: center; gap: 0.5rem; font-size: 0.78rem; color: #DADADA; white-space: nowrap; text-decoration: none; animation: tickFadeIn 0.35s ease; } .topbar__tick i { color: #FFFFFF; font-size: 0.7rem; } .topbar__tick--active { display: flex; } .topbar__tick--wa { color: #25D366; font-weight: 700; } .topbar__tick--wa i { color: #25D366; } @keyframes tickFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ============================================ SITE HEADER & NAVIGATION ============================================ */ .site-header { position: fixed; top: 36px; left: 0; right: 0; z-index: 1000; } .navbar { background: #FFFFFF; border-bottom: 1px solid var(--border); box-shadow: 0 1px 4px rgba(0,0,0,0.06); transition: box-shadow var(--transition); } .navbar.scrolled { box-shadow: 0 2px 16px rgba(0,0,0,0.10); } .navbar__inner { display: flex; align-items: stretch; height: 64px; padding: 0 2rem; max-width: 1280px; margin: 0 auto; } /* ── Logo ── */ .navbar__logo { display: flex; align-items: center; gap: 0.6rem; font-size: 1.1rem; font-weight: 700; color: var(--text-primary); text-decoration: none; flex-shrink: 0; margin-right: 2.5rem; } .navbar__logo span { color: var(--text-primary); } .navbar__logo-icon { width: 32px; height: 32px; background: var(--gold); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; color: #FFFFFF; flex-shrink: 0; } /* ── Desktop Menü ── */ .navbar__menu { display: flex; align-items: stretch; list-style: none; margin: 0; padding: 0; gap: 0; flex: 1; } .navbar__menu > li { display: flex; align-items: stretch; } .navbar__menu > li > a { display: flex; align-items: center; padding: 0 0.9rem; font-size: 0.875rem; font-weight: 400; color: var(--text-primary); white-space: nowrap; border-bottom: 2px solid transparent; transition: color var(--transition), border-color var(--transition); } .navbar__menu > li > a:hover { color: var(--gold); border-bottom-color: var(--gold); } .navbar__menu > li > a.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 700; } /* ── Nav chevron ── */ .nav-chevron { font-size: 0.6rem; margin-left: 0.3rem; transition: transform 0.2s ease; color: var(--text-light); } /* ── CTA Button ── */ .navbar__cta-wrap { display: flex; align-items: center; /* override stretch — Button bleibt kompakt */ align-self: center; margin-left: auto; padding-left: 1.5rem; } .navbar__cta { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--gold); color: #FFFFFF !important; padding: 0.45rem 1rem; border-radius: var(--radius); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; transition: background var(--transition); } .navbar__cta:hover { background: var(--gold-dark); color: #FFFFFF !important; } /* ============================================ DROPDOWN — 100% JS-gesteuert, kein CSS :hover Wird via JS .dropdown-open Klasse gesteuert. Kein CSS-hover = kein "phantom trigger"-Problem. ============================================ */ .has-dropdown { position: relative; } .has-dropdown > a { display: flex; align-items: center; cursor: pointer; } /* Dropdown Panel — standardmäßig versteckt */ .dropdown { display: none; /* JS setzt display:block wenn nötig */ position: absolute; top: 100%; left: 0; min-width: 240px; background: #FFFFFF; border: 1px solid var(--border); border-top: 2px solid var(--gold); border-radius: 0 0 8px 8px; padding: 0.4rem 0; list-style: none; box-shadow: 0 8px 32px rgba(0,0,0,0.12); z-index: 1002; } /* JS öffnet mit dieser Klasse (Desktop + Mobile) */ .has-dropdown.dd-open > .dropdown { display: block; } .has-dropdown.dd-open > a { color: var(--gold); border-bottom-color: var(--gold); } .has-dropdown.dd-open .nav-chevron { transform: rotate(180deg); color: var(--gold); } /* Städte-Dropdown: rechts ausgerichtet, 2 Spalten */ .dropdown--wide { min-width: 420px; left: auto; right: 0; columns: 2; column-gap: 0; } .dropdown--wide .dropdown__divider, .dropdown--wide .dropdown__section { column-span: all; } .dropdown--wide li { break-inside: avoid; } /* Dropdown Links */ .dropdown li a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 1rem; font-size: 0.875rem; color: var(--text-primary); white-space: nowrap; transition: background 0.1s; } .dropdown li a:hover { background: var(--bg-alt); color: var(--gold); } .dropdown li a::after { display: none !important; } .dropdown__icon { font-size: 0.8rem; width: 16px; text-align: center; flex-shrink: 0; color: var(--text-light); } .dropdown li a:hover .dropdown__icon { color: var(--gold); } .dropdown__divider { height: 1px; background: var(--border-light); margin: 0.25rem 0.75rem; } .dropdown__section { padding: 0.5rem 1rem 0.2rem; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-light); pointer-events: none; } /* Mobile .dd-open wird oben global gesetzt */ /* ── Hamburger ── */ .navbar__hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; cursor: pointer; padding: 8px; border-radius: 6px; border: 1px solid var(--border); background: transparent; align-self: center; margin-left: auto; transition: background 0.2s; } .navbar__hamburger:hover { background: var(--bg-alt); } .navbar__hamburger span { display: block; width: 22px; height: 2px; background: var(--text-primary); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; } .navbar__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar__hamburger.is-open span:nth-child(2) { opacity: 0; } .navbar__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Desktop-Menü auf Mobile verstecken, Hamburger zeigen ── */ @media (max-width: 900px) { .navbar__menu { display: none !important; } .navbar__hamburger { display: flex; } .topbar__left, .topbar__right { display: none !important; } .topbar__ticker { display: flex; align-items: center; justify-content: center; width: 100%; } } /* ============================================ MOBILER NAVIGATION DRAWER ============================================ */ /* Wrapper — deckt gesamten Viewport ab */ #mobile-drawer { display: none; position: fixed; inset: 0; z-index: 10000; } #mobile-drawer.mob-open { display: block; } /* Dunkler Backdrop */ .mob-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.65); animation: mobBackdropIn 0.25s ease forwards; } @keyframes mobBackdropIn { from { opacity: 0; } to { opacity: 1; } } /* Drawer Panel — von rechts einfahren */ .mob-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(100vw, 360px); background: #161616; display: flex; flex-direction: column; overflow: hidden; animation: mobPanelIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; } @keyframes mobPanelIn { from { transform: translateX(100%); } to { transform: translateX(0); } } /* Panel Header */ .mob-panel__head { display: flex; align-items: center; justify-content: space-between; padding: 0 1.25rem; height: 64px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.07); background: #111111; } .mob-panel__logo { display: flex; align-items: center; gap: 0.6rem; color: #F0F0F0; text-decoration: none; font-weight: 700; font-size: 0.95rem; white-space: nowrap; } .mob-panel__close { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); border-radius: 50%; color: #C0C0C0; font-size: 0.95rem; cursor: pointer; flex-shrink: 0; transition: background 0.2s, color 0.2s; } .mob-panel__close:hover { background: rgba(255,255,255,0.15); color: #FFFFFF; } /* Panel Body — scrollbar */ .mob-panel__body { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .mob-panel__body::-webkit-scrollbar { width: 3px; } .mob-panel__body::-webkit-scrollbar-track { background: transparent; } .mob-panel__body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 2px; } /* Hauptliste */ .mob-nav { list-style: none; margin: 0; padding: 0.5rem 0 1rem; } /* Einfache Links */ .mob-nav > li > a { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.25rem; font-size: 0.95rem; font-weight: 500; color: #D8D8D8; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.05); transition: background 0.15s, color 0.15s; } .mob-nav > li > a:active, .mob-nav > li > a:hover { background: rgba(255,255,255,0.05); color: #FFFFFF; } .mob-nav__icon { font-size: 0.8rem; width: 16px; text-align: center; color: rgba(255,255,255,0.3); flex-shrink: 0; } /* Accordion-Gruppe */ .mob-nav__group { border-bottom: 1px solid rgba(255,255,255,0.05); } /* Toggle-Button */ .mob-nav__toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.9rem 1.25rem; background: none; border: none; color: #D8D8D8; font-size: 0.95rem; font-weight: 500; cursor: pointer; text-align: left; transition: background 0.15s, color 0.15s; gap: 0.5rem; } .mob-nav__toggle:hover { background: rgba(255,255,255,0.05); color: #FFFFFF; } .mob-nav__toggle > span { display: flex; align-items: center; gap: 0.75rem; } /* Chevron-Icon */ .mob-chevron { font-size: 0.65rem; color: rgba(255,255,255,0.25); transition: transform 0.3s ease, color 0.2s; flex-shrink: 0; } .mob-nav__group.is-open .mob-chevron { transform: rotate(180deg); color: var(--gold-light); } .mob-nav__group.is-open > .mob-nav__toggle { color: #FFFFFF; } /* Submenu — max-height Accordion */ .mob-nav__sub { list-style: none; margin: 0; padding: 0; max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1); background: rgba(0,0,0,0.25); } .mob-nav__group.is-open > .mob-nav__sub { max-height: 2000px; } /* Submenu Links */ .mob-nav__sub li a { display: flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1.25rem 0.7rem 1.5rem; font-size: 0.875rem; color: rgba(255,255,255,0.55); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.04); transition: color 0.15s, background 0.15s; } .mob-nav__sub li a:hover { color: #FFFFFF; background: rgba(255,255,255,0.04); } .mob-nav__sub li a i { font-size: 0.72rem; width: 14px; text-align: center; color: rgba(255,255,255,0.2); flex-shrink: 0; } .mob-nav__sub li a:hover i { color: var(--gold-light); } /* Submenu Labels & Divider */ .mob-nav__sub-label { padding: 0.65rem 1.5rem 0.25rem; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.22); pointer-events: none; } .mob-nav__sub-div { height: 1px; background: rgba(255,255,255,0.06); margin: 0.3rem 1.25rem; } /* Panel Footer */ .mob-panel__foot { flex-shrink: 0; padding: 1rem 1.25rem; border-top: 1px solid rgba(255,255,255,0.07); background: #111111; display: flex; flex-direction: column; gap: 0.6rem; } /* CTA-Button */ .mob-panel__cta { display: flex; align-items: center; justify-content: center; gap: 0.5rem; background: var(--gold); color: #FFFFFF !important; padding: 0.9rem 1.5rem; border-radius: var(--radius); font-size: 0.95rem; font-weight: 700; text-decoration: none; text-align: center; transition: background 0.2s; } .mob-panel__cta:hover { background: var(--gold-dark); } /* Kontakt-Buttons */ .mob-panel__contacts { display: flex; gap: 0.5rem; } .mob-contact-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.65rem 0.5rem; border-radius: 8px; font-size: 0.82rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background 0.2s; } .mob-contact-btn--call { background: rgba(255,255,255,0.07); color: #D8D8D8; border: 1px solid rgba(255,255,255,0.1); } .mob-contact-btn--call:hover { background: rgba(255,255,255,0.14); color: #FFFFFF; } .mob-contact-btn--wa { background: rgba(37,211,102,0.1); color: #25D366; border: 1px solid rgba(37,211,102,0.22); } .mob-contact-btn--wa:hover { background: rgba(37,211,102,0.2); } /* Desktop: Drawer komplett ausblenden */ @media (min-width: 901px) { #mobile-drawer { display: none !important; } } /* ============================================ HERO SECTION ============================================ */ .hero { min-height: 100vh; display: flex; align-items: center; position: relative; overflow: hidden; padding: 7rem 2rem 4rem; } .hero__bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(0,0,0,0.07) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 15% 80%, rgba(0,0,0,0.04) 0%, transparent 50%), var(--bg); } .hero__grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 80px 80px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 70%); } .hero__container { max-width: 1280px; margin: 0 auto; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; position: relative; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.5rem; } .hero__eyebrow::before { content: ''; width: 40px; height: 1px; background: var(--gold); } .hero__title { font-family: var(--font-display); font-size: clamp(1.8rem, 6vw, 4.5rem); line-height: 1.15; font-weight: 700; margin-bottom: 1.5rem; color: var(--text-primary); } .hero__title em { color: var(--gold); } .hero__subtitle { font-size: 1.05rem; color: var(--text-muted); max-width: 480px; margin-bottom: 2.5rem; line-height: 1.8; } .hero__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 3.5rem; } .hero__stats { display: flex; gap: 2.5rem; padding-top: 2rem; border-top: 1px solid var(--border); } .hero__stat-value { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--gold); display: block; } .hero__stat-label { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); } /* Hero Visual */ .hero__visual { position: relative; display: flex; align-items: center; justify-content: center; } .hero__ring { position: relative; width: 420px; height: 420px; } .hero__ring-orbit { position: absolute; inset: 0; border: 1px solid rgba(0,0,0,0.18); border-radius: 50%; animation: orbit 20s linear infinite; } .hero__ring-orbit:nth-child(2) { inset: 30px; border-color: rgba(0,0,0,0.11); animation-duration: 15s; animation-direction: reverse; } .hero__ring-orbit:nth-child(3) { inset: 60px; border-color: rgba(0,0,0,0.07); animation-duration: 25s; } .hero__ring-dot { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 8px; height: 8px; background: var(--gold); border-radius: 50%; box-shadow: 0 0 12px var(--gold-light); } .hero__ring-center { position: absolute; inset: 80px; background: linear-gradient(135deg, #FFFFFF 0%, var(--bg-alt) 100%); border-radius: 50%; border: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: var(--shadow-gold), 0 8px 40px rgba(0,0,0,0.08); } .hero__ring-icon { font-size: 3.5rem; margin-bottom: 0.5rem; } .hero__ring-text { font-family: var(--font-display); font-size: 0.9rem; color: var(--gold); letter-spacing: 0.1em; } @keyframes orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ============================================ BUTTONS ============================================ */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.85rem 2rem; border-radius: var(--radius); font-family: var(--font-body); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; border: none; cursor: pointer; transition: all var(--transition); text-decoration: none; } .btn-primary { background: #343434; color: #FFFFFF; box-shadow: 0 4px 20px rgba(0,0,0,0.20); } .btn-primary:hover { background: #1E1E1E; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(0,0,0,0.30); color: #FFFFFF; } .btn-outline { background: transparent; color: var(--text-primary); border: 1px solid var(--border); } .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } /* btn-outline auf dunklem Hintergrund: weiß & sichtbar */ .section--dark .btn-outline, .page-hero.section--dark .btn-outline { color: rgba(255, 255, 255, 0.90); border: 1.5px solid rgba(255, 255, 255, 0.45); background: rgba(255, 255, 255, 0.06); } .section--dark .btn-outline:hover, .page-hero.section--dark .btn-outline:hover { color: #fff; border-color: var(--gold-light); background: rgba(255, 255, 255, 0.12); transform: translateY(-2px); } .btn-whatsapp { background: #25D366; color: #fff; border: none; box-shadow: 0 4px 20px rgba(37,211,102,0.3); gap: 0.55rem; } .btn-whatsapp:hover { background: #1ebe5d; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 32px rgba(37,211,102,0.45); } .btn-whatsapp svg { flex-shrink: 0; } .btn-ghost { background: transparent; color: #FFFFFF !important; border: 1px solid rgba(255,255,255,0.35); } .btn-ghost:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.6); color: #FFFFFF !important; } /* WhatsApp button: ALWAYS white text, regardless of context */ .btn-whatsapp, .btn-whatsapp:hover, a.btn-whatsapp, a.btn-whatsapp:hover, .section--dark .btn-whatsapp, .section--dark .btn-whatsapp:hover, .section--dark a.btn-whatsapp, .section--dark a.btn-whatsapp:hover { color: #FFFFFF !important; } /* ============================================ SECTIONS — GENERAL ============================================ */ .section { padding: 7rem 2rem; background: var(--bg); } .section--dark { background: var(--dark-section); color: var(--white); } .section--light { background: #FFFFFF; } .section--card { background: var(--bg-alt); } /* Texte in Dark-Sections — alle Kontraste WCAG-AA-geprüft auf #1A1710 */ .section--dark .section__title { color: #F5F5F5; } /* 13:1 ✓ */ .section--dark .section__subtitle { color: #DADADA; } /* 7:1 ✓ */ /* Dark-Section: gold-light bleibt hell (--text-muted kommt bereits hell aus :root) */ .section--dark { --gold-light: #DADADA; --text-muted: #DADADA; --white-muted: #DADADA; } .section--dark .section__eyebrow { color: #DADADA; } .section--dark .section__eyebrow::before { background: #DADADA; } .section--dark a:not(.btn) { color: #DADADA; } .section--dark a:not(.btn):hover { color: #F5F5F5; } /* Text in Dark-Sections */ .section--dark p, .section--dark li { color: #DADADA; } .section--dark span:not(.dropdown__icon):not(.badge):not(.badge-gold) { color: #DADADA; } .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #F5F5F5; } .section--dark strong { color: #F5F5F5; } /* Buttons in dark sections: --gold als background bleibt #343434 */ .section--dark .btn-primary, .section--dark .navbar__cta { background: #343434; } .section--dark .btn-primary:hover, .section--dark .navbar__cta:hover { background: #1E1E1E; } .container { max-width: 1280px; margin: 0 auto; width: 100%; } .section__eyebrow { display: inline-flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; /* 12.8px → uppercase gilt als "großtext" */ letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; font-weight: 700; } .section__eyebrow::before { content: ''; width: 30px; height: 1px; background: var(--gold); } .section__title { font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 700; line-height: 1.2; margin-bottom: 1.2rem; color: var(--text-primary); } .section__title em { color: var(--gold); } .section--dark .section__title em { color: var(--gold-light); } .section__subtitle { color: var(--text-muted); font-size: 1.05rem; max-width: 600px; line-height: 1.8; } /* ============================================ PROCESS SECTION ============================================ */ .process { position: relative; } .process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); /* Gap-Farbe: in dunkler Section wird das überschrieben */ margin-top: 4rem; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } /* In dunkler Section: Grid-Gap und Border auch dunkel */ .section--dark .process__grid { background: #4A4A4A; border-color: #4A4A4A; } .process__step { background: var(--card-bg); padding: 2.5rem 2rem; position: relative; transition: background var(--transition); } /* In dunkler Section: Karten dunkel statt weiß */ .section--dark .process__step { background: #3D3D3D; } .process__step:hover { background: var(--bg-alt); } .section--dark .process__step:hover { background: #444444; } .process__step:hover .process__icon { transform: scale(1.1); color: var(--gold-dark); } .section--dark .process__step:hover .process__icon { color: #FFFFFF; } .process__number { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: rgba(0,0,0,0.08); line-height: 1; margin-bottom: 1rem; } /* In dunkler Section: Nummer sichtbar weiß */ .section--dark .process__number { color: rgba(255,255,255,0.08); } .process__icon { font-size: 1.5rem; color: var(--gold); margin-bottom: 1.2rem; display: block; transition: all var(--transition); } .process__title { font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 0.8rem; font-weight: 700; color: var(--text-primary); } .process__text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; } /* ============================================ ANKAUF CATEGORIES ============================================ */ .categories__header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 3rem; flex-wrap: wrap; gap: 1rem; } .categories__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .category-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: all var(--transition); position: relative; box-shadow: var(--shadow-card); } .category-card:hover { border-color: var(--gold-light); transform: translateY(-4px); box-shadow: var(--shadow-gold), var(--shadow-hover); } .category-card__image { height: 160px; background: #141414; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .category-card__image i { position: relative; z-index: 1; } .category-card__image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 50%, rgba(0,0,0,0.25)); } .category-card__body { padding: 1.5rem; } .category-card__title { font-family: var(--font-display); font-size: 1.25rem; margin-bottom: 0.5rem; color: var(--text-primary); } .category-card__desc { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 1rem; line-height: 1.6; } .category-card__badge { display: inline-flex; align-items: center; gap: 0.4rem; background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.2); color: var(--gold-dark); padding: 0.3rem 0.8rem; border-radius: 2rem; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; } /* ============================================ TRUST / WHY US ============================================ */ .trust { position: relative; overflow: hidden; } .trust::before { content: ''; position: absolute; top: -200px; right: -200px; width: 600px; height: 600px; background: radial-gradient(circle, rgba(0,0,0,0.04) 0%, transparent 60%); border-radius: 50%; } .trust__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; margin-top: 2rem; } .trust__features { display: flex; flex-direction: column; gap: 1.5rem; margin-top: 2.5rem; } .trust__feature { display: flex; gap: 1.2rem; align-items: flex-start; padding: 1.4rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); transition: border-color var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-card); } .trust__feature:hover { border-color: rgba(0,0,0,0.3); box-shadow: var(--shadow-hover); } .trust__feature-icon { width: 44px; height: 44px; background: rgba(0,0,0,0.08); border: 1px solid rgba(0,0,0,0.18); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; color: var(--gold); } .trust__feature-title { font-weight: 700; margin-bottom: 0.3rem; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--text-primary); } .trust__feature-text { font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; } /* Big stat card */ .trust__stat-card { background: linear-gradient(135deg, #FFFFFF, var(--bg-alt)); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 3rem; text-align: center; position: relative; overflow: hidden; box-shadow: var(--shadow-card); } .trust__stat-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #666666, transparent); } /* ============================================ TESTIMONIALS ============================================ */ .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 3.5rem; } .testimonial-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; position: relative; transition: border-color var(--transition), box-shadow var(--transition); box-shadow: var(--shadow-card); } .testimonial-card:hover { border-color: rgba(0,0,0,0.25); box-shadow: var(--shadow-hover); } .testimonial-card__stars { color: var(--gold); font-size: 0.85rem; margin-bottom: 1rem; letter-spacing: 0.1em; } .testimonial-card__text { font-size: 0.95rem; line-height: 1.8; color: var(--text-muted); margin-bottom: 1.5rem; } .testimonial-card__author { display: flex; align-items: center; gap: 0.75rem; } .testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: #343434; display: flex; align-items: center; justify-content: center; font-size: 1rem; flex-shrink: 0; } .testimonial-card__name { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); } .testimonial-card__location { font-size: 0.78rem; color: var(--text-muted); } /* ============================================ CTA SECTION ============================================ */ .cta-section { position: relative; overflow: hidden; text-align: center; } .cta-section__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.07) 0%, transparent 65%), var(--bg-alt); } .cta-section .container { position: relative; z-index: 1; } .cta-section__content { position: relative; max-width: 680px; margin: 0 auto; } .cta-section__title { font-family: var(--font-display); font-size: clamp(2.2rem, 4vw, 3.5rem); margin-bottom: 1.5rem; line-height: 1.15; color: var(--text-primary); } .cta-section__title em { color: var(--gold); } .cta-section__subtitle { color: var(--text-muted); margin-bottom: 2.5rem; font-size: 1.05rem; } .cta-section__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ============================================ FORM STYLES (Bewertungsformular) ============================================ */ .form-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-card); } .form-title { font-family: var(--font-display); font-size: 1.6rem; margin-bottom: 0.5rem; color: var(--text-primary); } .form-subtitle { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 2rem; } .form-group { margin-bottom: 1.5rem; } .form-label { display: block; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } .form-control { width: 100%; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; color: var(--text-primary); font-family: var(--font-body); font-size: 0.95rem; transition: border-color var(--transition), box-shadow var(--transition); outline: none; } .form-control:focus { border-color: var(--gold); background: #FFFFFF; box-shadow: 0 0 0 3px rgba(0,0,0,0.1); } .form-control::placeholder { color: var(--text-light); } select.form-control { cursor: pointer; } textarea.form-control { resize: vertical; min-height: 120px; } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /* ============================================ PREISRECHNER ============================================ */ .calculator { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2.5rem; box-shadow: var(--shadow-card); } .calculator__result { background: rgba(0,0,0,0.06); border: 1px solid rgba(0,0,0,0.18); border-radius: var(--radius); padding: 1.5rem; margin-top: 1.5rem; text-align: center; } .calculator__result-label { font-size: 0.78rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem; } .calculator__result-value { font-family: var(--font-display); font-size: 2.5rem; color: var(--gold); font-weight: 700; } .calculator__result-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.4rem; } /* ============================================ WHATSAPP CTA BANNER ============================================ */ .wa-cta-banner { background: linear-gradient(135deg, #17382A 0%, #1E4A35 50%, #17382A 100%); border-top: 1px solid rgba(37,211,102,0.18); border-bottom: 1px solid rgba(37,211,102,0.10); padding: 3.5rem 2rem; position: relative; overflow: hidden; } .wa-cta-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 80% at 80% 50%, rgba(37,211,102,0.06) 0%, transparent 70%); pointer-events: none; } .wa-cta-banner__inner { display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center; position: relative; } .wa-cta-banner__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #25D366; margin-bottom: 0.75rem; } .wa-cta-banner__title { font-family: var(--font-display); font-size: clamp(1.4rem, 2.5vw, 2rem); font-weight: 700; color: #F8F4EE; line-height: 1.3; margin-bottom: 0.75rem; } .wa-cta-banner__title em { color: #4ade80; } .wa-cta-banner__sub { font-size: 0.9rem; color: rgba(248,244,238,0.65); line-height: 1.6; max-width: 520px; margin-bottom: 1.25rem; } .wa-cta-banner__steps { display: flex; align-items: center; gap: 0.6rem; font-size: 0.82rem; color: rgba(248,244,238,0.55); flex-wrap: wrap; } .wa-cta-banner__steps strong { color: #25D366; } .wa-cta-banner__steps svg { opacity: 0.4; flex-shrink: 0; } .wa-cta-banner__actions { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; flex-shrink: 0; } .wa-cta-banner__btn { display: inline-flex; align-items: center; gap: 0.75rem; background: #25D366; color: #fff; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; letter-spacing: 0.04em; padding: 1rem 2rem; border-radius: 50px; text-decoration: none; white-space: nowrap; box-shadow: 0 6px 30px rgba(37,211,102,0.35); transition: all 0.3s cubic-bezier(0.4,0,0.2,1); position: relative; } .wa-cta-banner__btn::after { content: ''; position: absolute; inset: -4px; border-radius: 50px; border: 2px solid rgba(37,211,102,0.3); animation: wa-pulse 2.5s ease-out infinite; } .wa-cta-banner__btn:hover { background: #1ebe5d; color: #fff; transform: translateY(-3px) scale(1.03); box-shadow: 0 12px 40px rgba(37,211,102,0.5); } .wa-cta-banner__note { display: flex; align-items: center; gap: 0.4rem; font-size: 0.75rem; color: rgba(248,244,238,0.4); text-align: center; } @media (max-width: 768px) { .wa-cta-banner__inner { grid-template-columns: 1fr; text-align: center; gap: 2rem; } .wa-cta-banner__sub { margin-left: auto; margin-right: auto; } .wa-cta-banner__steps { justify-content: center; } .wa-cta-banner__eyebrow { justify-content: center; } } /* ============================================ FOOTER ============================================ */ .footer { background: #343434; border-top: 1px solid #4A4A4A; padding: 5rem 2rem 2rem; } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 3rem; } .footer__brand { max-width: 300px; } .footer__logo { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.2rem; color: var(--gold-light); margin-bottom: 1rem; } .footer__tagline { color: #DADADA; font-size: 0.9rem; line-height: 1.7; margin-bottom: 1.5rem; } .footer__social { display: flex; gap: 0.75rem; } .footer__social-link { width: 36px; height: 36px; border: 1px solid #4A4A4A; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; color: #DADADA; font-size: 0.9rem; transition: all var(--transition); } .footer__social-link:hover { border-color: var(--gold-light); color: var(--gold-light); background: rgba(0,0,0,0.10); } .footer__col-title { font-size: 0.75rem; letter-spacing: 0.15em; text-transform: uppercase; color: #F5F5F5; font-weight: 700; margin-bottom: 1.2rem; } .footer__links { list-style: none; display: flex; flex-direction: column; gap: 0.7rem; } .footer__links a { color: #DADADA; font-size: 0.9rem; transition: color var(--transition); } .footer__links a:hover { color: var(--gold-light); } .footer__bottom { padding-top: 2rem; border-top: 1px solid #4A4A4A; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .footer__copyright { font-size: 0.8rem; color: #DADADA; } .footer__legal { display: flex; gap: 1.5rem; } .footer__legal a { font-size: 0.8rem; color: #DADADA; } .footer__legal a:hover { color: var(--gold-light); } /* ============================================ SCROLL REVEAL ANIMATIONS ============================================ */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1), transform 0.7s cubic-bezier(0.4, 0, 0.2, 1); } .reveal.visible { opacity: 1; transform: translateY(0); } .reveal-delay-1 { transition-delay: 0.1s; } .reveal-delay-2 { transition-delay: 0.2s; } .reveal-delay-3 { transition-delay: 0.3s; } .reveal-delay-4 { transition-delay: 0.4s; } /* ============================================ PAGE HERO (Unterseiten) ============================================ */ .page-hero { padding: 10rem 2rem 5rem; text-align: center; position: relative; overflow: hidden; } /* Standard-Hero (hell) */ .page-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at center top, rgba(0,0,0,0.07), transparent 60%); pointer-events: none; /* Overlay darf keine Klicks abfangen */ z-index: 0; } /* Dark-Hero bleibt dunkel */ .page-hero.section--dark::before { background: radial-gradient(ellipse at center top, rgba(0,0,0,0.1), transparent 60%); } /* Inhalt muss über dem Overlay liegen */ .page-hero .container { position: relative; z-index: 1; } /* ============================================ GOLD DIVIDER ============================================ */ .gold-divider { width: 60px; height: 2px; background: #343434; margin: 1.5rem 0; } .gold-divider--center { margin: 1.5rem auto; } /* ============================================ RESPONSIVE ============================================ */ @media (max-width: 1024px) { .hero__container { grid-template-columns: 1fr; text-align: center; } .hero__subtitle { margin: 0 auto 2.5rem; } .hero__actions { justify-content: center; } .hero__stats { justify-content: center; } .hero__visual { display: none; } .process__grid { grid-template-columns: repeat(2, 1fr); } .categories__grid { grid-template-columns: repeat(2, 1fr); } .trust__grid { grid-template-columns: 1fr; } .testimonials__grid { grid-template-columns: 1fr 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; gap: 2rem; } } /* ── Mobile Layout (≤768px) — Navbar wird über 900px-Breakpoint gehandelt ── */ @media (max-width: 768px) { .section { padding: 4rem 1.25rem; } .process__grid { grid-template-columns: 1fr; } .categories__grid { grid-template-columns: 1fr; } .testimonials__grid { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } .form-row { grid-template-columns: 1fr; } .hero__stats { flex-wrap: wrap; gap: 1.5rem; } .hero { padding: 5.5rem 1.25rem 3rem; } .hero__title { font-size: clamp(1.6rem, 7vw, 2.6rem); } .hero__subtitle { font-size: 1rem; } .page-hero { padding: 7rem 1.25rem 3.5rem; } } /* ============================================ UTILITY CLASSES ============================================ */ .text-gold { color: var(--gold); } .text-muted { color: var(--text-muted); } .text-center { text-align: center; } .mt-1 { margin-top: 0.5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-1 { margin-bottom: 0.5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; } .flex { display: flex; } .items-center { align-items: center; } .gap-1 { gap: 0.5rem; } .badge { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border-radius: 2rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; } .badge-gold { background: rgba(0,0,0,0.09); border: 1px solid rgba(0,0,0,0.25); color: var(--gold-dark); } .badge-success { background: rgba(45,122,74,0.1); border: 1px solid rgba(45,122,74,0.25); color: var(--success); } /* Dark Section — Links */ .section--dark .section__title a, .section--dark p a { color: #DADADA; } /* ============================================ INLINE OVERRIDES für Ankauf-Seiten ============================================ */ /* Tabellen in hellen Sections — dark-card Hintergrund + helle Textfarben korrigieren */ .section:not(.section--dark) table { background: #FFFFFF !important; border: 1px solid #E0E0E0; border-radius: var(--radius-lg); overflow: hidden; } .section:not(.section--dark) table thead tr { background: #2D2D2D !important; /* dunkler Header bleibt dunkel */ } .section:not(.section--dark) table th { color: #F0F0F0 !important; } .section:not(.section--dark) table tbody tr { background: #FFFFFF !important; border-bottom: 1px solid #EBEBEB; } .section:not(.section--dark) table tbody tr:nth-child(even) { background: #F8F8F8 !important; } /* Inline-Styles: var(--white) und var(--white-muted) in td → dunkle Farben */ .section:not(.section--dark) table td { color: #1E1E1E !important; } .section:not(.section--dark) table td[style*="color:var(--white-muted)"], .section:not(.section--dark) table td[style*="color: var(--white-muted)"] { color: #5A5A5A !important; } .section:not(.section--dark) table td[style*="color:var(--gold)"], .section:not(.section--dark) table td[style*="color: var(--gold)"] { color: #1E1E1E !important; /* --gold = #343434, bleibt dunkel → lesbar */ } .section:not(.section--dark) table td[style*="font-weight:600"], .section:not(.section--dark) table td[style*="font-weight: 600"] { font-weight: 600; } /* Fußnoten-Texte direkt neben/nach Tabellen in hellen Sections */ .section:not(.section--dark) [style*="color:var(--white-muted)"], .section:not(.section--dark) [style*="color: var(--white-muted)"] { color: #5A5A5A !important; } .section:not(.section--dark) [style*="color:var(--white)"], .section:not(.section--dark) [style*="color: var(--white)"] { color: #1E1E1E !important; } .section:not(.section--dark) [style*="color:var(--gold-light)"], .section:not(.section--dark) [style*="color: var(--gold-light)"] { color: #343434 !important; } /* ── Dark-Section: Inline-Farben korrigieren ───────────────── var(--text-primary) und var(--text-muted) sind Hell-Abschnitt-Farben. Inline-Styles haben Spezifität 1000 → brauchen !important zum Überschreiben. */ .section--dark [style*="color:var(--text-primary)"], .section--dark [style*="color: var(--text-primary)"] { color: #F5F5F5 !important; /* = var(--white), 13:1 auf dunkel ✓ */ } .section--dark [style*="color:var(--text-muted)"], .section--dark [style*="color: var(--text-muted)"] { color: #DADADA !important; /* = var(--white-muted), 7:1 auf dunkel ✓ */ } /* var(--gold) = #343434 — auf dunklem Hintergrund kaum sichtbar. In dark sections auf #DADADA umleiten. */ .section--dark [style*="color:var(--gold)"], .section--dark [style*="color: var(--gold)"] { color: #DADADA !important; } /* Tabellen-Zeilen in dark sections lesbar halten */ .section--dark table { color: #DADADA; } .section--dark table th { color: #DADADA !important; } .section--dark table td { color: #DADADA !important; /* Fallback für alle TDs */ } /* Alte Schriftarten bereinigen — Josefin Sans und Playfair Display wurden entfernt; Inline-Styles mit diesen Fonts auf Roboto zurücksetzen. */ [style*="Josefin Sans"], [style*="'Josefin Sans'"], [style*="Playfair Display"], [style*="'Playfair Display'"] { font-family: var(--font-body, Roboto, sans-serif) !important; } /* Details/Summary in dark sections */ .section--dark summary { color: #F5F5F5 !important; } .section--dark summary::marker, .section--dark summary::-webkit-details-marker { color: #DADADA; } /* Cards in dark sections */ .section--dark [style*="background:var(--card-bg)"], .section--dark [style*="background: var(--card-bg)"] { background: rgba(255,255,255,0.07) !important; } /* ============================================ ICON FARBEN Dunkler Hintergrund → weiße Icons Heller Hintergrund → graue Icons ============================================ */ /* Light: alle Icons grau (kein buntes Gold, kein Schwarz) */ i.fas, i.fab, i.far, i.fal, i.fa { color: var(--text-muted); /* #5A5A5A — lesbares Grau auf Weiß */ } /* Ausnahmen auf hell: spezifische Icon-Klassen behalten ihre Rolle */ .process__icon { color: var(--gold); } .dropdown__icon { color: var(--text-light); } .navbar__logo-icon i { color: #FFFFFF; } .navbar__cta i { color: #FFFFFF; } .btn-whatsapp i, .topbar__wa i { color: #FFFFFF; } .hero__eyebrow i { color: var(--gold); } /* Dark sections → weiße Icons */ .section--dark i.fas, .section--dark i.fab, .section--dark i.far, .section--dark i.fal, .section--dark i.fa { color: #FFFFFF; } /* Topbar ist dunkel → weiße Icons */ .topbar i.fas, .topbar i.fab, .topbar i.far { color: #FFFFFF; } /* Page-hero dark → weiße Icons */ .page-hero.section--dark i.fas, .page-hero.section--dark i.fab, .page-hero.section--dark i.far { color: #FFFFFF; } /* WhatsApp-Icons bleiben immer weiß */ .btn-whatsapp i.fas, .btn-whatsapp i.fab, .topbar__wa i.fas, .topbar__wa i.fab, .wa-cta-banner__btn i { color: #FFFFFF !important; } /* WhatsApp pulse (shared) */ @keyframes wa-pulse { 0% { transform: scale(1); opacity: 0.7; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* ============================================ BILD-PLATZHALTER (img-placeholder) ============================================ */ .img-placeholder { width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; position: relative; overflow: hidden; border: 1px solid var(--dark-border); } .img-placeholder::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient( 45deg, transparent, transparent 20px, rgba(255,255,255,0.015) 20px, rgba(255,255,255,0.015) 40px ); } .img-placeholder__icon { font-size: 3.5rem; position: relative; z-index: 1; opacity: 0.55; } .img-placeholder__label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.65); position: relative; z-index: 1; } /* ============================================ ANKAUF SHOWCASE — Alternating Image+Text ============================================ */ .showcase { display: flex; flex-direction: column; gap: 5rem; } .showcase__item { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .showcase__item--reverse { grid-template-columns: 1fr 1fr; } .showcase__item--reverse .showcase__img { order: 2; } .showcase__item--reverse .showcase__text { order: 1; } .showcase__img { position: relative; } .showcase__img .img-placeholder { aspect-ratio: 4 / 3; } .showcase__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin-bottom: 0.75rem; } .showcase__title { font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text-primary); line-height: 1.25; margin-bottom: 1rem; } .showcase__title em { color: var(--gold); font-style: normal; } .showcase__body { color: var(--text-muted); font-size: 0.975rem; line-height: 1.8; margin-bottom: 1.5rem; } .showcase__keywords { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.75rem; } .showcase__kw { background: rgba(255,255,255,0.05); border: 1px solid var(--dark-border); color: var(--text-muted); padding: 0.3rem 0.8rem; border-radius: 2rem; font-size: 0.75rem; letter-spacing: 0.05em; } /* Keyword-Badges in hellen Sections sichtbar machen */ .section:not(.section--dark) .showcase__kw { background: rgba(0,0,0,0.05); border-color: #C0C0C0; color: #5A5A5A; } @media (max-width: 900px) { .showcase__item, .showcase__item--reverse { grid-template-columns: 1fr; gap: 2rem; } .showcase__item--reverse .showcase__img { order: 0; } .showcase__item--reverse .showcase__text { order: 0; } } /* Category cards — Mehr erfahren Button */ .category-card__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold); margin-top: 0.75rem; text-decoration: none; transition: gap var(--transition); } .category-card__link:hover { gap: 0.8rem; } /* Subpage content sections */ .content-section { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; margin-top: 3rem; } .content-section--reverse .content-section__img { order: 2; } .content-section--reverse .content-section__text { order: 1; } .content-section__img .img-placeholder { aspect-ratio: 4/3; } .content-section__text h3 { font-family: var(--font-display); font-size: 1.5rem; color: var(--text-primary); margin-bottom: 0.75rem; line-height: 1.3; } .content-section__text h3 em { color: var(--gold); font-style: normal; } .content-section__text p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.85; margin-bottom: 1rem; } .content-section__text ul { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .content-section__text li { color: var(--text-muted); font-size: 0.95rem; padding-left: 1.5rem; position: relative; line-height: 1.6; } .content-section__text li::before { content: ''; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); } @media (max-width: 860px) { .content-section, .content-section--reverse { grid-template-columns: 1fr; gap: 2rem; } .content-section--reverse .content-section__img { order: 0; } .content-section--reverse .content-section__text { order: 0; } } /* Info-Box */ .info-box { background: var(--dark-card); border: 1px solid var(--dark-border); border-left: 3px solid var(--gold); border-radius: var(--radius); padding: 1.5rem 1.75rem; margin: 2rem 0; } .info-box__title { font-family: var(--font-display); font-size: 1rem; color: var(--text-primary); margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .info-box__title i { color: var(--gold); font-size: 0.9rem; } .info-box p { color: var(--text-muted); font-size: 0.9rem; line-height: 1.7; margin: 0; } /* Stat-Row */ .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.5rem; margin: 2.5rem 0; } .stat-row__item { background: var(--dark-card); border: 1px solid var(--dark-border); border-radius: var(--radius); padding: 1.5rem; text-align: center; } .stat-row__number { font-family: var(--font-display); font-size: 2rem; color: var(--gold); line-height: 1; margin-bottom: 0.4rem; } .stat-row__label { font-size: 0.8rem; color: var(--text-muted); letter-spacing: 0.05em; } /* ============================================ MOBILE RESPONSIVE — ALLE UNTERSEITEN Systematische Optimierung für ≤768px ============================================ */ /* ── 1. Inline 2-Spalten-Grids → 1 Spalte ─────────────────── */ @media (max-width: 768px) { /* Direkt inline gesetzte 2-col Grids */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"] { grid-template-columns: 1fr !important; gap: 1.5rem !important; } /* Sehr große Gaps in 2-col Layuts (5rem, 4rem, 3rem) */ [style*="gap:5rem"], [style*="gap: 5rem"] { gap: 1.75rem !important; } [style*="gap:4rem"], [style*="gap: 4rem"] { gap: 1.5rem !important; } [style*="gap:3rem"], [style*="gap: 3rem"] { gap: 1.25rem !important; } /* Große Innenabstände in Cards / Boxen */ [style*="padding:2.5rem"] { padding: 1.25rem !important; } [style*="padding:2rem"] { padding: 1.1rem !important; } /* ── 2. Typografie ─────────────────────────────────────────── */ /* Seitenüberschriften */ .section__title { font-size: clamp(1.35rem, 5.5vw, 1.9rem) !important; line-height: 1.25; } .section__subtitle { font-size: 0.95rem; line-height: 1.75; } /* Page-Hero */ .page-hero { padding: 6.5rem 1.25rem 3rem; } .page-hero .section__title { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; } /* Inline font-sizes auf Cards zurückschalten */ [style*="font-size:1.3rem"] { font-size: 1.05rem !important; } [style*="font-size:1.1rem"] { font-size: 1rem !important; } /* ── 3. Container / Layout ─────────────────────────────────── */ .container { padding-left: 1.1rem; padding-right: 1.1rem; } /* Sections etwas weniger Padding */ .section { padding: 3.5rem 1.1rem; } /* ── 4. Buttons ────────────────────────────────────────────── */ /* Button-Gruppen: volle Breite auf sehr kleinen Screens */ @media (max-width: 480px) { .btn { width: 100%; justify-content: center; } /* Flex-Container mit Buttons */ [style*="display:flex"][style*="gap:1rem"] { flex-direction: column !important; align-items: stretch !important; } } /* ── 5. Tabellen ───────────────────────────────────────────── */ table { font-size: 0.82rem; } table th, table td { padding: 0.6rem 0.75rem !important; white-space: normal !important; } /* Erste Spalte etwas breiter lassen */ table th:first-child, table td:first-child { font-size: 0.8rem; } /* Wrapper für horizontales Scrollen */ [style*="overflow-x:auto"], [style*="overflow-x: auto"] { -webkit-overflow-scrolling: touch; } /* ── 6. Trust Features (Card-Liste) ────────────────────────── */ .trust__feature { padding: 0.85rem 1rem !important; gap: 0.75rem; } .trust__feature-icon { width: 40px; height: 40px; min-width: 40px; } .trust__feature-title { font-size: 0.9rem; } .trust__feature-text { font-size: 0.82rem; } /* ── 7. Prozess-Schritte ────────────────────────────────────── */ .process__grid { grid-template-columns: 1fr; } .process__step { padding: 1.5rem 1.25rem; } /* ── 8. Büro-Seite & Bildgitter ──────────────────────────────── */ /* 6-Kachel Bildgitter → 2-spaltig */ [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: repeat(2, 1fr) !important; gap: 0.75rem !important; } /* Bildplatzhalter-Höhe auf Mobile */ [style*="height:420px"] { height: 220px !important; } [style*="height:280px"] { height: 180px !important; } [style*="height:200px"] { height: 150px !important; } [style*="height:160px"] { height: 130px !important; } [style*="height:140px"] { height: 120px !important; } /* ── 9. Statistik-Karten ────────────────────────────────────── */ .stat-row { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } .stat-row__number { font-size: 1.6rem; } /* ── 10. CTA-Section ────────────────────────────────────────── */ .cta-section { padding: 3.5rem 1.25rem; } .cta-section__title { font-size: clamp(1.4rem, 5vw, 2rem); } /* ── 11. Bewertungsformular ─────────────────────────────────── */ .form-card { padding: 1.5rem 1.25rem; } .form-row { grid-template-columns: 1fr; } /* ── 12. Preisrechner ───────────────────────────────────────── */ .calculator { padding: 1.5rem 1.25rem; } .calc__result { padding: 1rem; } /* ── 13. FAQ / Details ──────────────────────────────────────── */ details[style] { padding: 0 !important; } /* ── 14. Stadtseiten — spezifisch ──────────────────────────── */ /* Hero-Buttons nebeneinander auf Phones */ .page-hero [style*="display:flex"][style*="flex-wrap:wrap"] { gap: 0.75rem !important; } /* Stadtseite Info-Banner */ [style*="display:flex;gap:1rem;align-items:flex-start"] { flex-direction: column !important; gap: 0.5rem !important; } [style*="display:flex;gap:0.75rem;align-items:center;flex-wrap:wrap"] { flex-direction: column !important; align-items: flex-start !important; } /* ── 15. Showcase-Sektion ───────────────────────────────────── */ .showcase__item, .showcase__item--reverse { grid-template-columns: 1fr; gap: 1.5rem; } .showcase__item--reverse .showcase__img { order: 0; } .showcase__item--reverse .showcase__text { order: 0; } .showcase__text { padding: 0; } /* ── 16. Footer ─────────────────────────────────────────────── */ .footer { padding: 3rem 1.25rem 2rem; } .footer__grid { grid-template-columns: 1fr; gap: 2rem; } /* ── 17. Ankauf-Übersicht (ankauf.php) ──────────────────────── */ /* Preis-Box nach Kategoriegrid kommt jetzt unter dem Text */ /* 1fr 1fr mit gap:5rem wurde schon durch Regel 1 gefixt */ /* ── 18. WhatsApp-Banner ─────────────────────────────────────── */ .wa-cta-banner { padding: 3rem 1.25rem; } .wa-cta-banner__inner { grid-template-columns: 1fr; text-align: center; gap: 1.75rem; } .wa-cta-banner__btn { width: 100%; justify-content: center; white-space: normal; text-align: center; padding: 1rem 1.5rem; } .wa-cta-banner__steps { justify-content: center; } .wa-cta-banner__eyebrow { justify-content: center; } .wa-cta-banner__sub { margin: 0 auto; } /* ── 19. Testimonials ───────────────────────────────────────── */ .testimonials__grid { grid-template-columns: 1fr; } .testimonial-card { padding: 1.25rem; } /* ── 20. Badge-Reihen im Hero (ankauf.php Schnell-Nav) ─────── */ .page-hero .badge { font-size: 0.7rem; padding: 0.25rem 0.6rem; } } /* ── Noch kleinere Screens (≤ 400px) ── */ @media (max-width: 400px) { .section { padding: 3rem 1rem; } .page-hero { padding: 6rem 1rem 2.5rem; } .container { padding-left: 1rem; padding-right: 1rem; } /* Alle Buttons volle Breite */ .btn { width: 100%; justify-content: center; } /* Stat-Row: 1 Spalte auf sehr kleinen Phones */ .stat-row { grid-template-columns: 1fr; } /* 3er Bild-Grid → 1 Spalte */ [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns: repeat(3"] { grid-template-columns: 1fr !important; } /* section__title nochmals etwas kleiner */ .section__title { font-size: clamp(1.2rem, 7vw, 1.6rem) !important; } /* Tabellen noch kompakter */ table th, table td { padding: 0.5rem 0.6rem !important; font-size: 0.78rem !important; } }