/* Probenzi — system light / dark (prefers-color-scheme) */

html {
  color-scheme: light dark;
}

/* Dekorative Hintergrund-Layer hinter den Inhalt legen */
body[data-i18n-page] > .pointer-events-none.fixed.inset-0 {
  z-index: 0;
}

/* —— Logo: Light = logo.png, Dark = logo-pbz-hero (via <picture> auf der Homepage) —— */
body[data-i18n-page] .pbz-bg-logo {
  display: block;
  aspect-ratio: 723 / 412;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
}

body[data-i18n-page] .hero-logo {
  display: block;
  height: auto;
  max-height: none;
  object-fit: contain;
  object-position: center;
  border: none;
  outline: none;
  background: transparent;
  box-shadow: none;
}

body[data-i18n-page] .hero-logo {
  filter: drop-shadow(0 14px 36px rgba(7, 22, 43, 0.08));
}

/* Hintergrund-Logo Light: buntes logo.png → dezent grau */
body[data-i18n-page] .pbz-bg-logo {
  opacity: 0.06 !important;
  filter: grayscale(1) brightness(0.42) contrast(1.05);
  mix-blend-mode: multiply;
}

@media (prefers-color-scheme: dark) {
  /* Hero: weiße Outline (logo-pbz-hero) */
  body[data-i18n-page] .hero-logo {
    filter: none;
    mix-blend-mode: lighten;
    background: transparent !important;
  }

  /* Hintergrund-Logo Dark: logo-pbz-hero wie Homepage, nur dezenter */
  body[data-i18n-page] .pbz-bg-logo {
    filter: none;
    mix-blend-mode: lighten;
    background: transparent !important;
    opacity: 0.05 !important;
  }
}

/* —— Checkliste: Businessmodell-Tabs —— */
@media (prefers-color-scheme: dark) {
  body[data-i18n-page="checkliste"] .model-tab--active,
  body[data-i18n-page="checkliste"] .model-tab[aria-selected="true"] {
    background-color: rgba(8, 145, 178, 0.28) !important;
    color: #a5f3fc !important;
    box-shadow: inset 0 0 0 1.5px rgba(34, 211, 238, 0.55) !important;
  }

  body[data-i18n-page="checkliste"] .model-tab:not([aria-selected="true"]):not(.model-tab--active) {
    color: #a1a1aa !important;
  }

  body[data-i18n-page="checkliste"] .model-tab:not([aria-selected="true"]):hover {
    background-color: rgba(255, 255, 255, 0.06) !important;
    color: #fafafa !important;
  }

  /* Checkliste: Output-Panel – „Text kopieren“ lesbar halten */
  body[data-i18n-page="checkliste"] #copy {
    background-color: #fafafa !important;
    color: #09090b !important;
  }
  body[data-i18n-page="checkliste"] #copy:hover {
    background-color: #e4e4e7 !important;
    color: #09090b !important;
  }

  body[data-i18n-page="checkliste"] #mail {
    background-color: rgba(16, 185, 129, 0.18) !important;
    border-color: rgba(52, 211, 153, 0.45) !important;
    color: #d1fae5 !important;
  }
  body[data-i18n-page="checkliste"] #mail:hover {
    background-color: rgba(16, 185, 129, 0.28) !important;
  }

  body[data-i18n-page="checkliste"] #copied {
    color: #6ee7b7 !important;
  }

  /* Radiale Glare-Overlays auf der Checkliste abschwächen */
  body[data-i18n-page="checkliste"] > .pointer-events-none.fixed.inset-0:not([style*="background-image"]) {
    opacity: 0.22 !important;
  }
}

@media (prefers-color-scheme: light) {
  body[data-i18n-page="checkliste"] .model-tab--active,
  body[data-i18n-page="checkliste"] .model-tab[aria-selected="true"] {
    background-color: #f1f5f9 !important;
    color: #050f1f !important;
    box-shadow: inset 0 0 0 1.5px rgba(8, 145, 178, 0.35) !important;
  }
}

@media (prefers-color-scheme: dark) {
  body[data-i18n-page] {
    background-color: #09090b !important;
    color: #fafafa !important;
  }

  body[data-i18n-page] .bg-white {
    background-color: #09090b !important;
  }
  body[data-i18n-page] .bg-white\/80 {
    background-color: rgba(9, 9, 11, 0.88) !important;
  }
  body[data-i18n-page] .bg-slate-50 {
    background-color: #18181b !important;
  }
  body[data-i18n-page] .bg-slate-50\/80,
  body[data-i18n-page] .bg-slate-50\/95 {
    background-color: rgba(24, 24, 27, 0.95) !important;
  }
  body[data-i18n-page] .bg-brand-50 {
    background-color: rgba(8, 145, 178, 0.12) !important;
  }
  body[data-i18n-page] .bg-brand-50\/40,
  body[data-i18n-page] .bg-brand-50\/50 {
    background-color: rgba(8, 145, 178, 0.1) !important;
  }

  body[data-i18n-page] .text-ink-900 {
    color: #fafafa !important;
  }
  body[data-i18n-page] .text-slate-700 {
    color: #d4d4d8 !important;
  }
  body[data-i18n-page] .text-slate-600 {
    color: #a1a1aa !important;
  }
  body[data-i18n-page] .text-slate-500 {
    color: #71717a !important;
  }
  body[data-i18n-page] .text-zinc-500 {
    color: #71717a !important;
  }
  body[data-i18n-page] .text-brand-700 {
    color: #67e8f9 !important;
  }

  body[data-i18n-page] .border-slate-900\/10,
  body[data-i18n-page] .border-slate-900\/15,
  body[data-i18n-page] .border-slate-900\/20 {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  body[data-i18n-page] .border-brand-500\/25,
  body[data-i18n-page] .border-brand-500\/30 {
    border-color: rgba(8, 145, 178, 0.35) !important;
  }
  body[data-i18n-page] .border-dashed {
    border-color: rgba(255, 255, 255, 0.14) !important;
  }

  body[data-i18n-page] header,
  body[data-i18n-page] footer {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
  body[data-i18n-page] footer.bg-white\/80 {
    background-color: rgba(9, 9, 11, 0.88) !important;
  }

  body[data-i18n-page] input,
  body[data-i18n-page] textarea,
  body[data-i18n-page] select {
    background-color: #18181b !important;
    border-color: rgba(255, 255, 255, 0.12) !important;
    color: #fafafa !important;
  }
  body[data-i18n-page] input::placeholder,
  body[data-i18n-page] textarea::placeholder,
  body[data-i18n-page] .placeholder\:text-slate-400::placeholder {
    color: #71717a !important;
  }

  body[data-i18n-page] .text-red-600 {
    color: #f87171 !important;
  }

  body[data-i18n-page] .hover\:bg-brand-50\/30:hover {
    background-color: rgba(8, 145, 178, 0.12) !important;
  }

  body[data-i18n-page] .shadow-sm {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  }

  body[data-i18n-page] .decoration-slate-300 {
    text-decoration-color: rgba(255, 255, 255, 0.25) !important;
  }

  body[data-i18n-page] .hover\:bg-slate-50:hover {
    background-color: #27272a !important;
  }
  body[data-i18n-page] .hover\:bg-brand-50\/50:hover,
  body[data-i18n-page] .hover\:bg-brand-50\/40:hover {
    background-color: rgba(8, 145, 178, 0.16) !important;
  }
  body[data-i18n-page] .hover\:bg-brand-100:hover {
    background-color: rgba(8, 145, 178, 0.22) !important;
  }
  body[data-i18n-page] .hover\:text-ink-900:hover {
    color: #fafafa !important;
  }
  body[data-i18n-page] .hover\:border-slate-900\/20:hover {
    border-color: rgba(255, 255, 255, 0.18) !important;
  }
  body[data-i18n-page] .hover\:border-brand-500\/25:hover,
  body[data-i18n-page] .hover\:border-brand-500\/30:hover {
    border-color: rgba(8, 145, 178, 0.45) !important;
  }
  body[data-i18n-page] .hover\:decoration-slate-500:hover {
    text-decoration-color: rgba(255, 255, 255, 0.45) !important;
  }

  body[data-i18n-page] > .pointer-events-none.fixed.inset-0[style*="background-image"] {
    opacity: 0.12 !important;
  }

  body[data-i18n-page] .selection\:bg-brand-100::selection {
    background-color: rgba(8, 145, 178, 0.35) !important;
    color: #fafafa !important;
  }

  /* Checkliste: grüner Mail-Button bleibt lesbar */
  body[data-i18n-page] .bg-emerald-600 {
    background-color: #059669 !important;
  }
  body[data-i18n-page] .hover\:bg-emerald-500:hover {
    background-color: #10b981 !important;
  }

  /* Portfolio-Seite: gleiche Logik wie Rest (war fest dunkel) */
  body[data-i18n-page="portfolio"] .bg-zinc-950,
  body[data-i18n-page="portfolio"] .bg-zinc-950\/80 {
    background-color: rgba(9, 9, 11, 0.88) !important;
  }
  body[data-i18n-page="portfolio"] .bg-zinc-900,
  body[data-i18n-page="portfolio"] .bg-zinc-900\/70 {
    background-color: rgba(24, 24, 27, 0.85) !important;
  }
  body[data-i18n-page="portfolio"] .text-white,
  body[data-i18n-page="portfolio"] .text-zinc-100 {
    color: #fafafa !important;
  }
  body[data-i18n-page="portfolio"] .text-zinc-400 {
    color: #a1a1aa !important;
  }
  body[data-i18n-page="portfolio"] .border-white\/\[0\.06\],
  body[data-i18n-page="portfolio"] .border-white\/\[0\.07\] {
    border-color: rgba(255, 255, 255, 0.1) !important;
  }
}

@media (prefers-color-scheme: light) {
  body[data-i18n-page="portfolio"] {
    background-color: #ffffff !important;
    color: #050f1f !important;
  }
  body[data-i18n-page="portfolio"] .bg-zinc-950,
  body[data-i18n-page="portfolio"] .bg-zinc-950\/80 {
    background-color: rgba(255, 255, 255, 0.88) !important;
  }
  body[data-i18n-page="portfolio"] .bg-zinc-900,
  body[data-i18n-page="portfolio"] .bg-zinc-900\/70 {
    background-color: #f4f4f5 !important;
  }
  body[data-i18n-page="portfolio"] .text-white,
  body[data-i18n-page="portfolio"] .text-zinc-100 {
    color: #050f1f !important;
  }
  body[data-i18n-page="portfolio"] .text-zinc-400 {
    color: #52525b !important;
  }
  body[data-i18n-page="portfolio"] .border-white\/\[0\.06\],
  body[data-i18n-page="portfolio"] .border-white\/\[0\.07\] {
    border-color: rgba(7, 22, 43, 0.1) !important;
  }
  body[data-i18n-page="portfolio"] .hover\:bg-white\/\[0\.06\]:hover {
    background-color: #f4f4f5 !important;
  }
  body[data-i18n-page="portfolio"] .hover\:text-white:hover {
    color: #050f1f !important;
  }
  body[data-i18n-page="portfolio"] .text-white {
    color: #050f1f !important;
  }
  body[data-i18n-page="portfolio"] .border-white\/10 {
    border-color: rgba(7, 22, 43, 0.12) !important;
  }
  body[data-i18n-page="portfolio"] .border-white\/\[0\.08\] {
    border-color: rgba(7, 22, 43, 0.1) !important;
  }
  body[data-i18n-page="portfolio"] .bg-white\/\[0\.05\],
  body[data-i18n-page="portfolio"] .bg-white\/\[0\.04\] {
    background-color: rgba(7, 22, 43, 0.04) !important;
  }
  body[data-i18n-page="portfolio"] .hover\:bg-white\/\[0\.08\]:hover {
    background-color: #e4e4e7 !important;
  }
  body[data-i18n-page="portfolio"] header nav a:hover {
    box-shadow: inset 0 0 0 1px rgba(7, 22, 43, 0.15) !important;
  }
}