/* ==========================================================================
   theme.css: light-mode overrides + theme toggle UI
   Dark mode = default = zero rules here (pixel-identical to live site).
   Light mode = html[data-theme="light"], set before first paint by js/theme.js.
   Light accent: Dunkelorange #c2410c (hover #9a3412), approved 2026-08-22.
   ========================================================================== */

/* ---- native control rendering (scrollbars, date pickers, selects) ---- */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

/* ==========================================================================
   1. Variable remap (all 27 color custom properties)
   Selector must be html[data-theme="light"] body: the theme stylesheet
   re-declares all vars on body{} inside 6 media queries, this wins everywhere.
   ========================================================================== */
html[data-theme="light"] body {
  --_colors---background--black-900: #faf9f7;
  --_colors---background--black-1000: #ffffff;
  --_colors---background--black-850: #f2f0ec;
  --_colors---background--black-800: #f5f4f1;
  --_colors---background--black-700: #eceae5;
  --_colors---text--white: #1a1a1a;
  --_colors---text--gray-300: #4b4b4b;
  --_colors---text--gray-500: #767676;
  --_colors---border--gray-800: #e4e1db;
  --_colors---border--gray-850: #efede9;
  --_colors---yellow--yellow-400: #c2410c;
  --_colors---yellow--yellow-600: #9a3412;
  --_colors---status--green-400: #2e7d4f;
  --_colors---status--green-400-14a: rgba(46, 125, 79, 0.12);
  --_colors---status--green-400-25a: rgba(46, 125, 79, 0.4);
  --_colors---alpha--yellow-400-3a: rgba(194, 65, 12, 0.04);
  --_colors---alpha--yellow-400-10a: rgba(194, 65, 12, 0.12);
  --_colors---alpha--yellow-400-40a: rgba(194, 65, 12, 0.4);
  --_colors---alpha--black-900-10a: rgba(255, 255, 255, 0.35);
  --_colors---alpha--black-900-35a: rgba(255, 255, 255, 0.7);
  --_colors---alpha--black-900-72a: rgba(255, 255, 255, 0.85);
  --_colors---alpha--black-900-92a: rgba(255, 255, 255, 0.95);
  --_colors---alpha--black-950-60a: rgba(250, 249, 247, 0.6);
  --_colors---alpha--black-950-80a: rgba(250, 249, 247, 0.8);
  --_colors---alpha--white-6a: rgba(15, 15, 15, 0.06);
  --_colors---alpha--white-10a: rgba(15, 15, 15, 0.1);
  --_colors---alpha--white-20a: rgba(15, 15, 15, 0.16);
}

/* ==========================================================================
   2. Buttons: theme puts dark text on yellow fills; on #c2410c text is white
   ========================================================================== */
html[data-theme="light"] .primary-button,
html[data-theme="light"] .submit-button {
  color: #ffffff !important;
}
html[data-theme="light"] .primary-button:hover {
  color: #ffffff !important;
}
html[data-theme="light"] .submit-button:hover {
  background-color: #9a3412;
  color: #ffffff !important;
}
/* "Jetzt buchen" pill: Dunkelorange in light mode (user request 2026-08-22);
   !important needed to unwind rebuild.css color !important */
html[data-theme="light"] .secondary-button {
  background-color: #c2410c;
  border-color: #c2410c;
  color: #ffffff !important;
}
html[data-theme="light"] .secondary-button:hover {
  background-color: #9a3412;
  border-color: #9a3412;
}
/* the 5px dot inside the pill: white on the orange fill */
html[data-theme="light"] .secondary-button-bg { background-color: #ffffff; }

/* ==========================================================================
   3. Site-wide fixes (nav, footer, forms), hardcoded in existing CSS
   ========================================================================== */
html[data-theme="light"] .brand-name { color: #1a1a1a; }
html[data-theme="light"] .brand-logo { box-shadow: 0 0 0 1px #e4e1db; }
html[data-theme="light"] .nav-dropdown-toggle:hover,
html[data-theme="light"] .nav-dropdown-toggle:focus-visible { color: #3a3a3a; }
html[data-theme="light"] .footer {
  background-image: radial-gradient(circle at 12% 0, #0000 55%, rgba(194, 65, 12, 0.05)), radial-gradient(circle at 88% 100%, #0000 50%, rgba(194, 65, 12, 0.03));
}
html[data-theme="light"] .footer-tag { color: #4b4b4b; }
html[data-theme="light"] .faq-inline-link { color: #c2410c; }
html[data-theme="light"] .faq-toggle:focus-visible { outline-color: #c2410c; }
html[data-theme="light"] .initials-badge {
  background-color: #eceae5;
  border-color: #e4e1db;
  color: #c2410c;
}
html[data-theme="light"] .w-slider-dot { background-color: rgba(15, 15, 15, 0.25); }
html[data-theme="light"] .w-slider-dot.w-active { background-color: #c2410c; }

/* contact form: dark has black top/side borders (invisible on dark, visible on light)
   and a white submit hover (invisible on light) */
html[data-theme="light"] .input-field {
  border-color: transparent transparent var(--_colors---alpha--white-20a);
}

/* mobile hamburger: yellow square in dark, accent in light */
@media (max-width: 991px) {
  html[data-theme="light"] .menu-button { background-color: #c2410c; color: #ffffff; }
  html[data-theme="light"] .menu-button.w--open { background-color: #1a1a1a; color: #ffffff; }
}

/* ==========================================================================
   4. Homepage (index.html, en/index.html)
   ========================================================================== */
/* hero photo is light; flip the dark scrim, text goes dark via var remap */
html[data-theme="light"] .hero-frames-overlay {
  background: linear-gradient(180deg, rgba(250, 249, 247, 0.55) 0%, rgba(250, 249, 247, 0.35) 45%, rgba(250, 249, 247, 0.92) 100%);
}
@media (min-width: 992px) {
  html[data-theme="light"] .home-hero-section { background: #faf9f7; }
}
@media (max-width: 991px) {
  html[data-theme="light"] .home-hero-section { background: #faf9f7; }
}
/* glass panel "Ihre Gastgeberin" over the light hero photo */
html[data-theme="light"] .home-about-section { background: rgba(250, 249, 247, 0.94); }
/* decorative ring, inline style attribute needs !important */
html[data-theme="light"] .hero-ring {
  background: repeating-conic-gradient(#1a1a1a 0deg 6deg, transparent 6deg 12deg) !important;
}
html[data-theme="light"] .usp-ticker-dot { background-color: #c2410c; }
html[data-theme="light"] .usp-ticker-text { color: #4b4b4b; }
html[data-theme="light"] .rebuild-stat-number { color: #1a1a1a; }
html[data-theme="light"] .rebuild-stat-label { color: #767676; }
/* Booking.com badge: white glass on dark -> light glass with dark text */
html[data-theme="light"] .booking-badge {
  background: rgba(255, 255, 255, 0.6);
  border-color: rgba(15, 15, 15, 0.14);
}
html[data-theme="light"] .booking-badge-grade,
html[data-theme="light"] .booking-badge-count { color: #1a1a1a; }

/* smoobu glass widget (inline <style> in homepage body, beaten by specificity) */
html[data-theme="light"] .smoobu-glass {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(15, 15, 15, 0.12);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
html[data-theme="light"] .glass-field label { color: #4b4b4b; }
html[data-theme="light"] .glass-field input,
html[data-theme="light"] .glass-field select {
  color: #1a1a1a;
  background: rgba(15, 15, 15, 0.05);
  border-color: rgba(15, 15, 15, 0.15);
}
html[data-theme="light"] .glass-field input:focus,
html[data-theme="light"] .glass-field select:focus {
  border-color: #c2410c;
  background: rgba(15, 15, 15, 0.08);
}
html[data-theme="light"] .glass-field input::-webkit-calendar-picker-indicator { filter: none; opacity: 0.75; }
html[data-theme="light"] .glass-field select option { background: #ffffff; color: #1a1a1a; }
html[data-theme="light"] .glass-submit { background: #c2410c; color: #ffffff; }
html[data-theme="light"] .glass-submit:hover { background: #9a3412; filter: none; }

/* process accordion "So funktioniert Ihr Aufenthalt": Webflow IX timelines
   fail to resolve var() colors and write literal inline styles (color: yellow,
   color: white, background-color: yellow). Inline styles lose only to
   !important. State anchor: rebuild.js toggles aria-expanded on click. */
html[data-theme="light"] .process-step-title { color: #1a1a1a !important; }
html[data-theme="light"] .process-step-head[aria-expanded="true"] .process-step-title { color: #c2410c !important; }
html[data-theme="light"] .process-step-arrow {
  background-color: transparent !important;
  color: #1a1a1a !important;
}
html[data-theme="light"] .process-step-head[aria-expanded="true"] .process-step-arrow {
  background-color: #c2410c !important;
  color: #ffffff !important;
}
/* safety net for any other broken IX timeline dropping literal yellow */
html[data-theme="light"] [style*="color: yellow"] { color: #c2410c !important; }
html[data-theme="light"] [style*="background-color: yellow"] { background-color: #c2410c !important; }

/* ==========================================================================
   5. Apartment pages
   ========================================================================== */
/* source icon SVGs are #333, inverted for dark; light shows them as-is */
html[data-theme="light"] .fact-icon { filter: none; }
html[data-theme="light"] .amenity-item {
  border-color: #e4e1db;
  color: #4b4b4b;
  background-color: #f5f4f1;
}
html[data-theme="light"] .availability-section .availability-iframe-wrapper {
  border-color: #e4e1db;
  background-color: #ffffff;
}
html[data-theme="light"] .specs-card { border-color: #e4e1db; }
html[data-theme="light"] .material-item { border-color: #eceae5; }

/* ==========================================================================
   6. Booking pages (buchen, en/booking) + booking CTA band (many pages)
   ========================================================================== */
html[data-theme="light"] .smoobu-fallback-note { color: #767676; }
html[data-theme="light"] .smoobu-fallback-note a { color: #c2410c; }
html[data-theme="light"] .calendar-card-meta { color: #767676; }
/* CTA band: photo dimming stays (brightness 40%), glass card flips to light
   with dark text (dark glass over the dimmed photo rendered muddy gray) */
html[data-theme="light"] .booking-inner {
  background-color: rgba(255, 255, 255, 0.72);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   7. Unterkuenfte / category filter / recognition
   ========================================================================== */
html[data-theme="light"] .cms-category-link.is-active {
  color: #ffffff;
  background-color: #c2410c;
  border-color: #c2410c;
}
html[data-theme="light"] .recognition-list {
  background-color: #f5f4f1;
  border-color: #eceae5;
}

/* ==========================================================================
   8. Ausstattung & Service (spotlight/service module)
   ========================================================================== */
html[data-theme="light"] .service-item-meta { border-color: #e4e1db; }
html[data-theme="light"] .service-item-arrow { color: #1a1a1a; }
html[data-theme="light"] .spotlight-wrapper { border-color: #e4e1db; }
/* class name really is misspelled in the source */
html[data-theme="light"] .spotilight-content-block {
  background-color: #f5f4f1;
  border-left-color: #eceae5;
}
html[data-theme="light"] .spotlight-exceprt { border-left-color: #c2410c; }
html[data-theme="light"] .sp-panel-stat-label { color: #767676; }

/* ==========================================================================
   9. Region / blog pages
   ========================================================================== */
html[data-theme="light"] .post-thumbnail-wrapper { background-color: #efede9; }
html[data-theme="light"] .blog-topic { border-color: rgba(15, 15, 15, 0.08); }
html[data-theme="light"] .blog-details-topic { border-color: #e4e1db; }

/* ==========================================================================
   10. Ueber uns
   ========================================================================== */
html[data-theme="light"] .story-founder-quote { border-top-color: #eceae5; }

/* ==========================================================================
   10b. Dark mode: "Jetzt buchen" pill filled yellow (user request 2026-08-22).
   The old black/white pill came from the 2026-07-11 IX-freeze workaround in
   rebuild.css (fill animation disabled, color: white !important). Fill is now
   painted statically, same convention as .primary-button: yellow bg, dark
   text. Scoped :not(light) so it also covers the no-JS fallback (always dark).
   ========================================================================== */
html:not([data-theme="light"]) .secondary-button {
  background-color: #fbfb4c;
  border-color: #fbfb4c;
  color: #0f0f0f !important;
}
html:not([data-theme="light"]) .secondary-button:hover {
  background-color: #ffffff;
  border-color: #ffffff;
}
/* the 5px dot inside the pill: dark on the yellow fill (mirror of light) */
html:not([data-theme="light"]) .secondary-button-bg { background-color: #0f0f0f; }

/* ==========================================================================
   11. Theme toggle button + mobile header controls (theme-independent)
   ========================================================================== */
.theme-toggle-button {
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  color: inherit;
}
.theme-toggle-button svg { width: 18px; height: 18px; display: block; }
/* dark shows sun (click -> light look preview), light shows moon */
.theme-toggle-button .icon-sun { display: block; }
.theme-toggle-button .icon-moon { display: none; }
html[data-theme="light"] .theme-toggle-button .icon-sun { display: none; }
html[data-theme="light"] .theme-toggle-button .icon-moon { display: block; }

.nav-mobile-controls { display: none; }
@media (max-width: 991px) {
  /* default 40px column-gap overflows the 360px viewport once EN + toggle are in the bar */
  .nav-wrapper { column-gap: 12px; }
  .nav-mobile-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto;
    margin-right: 12px;
  }
  .nav-mobile-controls .nav-menu-link { padding: 0; }
}