/* RausAmWochenende — raw-theme.css
   Globales Dark / Light Theme Engine & Neugestalteter Theme-Switcher */

/* ========================================================
   1. NEUER MODERNES FLOATING THEME TOGGLE WIDGET
   ======================================================== */
.nb-theme-floating-btn {
  position: fixed;
  bottom: 24px;
  left: 24px;
  right: auto;
  z-index: 99999;
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.15rem;
  border-radius: 999px;
  font-family: var(--wb-font-body, "Mona Sans", sans-serif);
  font-stretch: semi-expanded;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  border: 1.5px solid rgba(246, 239, 237, 0.45);
  background: rgba(68, 103, 98, 0.92);
  color: #F6EFED;
  box-shadow: 0 12px 32px rgba(35, 56, 53, 0.32), 0 2px 10px rgba(0, 0, 0, 0.12), inset 0 1px 1px rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.24s ease,
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 640px) {
  .nb-theme-floating-btn {
    bottom: 18px;
    left: 16px;
    right: auto;
    padding: 0.5rem 0.95rem;
    font-size: 0.82rem;
  }
}

.nb-theme-floating-btn:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 16px 40px rgba(35, 56, 53, 0.42), 0 4px 14px rgba(0, 0, 0, 0.18);
  border-color: #FFFFFF;
  background: #35524E;
}

.nb-theme-floating-btn:active {
  transform: translateY(0) scale(0.96);
}

.nb-theme-floating-btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.35rem;
  block-size: 1.35rem;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.nb-theme-floating-btn:hover .nb-theme-floating-btn__icon {
  transform: rotate(15deg);
}

.nb-theme-floating-btn .nb-icon-sun {
  display: none;
}

.nb-theme-floating-btn .nb-icon-moon {
  display: block;
}

.nb-theme-floating-btn__indicator {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #8AE3CE;
  box-shadow: 0 0 8px #8AE3CE;
  margin-left: 2px;
}

/* Header-Themenumschalter (sekundär) */
.nb-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.4rem;
  block-size: 2.4rem;
  border-radius: 50%;
  border: 1px solid var(--wb-line);
  background: var(--wb-surface-alt);
  color: var(--wb-text);
  cursor: pointer;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, border-color 0.2s ease;
  position: relative;
  padding: 0;
  flex-shrink: 0;
}

.nb-theme-toggle:hover {
  transform: translateY(-1px) scale(1.04);
  background: var(--wb-cream-deep);
  border-color: var(--wb-forest);
}

.nb-theme-toggle .nb-icon-sun {
  display: none;
}

.nb-theme-toggle .nb-icon-moon {
  display: block;
}

/* ========================================================
   2. DARK THEME VARIABLEN & OVERRIDES
   ======================================================== */
[data-theme="dark"] {
  --wb-cream: #141E1C;
  --wb-cream-deep: #1A2624;
  --wb-beige: #243532;
  --wb-ink: #F6EFED;
  --wb-ink-soft: #D3E0DE;
  --wb-forest: #F6EFED;
  --wb-orange: #669B94;
  --wb-orange-dark: #81B5AE;
  --wb-mint: #253936;
  --wb-line: rgba(246, 239, 237, 0.16);
  --wb-line-soft: rgba(246, 239, 237, 0.09);
  --wb-white: #1A2624;
  --wb-star: #E6A25C;

  --wb-surface: #141E1C;
  --wb-surface-alt: #1A2624;
  --wb-text: #F6EFED;
  --wb-text-muted: #D3E0DE;

  --wb-shadow-card: 0 16px 36px -16px rgba(0, 0, 0, 0.65);
  --wb-shadow-float: 0 24px 50px -16px rgba(0, 0, 0, 0.75);

  color-scheme: dark;
}

/* Dark mode Toggle-Button Erscheinung */
[data-theme="dark"] .nb-theme-floating-btn {
  background: rgba(246, 239, 237, 0.94);
  color: #233835;
  border-color: rgba(68, 103, 98, 0.3);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 2px 10px rgba(0, 0, 0, 0.25);
}

[data-theme="dark"] .nb-theme-floating-btn:hover {
  border-color: #446762;
  background: #FFFFFF;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.65);
}

[data-theme="dark"] .nb-theme-floating-btn .nb-icon-sun,
[data-theme="dark"] .nb-theme-toggle .nb-icon-sun {
  display: block;
}

[data-theme="dark"] .nb-theme-floating-btn .nb-icon-moon,
[data-theme="dark"] .nb-theme-toggle .nb-icon-moon {
  display: none;
}

[data-theme="dark"] .nb-theme-floating-btn__indicator {
  background: #446762;
  box-shadow: 0 0 8px rgba(68, 103, 98, 0.8);
}

/* ========================================================
   3. TIEFE KOMPONENTEN DARK MODE ANPASSUNGEN
   ======================================================== */
html[data-theme="dark"],
html[data-theme="dark"] body,
body[data-theme="dark"] {
  background-color: #141E1C !important;
  color: #F6EFED !important;
}

[data-theme="dark"] .wb-shell-frame,
[data-theme="dark"] main,
[data-theme="dark"] #wb-main {
  background-color: #141E1C !important;
}

[data-theme="dark"] .wb-section,
[data-theme="dark"] .wb-section--tight {
  background-color: transparent !important;
}

[data-theme="dark"] .wb-section--alt {
  background-color: #1A2624 !important;
}

/* Überschriften und Texte im Dark Mode */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] [style*="color: #3B2A22"],
[data-theme="dark"] [style*="color:#3B2A22"],
[data-theme="dark"] [style*="color: #233835"],
[data-theme="dark"] [style*="color:#233835"] {
  color: #F6EFED !important;
}

[data-theme="dark"] p,
[data-theme="dark"] .wb-lede,
[data-theme="dark"] .wb-card__desc,
[data-theme="dark"] [style*="color: #4A5568"],
[data-theme="dark"] [style*="color:#4A5568"],
[data-theme="dark"] [style*="color: #5C4638"],
[data-theme="dark"] [style*="color:#5C4638"],
[data-theme="dark"] [style*="color: #554438"],
[data-theme="dark"] [style*="color:#554438"],
[data-theme="dark"] [style*="color: #64748B"],
[data-theme="dark"] [style*="color:#64748B"],
[data-theme="dark"] [style*="color: #446762"],
[data-theme="dark"] [style*="color:#446762"] {
  color: #D3E0DE !important;
}

/* Kopfzeile & Navigation im Dark Mode */
[data-theme="dark"] .wb-header {
  background: rgba(20, 30, 28, 0.95) !important;
  border-bottom: 1px solid rgba(246, 239, 237, 0.12) !important;
}

[data-theme="dark"] .wb-menu-toggle {
  background: rgba(36, 53, 50, 0.85) !important;
  color: #F6EFED !important;
  border-color: rgba(246, 239, 237, 0.2) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .wb-menu-toggle:hover {
  background: #314743 !important;
  border-color: #8AE3CE !important;
  color: #8AE3CE !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), 0 0 12px rgba(138, 227, 206, 0.2) !important;
}

[data-theme="dark"] .wb-menu-toggle[aria-expanded="true"] {
  background: #446762 !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .wb-nav-backdrop {
  background: rgba(10, 16, 15, 0.78) !important;
}

[data-theme="dark"] .wb-nav {
  background: linear-gradient(180deg, #172422 0%, #0F1716 100%) !important;
  border-left-color: rgba(246, 239, 237, 0.12) !important;
  box-shadow: -16px 0 50px rgba(0, 0, 0, 0.7) !important;
}

[data-theme="dark"] .wb-nav__header {
  background: rgba(23, 36, 34, 0.94) !important;
  border-bottom-color: rgba(246, 239, 237, 0.1) !important;
}

[data-theme="dark"] .wb-nav__close {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #F6EFED !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
}

[data-theme="dark"] .wb-nav__close:hover {
  background: #8AE3CE !important;
  color: #141E1C !important;
  border-color: transparent !important;
  box-shadow: 0 0 16px rgba(138, 227, 206, 0.4) !important;
}

[data-theme="dark"] .wb-nav__link {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(246, 239, 237, 0.07) !important;
  color: #F6EFED !important;
}

[data-theme="dark"] .wb-nav__link:hover {
  background: rgba(255, 255, 255, 0.09) !important;
  border-color: rgba(138, 227, 206, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

[data-theme="dark"] .wb-nav__link[aria-current="page"],
[data-theme="dark"] .wb-nav__link.is-active {
  background: linear-gradient(135deg, #2D4C47 0%, #1F3734 100%) !important;
  border-color: rgba(138, 227, 206, 0.35) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45) !important;
}

[data-theme="dark"] .wb-nav__link[aria-current="page"] .wb-nav__link-arrow,
[data-theme="dark"] .wb-nav__link.is-active .wb-nav__link-arrow {
  color: #8AE3CE !important;
}

[data-theme="dark"] .wb-nav__footer {
  background: rgba(23, 36, 34, 0.94) !important;
  border-top-color: rgba(246, 239, 237, 0.1) !important;
}

[data-theme="dark"] .wb-nav__footer-btn--wishlist {
  background: #243532 !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
  color: #F6EFED !important;
}

[data-theme="dark"] .wb-nav__footer-btn--wishlist:hover {
  background: #2E4440 !important;
  border-color: #8AE3CE !important;
}

[data-theme="dark"] .wb-nav__footer-btn--contact {
  background: linear-gradient(135deg, #446762 0%, #304E4A 100%) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4) !important;
}

[data-theme="dark"] .wb-nav__footer-meta {
  background: rgba(255, 255, 255, 0.05) !important;
  color: #A3B5B3 !important;
}

[data-theme="dark"] .nb-wishlist-btn {
  background: #243532 !important;
  color: #F6EFED !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
}

[data-theme="dark"] .nb-wishlist-btn:hover {
  background: #314743 !important;
  border-color: #669B94 !important;
}

[data-theme="dark"] .wb-icon-btn {
  background: #243532 !important;
  color: #F6EFED !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
}

[data-theme="dark"] .wb-icon-btn:hover,
[data-theme="dark"] .wb-icon-btn.is-active,
[data-theme="dark"] .wb-icon-btn--wishlist.is-active {
  background: #314743 !important;
  border-color: #669B94 !important;
}

[data-theme="dark"] .wb-wish-icon,
[data-theme="dark"] .wb-icon-btn:hover .wb-wish-icon,
[data-theme="dark"] .wb-wish-icon--nav {
  filter: none !important;
}

[data-theme="dark"] .wb-icon-btn__count {
  background: #388E81 !important;
  color: #FFFFFF !important;
  border-color: #121A19 !important;
}

[data-theme="dark"] .wb-search-pop {
  background: #1A2624 !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5) !important;
}

[data-theme="dark"] .wb-search-pop input {
  background: #243532 !important;
  color: #F6EFED !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
}

/* Karten, Filter & Container */
[data-theme="dark"] .wb-card,
[data-theme="dark"] article.wb-card,
[data-theme="dark"] .wb-filter-rail,
[data-theme="dark"] [style*="background: #FAF7F2"],
[data-theme="dark"] [style*="background:#FAF7F2"],
[data-theme="dark"] [style*="background: #FCF9F2"],
[data-theme="dark"] [style*="background:#FCF9F2"],
[data-theme="dark"] [style*="background: #FFFFFF"],
[data-theme="dark"] [style*="background:#FFFFFF"],
[data-theme="dark"] [style*="background: #F2EAD7"],
[data-theme="dark"] [style*="background:#F2EAD7"],
[data-theme="dark"] [style*="background: #F6EFED"],
[data-theme="dark"] [style*="background:#F6EFED"] {
  background: #1A2624 !important;
  border-color: rgba(246, 239, 237, 0.14) !important;
}

[data-theme="dark"] .wb-deck,
[data-theme="dark"] #wb-hero-form {
  background: #223330 !important;
  border-color: rgba(246, 239, 237, 0.18) !important;
}

[data-theme="dark"] .wb-deck label,
[data-theme="dark"] #wb-hero-form label {
  color: #E2ECEB !important;
}

/* Formular-Eingabefelder im Dark Mode */
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .wb-custom-select__trigger {
  background: #253835 !important;
  color: #F6EFED !important;
  border-color: rgba(246, 239, 237, 0.18) !important;
}

[data-theme="dark"] .wb-custom-select__dropdown,
[data-theme="dark"] .wb-autocomplete-dropdown {
  background: #1A2624 !important;
  border-color: rgba(246, 239, 237, 0.16) !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.6) !important;
}

[data-theme="dark"] .wb-custom-select__option,
[data-theme="dark"] .wb-autocomplete-item {
  color: #F6EFED !important;
}

[data-theme="dark"] .wb-custom-select__option:hover,
[data-theme="dark"] .wb-autocomplete-item:hover,
[data-theme="dark"] .wb-autocomplete-item.is-selected {
  background: #2E4440 !important;
}

/* Footer im Dark Mode */
[data-theme="dark"] .wb-footer {
  background: #3d5e56 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .wb-footer-col__title {
  color: #ffffff !important;
  border-bottom-color: #ffffff !important;
}

[data-theme="dark"] .wb-footer-col__list a {
  color: rgba(255, 255, 255, 0.86) !important;
}

[data-theme="dark"] .wb-footer-col__list a:hover {
  color: #ffffff !important;
}

[data-theme="dark"] .wb-footer-bottom {
  color: rgba(255, 255, 255, 0.82) !important;
}

/* Cookie-Consent Banner & Dialog */
[data-theme="dark"] .wb-consent-bar {
  background: #446762 !important;
  border-top-color: rgba(255, 255, 255, 0.15) !important;
  color: #FAF7F2 !important;
  border-radius: 0 !important;
}

[data-theme="dark"] .wb-consent-dialog {
  background: #446762 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #FAF7F2 !important;
  border-radius: 0 !important;
}

[data-theme="dark"] .wb-consent-option {
  border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

/* Modales Kontaktfenster & Willkommensfenster */
[data-theme="dark"] .wb-contact-modal,
[data-theme="dark"] .wb-welcome-modal {
  background: #446762 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  color: #FAF7F2 !important;
  border-radius: 0 !important;
}