/* ─────────────────────────────────────────────
   GLANZWERK - Helles Farbschema
   Greift nur, wenn <html data-theme="light"> gesetzt ist.
   Ohne dieses Attribut bleibt die Seite unverändert dunkel.
   Werte aus dem Style Guide 1.0 (farben_hell).
   ───────────────────────────────────────────── */

html[data-theme="light"] {
  color-scheme: light;
  --lt-bg: #ffffff;
  --lt-page: #f9fafb;
  --lt-text: #111827;
  --lt-text-2: #4b5563;
  --lt-muted: #6b7280;
  --lt-border: #e5e7eb;
  --lt-accent: #dc2626;
  --lt-accent-hover: #b91c1c;
  --lt-accent-ink: #b91c1c;
  --lt-accent-soft: #fee2e2;
}

/* ── Flächen ── */
html[data-theme="light"] body,
html[data-theme="light"] .bg-gw-black { background-color: var(--lt-bg); color: var(--lt-text); }
html[data-theme="light"] .bg-gw-dark  { background-color: var(--lt-page); }
html[data-theme="light"] .bg-gw-card  { background-color: var(--lt-bg); box-shadow: 0 1px 3px rgba(17,24,39,.06), 0 4px 12px rgba(17,24,39,.04); }
html[data-theme="light"] .border-gw-border,
html[data-theme="light"] .border-white\/10 { border-color: var(--lt-border); }
html[data-theme="light"] .bg-white\/5,
html[data-theme="light"] .bg-white\/20,
html[data-theme="light"] .bg-white\/15 { background-color: rgba(17,24,39,.045); }
html[data-theme="light"] .border-y,
html[data-theme="light"] .border-t,
html[data-theme="light"] .border-b { border-color: var(--lt-border); }

/* ── Text ── */
html[data-theme="light"] .text-white,
html[data-theme="light"] .hover\:text-white:hover { color: var(--lt-text); }
html[data-theme="light"] .text-white\/80 { color: rgba(17,24,39,.8); }
html[data-theme="light"] .text-white\/70 { color: rgba(17,24,39,.7); }
html[data-theme="light"] .text-white\/60 { color: rgba(17,24,39,.6); }
html[data-theme="light"] .text-gray-200,
html[data-theme="light"] .text-gray-300 { color: var(--lt-text-2); }
html[data-theme="light"] .text-gray-400,
html[data-theme="light"] .text-gray-500 { color: var(--lt-muted); }
html[data-theme="light"] .text-gw-red,
html[data-theme="light"] .hover\:text-gw-red:hover,
html[data-theme="light"] .section-label span { color: var(--lt-accent-ink); }
html[data-theme="light"] .text-green-400 { color: #15803d; }
html[data-theme="light"] .text-red-400 { color: #b91c1c; }
html[data-theme="light"] .check-item { color: var(--lt-text-2); }
html[data-theme="light"] .check-icon { color: var(--lt-accent-ink); }
html[data-theme="light"] .placeholder-gray-600::placeholder,
html[data-theme="light"] .form-input::placeholder { color: #9ca3af; }
html[data-theme="light"] ::-webkit-scrollbar-track { background: var(--lt-page); }

/* Weißer Text bleibt weiß auf roten Flächen und Abzeichen */
html[data-theme="light"] .btn-red,
html[data-theme="light"] .btn-red *,
html[data-theme="light"] .btn-submit,
html[data-theme="light"] .badge-recommended,
html[data-theme="light"] .bg-gw-red,
html[data-theme="light"] .bg-gw-red .text-white { color: #fff; }

/* ── Navigation ── */
html[data-theme="light"] #header.scrolled {
  background: rgba(255,255,255,.92);
  border-color: var(--lt-border);
}
html[data-theme="light"] .nav-link { color: var(--lt-muted); }
html[data-theme="light"] .nav-link:hover { color: var(--lt-text); }
html[data-theme="light"] #menu-btn span { background-color: var(--lt-text); }
html[data-theme="light"] #mobile-menu { background: rgba(255,255,255,.98); }
html[data-theme="light"] #mobile-menu a { color: var(--lt-text); }
html[data-theme="light"] #mobile-menu a:hover { color: var(--lt-accent-ink); }
html[data-theme="light"] #menu-close { color: var(--lt-muted); }

/* ── Hero ── */
html[data-theme="light"] .hero-overlay {
  background: linear-gradient(
    105deg,
    rgba(255,255,255,.97) 0%,
    rgba(255,255,255,.9) 40%,
    rgba(255,255,255,.65) 75%,
    rgba(255,255,255,.5) 100%
  );
}
html[data-theme="light"] .hero-car-logo { opacity: .05; }
@media (max-width: 768px) {
  html[data-theme="light"] .hero-overlay { background: rgba(255,255,255,.88); }
}

/* ── Buttons ── */
html[data-theme="light"] .btn-outline {
  border-color: rgba(17,24,39,.25);
  color: var(--lt-text);
}
html[data-theme="light"] .btn-outline:hover {
  border-color: rgba(17,24,39,.6);
  background: rgba(17,24,39,.04);
}
html[data-theme="light"] .btn-red:hover { box-shadow: 0 0 20px rgba(220,38,38,.3); }

/* ── Karten ── */
html[data-theme="light"] .service-card:hover { box-shadow: 0 20px 40px rgba(17,24,39,.12); }
html[data-theme="light"] .service-card.featured { box-shadow: 0 0 0 1px #dc2626, 0 20px 60px rgba(220,38,38,.1); }
html[data-theme="light"] .service-card::before {
  background: linear-gradient(120deg, transparent 0%, rgba(17,24,39,.03) 50%, transparent 100%);
}
html[data-theme="light"] .partner-card { background: var(--lt-bg); border-color: var(--lt-border); }
html[data-theme="light"] .partner-tag { color: var(--lt-accent-ink); background: var(--lt-accent-soft); border-color: rgba(220,38,38,.25); }
html[data-theme="light"] .usp-icon-wrap { background: var(--lt-accent-soft); border-color: rgba(220,38,38,.25); }
html[data-theme="light"] .stat-number { color: var(--lt-accent); }
html[data-theme="light"] .callout-box {
  background: linear-gradient(135deg, rgba(220,38,38,.07) 0%, rgba(220,38,38,.02) 100%);
  border-color: rgba(220,38,38,.25);
}

/* ── Formulare ── */
html[data-theme="light"] .form-input {
  background: var(--lt-bg);
  border-color: #d1d5db;
  color: var(--lt-text);
}
html[data-theme="light"] .form-input:focus {
  border-color: var(--lt-accent);
  box-shadow: 0 0 0 3px rgba(220,38,38,.12);
}
html[data-theme="light"] .form-label { color: var(--lt-text-2); }
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea { color-scheme: light; }

/* ── Buchungsseite ── */
html[data-theme="light"] .step-dot { background: var(--lt-bg); border-color: #d1d5db; color: var(--lt-muted); }
html[data-theme="light"] .step-dot.done { background: var(--lt-accent); border-color: var(--lt-accent); color: #fff; }
html[data-theme="light"] .step-dot.active { background: var(--lt-accent-soft); border-color: var(--lt-accent); color: var(--lt-accent-ink); }
html[data-theme="light"] .step-line { background: #d1d5db; }
html[data-theme="light"] .step-line.done { background: var(--lt-accent); }
html[data-theme="light"] .vc-sugg-box { background: var(--lt-bg); border-color: #d1d5db; box-shadow: 0 8px 20px rgba(17,24,39,.1); }
html[data-theme="light"] .vc-sugg-item { color: var(--lt-text-2); }
html[data-theme="light"] .vc-sugg-item:hover { background: var(--lt-accent-soft); color: var(--lt-text); }
html[data-theme="light"] .cat-result { background: var(--lt-accent-soft); }

/* ── Fotos mit Text darauf bleiben dunkel unterlegt ── */
html[data-theme="light"] .on-photo,
html[data-theme="light"] .on-photo .text-white { color: #fff; }
html[data-theme="light"] .on-photo .text-gray-300,
html[data-theme="light"] .on-photo .text-gray-400 { color: #d1d5db; }
html[data-theme="light"] .on-photo .text-gw-red { color: #f87171; }

/* Verlauf am Rand des Firmenkunden-Fotos an die helle Karte angleichen */
html[data-theme="light"] .from-gw-card {
  --tw-gradient-from: #ffffff var(--tw-gradient-from-position);
  --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
}

/* Rotes Aktionsbanner: Text und Flächen bleiben weiß */
html[data-theme="light"] .on-red .text-white { color: #fff; }
html[data-theme="light"] .on-red .text-white\/80 { color: rgba(255,255,255,.8); }
html[data-theme="light"] .on-red .text-white\/70 { color: rgba(255,255,255,.7); }
html[data-theme="light"] .on-red .text-white\/60 { color: rgba(255,255,255,.6); }
html[data-theme="light"] .on-red .bg-white\/15 { background-color: rgba(255,255,255,.15); }
html[data-theme="light"] .on-red .bg-white\/20 { background-color: rgba(255,255,255,.2); }
html[data-theme="light"] .on-red .hover\:bg-white\/30:hover { background-color: rgba(255,255,255,.3); }
html[data-theme="light"] .on-red .text-gw-red { color: var(--lt-accent-ink); }

/* ── Buchungsseite: Auswahlkarten, Kalender, Zeitfenster, Zusammenfassung ── */
html[data-theme="light"] .pkg-card { background: var(--lt-bg); border-color: var(--lt-border); }
html[data-theme="light"] .pkg-card:hover { border-color: rgba(220,38,38,.5); }
html[data-theme="light"] .pkg-card.selected { border-color: var(--lt-accent); background: #fff5f5; }
html[data-theme="light"] .pkg-radio { border-color: #9ca3af; }
html[data-theme="light"] .pkg-radio.checked { border-color: var(--lt-accent); }
html[data-theme="light"] .svc-chip { background: var(--lt-bg); border-color: var(--lt-border); color: var(--lt-text-2); }
html[data-theme="light"] .svc-chip.selected,
html[data-theme="light"] .svc-conf-row.selected { background: #fff5f5; border-color: var(--lt-accent); }
html[data-theme="light"] .svc-conf-row { background: var(--lt-bg); border-color: var(--lt-border); }
html[data-theme="light"] .mode-tab { color: var(--lt-muted); }
html[data-theme="light"] .mode-tab.active { color: #fff; }
html[data-theme="light"] .mode-tab:not(.active):hover { color: var(--lt-text); }
html[data-theme="light"] .cal-day { background: var(--lt-page); color: var(--lt-text-2); }
html[data-theme="light"] .cal-day:hover:not(:disabled) { background: var(--lt-accent-soft); color: var(--lt-text); }
html[data-theme="light"] .cal-day:disabled { background: transparent; color: #d1d5db; }
html[data-theme="light"] .cal-day.cal-selected { background: var(--lt-accent); color: #fff; }
html[data-theme="light"] .cal-day.cal-unavail:not(.cal-selected) { color: #9ca3af; }
html[data-theme="light"] .cal-day.cal-unavail:not(.cal-selected):hover { background: rgba(17,24,39,.05); color: var(--lt-muted); }
html[data-theme="light"] .time-slot { background: var(--lt-bg); border-color: var(--lt-border); color: var(--lt-text-2); }
html[data-theme="light"] .time-slot:hover { color: var(--lt-text); }
html[data-theme="light"] .time-slot.selected { background: var(--lt-accent-soft); color: var(--lt-text); }
html[data-theme="light"] .sum-row { border-bottom-color: var(--lt-border); }
html[data-theme="light"] .sum-label { color: var(--lt-muted); }
html[data-theme="light"] .sum-val { color: var(--lt-text); }
html[data-theme="light"] .btn-back { border-color: #d1d5db; color: var(--lt-muted); }
html[data-theme="light"] .btn-back:hover { border-color: #9ca3af; color: var(--lt-text); }
html[data-theme="light"] .btn-next:disabled { background: #e5e7eb; color: #9ca3af; }
html[data-theme="light"] .form-field { background: var(--lt-bg); border-color: #d1d5db; color: var(--lt-text); }
html[data-theme="light"] .form-field:focus { border-color: var(--lt-accent); box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
html[data-theme="light"] .form-field::placeholder { color: #9ca3af; }
html[data-theme="light"] .err-box { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
html[data-theme="light"] .loading-box { color: var(--lt-muted); }
html[data-theme="light"] .section-divider { border-top-color: var(--lt-border); }
html[data-theme="light"] .spin { border-color: rgba(17,24,39,.2); border-top-color: var(--lt-accent); }

/* ── Rechtstexte (AGB, Impressum, Datenschutz) ── */
html[data-theme="light"] .legal-section h2 { color: var(--lt-text); border-bottom-color: var(--lt-border); }
html[data-theme="light"] .legal-section h2 .num { color: var(--lt-accent-ink); background: var(--lt-accent-soft); border-color: rgba(220,38,38,.25); }
html[data-theme="light"] .legal-section h3 { color: var(--lt-text); }
html[data-theme="light"] .legal-section p,
html[data-theme="light"] .legal-section li { color: var(--lt-text-2); }
html[data-theme="light"] .legal-section a { color: var(--lt-accent-ink); }
html[data-theme="light"] .highlight-box { background: #fef2f2; border-color: #fecaca; color: var(--lt-text-2); }
html[data-theme="light"] .info-box { background: var(--lt-bg); border-color: var(--lt-border); box-shadow: 0 1px 3px rgba(17,24,39,.06); }
html[data-theme="light"] .info-box dt { color: var(--lt-muted); }
html[data-theme="light"] .info-box dd { color: var(--lt-text); }

/* Aktiver Reiter im Impressum liegt auf der roten Fläche */
html[data-theme="light"] #tab-nav .text-white { color: #fff; }

/* ── Footer ── */
html[data-theme="light"] footer a:hover { color: var(--lt-accent); }

/* ── Logo-Umschaltung (Dunkel = weiße Fassung, Hell = schwarze Fassung) ── */
.logo-dark-only { display: block; }
.logo-light-only { display: none; }
html[data-theme="light"] .logo-dark-only { display: none; }
html[data-theme="light"] .logo-light-only { display: block; }
/* Logo in beiden Modi deckungsgleich. Dunkel ist das PNG (400x180) mit
   transparentem Rand, der sichtbare Inhalt liegt bei x 26-391, y 29-148. Der
   Rand oben und unten wird per negativem Außenabstand aus dem Layout genommen,
   links und rechts bleibt er (Navigation steht wie bisher live). Das helle
   Logo bekommt dafür denselben Rand als Außenabstand. Hell ist das
   vollständige Vektorlogo (glanzwerk-logo-hell.svg, 1198x411, auf der Website
   um das ® ergänzt: 1264x411) und
   wird auf dieselbe sichtbare Breite skaliert (365/400 der PNG-Breite).
   So stehen Logo und Navigation im hellen und dunklen Modus an derselben Stelle. */
.logo-dark-only, .logo-light-only { max-width: none; }
.logo-dark-only.h-14 { margin: -.564rem 0 -.622rem; }
.logo-dark-only.h-14.mb-4 { margin-bottom: .378rem; }
.logo-dark-only.h-9 { margin: -.363rem 0 -.400rem; }
header a > .logo-dark-only[style*="5rem"] { margin: -.806rem 0 -.889rem; }
.logo-light-only.h-14 { height: 2.308rem; width: auto; margin: 0 .175rem 0 .506rem; }
.logo-light-only.h-14.mb-4 { margin-bottom: 1rem; }
.logo-light-only.h-9  { height: 1.484rem; width: auto; margin: 0 .113rem 0 .325rem; }
header a > .logo-light-only[style*="3.297rem"] { margin: 0 .250rem 0 .722rem; }

/* Kleines Symbol im Qualitäts-Abzeichen (Gegenstück zu logo-icon.png: Auto
   und Schriftzug ohne Zusatzzeile) */
.logo-light-only.logo-badge {
  width: 2rem; height: 2rem; padding: 0 .28rem;
  object-fit: contain; box-sizing: border-box;
}

/* ── Umschalter ── */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.2);
  background: transparent;
  color: #d1d5db;
  cursor: pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.theme-toggle:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); color: #fff; }
.theme-toggle:focus-visible { outline: 2px solid #ef4444; outline-offset: 2px; }
.theme-toggle svg { width: 1.15rem; height: 1.15rem; }
.theme-toggle .icon-sun { display: block; }
.theme-toggle .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle { border-color: rgba(17,24,39,.25); color: var(--lt-text-2); }
html[data-theme="light"] .theme-toggle:hover { border-color: rgba(17,24,39,.6); background: rgba(17,24,39,.05); color: var(--lt-text); }
html[data-theme="light"] .theme-toggle .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }

/* Schmale Handys: Kopfzeile bleibt einzeilig (Logo, Umschalter, Button, Menü) */
@media (max-width: 480px) {
  .theme-toggle { width: 2.25rem; height: 2.25rem; }
  #header > div { gap: .5rem; }
  #header .btn-red { white-space: nowrap; padding-left: .75rem; padding-right: .75rem; }
  #header .flex.items-center.gap-3 { gap: .5rem; }
}