/* CLAUDE: Dark Mode Styles */ /* CLAUDE: Aktiviert via data-theme="dark" auf oder System-Präferenz */ /* CLAUDE: Anpassen: Farben in base.css CSS Variables ändern */ /* ========================================================================== CLAUDE: System-Präferenz Dark Mode (automatisch) ========================================================================== */ @media (prefers-color-scheme: dark) { /* CLAUDE: Nur wenn kein manuelles Theme gesetzt ist */ html:not([data-theme="light"]) { color-scheme: dark; /* CLAUDE: Browser-natives Dark Mode */ } html:not([data-theme="light"]) body { background-color: var(--pvm-dark-bg); /* CLAUDE: Dunkler Hintergrund */ color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } } /* ========================================================================== CLAUDE: Manueller Dark Mode Toggle ========================================================================== */ html[data-theme="dark"] { color-scheme: dark; /* CLAUDE: Browser-natives Dark Mode */ } html[data-theme="dark"] body { background-color: var(--pvm-dark-bg); /* CLAUDE: Dunkler Hintergrund */ color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } /* ========================================================================== CLAUDE: Header Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] .pvm-site-header { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ border-bottom: 1px solid var(--pvm-dark-border); /* CLAUDE: Subtiler Border */ } html[data-theme="dark"] .pvm-site-header.is-scrolled { background-color: rgba(26, 26, 46, 0.95); /* CLAUDE: Halbtransparent */ backdrop-filter: blur(10px); /* CLAUDE: Blur-Effekt */ } /* CLAUDE: Logo im Dark Mode invertieren wenn nötig */ html[data-theme="dark"] .pvm-site-logo img { filter: brightness(0) invert(1); /* CLAUDE: Weißes Logo */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-site-header { background-color: var(--pvm-dark-surface); border-bottom: 1px solid var(--pvm-dark-border); } html:not([data-theme="light"]) .pvm-site-header.is-scrolled { background-color: rgba(26, 26, 46, 0.95); backdrop-filter: blur(10px); } html:not([data-theme="light"]) .pvm-site-logo img { filter: brightness(0) invert(1); } } /* ========================================================================== CLAUDE: Navigation Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] .pvm-nav__link { color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } html[data-theme="dark"] .pvm-nav__link:hover { color: var(--pvm-primary-light); /* CLAUDE: Helleres Primary */ } html[data-theme="dark"] .pvm-nav__dropdown { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ } html[data-theme="dark"] .pvm-nav__dropdown-link:hover { background-color: var(--pvm-dark-surface-hover); /* CLAUDE: Hover-Farbe */ } /* CLAUDE: Mobile Navigation */ html[data-theme="dark"] .pvm-mobile-menu { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ } html[data-theme="dark"] .pvm-mobile-menu__item { border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ } html[data-theme="dark"] .pvm-mobile-menu__link { color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } html[data-theme="dark"] .pvm-hamburger span { background-color: var(--pvm-dark-text); /* CLAUDE: Helle Linien */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-nav__link { color: var(--pvm-dark-text); } html:not([data-theme="light"]) .pvm-nav__link:hover { color: var(--pvm-primary-light); } html:not([data-theme="light"]) .pvm-nav__dropdown { background-color: var(--pvm-dark-surface); border-color: var(--pvm-dark-border); } html:not([data-theme="light"]) .pvm-nav__dropdown-link:hover { background-color: var(--pvm-dark-surface-hover); } /* CLAUDE: Mobile Navigation */ html:not([data-theme="light"]) .pvm-mobile-menu { background-color: var(--pvm-dark-surface); } html:not([data-theme="light"]) .pvm-mobile-menu__item { border-color: var(--pvm-dark-border); } html:not([data-theme="light"]) .pvm-mobile-menu__link { color: var(--pvm-dark-text); } html:not([data-theme="light"]) .pvm-hamburger span { background-color: var(--pvm-dark-text); } } /* ========================================================================== CLAUDE: Typography Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } /* CLAUDE: H2 behält Sekundärfarbe */ html[data-theme="dark"] h2 { color: var(--pvm-secondary-light); /* CLAUDE: Helleres Blau */ } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] span { color: var(--pvm-dark-text-muted); /* CLAUDE: Gedämpfter Text */ } html[data-theme="dark"] a:not(.pvm-btn):not(.pvm-nav__link) { color: var(--pvm-primary-light); /* CLAUDE: Helleres Primary */ } html[data-theme="dark"] a:not(.pvm-btn):not(.pvm-nav__link):hover { color: var(--pvm-primary); /* CLAUDE: Standard Primary */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) h1, html:not([data-theme="light"]) h2, html:not([data-theme="light"]) h3, html:not([data-theme="light"]) h4, html:not([data-theme="light"]) h5, html:not([data-theme="light"]) h6 { color: var(--pvm-dark-text); } /* CLAUDE: H2 behält Sekundärfarbe */ html:not([data-theme="light"]) h2 { color: var(--pvm-secondary-light); } html:not([data-theme="light"]) p, html:not([data-theme="light"]) li, html:not([data-theme="light"]) span { color: var(--pvm-dark-text-muted); } html:not([data-theme="light"]) a:not(.pvm-btn):not(.pvm-nav__link) { color: var(--pvm-primary-light); } html:not([data-theme="light"]) a:not(.pvm-btn):not(.pvm-nav__link):hover { color: var(--pvm-primary); } } /* ========================================================================== CLAUDE: Cards & Sections Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] .pvm-card, html[data-theme="dark"] .service-card, html[data-theme="dark"] .portfolio-card, html[data-theme="dark"] .benefits-card { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ border: 1px solid var(--pvm-dark-border); /* CLAUDE: Subtiler Border */ } html[data-theme="dark"] .pvm-card:hover, html[data-theme="dark"] .service-card:hover { background-color: var(--pvm-dark-surface-hover); /* CLAUDE: Hover-Farbe */ border-color: var(--pvm-primary); /* CLAUDE: Primary Border */ } /* CLAUDE: Section Hintergründe */ html[data-theme="dark"] .pvm-section--light, html[data-theme="dark"] .services-section, html[data-theme="dark"] section[style*="background"] { background-color: var(--pvm-dark-surface) !important; /* CLAUDE: Dunkle Oberfläche */ } /* CLAUDE: Gradient Sections behalten Gradient */ html[data-theme="dark"] .aktuelles, html[data-theme="dark"] .pvm-section--gradient { background: var(--pvm-gradient); /* CLAUDE: Gradient bleibt */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-card, html:not([data-theme="light"]) .service-card, html:not([data-theme="light"]) .portfolio-card, html:not([data-theme="light"]) .benefits-card { background-color: var(--pvm-dark-surface); border: 1px solid var(--pvm-dark-border); } html:not([data-theme="light"]) .pvm-card:hover, html:not([data-theme="light"]) .service-card:hover { background-color: var(--pvm-dark-surface-hover); border-color: var(--pvm-primary); } /* CLAUDE: Section Hintergründe */ html:not([data-theme="light"]) .pvm-section--light, html:not([data-theme="light"]) .services-section, html:not([data-theme="light"]) section[style*="background"] { background-color: var(--pvm-dark-surface) !important; } /* CLAUDE: Gradient Sections behalten Gradient */ html:not([data-theme="light"]) .aktuelles, html:not([data-theme="light"]) .pvm-section--gradient { background: var(--pvm-gradient); } } /* ========================================================================== CLAUDE: Partner-Sektion Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ /* CLAUDE: Sektion Hintergrund */ html[data-theme="dark"] .pvm-partner-teaser { background: linear-gradient(180deg, var(--pvm-dark-bg) 0%, var(--pvm-dark-surface) 100%); } /* CLAUDE: Subtitle */ html[data-theme="dark"] .pvm-partner-subtitle { color: var(--pvm-dark-text-muted); /* CLAUDE: Gedämpfter Text */ } /* CLAUDE: Partner-Card */ html[data-theme="dark"] .pvm-partner-card { background: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ } /* CLAUDE: Card Hover */ html[data-theme="dark"] .pvm-partner-card:hover { background: var(--pvm-dark-surface-hover); /* CLAUDE: Hover-Hintergrund */ border-color: rgba(140, 10, 183, 0.3); /* CLAUDE: Primary Border */ box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); /* CLAUDE: Stärkerer Schatten */ } /* CLAUDE: Logo im Dark Mode - heller Filter */ html[data-theme="dark"] .pvm-partner-card__logo img { filter: grayscale(100%) brightness(1.5); /* CLAUDE: Aufgehellt */ opacity: 0.5; /* CLAUDE: Etwas transparenter */ } /* CLAUDE: Logo Hover */ html[data-theme="dark"] .pvm-partner-card:hover .pvm-partner-card__logo img { filter: grayscale(0%) brightness(1); /* CLAUDE: Normale Helligkeit */ opacity: 1; /* CLAUDE: Volle Sichtbarkeit */ } /* CLAUDE: Name */ html[data-theme="dark"] .pvm-partner-card__name { color: var(--pvm-primary-light); /* CLAUDE: Helleres Primary */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-partner-teaser { background: linear-gradient(180deg, var(--pvm-dark-bg) 0%, var(--pvm-dark-surface) 100%); } html:not([data-theme="light"]) .pvm-partner-subtitle { color: var(--pvm-dark-text-muted); } html:not([data-theme="light"]) .pvm-partner-card { background: var(--pvm-dark-surface); border-color: var(--pvm-dark-border); } html:not([data-theme="light"]) .pvm-partner-card:hover { background: var(--pvm-dark-surface-hover); border-color: rgba(140, 10, 183, 0.3); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } html:not([data-theme="light"]) .pvm-partner-card__logo img { filter: grayscale(100%) brightness(1.5); opacity: 0.5; } html:not([data-theme="light"]) .pvm-partner-card:hover .pvm-partner-card__logo img { filter: grayscale(0%) brightness(1); opacity: 1; } html:not([data-theme="light"]) .pvm-partner-card__name { color: var(--pvm-primary-light); } } /* ========================================================================== CLAUDE: Forms Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] input, html[data-theme="dark"] textarea, html[data-theme="dark"] select { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } html[data-theme="dark"] input:focus, html[data-theme="dark"] textarea:focus, html[data-theme="dark"] select:focus { border-color: var(--pvm-primary); /* CLAUDE: Primary Border */ outline: none; box-shadow: 0 0 0 3px rgba(140, 10, 183, 0.2); /* CLAUDE: Focus Ring */ } html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: var(--pvm-dark-text-muted); /* CLAUDE: Gedämpfter Placeholder */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) input, html:not([data-theme="light"]) textarea, html:not([data-theme="light"]) select { background-color: var(--pvm-dark-surface); border-color: var(--pvm-dark-border); color: var(--pvm-dark-text); } html:not([data-theme="light"]) input:focus, html:not([data-theme="light"]) textarea:focus, html:not([data-theme="light"]) select:focus { border-color: var(--pvm-primary); outline: none; box-shadow: 0 0 0 3px rgba(140, 10, 183, 0.2); } html:not([data-theme="light"]) input::placeholder, html:not([data-theme="light"]) textarea::placeholder { color: var(--pvm-dark-text-muted); } } /* ========================================================================== CLAUDE: Buttons Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ /* CLAUDE: Primary Button bleibt gleich (Gradient sichtbar) */ html[data-theme="dark"] .pvm-btn--primary { background-color: var(--pvm-primary); /* CLAUDE: Primary Farbe */ color: #ffffff; /* CLAUDE: Weißer Text */ } /* CLAUDE: Outline Button */ html[data-theme="dark"] .pvm-btn--outline { border-color: var(--pvm-primary-light); /* CLAUDE: Hellerer Border */ color: var(--pvm-primary-light); /* CLAUDE: Hellerer Text */ } html[data-theme="dark"] .pvm-btn--outline:hover { background-color: var(--pvm-primary); /* CLAUDE: Primary Hintergrund */ color: #ffffff; /* CLAUDE: Weißer Text */ } /* CLAUDE: Ghost Button */ html[data-theme="dark"] .pvm-btn--ghost { color: var(--pvm-dark-text); /* CLAUDE: Heller Text */ } html[data-theme="dark"] .pvm-btn--ghost:hover { background-color: var(--pvm-dark-surface-hover); /* CLAUDE: Hover-Hintergrund */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-btn--primary { background-color: var(--pvm-primary); color: #ffffff; } html:not([data-theme="light"]) .pvm-btn--outline { border-color: var(--pvm-primary-light); color: var(--pvm-primary-light); } html:not([data-theme="light"]) .pvm-btn--outline:hover { background-color: var(--pvm-primary); color: #ffffff; } html:not([data-theme="light"]) .pvm-btn--ghost { color: var(--pvm-dark-text); } html:not([data-theme="light"]) .pvm-btn--ghost:hover { background-color: var(--pvm-dark-surface-hover); } } /* ========================================================================== CLAUDE: Footer Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ /* CLAUDE: Footer mit Gradient bleibt, nur leichte Anpassungen */ html[data-theme="dark"] .pvm-footer { background: var(--pvm-gradient); /* CLAUDE: Gradient bleibt */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-footer { background: var(--pvm-gradient); } } /* ========================================================================== CLAUDE: Utilities Dark Mode CLAUDE: Dual-Selector Pattern ========================================================================== */ /* CLAUDE: Manueller Toggle */ html[data-theme="dark"] .pvm-bg-light { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ } html[data-theme="dark"] .pvm-border { border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ } html[data-theme="dark"] hr { border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ } html[data-theme="dark"] code, html[data-theme="dark"] pre { background-color: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ color: var(--pvm-primary-light); /* CLAUDE: Helleres Primary */ } /* CLAUDE: System-Präferenz - Fallback */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-bg-light { background-color: var(--pvm-dark-surface); } html:not([data-theme="light"]) .pvm-border { border-color: var(--pvm-dark-border); } html:not([data-theme="light"]) hr { border-color: var(--pvm-dark-border); } html:not([data-theme="light"]) code, html:not([data-theme="light"]) pre { background-color: var(--pvm-dark-surface); color: var(--pvm-primary-light); } } /* ========================================================================== CLAUDE: Theme Toggle Button ========================================================================== */ .pvm-theme-toggle { position: relative; /* CLAUDE: Für absolute Icons */ display: flex; /* CLAUDE: Flexbox */ align-items: center; /* CLAUDE: Vertikal zentriert */ justify-content: center; /* CLAUDE: Horizontal zentriert */ width: 40px; /* CLAUDE: Breite */ height: 40px; /* CLAUDE: Höhe */ background: transparent; /* CLAUDE: Transparent */ border: 1px solid var(--pvm-border); /* CLAUDE: Border */ border-radius: var(--pvm-radius-full); /* CLAUDE: Rund */ cursor: pointer; /* CLAUDE: Pointer */ transition: background var(--pvm-transition-fast), border-color var(--pvm-transition-fast); /* CLAUDE: Transitions */ margin-left: 16px; /* CLAUDE: Abstand zum Kontakt-Button | Visueller Abstand | Wert: 12-24px */ margin-right: var(--pvm-space-sm); /* CLAUDE: Abstand */ } .pvm-theme-toggle:hover { background: var(--pvm-bg-light); /* CLAUDE: Hover Hintergrund */ border-color: var(--pvm-primary); /* CLAUDE: Primary Border */ } .pvm-theme-toggle:focus { outline: 2px solid var(--pvm-primary); /* CLAUDE: Focus Ring */ outline-offset: 2px; /* CLAUDE: Abstand */ } /* CLAUDE: Sun Icon (Light Mode Indicator) */ .pvm-theme-toggle__sun, .pvm-theme-toggle__moon { color: var(--pvm-text); /* CLAUDE: Text Farbe */ transition: opacity var(--pvm-transition-fast), transform var(--pvm-transition-fast); /* CLAUDE: Transitions */ } .pvm-theme-toggle__moon { position: absolute; /* CLAUDE: Überlagert */ opacity: 0; /* CLAUDE: Versteckt */ transform: rotate(-90deg); /* CLAUDE: Rotiert */ } /* CLAUDE: Manueller Toggle - Icons tauschen */ html[data-theme="dark"] .pvm-theme-toggle__sun { opacity: 0; /* CLAUDE: Sun verstecken */ transform: rotate(90deg); /* CLAUDE: Rotieren */ } html[data-theme="dark"] .pvm-theme-toggle__moon { opacity: 1; /* CLAUDE: Moon zeigen */ transform: rotate(0); /* CLAUDE: Nicht rotiert */ color: var(--pvm-dark-text); /* CLAUDE: Helle Farbe */ } /* CLAUDE: Dark Mode Button Styling */ html[data-theme="dark"] .pvm-theme-toggle { background: var(--pvm-dark-surface); /* CLAUDE: Dunkle Oberfläche */ border-color: var(--pvm-dark-border); /* CLAUDE: Dunkler Border */ } html[data-theme="dark"] .pvm-theme-toggle:hover { background: var(--pvm-dark-surface-hover); /* CLAUDE: Hover */ border-color: var(--pvm-primary); /* CLAUDE: Primary Border */ } /* CLAUDE: System-Präferenz - Fallback für Theme Toggle */ @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .pvm-theme-toggle__sun { opacity: 0; transform: rotate(90deg); } html:not([data-theme="light"]) .pvm-theme-toggle__moon { opacity: 1; transform: rotate(0); color: var(--pvm-dark-text); } html:not([data-theme="light"]) .pvm-theme-toggle { background: var(--pvm-dark-surface); border-color: var(--pvm-dark-border); } html:not([data-theme="light"]) .pvm-theme-toggle:hover { background: var(--pvm-dark-surface-hover); border-color: var(--pvm-primary); } } /* ========================================================================== CLAUDE: Responsive Dark Mode ========================================================================== */ @media (max-width: 768px) { .pvm-theme-toggle { width: 36px; /* CLAUDE: Kleiner auf Mobile */ height: 36px; /* CLAUDE: Kleiner auf Mobile */ } } /* ========================================================================== CLAUDE: Print - Dark Mode ignorieren ========================================================================== */ @media print { html[data-theme="dark"] body { background: white !important; /* CLAUDE: Weißer Hintergrund */ color: black !important; /* CLAUDE: Schwarzer Text */ } }