/* Glanzvoll — White Mode (aktiviert via html.white-mode) */

html.white-mode {
  color-scheme: light;
}

/* ─── Desktop: Navigation ─── */
html.white-mode .nav.scrolled {
  background: rgba(248, 249, 251, 0.92);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 24px rgba(15, 31, 61, 0.06);
}

html.white-mode .nav-links {
  background: transparent;
  box-shadow: none;
}

html.white-mode .nav-links a {
  color: rgba(44, 62, 80, 0.85);
}

html.white-mode .nav-links a:hover {
  color: var(--gold);
}

html.white-mode .nav-toggle span {
  background: var(--navy);
}

html.white-mode .nav-overlay {
  background: rgba(15, 31, 61, 0.25);
}

@media (max-width: 768px) {
  html.white-mode .nav-links {
    background: var(--off-white);
    border-left-color: rgba(15, 31, 61, 0.08);
    box-shadow: -12px 0 40px rgba(15, 31, 61, 0.1);
  }

  html.white-mode .nav-links a {
    border-bottom-color: rgba(15, 31, 61, 0.06);
  }
}

/* ─── Desktop: Hero ─── */
html.white-mode .hero,
html.white-mode .hero-bg {
  background:
    radial-gradient(ellipse at 15% 80%, rgba(201, 168, 76, 0.12) 0%, transparent 45%),
    linear-gradient(155deg, #f8f9fb 0%, #ffffff 40%, #eef1f6 100%);
}

html.white-mode .hero-glow--2 {
  background: rgba(201, 168, 76, 0.08);
}

html.white-mode .hero-eyebrow {
  color: rgba(44, 62, 80, 0.5);
}

html.white-mode .hero h1 {
  color: var(--navy);
}

html.white-mode .hero-sub {
  color: var(--text-muted);
}

html.white-mode .btn-outline {
  color: var(--navy);
  border-color: rgba(15, 31, 61, 0.2);
}

html.white-mode .btn-outline:hover {
  color: var(--gold);
  border-color: var(--gold);
}

/* ─── Desktop: Vorteile / USP-Kreise ─── */
html.white-mode .usp-icon {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-deep);
  box-shadow: 0 8px 22px rgba(201, 168, 76, 0.28);
}

html.white-mode .usp-item:hover .usp-icon {
  box-shadow: 0 12px 28px rgba(201, 168, 76, 0.38);
}

html.white-mode .hero-scroll {
  color: rgba(44, 62, 80, 0.45);
}

/* ─── Desktop: Kontakt & Footer ─── */
html.white-mode .contact,
html.white-mode .footer {
  background: #f8f9fb;
  color: var(--text);
}

html.white-mode .contact-info > p {
  color: var(--text-muted);
}

html.white-mode .contact-item a,
html.white-mode .contact-item span {
  color: var(--text);
}

html.white-mode .contact-form {
  background: #ffffff;
  border-color: rgba(15, 31, 61, 0.08);
  box-shadow: var(--shadow);
}

html.white-mode .contact-form .input-group label {
  color: var(--text-muted);
}

html.white-mode .contact-form .input-group input,
html.white-mode .contact-form .input-group textarea {
  color: var(--text);
  background: var(--off-white);
  border-color: rgba(15, 31, 61, 0.12);
}

html.white-mode .footer-brand-name {
  color: var(--navy);
}

html.white-mode .footer p {
  color: var(--text-muted);
}

html.white-mode .footer-logout {
  border-color: rgba(15, 31, 61, 0.15);
  color: var(--text-muted);
}

/* ─── Mobile: Basis ─── */
html.white-mode {
  background: #f8f9fb;
}

html.white-mode body.m-page {
  background: #f8f9fb;
  color: var(--text);
}

html.white-mode body.m-page::before,
html.white-mode body.m-page::after {
  background: #f8f9fb;
}

html.white-mode .m-header.is-scrolled {
  background: rgba(248, 249, 251, 0.94);
  border-bottom-color: rgba(15, 31, 61, 0.08);
  box-shadow: 0 10px 28px rgba(15, 31, 61, 0.06);
}

html.white-mode .m-brand {
  color: var(--navy);
}

html.white-mode .m-menu-btn span {
  background: rgba(15, 31, 61, 0.65);
}

html.white-mode .m-menu {
  background: #ffffff;
  border-left-color: rgba(15, 31, 61, 0.08);
}

html.white-mode .m-menu-label {
  color: var(--text-muted);
}

html.white-mode .m-menu-close {
  color: var(--text-muted);
}

html.white-mode .m-menu-link {
  color: var(--text);
  border-bottom-color: rgba(15, 31, 61, 0.06);
}

html.white-mode .m-hero::after {
  background: linear-gradient(180deg, transparent 0%, #f8f9fb 100%);
}

html.white-mode .m-hero-badge {
  background: rgba(15, 31, 61, 0.04);
  border-color: rgba(15, 31, 61, 0.08);
}

html.white-mode .m-hero-tag {
  color: var(--text-muted);
}

html.white-mode .m-hero-title {
  color: var(--navy);
}

html.white-mode .m-hero-sub {
  color: var(--text-muted);
}

html.white-mode .m-quick-btn--outline {
  color: var(--text);
  border-color: rgba(15, 31, 61, 0.15);
}

html.white-mode .m-section {
  border-top-color: rgba(15, 31, 61, 0.06);
}

html.white-mode .m-section h2 {
  color: var(--navy);
}

html.white-mode .m-service-card {
  background: #ffffff;
  border-color: rgba(15, 31, 61, 0.08);
  color: var(--text);
  box-shadow: 0 2px 12px rgba(15, 31, 61, 0.04);
}

html.white-mode .m-service-card:active {
  background: var(--off-white);
}

html.white-mode .m-service-card-title {
  color: var(--navy);
}

html.white-mode .m-service-card-teaser {
  color: var(--text-muted);
}

html.white-mode .m-service-card-arrow {
  border-color: rgba(15, 31, 61, 0.25);
}

html.white-mode .m-usp-scroll-wrap::after {
  background: linear-gradient(to right, transparent, #f8f9fb);
}

html.white-mode .m-usp-icon {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: var(--navy-deep);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(201, 168, 76, 0.28);
}

html.white-mode .m-usp-card h4 {
  color: var(--navy);
}

html.white-mode .m-usp-card p {
  color: var(--text-muted);
}

html.white-mode .m-back-link {
  color: var(--text-muted);
}

html.white-mode .m-detail h1 {
  color: var(--navy);
}

html.white-mode .m-detail-text {
  color: var(--text-muted);
}

html.white-mode .m-detail-points li {
  color: var(--text);
}

html.white-mode .m-section--form {
  border-top-color: rgba(15, 31, 61, 0.06);
}

html.white-mode .m-service-open-btn {
  background: linear-gradient(135deg, #ffffff 0%, rgba(201, 168, 76, 0.06) 100%);
  border-color: rgba(15, 31, 61, 0.1);
}

html.white-mode .m-service-open-btn-label {
  color: var(--text-muted);
}

html.white-mode .m-service-open-btn-hint {
  color: var(--text);
}

html.white-mode .m-service-open-btn-arrow {
  color: var(--text-muted);
}

html.white-mode .m-service-modal-sheet {
  background: #ffffff;
  border-top-color: rgba(15, 31, 61, 0.08);
  box-shadow: 0 -16px 48px rgba(15, 31, 61, 0.12);
}

html.white-mode .m-service-modal-handle {
  background: rgba(15, 31, 61, 0.12);
}

html.white-mode .m-service-modal-header h4 {
  color: var(--navy);
}

html.white-mode .m-service-modal-close {
  color: var(--text-muted);
  background: rgba(15, 31, 61, 0.05);
}

html.white-mode .m-service-modal-desc {
  color: var(--text-muted);
}

html.white-mode .m-service-pick-chip {
  color: var(--text);
  background: var(--off-white);
  border-color: rgba(15, 31, 61, 0.08);
}

html.white-mode .m-service-pick-icon {
  color: var(--text-muted);
}

html.white-mode .m-contact-title {
  color: var(--navy);
}

html.white-mode .m-contact-intro {
  color: var(--text-muted);
}

html.white-mode .m-contact-tile {
  background: #ffffff;
  border-color: rgba(15, 31, 61, 0.08);
  color: var(--text);
  box-shadow: 0 2px 12px rgba(15, 31, 61, 0.04);
}

html.white-mode .m-contact-tile-label {
  color: var(--text-muted);
}

html.white-mode .m-contact-tile-value {
  color: var(--navy);
}

html.white-mode .m-contact-form h3 {
  color: var(--navy);
}

html.white-mode .m-contact-form .input-group label {
  color: var(--text-muted);
}

html.white-mode .m-contact-form .input-group input,
html.white-mode .m-contact-form .input-group textarea {
  color: var(--text);
  background: #ffffff;
  border-color: rgba(15, 31, 61, 0.12);
}

html.white-mode .m-footer {
  border-top-color: rgba(15, 31, 61, 0.06);
}

html.white-mode .m-footer-brand {
  color: var(--navy);
}

html.white-mode .m-footer-sub,
html.white-mode .m-footer p,
html.white-mode .m-footer-logout,
html.white-mode .version-switch {
  color: var(--text-muted);
}

/* ─── Wartungsmodus / Login ─── */
html.white-mode #maintenance {
  background: #f8f9fb;
}

html.white-mode .maintenance-bg {
  background:
    radial-gradient(ellipse at 70% 30%, rgba(201, 168, 76, 0.14) 0%, transparent 55%),
    linear-gradient(145deg, #f8f9fb 0%, #ffffff 45%, #eef1f6 100%);
}

html.white-mode .maintenance-card {
  background: rgba(255, 255, 255, 0.92);
  border-color: rgba(201, 168, 76, 0.3);
  box-shadow: var(--shadow-lg);
}

html.white-mode .maintenance-card h1 {
  color: var(--navy);
}

html.white-mode .maintenance-card p {
  color: var(--text-muted);
}

html.white-mode .input-group label {
  color: var(--text-muted);
}

html.white-mode .input-group input,
html.white-mode .input-group textarea {
  color: var(--text);
  background: var(--off-white);
  border-color: rgba(15, 31, 61, 0.12);
}

html.white-mode .input-group input::placeholder,
html.white-mode .input-group textarea::placeholder {
  color: rgba(44, 62, 80, 0.35);
}

html.white-mode #maintenance .version-switch {
  color: var(--text-muted);
}