/* ==========================================================================
   All.in People & Culture — Hell/Dunkel-Theme
   --------------------------------------------------------------------------
   Wird als LETZTES Stylesheet geladen. Das Theme steht als
   data-theme="light|dark" auf <html> (gesetzt per Inline-Script im <head>,
   bevor CSS rendert → kein Aufblitzen des falschen Themes).

   Dunkel-Palette: warmes Fast-Schwarz statt kaltem Grau, damit das Marken-
   Gold weiter "leuchtet". Die Neutralskala wird gespiegelt (950 = hellster
   Text), Gold-Tints (050–300) werden zu dunklen Gold-Braun-Flächen.
   ========================================================================== */

:root { color-scheme: light; }

:root[data-theme="dark"] {
  color-scheme: dark;

  /* ── Neutralskala gespiegelt ── */
  --pw-neutral-950: #F6F3EE;
  --pw-neutral-900: #ECE8E1;
  --pw-neutral-800: #DAD5CD;
  --pw-neutral-700: #C2BCB2;
  --pw-neutral-600: #A8A298;
  --pw-neutral-500: #8C867D;
  --pw-neutral-400: #6F6960;
  --pw-neutral-300: #534E46;
  --pw-neutral-200: #3B362F;
  --pw-neutral-100: #2B2720;
  --pw-neutral-050: #211E18;
  --pw-neutral-000: #14120D;

  /* ── Gold: Tints werden dunkle Flächen, Text-Golds werden heller ── */
  --pw-primary-900: #FFE2A6;
  --pw-primary-800: #FFD07A;
  --pw-primary-700: #F5B544;   /* Link/Icon-Gold auf Dunkel (≈9:1) */
  --pw-primary-300: #5E4416;
  --pw-primary-200: #4A3613;
  --pw-primary-100: #33260F;
  --pw-primary-050: #231B0D;

  /* ── Akzente ── */
  --pw-accent-company:         #D9822B;
  --pw-accent-candidate-800:   #F2B39A;
  --pw-accent-candidate-light: #2A1811;

  /* ── Flächen ── */
  --pw-bg-page:        #14120D;
  --pw-bg-section-alt: #1B1810;
  --pw-bg-dark:        #18150F;
  --pw-bg-card:        #1F1B15;
  --pw-bg-surface:     #1F1B15;
  --pw-bg-candidate:   #24150F;

  /* ── Text ── */
  --pw-text-primary:    #F6F3EE;
  --pw-text-secondary:  #CFC9BF;
  --pw-text-muted:      #A8A298;
  --pw-text-on-gold:    #F6F3EE;   /* Gold-Creme-Flächen sind im Dunkelmodus dunkel */
  --pw-text-link:       #F5B544;
  --pw-text-link-hover: #FFD98A;

  /* ── Rahmen ── */
  --pw-border-default: #3B362F;
  --pw-border-strong:  #6F6960;
  --pw-border-focus:   #F5B544;

  /* ── Semantik-Tints ── */
  --pw-success-100: #12302A;
  --pw-warning-100: #33260F;
  --pw-error-100:   #3A1515;
  --pw-info-100:    #172340;
  --pw-error-600:   #F87171;
  --pw-success-600: #4FD1B0;

  /* ── Schatten: schwarz statt teal-getönt ── */
  --pw-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
  --pw-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 8px rgba(0, 0, 0, 0.25);
  --pw-shadow-md: 0 4px 8px rgba(0, 0, 0, 0.4), 0 8px 20px rgba(0, 0, 0, 0.3);
  --pw-shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.45), 0 16px 40px rgba(0, 0, 0, 0.35);
  --pw-shadow-xl: 0 12px 24px rgba(0, 0, 0, 0.5), 0 24px 56px rgba(0, 0, 0, 0.4);

  /* ── Faux-Glass ── */
  --pw-glass-fill:        rgba(31, 27, 21, 0.86);
  --pw-glass-fill-hover:  rgba(38, 33, 26, 0.94);
  --pw-glass-fill-strong: rgba(27, 24, 16, 0.92);
  --pw-glass-fill-solid:  rgba(31, 27, 21, 0.96);
  --pw-glass-border:       1px solid rgba(255, 255, 255, 0.07);
  --pw-glass-border-hover: 1px solid rgba(255, 216, 140, 0.18);
  --pw-glass-shadow:       inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 8px 30px rgba(0, 0, 0, 0.35);
  --pw-glass-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 16px 44px rgba(0, 0, 0, 0.45);
  --pw-glass-teal:         rgba(20, 18, 13, 0.94);

  --pw-ambient-teal:   rgba(255, 184, 46, 0.07);
  --pw-ambient-teal-2: rgba(255, 167, 19, 0.05);
  --pw-ambient-coral:  rgba(192, 70, 31, 0.08);
}

/* ==========================================================================
   Gezielte Korrekturen für fest codierte (helle) Werte
   ========================================================================== */

[data-theme="dark"] body { background-color: var(--pw-bg-page); }

/* ── Hero: Gold-Verlauf → dunkles Gold-Braun mit warmem Glimmen ── */
[data-theme="dark"] .pw-hero-overlay {
  background:
    radial-gradient(70% 90% at 85% 10%, rgba(255, 184, 46, 0.20) 0%, transparent 60%),
    radial-gradient(60% 80% at 10% 100%, rgba(192, 70, 31, 0.14) 0%, transparent 60%),
    linear-gradient(135deg, #1C150A 0%, #2A1D09 55%, #18120A 100%);
}
[data-theme="dark"] .pw-hero-overlay .pw-btn--on-dark {
  border-color: rgba(246, 243, 238, 0.4);
}
[data-theme="dark"] .pw-hero-overlay .pw-btn--on-dark:hover {
  background-color: rgba(246, 243, 238, 0.08);
}

/* ── Navbar ── */
[data-theme="dark"] .pw-navbar:not(.is-scrolled) .pw-navbar__logo,
[data-theme="dark"] .pw-navbar:not(.is-scrolled) .pw-navbar__logo-text,
[data-theme="dark"] .pw-navbar:not(.is-scrolled) .pw-navbar__link,
[data-theme="dark"] .pw-navbar:not(.is-scrolled) .pw-navbar__hamburger {
  color: rgba(246, 243, 238, 0.78);
}
[data-theme="dark"] .pw-navbar.is-scrolled {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .pw-navbar__logo:hover { color: var(--pw-primary-700); }
[data-theme="dark"] .pw-navbar__link:hover { background-color: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .pw-navbar__link--lang {
  border-color: rgba(246, 243, 238, 0.28);
}
[data-theme="dark"] .pw-navbar__link--lang:hover {
  border-color: rgba(246, 243, 238, 0.55);
  background-color: rgba(255, 255, 255, 0.06);
}
[data-theme="dark"] .pw-navbar__cta .pw-btn,
[data-theme="dark"] .pw-navbar__cta .pw-btn:visited {
  color: var(--pw-text-on-gold);
  border-color: rgba(246, 243, 238, 0.35);
}
[data-theme="dark"] .pw-navbar__cta .pw-btn:hover {
  color: var(--pw-text-on-gold);
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(246, 243, 238, 0.7);
}
[data-theme="dark"] .pw-navbar__cta .pw-btn:focus-visible {
  outline-color: var(--pw-primary-700);
}

/* ── Buttons: Gold-Flächen behalten dunklen Text ── */
[data-theme="dark"] .pw-btn--primary,
[data-theme="dark"] .pw-btn--primary:visited,
[data-theme="dark"] .pw-btn--primary:hover {
  color: #131210;
}
[data-theme="dark"] .pw-btn--primary:active {
  background-color: #E09A1E;
  border-color: #E09A1E;
  color: #131210;
}
[data-theme="dark"] .pw-btn--ghost:hover { background-color: rgba(255, 255, 255, 0.06); }

/* ── Mobile-Overlay ── */
[data-theme="dark"] .pw-nav-overlay__header .pw-navbar__logo,
[data-theme="dark"] .pw-nav-overlay__header .pw-navbar__logo:hover {
  color: var(--pw-neutral-950);
}

/* ── Glas-Flächen mit fest codiertem Weiss ── */
[data-theme="dark"] .pw-trust-bar {
  border-top-color: rgba(255, 255, 255, 0.05);
  border-bottom-color: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] .pw-trust-bar__item + .pw-trust-bar__item {
  border-left-color: rgba(255, 184, 46, 0.14);
}
[data-theme="dark"] .pw-process--timeline .pw-process__content {
  background: rgba(31, 27, 21, 0.7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}
@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .pw-process--timeline .pw-process__step:hover .pw-process__content {
    background: rgba(38, 33, 26, 0.95);
  }
}
[data-theme="dark"] .pw-process--timeline .pw-process__number {
  border-color: rgba(255, 255, 255, 0.15);
}
[data-theme="dark"] .pw-process__number { color: #FFFFFF; }

/* ── CTA-Banner: helles Gold → tiefes Gold-Braun ── */
[data-theme="dark"] .pw-cta-banner {
  background:
    radial-gradient(60% 90% at 80% 10%, rgba(255, 184, 46, 0.16) 0%, transparent 60%),
    radial-gradient(50% 80% at 10% 90%, rgba(192, 70, 31, 0.12) 0%, transparent 62%),
    linear-gradient(110deg, #1E170B 0%, #2C200C 55%, #19140C 100%);
}

/* ── Footer ── */
[data-theme="dark"] .pw-footer__social-link { background: rgba(255, 255, 255, 0.06); }
[data-theme="dark"] .pw-footer__bottom { border-top-color: rgba(255, 255, 255, 0.08); }

/* ── Cookie-Banner / Glas-Leisten ── */
[data-theme="dark"] .pw-cookie-banner,
[data-theme="dark"] .pw-glass {
  background: rgba(24, 21, 15, 0.98);
  border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Kontakt-Seite: Abzeichen im Hero ── */
[data-theme="dark"] .pw-contact-hero__promise {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ── Google-Bewertungskarte ── */
[data-theme="dark"] .pw-google-card { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  [data-theme="dark"] .pw-google-card__stars::before {
    background: linear-gradient(90deg, #fbbc04 var(--pct), #4A453D var(--pct));
    -webkit-background-clip: text;
            background-clip: text;
  }
}
[data-theme="dark"] .pw-location-card__osm-note { background: rgba(20, 18, 13, 0.85); }

/* ── Karte (OpenStreetMap): an dunkle Umgebung angleichen ── */
[data-theme="dark"] .pw-location-card__map {
  filter: invert(0.9) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}

/* ── Formular-Pfeil im Select (Browser-UI) folgt color-scheme ── */
[data-theme="dark"] .pw-select option { background: var(--pw-bg-card); color: var(--pw-text-primary); }

/* ==========================================================================
   Theme-Schalter (Sonne ↔ Mond)
   Morph-Icon nach dem Muster von web.dev "Building a theme switch":
   Die Sonne wächst zur Scheibe, eine Masken-Scheibe schiebt sich als
   Mondsichel davor, die Strahlen drehen ein und verschwinden.
   ========================================================================== */

.pw-theme-toggle {
  --pw-tt-ease: cubic-bezier(0.5, 1.25, 0.75, 1.25);
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(32, 18, 0, 0.22);
  border-radius: var(--pw-radius-full);
  background: transparent;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.pw-theme-toggle:hover {
  background-color: rgba(32, 18, 0, 0.06);
  border-color: rgba(32, 18, 0, 0.45);
}
.pw-theme-toggle:active { transform: scale(0.92); }
.pw-theme-toggle:focus-visible {
  outline: 3px solid var(--pw-primary-700);
  outline-offset: 2px;
}

.pw-theme-toggle__icon {
  width: 20px;
  height: 20px;
  overflow: visible;
}

.pw-theme-toggle__sun,
.pw-theme-toggle__moon,
.pw-theme-toggle__rays {
  transform-origin: center;
  transform-box: view-box;
}
.pw-theme-toggle__sun {
  fill: currentColor;
  transition: transform 0.5s var(--pw-tt-ease);
}
.pw-theme-toggle__rays {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  transition: transform 0.5s var(--pw-tt-ease), opacity 0.5s ease;
}
.pw-theme-toggle__moon {
  transition: transform 0.25s ease-out;
}

/* Dunkel: Sonne wird volle Scheibe, Mond-Maske schiebt sich davor */
[data-theme="dark"] .pw-theme-toggle__sun {
  transform: scale(1.75);
  transition-timing-function: cubic-bezier(0.25, 0, 0.3, 1);
  transition-duration: 0.25s;
}
[data-theme="dark"] .pw-theme-toggle__rays {
  opacity: 0;
  transform: rotate(-25deg);
  transition-duration: 0.15s;
}
[data-theme="dark"] .pw-theme-toggle__moon {
  transform: translateX(-7px);
  transition-delay: 0.25s;
  transition-duration: 0.5s;
}

/* Kontext: Navbar (Desktop) */
.pw-navbar__cta .pw-theme-toggle { color: inherit; }
.pw-page-candidate .pw-navbar:not(.is-scrolled) .pw-theme-toggle {
  border-color: rgba(255, 255, 255, 0.45);
}
.pw-page-candidate .pw-navbar:not(.is-scrolled) .pw-theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.8);
}
.pw-navbar .pw-theme-toggle { color: rgba(32, 18, 0, 0.78); }
.pw-navbar.is-scrolled .pw-theme-toggle { color: var(--pw-text-on-gold); }
.pw-page-candidate .pw-navbar:not(.is-scrolled) .pw-theme-toggle { color: rgba(255, 255, 255, 0.85); }

[data-theme="dark"] .pw-theme-toggle {
  border-color: rgba(246, 243, 238, 0.28);
}
[data-theme="dark"] .pw-theme-toggle:hover {
  background-color: rgba(255, 255, 255, 0.06);
  border-color: rgba(246, 243, 238, 0.55);
}
[data-theme="dark"] .pw-navbar .pw-theme-toggle { color: #FFD07A; }

/* Kontext: Mobile-Overlay (heller/dunkler Seitenhintergrund) */
.pw-nav-overlay .pw-theme-toggle {
  color: var(--pw-neutral-900);
  border-color: var(--pw-border-default);
}
[data-theme="dark"] .pw-nav-overlay .pw-theme-toggle { color: #FFD07A; }

/* ==========================================================================
   Kreisförmiges Aufdecken beim Umschalten (View Transitions API).
   Nur während des Wechsels aktiv (Klasse auf <html>), damit die bestehenden
   Seitenübergänge aus motion.css unberührt bleiben.
   ========================================================================== */

html.pw-theme-switching::view-transition-old(root),
html.pw-theme-switching::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
html.pw-theme-switching::view-transition-old(root) { z-index: 1; }
html.pw-theme-switching::view-transition-new(root) { z-index: 2; }

@media (prefers-reduced-motion: reduce) {
  .pw-theme-toggle__sun,
  .pw-theme-toggle__moon,
  .pw-theme-toggle__rays { transition: none; }
}

/* ==========================================================================
   Stellen, an denen helle Neutral- bzw. dunkle Gold-Töne bewusst als
   "festes" Hell/Dunkel gedacht waren — im gespiegelten Schema wieder fixieren.
   ========================================================================== */

/* Standort-Karte: Infospalte war dunkles Gold-Braun mit hellem Text */
[data-theme="dark"] .pw-location-card__info {
  background: linear-gradient(160deg, #2C1F0B 0%, #1E160A 100%);
}

/* Testimonial-Avatar: Gold-Verlauf mit weißem Initial */
[data-theme="dark"] .pw-testimonial-card--google .pw-testimonial-card__avatar {
  background: linear-gradient(135deg, #B45309, #6B3900);
}

/* Kandidaten-Hero (Korall): heller Fließtext */
[data-theme="dark"] .pw-hero-candidate__subtext { color: #F5F4F2; }

/* Dunkle Sektionen: Eyebrow/Untertitel */
[data-theme="dark"] .pw-section--dark .pw-section-header__eyebrow { color: var(--pw-primary-700); }
[data-theme="dark"] .pw-section--dark .pw-section-header__subtitle { color: var(--pw-text-secondary); }
[data-theme="dark"] .pw-location-card__badge,
[data-theme="dark"] .pw-location-card__osm-link { color: #FFD98A; }