/* === noir-content.css === */
/* Bei.Gretel Noir Theme — Alle Content-Element-Styles */
/* Sections 15, 15b, 17, 18, 19, 25a-e, 26a-e */

/* ========================================================
   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;
  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;
}

/* 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: var(--max-content-width);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* CE-Headline als Section-Title */
body.noir .ce h2.ce-headline {
  font-family: var(--font-display);
  font-weight: 400;
  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 {
  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 {
  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;
  }
}

/* ========================================================
   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;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-lg);
  align-items: center;
  float: none;
  width: 100%;
  max-width: none;
  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;
  float: none;
  width: 100%;
}

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;
  width: 100%;
  color: var(--text-secondary);
  float: none;
  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 {
  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: var(--ornament-opacity);
  animation: ornament-spin 30s linear infinite;
  display: block;
  margin: 1.5rem auto;
}

/* ========================================================
   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;
}

/* Slick Arrow: Span-Text verstecken (SR-only) */
body.noir .slick-arrow span {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Gallery non-slideshow grid */
body.noir div.ce-type-gallery .gallery ul:not(.slideshow) {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--gap-lg);
  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;
}

/* Accordion CE — Premium */
body.noir div.ce-type-accordion section {
  border-bottom: 1px solid var(--glass-border);
  transition: border-color var(--dur-base) ease;
}

body.noir div.ce-type-accordion section.open {
  border-left: 2px solid var(--gold);
  padding-left: 1rem;
}

body.noir div.ce-type-accordion section h3 {
  color: var(--text-primary);
  padding: 1.25rem 2.5rem 1.25rem 0;
  cursor: pointer;
  position: relative;
  font-size: 1.05rem;
  font-weight: 400;
  margin: 0;
  line-height: 1.4;
  transition: color var(--dur-fast) ease;
  border: none;
  -webkit-user-select: none;
  user-select: none;
}

body.noir div.ce-type-accordion section h3:hover {
  color: var(--gold);
}

/* Chevron indicator */
body.noir div.ce-type-accordion section h3::after {
  content: '\203A';
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  font-size: 1.4rem;
  color: var(--gold);
  transition: transform 0.3s var(--ease-out);
  font-weight: 300;
}

body.noir div.ce-type-accordion section h3.open::after {
  transform: translateY(-50%) rotate(90deg);
}

body.noir div.ce-type-accordion section h3:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

body.noir div.ce-type-accordion section div.text {
  color: var(--text-secondary);
  padding: 0 0 1.25rem;
  line-height: 1.7;
}

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

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

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

/* 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 {
  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 {
  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;
  }

  /* 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;
  }
}

/* ========================================================
   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 {
  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(320px, 1fr));
  gap: var(--gap-lg);
}

body.noir .ce-type-gallery .gallery ul:not(.slideshow) li {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-base) 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 {
  position: relative;
}

body.noir .ce-type-gallery .gallery ul:not(.slideshow) li figure a img {
  aspect-ratio: 1/1;
  width: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out), filter 0.5s var(--ease-out);
}

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

/* Caption Overlay (Vorbereitung für CMS-Captions) */
body.noir .ce-type-gallery .gallery ul:not(.slideshow) li figure figcaption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.7));
  color: var(--text-primary);
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

body.noir .ce-type-gallery .gallery ul:not(.slideshow) li:hover figure figcaption {
  opacity: 1;
}

/* --- 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 --- */

/* Images: aus absolute/relative auf static zurücksetzen */
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;
}

/* Text: Hintergrund + Farben für Noir */
body.noir div.ce-type-text_with_image > div.wrapper > div.box_behind_left div.text,
body.noir div.ce-type-text_with_image > div.wrapper > div.box_behind_right div.text,
body.noir div.ce-type-text_with_image > div.wrapper > div.box_overlay_left div.text,
body.noir div.ce-type-text_with_image > div.wrapper > div.box_overlay_right div.text {
  background-color: transparent;
  background: transparent;
  position: static;
  z-index: auto;
  transform: none;
  width: 100%;
  padding: 0;
  color: var(--text-secondary);
  top: auto;
  left: auto;
  right: auto;
}

/* Alle Kinder: Textfarbe für Noir */
body.noir div.ce-type-text_with_image > div.wrapper > div.box_behind_left div.text *,
body.noir div.ce-type-text_with_image > div.wrapper > div.box_behind_right div.text *,
body.noir div.ce-type-text_with_image > div.wrapper > div.box_overlay_left div.text *,
body.noir div.ce-type-text_with_image > div.wrapper > div.box_overlay_right div.text * {
  color: var(--text-secondary);
}

/* Headlines in box_behind/overlay: primary statt secondary */
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text h2,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text h3,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text h4,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text strong,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text h2,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text h3,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text h4,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text strong {
  color: var(--text-primary);
}

/* Preis-Callout in box_behind/overlay */
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text strong em,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text em strong,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text strong em,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text em strong {
  color: var(--gold);
}

/* Links in box_behind/overlay */
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_behind"] div.text a,
body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text a {
  color: var(--gold);
}

body.noir div.ce-type-text_with_image > div.wrapper > div[class*="box_overlay"] div.text a.button.gold {
  color: var(--text-dark);
}

/* ========================================================
   27. EINBLICKE SLIDESHOW (/bei-gretel/)
   Custom autoplay slider for gallery images
   ======================================================== */

body.noir .einblicke-section {
  padding-bottom: clamp(5rem, 6vw, 7rem);
}

body.noir .einblicke-slider {
  margin: 0 -0.5rem;
}

body.noir .einblicke-slide {
  padding: 0 0.5rem;
}

body.noir .einblicke-slide figure {
  margin: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-glass);
  transition: all var(--dur-med) var(--ease-out);
}

body.noir .einblicke-slide figure:hover {
  box-shadow: var(--shadow-glass), 0 0 30px rgba(201,162,39,0.08);
  transform: translateY(-4px);
}

body.noir .einblicke-slide figure img {
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
  display: block;
  transition: transform 0.5s var(--ease-out);
}

body.noir .einblicke-slide figure:hover img {
  transform: scale(1.05);
}

/* Slick Navigation for Einblicke */
body.noir .einblicke-slider .slick-prev,
body.noir .einblicke-slider .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 .einblicke-slider .slick-prev:hover,
body.noir .einblicke-slider .slick-next:hover {
  background: var(--gold);
  border-color: var(--gold);
}

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

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

body.noir .einblicke-slider .slick-prev { left: -22px; }
body.noir .einblicke-slider .slick-next { right: -22px; }

/* Slick Dots */
body.noir .einblicke-slider .slick-dots {
  bottom: -2.5rem;
}

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

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

@media only screen and (max-width: 48rem) {
  body.noir .einblicke-slider .slick-prev { left: 5px; }
  body.noir .einblicke-slider .slick-next { right: 5px; }
}