wird hell - Außer .hero-section, .page-header, .cta-section (eigene Designs) - Index-Page: passt zur expliziten wp-care/about-section-Logik (beide Selektoren matchen, ergeben dasselbe Resultat) - Subseiten: ohne weiteres Markup bekommen sie automatisch den Rhythmus ============================================================ */ /* Helper: Wir definieren die "auto-light"-Bedingung mit einem CSS-Custom-Property, damit die Application-Rules unten kompakt bleiben. */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) { background: var(--band-tone) !important; background-image: none !important; color: var(--band-tone-text); border-top: 1px solid var(--band-tone-border); border-bottom: 1px solid var(--band-tone-border); } /* Pseudo-Overlays in auto-banded Sektionen abschalten */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header)::before, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header)::after { display: none !important; } /* Typografie: Headings + section-title + page-title */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) h1, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) h2, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) h3, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) h4, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) h5, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) h6, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .section-title, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .page-title, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .lead-title, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) blockquote { color: var(--band-tone-text); } /* Body-Text + Listen + Tabellen-Zellen */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) p, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) li, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) td, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) th, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .section-subtitle, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .lead, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) figcaption { color: var(--band-tone-text-secondary); } /* Section-Tags / Eyebrows: grüner Akzent */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .section-tag, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .eyebrow { color: var(--band-tone-primary); } /* Generische Cards: weiße Inseln. [class*="-card"] matched alle Klassen die "-card" enthalten (service-card, blog-card, contact-form-card, …). */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) [class*="-card"]:not([class*="card-icon"]):not([class*="card-title"]):not([class*="card-header"]):not([class*="card-value"]):not(.testimonial-quote) { background: #ffffff; border: 1px solid var(--band-tone-border); color: var(--band-tone-text); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--band-tone-shadow); } /* Strong / Em / Code in auto-banded */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) strong, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) b { color: var(--band-tone-text); } [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) em { color: var(--band-tone-text-secondary); } [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) code:not(pre code) { background: var(--band-tone-soft); color: var(--band-tone-text); border: 1px solid var(--band-tone-border); } /* Inline-Links innerhalb auto-banded Sections (Body-Text, nicht Buttons/Cards) */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) :is(p, li, blockquote, td, th) a:not(.btn-primary-custom):not(.btn-secondary-custom):not(.btn-outline-custom):not(.btn-cta) { color: var(--band-tone-primary); text-decoration-color: rgba(71, 95, 23, 0.45); } [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) :is(p, li, blockquote, td, th) a:not(.btn-primary-custom):not(.btn-secondary-custom):not(.btn-outline-custom):not(.btn-cta):hover { color: var(--band-tone-primary-hover); } /* Outline-Buttons in auto-banded Sections sichtbar machen */ [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-outline-custom { color: var(--band-tone-text); border-color: var(--band-tone-border-strong); background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; } [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-outline-custom:hover, [data-bs-theme="dark"] body.banded main > section:nth-of-type(even):not(.cta-section):not(.hero-section):not(.page-header) .btn-outline-custom:focus { color: var(--band-tone-primary); border-color: var(--band-tone-primary); background: #ffffff; } /* ============================================================ FORMS auf Banded-Seiten — Look wie im Light-Theme ============================================================ Kontakt + Projektplaner haben ihre Formulare in den Light-Bändern. Inputs müssen weiß sein mit dunkler Schrift, klar lesbarem Placeholder und sichtbarem Border. Reicht aus body.banded zu scopen, weil Formulare sowieso nur in Light-Bändern stehen. */ [data-bs-theme="dark"] body.banded .form-control, [data-bs-theme="dark"] body.banded .form-select, [data-bs-theme="dark"] body.banded textarea, [data-bs-theme="dark"] body.banded input[type="text"], [data-bs-theme="dark"] body.banded input[type="email"], [data-bs-theme="dark"] body.banded input[type="tel"], [data-bs-theme="dark"] body.banded input[type="url"], [data-bs-theme="dark"] body.banded input[type="number"], [data-bs-theme="dark"] body.banded input[type="search"], [data-bs-theme="dark"] body.banded select { background-color: #ffffff !important; background-image: none !important; color: var(--band-tone-text) !important; border: 1px solid var(--band-tone-border-strong) !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; } /* Select-Dropdown braucht den Chevron — Bootstrap setzt's per background-image. Wir setzen einen passenden dunklen Chevron. */ [data-bs-theme="dark"] body.banded .form-select, [data-bs-theme="dark"] body.banded select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231a1d22' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 1rem center !important; background-size: 16px 12px !important; padding-right: 2.5rem !important; appearance: none !important; -webkit-appearance: none !important; } /* Placeholder lesbar aber unterscheidbar von Eingabe */ [data-bs-theme="dark"] body.banded .form-control::placeholder, [data-bs-theme="dark"] body.banded textarea::placeholder, [data-bs-theme="dark"] body.banded input::placeholder { color: var(--band-tone-text-muted) !important; opacity: 1 !important; } /* Focus-Ring grün */ [data-bs-theme="dark"] body.banded .form-control:focus, [data-bs-theme="dark"] body.banded .form-select:focus, [data-bs-theme="dark"] body.banded textarea:focus, [data-bs-theme="dark"] body.banded input:focus, [data-bs-theme="dark"] body.banded select:focus { border-color: var(--band-tone-primary) !important; box-shadow: 0 0 0 4px rgba(71, 95, 23, 0.18) !important; outline: none !important; background-color: #ffffff !important; color: var(--band-tone-text) !important; } /* Labels dunkel */ [data-bs-theme="dark"] body.banded .form-label, [data-bs-theme="dark"] body.banded label, [data-bs-theme="dark"] body.banded legend { color: var(--band-tone-text) !important; } /* Form-Hilfetexte / muted Hints */ [data-bs-theme="dark"] body.banded .form-text, [data-bs-theme="dark"] body.banded .form-hint, [data-bs-theme="dark"] body.banded small { color: var(--band-tone-text-muted) !important; } /* Checkboxen/Radios sichtbar */ [data-bs-theme="dark"] body.banded input[type="checkbox"], [data-bs-theme="dark"] body.banded input[type="radio"] { accent-color: var(--band-tone-primary) !important; background-color: #ffffff !important; border-color: var(--band-tone-border-strong) !important; } /* Projektplaner-Spezifika: option-cards, checkbox-cards, step-indikatoren */ [data-bs-theme="dark"] body.banded .option-card, [data-bs-theme="dark"] body.banded .checkbox-card { background: #ffffff !important; border: 1px solid var(--band-tone-border-strong) !important; color: var(--band-tone-text) !important; box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06); } [data-bs-theme="dark"] body.banded .option-card:hover, [data-bs-theme="dark"] body.banded .checkbox-card:hover { border-color: var(--band-tone-primary) !important; box-shadow: var(--band-tone-shadow-md); } [data-bs-theme="dark"] body.banded .option-card.selected, [data-bs-theme="dark"] body.banded .checkbox-card.selected, [data-bs-theme="dark"] body.banded .option-card.active, [data-bs-theme="dark"] body.banded .checkbox-card.active { border-color: var(--band-tone-primary) !important; box-shadow: 0 0 0 2px var(--band-tone-primary), var(--band-tone-shadow-md) !important; } /* Required-Stern bleibt rot, aber lesbar auf hell */ [data-bs-theme="dark"] body.banded .required, [data-bs-theme="dark"] body.banded .form-required { color: #a82e40 !important; } /* ---------- Navbar opak halten bei Banded-Seiten ---------- Standard-Navbar ist im Dark-Theme rgba(15,15,20,0.85) mit blur(20px). Wenn dahinter eine helle Sektion durchläuft, blutet die Farbe ins Menü und es wirkt aufgehellt/warm. Bei body.banded auf opak setzen, damit der Menü-Look in jeder Scroll-Position identisch bleibt. */ [data-bs-theme="dark"] body.banded .navbar-custom, [data-bs-theme="dark"] body.banded.scrolled .navbar-custom { background: rgba(15, 15, 20, 0.99) !important; } /* Bei aufgeklapptem Mobile-Menü (Hamburger expanded) ebenfalls opak */ [data-bs-theme="dark"] body.banded .navbar-custom .navbar-collapse.show, [data-bs-theme="dark"] body.banded .navbar-custom .navbar-collapse.collapsing { background: rgba(15, 15, 20, 0.99); } /* Dropdown-Menüs zusätzlich abdichten, falls sie über Tone-Band stehen */ [data-bs-theme="dark"] body.banded .dropdown-menu { background: rgba(15, 15, 20, 0.99); }