/* === noir-theme.css === */
/* Bei.Gretel "Luxury Wellness Noir" Theme */
/* All styles scoped to body.noir for instant rollback */
/* Plain CSS — bypasses scssphp v0.8.0 */

/* ========================================================
   1. BASE DARK THEME
   ======================================================== */

body.noir {
  background-color: var(--bg-noir);
  color: var(--text-primary);
  padding: 0;
}

body.noir::before {
  display: none;
}

body.noir div#parent {
  background-color: var(--bg-noir);
  background-image: none;
  min-height: 100vh;
}

body.noir div#parent::before,
body.noir div#parent::after {
  display: none;
}

body.noir main {
  background: transparent;
}

/* Text colors */
body.noir h1, body.noir h2, body.noir h3, body.noir h4, body.noir h5, body.noir h6 {
  color: var(--text-primary);
}

body.noir p {
  color: var(--text-secondary);
}

body.noir a {
  color: var(--gold);
  transition: color var(--dur-fast) ease;
}

body.noir a:hover {
  color: var(--gold-light);
}

/* Content element overrides */
body.noir div.ce h2.ce-headline {
  color: var(--text-primary);
}

body.noir div.ce.ce-style1,
body.noir div.ce.ce-style1 * {
  color: var(--text-primary);
}

body.noir div.ce.ce-style2 > div.wrapper {
  background-color: var(--bg-deep);
}

body.noir div.ce.ce-style2 > div.wrapper h2 {
  color: var(--text-primary);
}

/* ========================================================
   2. GLASS CARD COMPONENT
   ======================================================== */

body.noir .glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .glass-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

body.noir .glass-card h3 {
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
  color: var(--gold);
}

body.noir .glass-card p {
  color: var(--text-secondary);
  font-size: 0.95rem;
}

body.noir .glass-card .detail {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}

/* ========================================================
   3. BUTTONS
   ======================================================== */

body.noir .btn-gold {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.8rem;
  background: var(--gold);
  color: var(--text-dark);
  font-family: 'JosefinSans-Bold', 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .btn-gold:hover {
  background: var(--gold-light);
  color: var(--text-dark);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

body.noir .btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.8rem;
  background: transparent;
  color: var(--gold);
  font-family: 'JosefinSans-Bold', 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold);
  border-radius: var(--radius-full);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .btn-ghost:hover {
  background: var(--gold);
  color: var(--text-dark);
  box-shadow: var(--shadow-glow);
}

/* Override existing .button.gold for noir */
body.noir .button.gold,
body.noir a.button.gold {
  background: var(--gold);
  color: var(--text-dark);
  border: none;
}

body.noir .button.gold:hover,
body.noir a.button.gold:hover {
  background: var(--gold-light);
  color: var(--text-dark);
}

/* ========================================================
   4. SECTION BACKGROUNDS WITH ANIMATED GRADIENTS
   ======================================================== */

body.noir .section {
  padding: var(--section-pad-y) var(--section-pad-x);
  position: relative;
  overflow: hidden;
}

body.noir .section-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

body.noir .section-noir {
  background: var(--bg-noir);
}

body.noir .section-forest {
  background: var(--bg-forest);
  position: relative;
}

body.noir .section-forest::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(45,90,63,0.4) 0%, transparent 70%);
  animation: gradient-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
}

body.noir .section-crimson {
  background: var(--bg-crimson);
  position: relative;
}

body.noir .section-crimson::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(139,34,50,0.35) 0%, transparent 65%);
  animation: gradient-drift 15s ease-in-out infinite alternate;
  pointer-events: none;
}

body.noir .section-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-bottom: 0.75rem;
}

body.noir .section-title {
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.25;
  margin-bottom: 2rem;
  color: var(--text-primary);
}

/* Cards grid */
body.noir .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md);
  position: relative;
  z-index: 1;
}

/* Split layout */
body.noir .split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: center;
  position: relative;
  z-index: 1;
}

body.noir .split-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  background: var(--bg-deep);
}

body.noir .split-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Stats bar */
body.noir .stats-bar {
  display: flex;
  justify-content: center;
  gap: 4rem;
  padding: 3rem 2rem;
  position: relative;
  z-index: 1;
}

body.noir .stat {
  text-align: center;
}

body.noir .stat-value {
  font-family: 'Caveat-Bold', 'Caveat', cursive;
  font-size: 3rem;
  color: var(--gold);
  line-height: 1;
}

body.noir .stat-label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-weight: 600;
}

/* ========================================================
   5. GLOW PULSE EFFECT
   ======================================================== */

body.noir .glow-pulse {
  position: relative;
}

body.noir .glow-pulse::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 130%;
  height: 130%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--gold-muted) 0%, transparent 70%);
  animation: pulse-glow 4s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
}

/* ========================================================
   6. ORNAMENT
   ======================================================== */

body.noir .ornament {
  width: 60px;
  height: 60px;
  opacity: 0.3;
  animation: ornament-spin 30s linear infinite;
  margin: 2rem auto;
}

/* ========================================================
   7. SCROLL REVEAL
   ======================================================== */

/* reveal only activates when JS adds .js-reveal to <html> */
html.js-reveal body.noir .reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--dur-slow) var(--ease-out),
              transform var(--dur-slow) var(--ease-out);
}

html.js-reveal body.noir .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

body.noir .reveal-d1 { transition-delay: 100ms; }
body.noir .reveal-d2 { transition-delay: 200ms; }
body.noir .reveal-d3 { transition-delay: 300ms; }

/* ========================================================
   8. KEYFRAMES
   ======================================================== */

@keyframes gradient-drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(5%, -3%) scale(1.1); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: 0.2; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: 0.45; transform: translate(-50%, -50%) scale(1.05); }
}

@keyframes ornament-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes subtleFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}

@keyframes nav-bg-drift {
  0%   { transform: scale(1) translate(0, 0); }
  100% { transform: scale(1.1) translate(3%, -2%); }
}

@keyframes nav-item-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ========================================================
   9. STICKY HEADER
   ======================================================== */

body.noir .header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-header);
  padding: 1rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(13,13,13,0.6);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: all 0.4s var(--ease-out);
}

body.noir .header.scrolled {
  padding: 0.6rem 2rem;
  background: rgba(13,13,13,0.85);
}

body.noir .header-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

body.noir .header-logo svg {
  width: 60px;
  height: 60px;
  transition: all 0.3s ease;
}

body.noir .header.scrolled .header-logo svg {
  width: 45px;
  height: 45px;
}

body.noir .header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Menu Toggle */
body.noir .menu-toggle {
  width: 48px;
  height: 48px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  transition: all 0.3s var(--ease-out);
  padding: 0;
}

body.noir .menu-toggle:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

body.noir .menu-toggle span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--text-primary);
  transition: all 0.4s var(--ease-out);
}

body.noir .menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(4.5px, 4.5px);
}

body.noir .menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

body.noir .menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(4.5px, -4.5px);
}

/* ========================================================
   10. FULLSCREEN NAV OVERLAY
   ======================================================== */

body.noir .nav-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav-overlay);
  background: rgba(13,13,13,0.95);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.6s var(--ease-out);
  overflow-y: auto;
  padding: 100px 2rem 3rem;
}

body.noir .nav-overlay.open {
  opacity: 1;
  visibility: visible;
}

body.noir .nav-overlay::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(45,90,63,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139,34,50,0.12) 0%, transparent 50%);
  animation: nav-bg-drift 20s ease-in-out infinite alternate;
  pointer-events: none;
}

body.noir .nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem 5rem;
  max-width: 900px;
  position: relative;
  z-index: 1;
}

body.noir .nav-group h3,
body.noir .nav-group-title {
  font-family: 'JosefinSans-Bold', 'Josefin Sans', sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.2rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--gold-muted);
  display: block;
  text-decoration: none;
}

body.noir .nav-group a {
  display: block;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 300;
  padding: 0.4rem 0;
  transition: all 0.3s var(--ease-out);
  position: relative;
}

body.noir .nav-group a:hover {
  color: var(--text-primary);
  transform: translateX(8px);
}

body.noir .nav-group a::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 4px;
  height: 4px;
  background: var(--gold);
  border-radius: 50%;
  opacity: 0;
  transform: translateY(-50%) scale(0);
  transition: all 0.3s var(--ease-out);
}

body.noir .nav-group a:hover::before {
  opacity: 1;
  transform: translateY(-50%) scale(1);
}

/* Nav stagger animation */
body.noir .nav-overlay.open .nav-group {
  animation: nav-item-in 0.6s var(--ease-out) both;
}

body.noir .nav-overlay.open .nav-group:nth-child(1) { animation-delay: 0.1s; }
body.noir .nav-overlay.open .nav-group:nth-child(2) { animation-delay: 0.15s; }
body.noir .nav-overlay.open .nav-group:nth-child(3) { animation-delay: 0.2s; }
body.noir .nav-overlay.open .nav-group:nth-child(4) { animation-delay: 0.25s; }
body.noir .nav-overlay.open .nav-group:nth-child(5) { animation-delay: 0.3s; }
body.noir .nav-overlay.open .nav-group:nth-child(6) { animation-delay: 0.35s; }


/* ========================================================
   11. HERO SECTION — Split: Text links, Bild rechts
   ======================================================== */

body.noir .hero-section {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 120px 0 4rem;
  position: relative;
  overflow: hidden;
  background: var(--bg-noir);
}

body.noir .hero-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(45,90,63,0.12) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 30%, rgba(139,34,50,0.08) 0%, transparent 50%);
  pointer-events: none;
}

body.noir .hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-xl);
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--section-pad-x);
  position: relative;
  z-index: 1;
  width: 100%;
}

body.noir .hero-content {
  position: relative;
  z-index: 1;
}

body.noir .hero-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
  font-weight: 600;
}

body.noir .hero-content h1 {
  font-family: 'Josefin Sans', sans-serif;
  font-weight: 300;
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: var(--text-primary);
}

body.noir .hero-content h1 em {
  font-family: 'Caveat-Bold', 'Caveat', cursive;
  font-style: normal;
  color: var(--gold);
  font-size: 1.15em;
}

body.noir .hero-logo {
  max-width: 180px;
  margin-bottom: 2rem;
  animation: subtleFloat 6s ease-in-out infinite;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,0.3));
}

body.noir .hero-actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Hero-Bild rechts */
body.noir .hero-image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
  position: relative;
}

body.noir .hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  aspect-ratio: 4/3;
}

body.noir .hero-image::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--radius-lg);
  border: 1px solid var(--gold-muted);
  pointer-events: none;
}

/* ========================================================
   12. FOOTER
   ======================================================== */

body.noir footer,
body.noir .noir-footer {
  background: linear-gradient(to bottom, var(--bg-noir), #0a0a0a);
  background-image: none;
  border-top: 1px solid var(--glass-border);
  margin-top: 0;
}

body.noir footer > div.wrapper.flex.c4 {
  padding: 4rem 2rem;
}

body.noir footer > div.wrapper.flex.c4 > div,
body.noir footer > div.wrapper.flex.c4 > div * {
  color: var(--text-secondary);
  line-height: 1.6;
}

body.noir footer h3 {
  color: var(--gold);
  font-size: 1.1rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  margin-bottom: 1rem;
}

body.noir footer a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.2s;
}

body.noir footer a:hover {
  color: var(--gold-light);
}

body.noir footer ul#footerNavigation {
  position: static;
  background: none;
  background-color: transparent;
  border-top: 1px solid rgba(201,168,76,0.1);
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  overflow: visible;
}

body.noir footer ul#footerNavigation li {
  display: inline-block;
}

body.noir footer ul#footerNavigation li > a,
body.noir footer ul#footerNavigation li > span {
  display: inline-block;
  padding: 1rem 1rem 0.6rem;
  text-decoration: none;
}

body.noir footer ul#footerNavigation li > a span,
body.noir footer ul#footerNavigation li > span span {
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body.noir footer ul#footerNavigation li > a:hover span {
  color: var(--gold);
}

/* ========================================================
   13. POPUP OVERRIDE
   ======================================================== */

body.noir div#popup {
  background-color: rgba(26,26,26,0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-deep);
}

body.noir div#popup,
body.noir div#popup * {
  color: var(--text-primary);
}

body.noir div#popup button {
  background: var(--gold);
  color: var(--text-dark);
}

/* ========================================================
   14. RESPONSIVE
   ======================================================== */

/* Tablet */
@media only screen and (max-width: 768px) {
  body.noir .nav-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    padding: 0 1.5rem;
  }

  body.noir .header {
    padding: 0.75rem 1.5rem;
  }

  body.noir .header-actions .btn-gold span {
    display: none;
  }

  body.noir .split {
    gap: 2rem;
  }

  body.noir .stats-bar {
    flex-wrap: wrap;
    gap: 2rem;
  }

  body.noir .hero-section {
    min-height: 0;
    padding: 100px 0 3rem;
  }

  body.noir .hero-split {
    grid-template-columns: 1fr;
    gap: 3rem;
    text-align: center;
  }

  body.noir .hero-content {
    max-width: 600px;
    margin: 0 auto;
  }

  body.noir .hero-logo {
    margin-left: auto;
    margin-right: auto;
  }

  body.noir .hero-actions {
    justify-content: center;
  }

  body.noir .hero-image {
    max-width: 500px;
    margin: 0 auto;
  }

  body.noir footer > div.wrapper.flex.c4 > div {
    text-align: center;
    margin-bottom: 2rem;
  }

  body.noir footer ul#footerNavigation {
    flex-direction: column;
    align-items: center;
  }

  body.noir footer ul#footerNavigation li {
    display: block;
    text-align: center;
  }

  body.noir footer ul#footerNavigation li > a,
  body.noir footer ul#footerNavigation li > span {
    padding: 0.5rem 1rem;
  }
}

/* Mobile */
@media only screen and (max-width: 480px) {
  body.noir .nav-grid {
    grid-template-columns: 1fr;
  }

  body.noir .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body.noir .stats-bar {
    flex-direction: column;
    gap: 1.5rem;
  }

  body.noir .hero-section {
    padding-top: 90px;
  }

  body.noir .hero-content h1 {
    font-size: 1.8rem;
  }

  body.noir .header {
    padding: 0.6rem 1rem;
  }
}

/* ========================================================
   14b. SUBPAGE CONTENT PADDING
   Fixed header overlaps content on pages without hero
   ======================================================== */

/* Pages WITHOUT hero (no .header class on body): add top padding */
body.noir:not(.header) #content {
  padding-top: 100px;
}

/* Pages WITH hero: hero section has its own padding-top */
body.noir.header #content {
  padding-top: 0;
}

/* First CE on subpages: extra top padding for breathing room */
body.noir:not(.header) #content > .ce:first-child {
  padding-top: clamp(2rem, 4vw, 4rem);
}

/* ========================================================
   14c. SUBPAGE HEADER (Eyebrow + Title für Seiten ohne Hero)
   ======================================================== */

body.noir .subpage-header {
  text-align: center;
  padding: clamp(2rem, 5vw, 4rem) var(--section-pad-x) clamp(1rem, 3vw, 2rem);
  max-width: 800px;
  margin: 0 auto;
}

body.noir .subpage-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

body.noir .subpage-title {
  font-weight: 300;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.2;
  color: var(--text-primary);
  margin: 0;
}

body.noir .subpage-subtitle {
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  margin-top: 0.75rem;
  line-height: 1.5;
}

/* ========================================================
   15. ALL CEs ALS NOIR SECTIONS
   Targets: feature red/green, section-*, and generic CEs
   ======================================================== */

/* Full-bleed section treatment for ALL top-level CEs */
body.noir #content > .ce {
  padding: var(--section-pad-y) var(--section-pad-x);
  position: relative;
  overflow: hidden;
  background: var(--bg-noir);
  max-width: none !important;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  float: none;
  clear: both;
  box-sizing: border-box;
}

/* Width-narrow Override — ALL CEs are full-width sections in noir */
body.noir #content > .ce.ce-width-narrow {
  max-width: none !important;
}

/* Alternating deep background for non-feature CEs */
body.noir #content > .ce:nth-child(even):not(.feature):not(.section-forest):not(.section-crimson) {
  background: var(--bg-deep);
}

/* Feature CEs: colored backgrounds (from existing ce_custom_classes) */
body.noir #content > .ce.feature.red {
  background: var(--bg-crimson);
}

body.noir #content > .ce.feature.green {
  background: var(--bg-forest);
}

/* Explicit section-classes (alternative via ce_custom_classes) */
body.noir #content > .ce.section-noir,
body.noir #content > section.ce.section-noir { background: var(--bg-noir); }
body.noir #content > .ce.section-forest,
body.noir #content > section.ce.section-forest { background: var(--bg-forest); }
body.noir #content > .ce.section-crimson,
body.noir #content > section.ce.section-crimson { background: var(--bg-crimson); }

/* Animated gradient overlay: crimson / feature red */
body.noir #content > .ce.feature.red::before,
body.noir #content > .ce.section-crimson::before,
body.noir #content > section.ce.section-crimson::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 70% 40%, rgba(139,34,50,0.35) 0%, transparent 65%);
  animation: gradient-drift 15s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Animated gradient overlay: forest / feature green */
body.noir #content > .ce.feature.green::before,
body.noir #content > .ce.section-forest::before,
body.noir #content > section.ce.section-forest::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(45,90,63,0.4) 0%, transparent 70%);
  animation: gradient-drift 12s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 0;
}

/* Centered wrapper in ALL CEs */
body.noir #content > .ce > div.wrapper {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* CE-Headline als Section-Title */
body.noir .ce h2.ce-headline {
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.25;
  margin-bottom: 2rem;
  text-align: left;
  color: var(--text-primary);
}

/* ce-style2 wrapper als glass-card */
body.noir #content > .ce.ce-style2 > div.wrapper {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
  max-width: 900px;
}

/* ========================================================
   15b. TEXT CE — GLASS CARD TREATMENT
   ======================================================== */

/* Text-CE Wrapper als Glass-Card */
body.noir #content > .ce.ce-type-text > div.wrapper {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 2.5rem 3rem;
  box-shadow: var(--shadow-glass);
  max-width: 900px;
}

/* Headline innerhalb Text-CE: Gold-Akzent */
body.noir .ce-type-text h2.ce-headline {
  text-align: center;
  position: relative;
  padding-top: 1.5rem;
  margin-bottom: 1.5rem;
}

body.noir .ce-type-text h2.ce-headline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: var(--gold);
}

/* Text-CE Content: bessere Typografie */
body.noir .ce-type-text .text {
  font-size: clamp(0.95rem, 1.1vw, 1.05rem);
  line-height: 1.8;
  color: var(--text-secondary);
}

body.noir .ce-type-text .text p {
  margin-bottom: 0.75rem;
}

/* Listen: kein versetzter Einzug, Gold-Marker */
body.noir .ce-type-text .text ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
}

body.noir .ce-type-text .text ul li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.6rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

body.noir .ce-type-text .text ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}

/* Starke Texte in Gold */
body.noir .ce-type-text .text strong {
  color: var(--text-primary);
  font-weight: 500;
}

/* Responsive */
@media only screen and (max-width: 48rem) {
  body.noir #content > .ce.ce-type-text > div.wrapper {
    padding: 1.75rem 1.5rem;
  }
}

/* ========================================================
   16. ROOMS OVERVIEW → GLASS CARDS GRID
   ======================================================== */

body.noir .ce-type-rooms_overview ul.roomsOverview {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md);
  list-style: none;
  padding: 0;
  margin: 0;
}

body.noir .ce-type-rooms_overview li.room {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-base) var(--ease-out);
  width: auto;
  float: none;
  margin: 0;
}

body.noir .ce-type-rooms_overview li.room:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

body.noir .ce-type-rooms_overview li.room > figure {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: calc(-1 * var(--card-padding));
  margin-bottom: 1rem;
  aspect-ratio: 16/10;
  background: var(--bg-deep);
}

body.noir .ce-type-rooms_overview li.room > figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body.noir .ce-type-rooms_overview li.room > figure figcaption {
  display: none;
}

body.noir .ce-type-rooms_overview li.room article {
  padding: 0;
  background: transparent;
}

body.noir .ce-type-rooms_overview li.room article,
body.noir .ce-type-rooms_overview li.room article * {
  color: var(--text-primary);
}

body.noir .ce-type-rooms_overview li.room h3 {
  color: var(--gold);
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
}

body.noir .ce-type-rooms_overview li.room h4 {
  color: var(--text-secondary);
  font-size: 0.85rem;
  margin-bottom: 0.75rem;
}

body.noir .ce-type-rooms_overview li.room ul.props {
  list-style: none;
  padding: 0;
  margin: 0 0 0.75rem;
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.75rem;
}

body.noir .ce-type-rooms_overview li.room ul.props li {
  display: inline-block;
  margin-right: 0.75rem;
  font-size: 0.8rem;
}

body.noir .ce-type-rooms_overview li.room ul.props li span {
  color: var(--text-secondary);
}

body.noir .ce-type-rooms_overview li.room ul.price {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

body.noir .ce-type-rooms_overview li.room ul.price li {
  font-size: 0.9rem;
}

body.noir .ce-type-rooms_overview li.room ul.price strong {
  color: var(--gold);
  font-size: 1.1rem;
}

body.noir .ce-type-rooms_overview li.room ul.price a {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: var(--radius-full);
  padding: 0.4rem 1.2rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  text-decoration: none;
  font-weight: 600;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .ce-type-rooms_overview li.room ul.price a:hover {
  background: var(--gold);
  color: var(--text-dark);
}

/* Outro-Text (z.B. "Alle Zimmer ansehen" Button) */
body.noir .ce-type-rooms_overview div.text.outro {
  text-align: center;
  margin-top: 3rem;
}

/* ========================================================
   16b. ROOM DETAIL PAGE — LUXURY PREMIUM (zimmer.view.php)
   ======================================================== */

/* --- Hero: Full-width image with gradient overlay --- */
body.noir .room-hero-luxury {
  margin-bottom: 0;
}

body.noir .room-hero-image {
  position: relative;
  width: 100%;
  height: 70vh;
  min-height: 400px;
  max-height: 700px;
  overflow: hidden;
}

body.noir .room-hero-image > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.5s ease;
}

body.noir .room-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0.3) 40%,
    transparent 70%
  );
  display: flex;
  align-items: flex-end;
  padding: 3rem var(--section-pad-x);
}

body.noir .room-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

body.noir .room-hero-content .room-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.75rem;
}

body.noir .room-hero-content h1 {
  font-weight: 300;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1.15;
  color: #fff;
  margin-bottom: 0.5rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.4);
}

body.noir .room-hero-content p {
  color: rgba(255,255,255,0.75);
  font-size: 1.05rem;
  font-weight: 300;
  margin: 0;
}

/* --- Thumbnail Strip --- */
body.noir .room-thumbs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem var(--section-pad-x);
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--gold) transparent;
}

body.noir .room-thumb {
  flex: 0 0 auto;
  width: 90px;
  height: 64px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 2px solid transparent;
  cursor: pointer;
  background: none;
  padding: 0;
  opacity: 0.5;
  transition: opacity 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

body.noir .room-thumb:hover {
  opacity: 0.8;
  transform: translateY(-2px);
}

body.noir .room-thumb.active {
  opacity: 1;
  border-color: var(--gold);
}

body.noir .room-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Room Detail Section --- */
body.noir .room-section {
  background: var(--bg-noir);
  padding: var(--section-pad-y) var(--section-pad-x);
}

body.noir .room-detail {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--gap-xl);
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

/* Room Eyebrow (fallback ohne Bilder) */
body.noir .room-eyebrow {
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1rem;
}

body.noir .room-main h2 {
  font-weight: 300;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.2;
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

body.noir .room-main h3 {
  color: var(--text-secondary);
  font-weight: 400;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}

/* --- Quick Stats Bar --- */
body.noir .room-stats {
  display: flex;
  gap: 0;
  margin-bottom: 2.5rem;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

body.noir .room-stat {
  flex: 1;
  text-align: center;
  padding: 1.25rem 1rem;
  border-right: 1px solid var(--glass-border);
}

body.noir .room-stat:last-child {
  border-right: none;
}

body.noir .room-stat .stat-value {
  display: block;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--gold);
  margin-bottom: 0.25rem;
}

body.noir .room-stat .stat-label {
  display: block;
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* --- Room Description WYSIWYG --- */
body.noir .room-description {
  color: var(--text-secondary);
  line-height: 1.8;
  margin-bottom: 2.5rem;
}

body.noir .room-description p {
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

body.noir .room-description strong {
  color: var(--text-primary);
}

body.noir .room-description ul {
  color: var(--text-secondary);
  padding-left: 1.2em;
  margin-bottom: 1rem;
}

body.noir .room-description ul li {
  margin-bottom: 0.4rem;
  color: var(--text-secondary);
}

body.noir .room-description h4,
body.noir .room-description h3 {
  color: var(--text-primary);
}

/* --- Booking CTA --- */
body.noir .room-booking {
  display: flex;
  gap: 1rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 2rem;
  border-top: 1px solid var(--glass-border);
}

/* --- Features Sidebar — Glass Card --- */
body.noir .room-features {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
  position: sticky;
  top: 6rem;
}

body.noir .room-features h4 {
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--glass-border);
}

body.noir .room-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.noir .room-features ul li {
  color: var(--text-secondary);
  font-size: 0.85rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

body.noir .room-features ul li:last-child {
  border-bottom: none;
}

body.noir .room-features ul li span {
  color: var(--text-primary);
}

/* Inklusive Section */
body.noir .room-inclusive {
  margin-top: 1.5rem;
  padding-top: 0.5rem;
}

body.noir .room-inclusive h4 {
  margin-top: 0;
}

body.noir .room-inclusive ul li span {
  color: var(--text-secondary);
}

/* --- Responsive: Room Detail --- */
@media only screen and (max-width: 48rem) {
  body.noir .room-hero-image {
    height: 50vh;
    min-height: 280px;
  }

  body.noir .room-hero-overlay {
    padding: 2rem 1.25rem;
  }

  body.noir .room-hero-content h1 {
    font-size: 1.8rem;
  }

  body.noir .room-thumbs {
    padding: 0.75rem 1rem;
  }

  body.noir .room-thumb {
    width: 70px;
    height: 50px;
  }

  body.noir .room-detail {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  body.noir .room-stats {
    flex-direction: column;
  }

  body.noir .room-stat {
    border-right: none;
    border-bottom: 1px solid var(--glass-border);
    padding: 1rem;
  }

  body.noir .room-stat:last-child {
    border-bottom: none;
  }

  body.noir .room-features {
    position: static;
  }

  body.noir .room-booking {
    flex-direction: column;
    align-items: stretch;
  }

  body.noir .room-booking .btn-gold,
  body.noir .room-booking .btn-ghost {
    text-align: center;
  }
}

/* ========================================================
   17. TEXT_WITH_IMAGE → SPLIT LAYOUT
   Works with all alignment classes: left, right, behind,
   before, box_overlay_*, box_behind_*, left-float, right-float
   ======================================================== */

/* Grid split for ALL text_with_image layouts
   Handles ALL PW proportions: w50-50, w60-40, w70-30 */

/* Base grid for ANY proportion */
body.noir .ce-type-text_with_image div.left[class*="w5"],
body.noir .ce-type-text_with_image div.left[class*="w6"],
body.noir .ce-type-text_with_image div.left[class*="w7"],
body.noir .ce-type-text_with_image div.right[class*="w5"],
body.noir .ce-type-text_with_image div.right[class*="w6"],
body.noir .ce-type-text_with_image div.right[class*="w7"],
body.noir .ce-type-text_with_image div.before[class*="w5"],
body.noir .ce-type-text_with_image div.before[class*="w6"],
body.noir .ce-type-text_with_image div.behind[class*="w5"],
body.noir .ce-type-text_with_image div.behind[class*="w6"],
body.noir .ce-type-text_with_image div[class*="box_overlay"][class*="w5"],
body.noir .ce-type-text_with_image div[class*="box_overlay"][class*="w6"],
body.noir .ce-type-text_with_image div[class*="box_overlay"][class*="w7"],
body.noir .ce-type-text_with_image div[class*="box_behind"][class*="w5"],
body.noir .ce-type-text_with_image div[class*="box_behind"][class*="w6"],
body.noir .ce-type-text_with_image div[class*="box_behind"][class*="w7"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: center;
  float: none !important;
  width: 100% !important;
  max-width: none !important;
  position: static;
}

/* Proportional columns: w60-40 → 3fr 2fr */
body.noir .ce-type-text_with_image div[class*="w60"] {
  grid-template-columns: 3fr 2fr;
}

/* Proportional columns: w70-30 → 7fr 3fr */
body.noir .ce-type-text_with_image div[class*="w70"] {
  grid-template-columns: 7fr 3fr;
}

/* Float-based alignments: images inside text, use float */
body.noir .ce-type-text_with_image div.right-float[class*="w5"],
body.noir .ce-type-text_with_image div.left-float[class*="w5"] {
  display: block !important;
  float: none !important;
  width: 100% !important;
}

body.noir .ce-type-text_with_image div.right-float > .text > .images {
  float: right;
  width: 45%;
  margin: 0 0 1.5rem 2rem;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

body.noir .ce-type-text_with_image div.left-float > .text > .images {
  float: left;
  width: 45%;
  margin: 0 2rem 1.5rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
}

/* Images container — rounded corners, cover fit */
body.noir .ce-type-text_with_image div.images {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-deep);
}

body.noir .ce-type-text_with_image div.images figure {
  margin: 0;
  padding: 0;
  height: 100%;
}

body.noir .ce-type-text_with_image div.images figure + figure {
  margin-top: 1rem;
}

body.noir .ce-type-text_with_image div.images img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}

body.noir .ce-type-text_with_image div.images figcaption {
  display: none;
}

/* Text container — reset floats/widths */
body.noir .ce-type-text_with_image div.text {
  padding: 0 !important;
  width: 100% !important;
  color: var(--text-secondary);
  float: none !important;
  position: relative;
}

body.noir .ce-type-text_with_image div.text h2,
body.noir .ce-type-text_with_image div.text h3 {
  color: var(--text-primary);
}

body.noir .ce-type-text_with_image div.text p {
  color: var(--text-secondary);
}

body.noir .ce-type-text_with_image div.text strong {
  color: var(--text-primary);
}

body.noir .ce-type-text_with_image div.text ul {
  color: var(--text-secondary);
  padding-left: 1.2em;
}

body.noir .ce-type-text_with_image div.text ul li {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

body.noir .ce-type-text_with_image div.text ul li strong {
  color: var(--text-primary);
}

/* .hint boxes als glass-cards */
body.noir .ce-type-text_with_image div.text .hint {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: var(--shadow-glass);
}

body.noir .ce-type-text_with_image div.text .hint .hint {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Buttons in text_with_image */
body.noir .ce-type-text_with_image a.readMore.button.gold,
body.noir .ce-type-text_with_image a.button.gold {
  background: var(--gold);
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.7rem 1.8rem;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
}

body.noir .ce-type-text_with_image a.readMore.button.gold:hover,
body.noir .ce-type-text_with_image a.button.gold:hover {
  background: var(--gold-light);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

/* Ornament SVGs: animated rotation */
body.noir .ce-type-text_with_image img[src*="ornament"] {
  opacity: 0.3;
  animation: ornament-spin 30s linear infinite;
  display: block;
  margin: 1.5rem auto;
}

@keyframes ornament-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* ========================================================
   18. SUBPAGE CE FALLBACK STYLES
   ======================================================== */

/* Text CE */
body.noir div.ce-type-text div.text {
  color: var(--text-secondary);
}

body.noir div.ce-type-text div.text h2,
body.noir div.ce-type-text div.text h3,
body.noir div.ce-type-text div.text h4 {
  color: var(--text-primary);
}

/* text_with_image: Basis-Styling (ohne Section) */
body.noir div.ce-type-text_with_image div.text {
  color: var(--text-secondary);
}

body.noir div.ce-type-text_with_image div.text h2,
body.noir div.ce-type-text_with_image div.text h3 {
  color: var(--text-primary);
}

body.noir div.ce-type-text_with_image a.readMore.button.gold {
  background: var(--gold);
  color: var(--text-dark);
  border-radius: var(--radius-full);
}

body.noir div.ce-type-text_with_image a.readMore.button.gold:hover {
  background: var(--gold-light);
}

/* Gallery CE */
body.noir div.ce-type-gallery ul {
  list-style: none;
}

body.noir div.ce-type-gallery .gallery ul.slideshow li figure {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin: 0 0.5rem;
}

body.noir div.ce-type-gallery .gallery ul.slideshow li figure img {
  border-radius: var(--radius-sm);
}

body.noir div.ce-type-gallery ul li figure figcaption {
  color: var(--text-secondary);
  background: var(--bg-deep);
}

/* Slick Slider dark theme */
body.noir .slick-dots li button:before {
  color: var(--text-muted);
}

body.noir .slick-dots li.slick-active button:before {
  color: var(--gold);
}

body.noir .slick-prev:before,
body.noir .slick-next:before {
  color: var(--gold);
}

body.noir .slick-prev,
body.noir .slick-next {
  z-index: 2;
}

/* Gallery non-slideshow grid */
body.noir div.ce-type-gallery .gallery ul:not(.slideshow) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--gap-sm);
  padding: 0;
}

body.noir div.ce-type-gallery .gallery ul:not(.slideshow) li {
  border-radius: var(--radius-sm);
  overflow: hidden;
}

body.noir div.ce-type-gallery .gallery ul:not(.slideshow) li figure a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-base) var(--ease-out);
}

body.noir div.ce-type-gallery .gallery ul:not(.slideshow) li:hover figure a img {
  transform: scale(1.05);
}

/* Accordion CE */
body.noir div.ce-type-accordion section h3 {
  color: var(--gold);
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 0.5rem;
  cursor: pointer;
}

body.noir div.ce-type-accordion section div.text {
  color: var(--text-secondary);
}

/* Slideshow CE */
body.noir div.ce-type-slideshow {
  padding: 0;
}

body.noir div.ce-type-slideshow > .wrapper {
  max-width: none;
  padding: 0;
}

body.noir div.ce-type-slideshow .slideshow {
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0 var(--section-pad-x);
}

body.noir div.ce-type-slideshow .slideshow .slide {
  min-height: 50vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
  position: relative;
}

body.noir div.ce-type-slideshow .slideshow .slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.3) 100%);
  z-index: 1;
}

body.noir div.ce-type-slideshow .slideshow .slide .wrapper {
  position: relative;
  z-index: 2;
}

body.noir div.ce-type-slideshow .slideshow .slide .content {
  color: var(--text-primary);
  max-width: 600px;
}

body.noir div.ce-type-slideshow .slideshow .slide .content h2,
body.noir div.ce-type-slideshow .slideshow .slide .content h3 {
  color: var(--text-primary);
  font-weight: 300;
  text-shadow: 0 2px 8px rgba(0,0,0,0.4);
}

body.noir div.ce-type-slideshow .slideshow .slide .content p {
  color: var(--text-secondary);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

body.noir div.ce-type-slideshow .slideshow .slide .content a {
  color: var(--gold);
}

/* Slideshow Slick Dots (falls vorhanden) */
body.noir div.ce-type-slideshow .slick-dots li button::before {
  color: var(--text-secondary);
}

body.noir div.ce-type-slideshow .slick-dots li.slick-active button::before {
  color: var(--gold);
}

body.noir div.ce-type-slideshow .slick-prev::before,
body.noir div.ce-type-slideshow .slick-next::before {
  color: var(--text-primary);
}

/* Form CE */
body.noir div.ce-type-form input,
body.noir div.ce-type-form textarea,
body.noir div.ce-type-form select {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.6rem 0.8rem;
}

body.noir div.ce-type-form input:focus,
body.noir div.ce-type-form textarea:focus,
body.noir div.ce-type-form select:focus {
  border-color: var(--gold);
  outline: none;
}

body.noir div.ce-type-form label {
  color: var(--text-secondary);
}

body.noir div.ce-type-form button[type="submit"],
body.noir div.ce-type-form input[type="submit"] {
  background: var(--gold);
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.7rem 1.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir div.ce-type-form button[type="submit"]:hover,
body.noir div.ce-type-form input[type="submit"]:hover {
  background: var(--gold-light);
  box-shadow: var(--shadow-glow);
}

/* Text 2-Cols CE */
body.noir div.ce-type-text_2_cols div.text {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  color: var(--text-secondary);
}

body.noir div.ce-type-text_2_cols div.text h2,
body.noir div.ce-type-text_2_cols div.text h3,
body.noir div.ce-type-text_2_cols div.text h4 {
  color: var(--text-primary);
}

body.noir div.ce-type-text_2_cols div.text strong {
  color: var(--text-primary);
}

@media only screen and (max-width: 48rem) {
  body.noir div.ce-type-text_2_cols div.text {
    grid-template-columns: 1fr;
  }
}

/* Contacts CE */
body.noir div.ce-type-contacts div.contacts.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--gap-md);
}

body.noir div.ce-type-contacts div.contacts.grid > section {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

body.noir div.ce-type-contacts div.contacts.grid > section figure {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
}

body.noir div.ce-type-contacts div.contacts.grid > section figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.noir div.ce-type-contacts h3 {
  color: var(--text-primary);
  margin-bottom: 0.25rem;
}

body.noir div.ce-type-contacts p {
  color: var(--text-secondary);
  margin-bottom: 0.5rem;
}

body.noir div.ce-type-contacts ul.communication {
  list-style: none;
  padding: 0;
  margin: 0;
}

body.noir div.ce-type-contacts ul.communication li {
  margin-bottom: 0.3rem;
}

body.noir div.ce-type-contacts ul.communication a {
  color: var(--gold);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-out);
}

body.noir div.ce-type-contacts ul.communication a:hover {
  color: var(--gold-light);
}

/* Video CE */
body.noir div.ce-type-video div.video {
  color: var(--text-secondary);
}

body.noir div.ce-type-video video {
  width: 100%;
  border-radius: var(--radius-md);
  background: var(--bg-deep);
}

/* Generic WYSIWYG Content (all CEs) */
body.noir .ce a:not(.button):not(.btn-gold):not(.btn-ghost):not(.readMore) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--dur-fast) var(--ease-out);
}

body.noir .ce a:not(.button):not(.btn-gold):not(.btn-ghost):not(.readMore):hover {
  color: var(--gold-light);
}

body.noir .ce hr {
  border: none;
  border-top: 1px solid var(--glass-border);
  margin: 1.5rem 0;
}

body.noir .ce table {
  width: 100%;
  border-collapse: collapse;
}

body.noir .ce table th {
  color: var(--gold);
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 2px solid var(--glass-border);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

body.noir .ce table td {
  color: var(--text-secondary);
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

body.noir .ce table tr:hover td {
  background: rgba(255,255,255,0.03);
}

body.noir .ce blockquote {
  border-left: 3px solid var(--gold);
  padding-left: 1.5rem;
  margin: 1.5rem 0;
  color: var(--text-secondary);
  font-style: italic;
}

body.noir .ce p {
  color: var(--text-secondary);
}

body.noir .ce ul,
body.noir .ce ol {
  color: var(--text-secondary);
}

/* Page Preview CE */
body.noir div.ce-type-page_preview ul li {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir div.ce-type-page_preview ul li:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass);
}

body.noir div.ce-type-page_preview ul li h3 span {
  color: var(--text-primary);
}

/* News CE */
body.noir div.ce-type-news ul {
  list-style: none;
  padding: 0;
}

body.noir div.ce-type-news li {
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--glass-border);
}

body.noir div.ce-type-news li.date {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 2rem 0 0.5rem;
  border-bottom: none;
}

body.noir div.ce-type-news li figure {
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}

body.noir div.ce-type-news li figure img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius-sm);
}

body.noir div.ce-type-news article header .date {
  color: var(--text-secondary);
  font-size: 0.8rem;
}

body.noir div.ce-type-news article header h3 {
  color: var(--text-primary);
  margin: 0.25rem 0 0.75rem;
}

body.noir div.ce-type-news article .text {
  color: var(--text-secondary);
  line-height: 1.6;
}

body.noir div.ce-type-news article .text a.readmore {
  color: var(--gold);
}

/* Map CE */
body.noir div.ce-type-map {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

body.noir div.ce-type-map .leaflet-container {
  border-radius: var(--radius-lg);
  min-height: 400px;
}

/* HTML CE (custom HTML content) */
body.noir div.ce-type-html {
  color: var(--text-secondary);
}

body.noir div.ce-type-html h2,
body.noir div.ce-type-html h3,
body.noir div.ce-type-html h4 {
  color: var(--text-primary);
}

/* ========================================================
   19. RESPONSIVE CE SECTIONS
   ======================================================== */

@media only screen and (max-width: 75rem) {
  /* Reduce section padding on tablets */
  body.noir #content > .ce {
    padding: 4rem 2rem;
  }

  /* Reduce split gap */
  body.noir .ce-type-text_with_image div[class*="w50"] {
    gap: 2rem;
  }
}

@media only screen and (max-width: 48rem) {
  /* Stack ALL split layouts on mobile */
  body.noir .ce-type-text_with_image div.left[class*="w5"],
  body.noir .ce-type-text_with_image div.left[class*="w6"],
  body.noir .ce-type-text_with_image div.left[class*="w7"],
  body.noir .ce-type-text_with_image div.right[class*="w5"],
  body.noir .ce-type-text_with_image div.right[class*="w6"],
  body.noir .ce-type-text_with_image div.right[class*="w7"],
  body.noir .ce-type-text_with_image div.before[class*="w5"],
  body.noir .ce-type-text_with_image div.before[class*="w6"],
  body.noir .ce-type-text_with_image div.behind[class*="w5"],
  body.noir .ce-type-text_with_image div.behind[class*="w6"],
  body.noir .ce-type-text_with_image div[class*="box_overlay"][class*="w5"],
  body.noir .ce-type-text_with_image div[class*="box_overlay"][class*="w6"],
  body.noir .ce-type-text_with_image div[class*="box_overlay"][class*="w7"],
  body.noir .ce-type-text_with_image div[class*="box_behind"][class*="w5"],
  body.noir .ce-type-text_with_image div[class*="box_behind"][class*="w6"],
  body.noir .ce-type-text_with_image div[class*="box_behind"][class*="w7"] {
    grid-template-columns: 1fr !important;
  }

  /* Float images full width on mobile */
  body.noir .ce-type-text_with_image div.right-float > .text > .images,
  body.noir .ce-type-text_with_image div.left-float > .text > .images {
    float: none;
    width: 100%;
    margin: 0 0 1.5rem 0;
  }

  /* ce-width-narrow: full width on mobile */
  body.noir #content > .ce.ce-width-narrow > div.wrapper {
    max-width: 100%;
  }

  /* Stack rooms grid */
  body.noir .ce-type-rooms_overview ul.roomsOverview {
    grid-template-columns: 1fr;
  }

  /* Stats bar wrap */
  body.noir .stats-bar {
    flex-wrap: wrap;
    gap: 2rem;
  }
}

@media only screen and (max-width: 30rem) {
  /* Minimal padding on small screens */
  body.noir #content > .ce {
    padding: 3rem 1.25rem;
  }

  /* Stats bar stack */
  body.noir .stats-bar {
    flex-direction: column;
    gap: 1.5rem;
  }
}

/* ========================================================
   21. GLASS-CARD MIT BILD-HEADER (Homepage Zimmer-Cards)
   ======================================================== */

body.noir .glass-card .card-image {
  margin: calc(-1 * var(--card-padding));
  margin-bottom: 1rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--bg-deep);
}

body.noir .glass-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Responsive: Split + Cards auf kleinen Bildschirmen */
@media only screen and (max-width: 48rem) {
  body.noir .split {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  body.noir .split[style*="direction: rtl"] {
    direction: ltr !important;
  }
  body.noir .split[style*="direction: rtl"] > * {
    direction: ltr !important;
  }
}

/* ========================================================
   22. ROOM CARDS GRID — LUXURY (/zimmer/ Übersichtsseite)
   ======================================================== */

body.noir .noir-rooms-grid {
  padding: 0 var(--section-pad-x) var(--section-pad-y);
}

body.noir .noir-rooms-grid .section-inner {
  max-width: 1200px;
  margin: 0 auto;
}

body.noir .cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 2rem;
}

/* Card — Glass with image reveal */
body.noir .room-card {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  transition: transform var(--dur-med) ease, box-shadow var(--dur-med) ease, border-color var(--dur-med) ease;
}

body.noir .room-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.4);
  border-color: rgba(199,171,120,0.3);
}

/* Card Image */
body.noir .room-card .card-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3 / 2;
}

body.noir .room-card .card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

body.noir .room-card:hover .card-image img {
  transform: scale(1.05);
}

/* Card Text Content */
body.noir .room-card h3 {
  font-weight: 400;
  font-size: 1.2rem;
  color: var(--text-primary);
  margin: 1.25rem 1.25rem 0.3rem;
  line-height: 1.3;
}

body.noir .room-card p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 0 1.25rem 1rem;
  font-weight: 300;
}

body.noir .room-card-meta {
  display: flex;
  gap: 0.6rem;
  margin: 0 1.25rem 1rem;
  flex-wrap: wrap;
}

body.noir .room-card-meta .meta-item {
  font-size: 0.75rem;
  color: var(--text-secondary);
  background: rgba(255,255,255,0.06);
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  letter-spacing: 0.02em;
}

body.noir .room-card .detail {
  font-size: 0.85rem;
  color: var(--gold);
  font-weight: 500;
  padding: 1rem 1.25rem;
  margin-top: auto;
  border-top: 1px solid var(--glass-border);
  letter-spacing: 0.02em;
}

/* Room card category label */
body.noir .room-card-category {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(199,171,120,0.1);
  border: 1px solid rgba(199,171,120,0.2);
  padding: 0.25rem 0.7rem;
  border-radius: 100px;
  margin: 1rem 1.25rem 0;
  align-self: flex-start;
}

/* Section eyebrow inside rooms-grid */
body.noir .noir-rooms-grid .section-eyebrow {
  text-align: center;
  margin-bottom: 2rem;
}

@media only screen and (max-width: 48rem) {
  body.noir .cards-grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   22b. ZIMMER AUSSTATTUNGS-HIGHLIGHTS
   ======================================================== */

body.noir .zimmer-highlights {
  padding: var(--section-pad-y) var(--section-pad-x);
}

body.noir .zimmer-highlights .section-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

body.noir .zimmer-highlights .section-eyebrow {
  text-align: center;
}

body.noir .zimmer-highlights .section-title {
  text-align: center;
  margin-bottom: 3rem;
}

body.noir .highlights-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

body.noir .highlight-item {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border-radius: var(--radius-md);
  padding: 2rem 1.5rem;
  text-align: center;
  transition: border-color var(--dur-med) ease, transform var(--dur-med) ease;
}

body.noir .highlight-item:hover {
  border-color: rgba(199,171,120,0.25);
  transform: translateY(-3px);
}

body.noir .highlight-icon {
  font-size: 1.8rem;
  display: block;
  margin-bottom: 0.8rem;
  filter: grayscale(0.3);
}

body.noir .highlight-item h4 {
  font-size: 1rem;
  font-weight: 500;
  color: var(--gold);
  margin-bottom: 0.4rem;
  letter-spacing: 0.02em;
}

body.noir .highlight-item p {
  font-size: 0.85rem;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

@media only screen and (max-width: 64rem) {
  body.noir .highlights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media only screen and (max-width: 36rem) {
  body.noir .highlights-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  body.noir .highlight-item {
    padding: 1.5rem 1.25rem;
  }
}

/* ========================================================
   23. FOOTER NOIR OVERRIDE
   Styles the existing footer structure for dark theme
   ======================================================== */

body.noir footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--glass-border);
}

body.noir footer .wrapper {
  color: var(--text-secondary);
}

body.noir footer h3 {
  color: var(--gold);
}

body.noir footer p {
  color: var(--text-secondary);
}

body.noir footer a {
  color: var(--gold);
}

body.noir footer a:hover {
  color: var(--gold-light);
}

body.noir footer #footerNavigation a {
  color: var(--text-secondary);
}

body.noir footer #footerNavigation a:hover {
  color: var(--gold);
}

/* ========================================================
   24. KONTAKTSEITE — FORMULAR, KARTE, LAYOUT
   ======================================================== */

/* --- FormBuilder Framework Override --- */
body.noir .InputfieldForm {
  color: var(--text-secondary);
}

body.noir .InputfieldForm .InputfieldHeader {
  color: var(--text-primary);
  font-weight: 400;
  border-bottom: none;
}

body.noir .InputfieldForm .InputfieldHeader label {
  color: var(--text-primary);
}

body.noir .InputfieldForm .InputfieldContent {
  color: var(--text-secondary);
}

body.noir .InputfieldForm .Inputfield {
  border: none;
  background: transparent;
}

body.noir .InputfieldForm input[type="text"],
body.noir .InputfieldForm input[type="email"],
body.noir .InputfieldForm input[type="tel"],
body.noir .InputfieldForm input[type="url"],
body.noir .InputfieldForm input[type="number"],
body.noir .InputfieldForm input[type="password"],
body.noir .InputfieldForm textarea,
body.noir .InputfieldForm select {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--dur-fast) ease;
}

body.noir .InputfieldForm input:focus,
body.noir .InputfieldForm textarea:focus,
body.noir .InputfieldForm select:focus {
  border-color: var(--gold);
  outline: none;
  box-shadow: 0 0 0 2px var(--gold-muted);
}

body.noir .InputfieldForm input::placeholder,
body.noir .InputfieldForm textarea::placeholder {
  color: var(--text-muted);
}

body.noir .InputfieldForm .InputfieldCheckbox label,
body.noir .InputfieldForm .InputfieldRadio label {
  color: var(--text-secondary);
}

body.noir .InputfieldForm .InputfieldCheckbox input[type="checkbox"] {
  accent-color: var(--gold);
}

body.noir .InputfieldForm .InputfieldSubmit button,
body.noir .InputfieldForm .InputfieldSubmit input[type="submit"] {
  background: var(--gold);
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.875rem 2.5rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .InputfieldForm .InputfieldSubmit button:hover,
body.noir .InputfieldForm .InputfieldSubmit input[type="submit"]:hover {
  background: var(--gold-light);
  box-shadow: var(--shadow-glow);
  transform: translateY(-1px);
}

body.noir .InputfieldForm .notes,
body.noir .InputfieldForm .description {
  color: var(--text-muted);
  font-size: 0.85rem;
}

body.noir .InputfieldForm .input-error,
body.noir .InputfieldForm .Inputfield--error input,
body.noir .InputfieldForm .Inputfield--error textarea {
  border-color: var(--crimson-light);
}

body.noir .InputfieldForm .error-message {
  color: var(--crimson-light);
}

/* --- Leaflet Karte Dark Mode --- */
body.noir .ce-type-map {
  padding-bottom: 0;
}

body.noir .ce-type-map > .wrapper {
  max-width: none;
  padding: 0;
}

body.noir .ce-type-map > .wrapper > div > div {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  min-height: 400px;
}

body.noir .leaflet-container {
  background: var(--bg-deep);
}

/* Leaflet Tiles: Dunkler Farbfilter */
body.noir .leaflet-tile-pane {
  filter: brightness(0.7) contrast(1.1) saturate(0.3);
}

body.noir .leaflet-control-zoom a {
  background: var(--bg-deep);
  color: var(--text-primary);
  border-color: var(--glass-border);
}

body.noir .leaflet-control-zoom a:hover {
  background: var(--glass-bg-hover);
}

body.noir .leaflet-control-attribution {
  background: rgba(13,13,13,0.8);
  color: var(--text-muted);
  font-size: 0.7rem;
}

body.noir .leaflet-control-attribution a {
  color: var(--text-secondary);
}

body.noir .leaflet-popup-content-wrapper {
  background: var(--bg-deep);
  color: var(--text-primary);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-glass);
}

body.noir .leaflet-popup-tip {
  background: var(--bg-deep);
}

body.noir .leaflet-popup-close-button {
  color: var(--text-secondary);
}

/* --- Kontakt-Quick-Cards (Telefon, E-Mail, Adresse) --- */
body.noir .kontakt-quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-md);
  margin-bottom: var(--gap-lg);
}

body.noir .kontakt-quick .quick-card {
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  text-align: center;
  text-decoration: none;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .kontakt-quick .quick-card:hover {
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

body.noir .kontakt-quick .quick-card .quick-icon {
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  color: var(--gold);
}

body.noir .kontakt-quick .quick-card h3 {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0.25rem;
}

body.noir .kontakt-quick .quick-card p {
  color: var(--gold);
  font-size: 0.85rem;
  margin: 0;
}

@media only screen and (max-width: 48rem) {
  body.noir .kontakt-quick {
    grid-template-columns: 1fr;
  }
}

/* ========================================================
   25. SUBPAGE CE ENHANCEMENTS
   Verbessert Text_with_image Splits + Gallery Slideshows
   für den vollen Noir-Effekt auf Subpages wie /bei-gretel/
   ======================================================== */

/* --- 25a. TEXT_WITH_IMAGE — Premium Image Treatment --- */

/* Bild-Container: Deep Shadow + Rounded */
body.noir .ce-type-text_with_image div.images figure picture,
body.noir .ce-type-text_with_image div.images figure {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-deep);
}

/* Image: volle Höhe im Split, Cover */
body.noir .ce-type-text_with_image div[class*="w50"] > div.images figure picture img {
  aspect-ratio: 3/4;
  object-fit: cover;
  height: 100%;
}

/* Subtiler Gold-Glow am Bild bei Hover */
body.noir .ce-type-text_with_image div.images figure:hover {
  box-shadow: var(--shadow-deep), 0 0 40px rgba(201,162,39,0.1);
  transition: box-shadow var(--dur-med) var(--ease-out);
}

/* Text-Seite: Bessere Typografie für Fließtext */
body.noir .ce-type-text_with_image div.text p[style*="text-align:justify"],
body.noir .ce-type-text_with_image div.text p[style*="text-align: justify"] {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  line-height: 1.8;
  letter-spacing: 0.01em;
}

/* CE-Headline: Gold-Akzentlinie darüber */
body.noir .ce-type-text_with_image h2.ce-headline {
  position: relative;
  padding-top: 2rem;
}

body.noir .ce-type-text_with_image h2.ce-headline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 3rem;
  height: 2px;
  background: var(--gold);
}

/* --- 25b. GALLERY SLIDESHOW — Noir Glass-Card Slides --- */

/* Gallery Headline: zentriert mit Gold-Akzent */
body.noir .ce-type-gallery h2.ce-headline {
  text-align: center;
  position: relative;
  padding-top: 2rem;
}

body.noir .ce-type-gallery h2.ce-headline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3rem;
  height: 2px;
  background: var(--gold);
}

/* Slick Slides: Glass-Card Effekt */
body.noir .ce-type-gallery .gallery ul.slideshow li {
  padding: 0.4rem;
}

body.noir .ce-type-gallery .gallery ul.slideshow li figure {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-med) var(--ease-out);
  margin: 0 0.35rem;
}

body.noir .ce-type-gallery .gallery ul.slideshow li figure:hover {
  border-color: var(--glass-border-hover);
  box-shadow: var(--shadow-glass), 0 0 30px rgba(201,162,39,0.08);
  transform: translateY(-4px);
}

body.noir .ce-type-gallery .gallery ul.slideshow li figure picture img {
  border-radius: var(--radius-sm);
  transition: transform 0.5s var(--ease-out);
  aspect-ratio: 4/3;
  object-fit: cover;
  width: 100%;
  display: block;
}

body.noir .ce-type-gallery .gallery ul.slideshow li figure:hover picture img {
  transform: scale(1.05);
}

/* Slick Navigation: Glass-Buttons */
body.noir .ce-type-gallery .slick-prev,
body.noir .ce-type-gallery .slick-next {
  width: 44px;
  height: 44px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 50%;
  z-index: 2;
  transition: all var(--dur-base) var(--ease-out);
}

body.noir .ce-type-gallery .slick-prev:hover,
body.noir .ce-type-gallery .slick-next:hover {
  background: var(--gold);
  border-color: var(--gold);
}

body.noir .ce-type-gallery .slick-prev:hover:before,
body.noir .ce-type-gallery .slick-next:hover:before {
  color: var(--text-dark);
}

body.noir .ce-type-gallery .slick-prev { left: -22px; }
body.noir .ce-type-gallery .slick-next { right: -22px; }

/* Slick Dots: Gold Active */
body.noir .ce-type-gallery .slick-dots { bottom: -2.5rem; }

body.noir .ce-type-gallery .slick-dots li button:before {
  font-size: 8px;
  color: var(--text-muted);
  opacity: 0.5;
}

body.noir .ce-type-gallery .slick-dots li.slick-active button:before {
  color: var(--gold);
  opacity: 1;
}

/* --- 25c. NON-SLIDESHOW GALLERY GRID --- */

body.noir .ce-type-gallery .gallery ul:not(.slideshow) {
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: var(--gap-md);
}

body.noir .ce-type-gallery .gallery ul:not(.slideshow) li {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-med) var(--ease-out);
}

body.noir .ce-type-gallery .gallery ul:not(.slideshow) li:hover {
  border-color: var(--glass-border-hover);
  transform: translateY(-4px);
  box-shadow: var(--shadow-glass), var(--shadow-glow);
}

body.noir .ce-type-gallery .gallery ul:not(.slideshow) li figure a img {
  aspect-ratio: 4/3;
}

/* --- 25d. SECTION TRANSITIONS --- */

/* Erster CE nach Subpage-Header: fließender Übergang */
body.noir .subpage-header + .ce {
  padding-top: 2rem;
}

/* Letzte CE vor Footer: mehr Luft */
body.noir #content > .ce:last-child {
  padding-bottom: clamp(4rem, 6vw, 6rem);
}

/* --- 25e. ANGELIKA CAVEAT + EM STYLING --- */

body.noir .ce .caveat,
body.noir .ce span.caveat {
  color: var(--gold);
  font-size: 1.3em;
}

body.noir .ce em {
  color: var(--text-secondary);
  font-style: italic;
}

/* ========================================================
   26. TEXT_WITH_IMAGE — ERWEITERTE LAYOUTS
   ce-width-narrow CTA, Behandlungslisten, Preis-Callouts
   ======================================================== */

/* --- 26a. CE-WIDTH-NARROW → Zentrierte Glass-Card CTA --- */
body.noir #content > .ce.ce-width-narrow {
  display: flex;
  justify-content: center;
}

body.noir #content > .ce.ce-width-narrow > div.wrapper {
  max-width: 800px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-md);
  padding: var(--card-padding);
  box-shadow: var(--shadow-glass);
}

/* box_overlay in narrow: Bild + Text nebeneinander, kompakt */
body.noir .ce.ce-width-narrow .ce-type-text_with_image div[class*="box_overlay"] {
  align-items: center;
}

body.noir .ce.ce-width-narrow div.images {
  border-radius: var(--radius-md);
}

/* --- 26b. BEHANDLUNGSLISTEN — Ayurveda Package Details --- */

/* Behandlungs-Auflistungen besser lesbar machen */
body.noir .ce-type-text_with_image div.text p strong {
  color: var(--text-primary);
}

/* Preis-Callout: Gold-Highlight */
body.noir .ce-type-text_with_image div.text p strong em,
body.noir .ce-type-text_with_image div.text p em strong {
  color: var(--gold);
  font-style: normal;
  font-size: 1.1em;
  display: inline-block;
  margin-top: 0.5rem;
}

/* Spacing zwischen Behandlungs-Absätzen */
body.noir .ce-type-text_with_image div.text p + p {
  margin-top: 0.75rem;
}

/* Detail-Überschriften (z.B. "Details:") hervorheben */
body.noir .ce-type-text_with_image div.text p:first-child strong:only-child {
  color: var(--gold);
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

/* --- 26c. DOWNLOAD/CTA BUTTONS in CEs --- */

/* Gold-Button Verbesserung: Alle .button.gold in CEs */
body.noir .ce a.button.gold {
  background: var(--gold);
  color: var(--text-dark);
  border: none;
  border-radius: var(--radius-full);
  padding: 0.7rem 2rem;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  display: inline-block;
  transition: all var(--dur-base) var(--ease-out);
  text-decoration: none;
  margin-top: 1rem;
}

body.noir .ce a.button.gold:hover {
  background: var(--gold-light);
  box-shadow: var(--shadow-glow);
  transform: translateY(-2px);
}

/* --- 26d. CE SPACE CLASSES --- */

/* PW space-behind-small / space-before-small */
body.noir #content > .ce.ce-space-behind-small {
  padding-bottom: clamp(2rem, 3vw, 3rem);
}

body.noir #content > .ce.ce-space-before-small {
  padding-top: clamp(2rem, 3vw, 3rem);
}

body.noir #content > .ce.ce-space-behind-small + .ce.ce-space-before-small {
  margin-top: -1rem;
}

/* --- 26e. BOX_BEHIND + BOX_OVERLAY Layout-Fixes --- */

/* box_behind: Bild hinter Text — im Noir-Mode als normaler Split */
body.noir .ce-type-text_with_image div[class*="box_behind"] > div.images,
body.noir .ce-type-text_with_image div[class*="box_overlay"] > div.images {
  position: static;
  width: 100%;
  height: auto;
  z-index: auto;
}

body.noir .ce-type-text_with_image div[class*="box_behind"] > div.text,
body.noir .ce-type-text_with_image div[class*="box_overlay"] > div.text {
  position: static;
  z-index: auto;
  background: transparent;
  padding: 0 !important;
}