/*!
Theme Name:     Rockmoehre™ - CHILD Theme
Theme URI:      https://www.rockmoehre.de
Description:    Rockmöhre™ - das Tonstudio
Version:        1.7
Author:         Claas
Author URI:     https://www.rockmoehre.de
Template:       page-builder-framework
*/

/* =========================================================
   0. Rendering / System-Defaults
   ========================================================= */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
:root { --rm-head: 'Pulpo Rust', serif; --rm-text: 'Pulpo', serif; }
* { font-synthesis: none; } /* Safari: kein Fake-Bold/Italic */

/* =========================================================
   1. Lokale Schriftarten – Pulpo & Pulpo Rust
   ========================================================= */

/* === Pulpo – Fließtext === */
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
/* Italics Pulpo */
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-LightItalic.woff2') format('woff2');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-Italic.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-MediumItalic.woff2') format('woff2');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-BoldItalic.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo';
  src: url('/wp-content/themes/wpbf-child/fonts/Pulpo-BlackItalic.woff2') format('woff2');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* === Pulpo Rust – Headlines === */
@font-face {
  font-family: 'Pulpo Rust';
  src: url('/wp-content/themes/wpbf-child/fonts/PulpoRust-25.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo Rust';
  src: url('/wp-content/themes/wpbf-child/fonts/PulpoRust-50.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo Rust';
  src: url('/wp-content/themes/wpbf-child/fonts/PulpoRust-75.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pulpo Rust';
  src: url('/wp-content/themes/wpbf-child/fonts/PulpoRust-100.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* =========================================================
   2. Basis-Typografie
   ========================================================= */
body {
  font-family: var(--rm-text);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.2px;
  /* Farbe & Hintergrund bleiben im Customizer */
}

/* =========================================================
   3. Headlines – zentral
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rm-head);
  line-height: 1.25;
  margin: 0 0 0.6em;
  color: #ffffff; /* Standard: weiß – kann pro Bereich überschrieben werden */
}

/* Hierarchie (responsive) */
h1 { font-weight: 700; font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
h2 { font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
h3 { font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); }
h4 { font-weight: 400; font-size: 1.05rem; }
h5 { font-weight: 400; font-size: 1rem; }
h6 { font-weight: 400; font-size: 0.95rem; }

/* Beaver Builder / WPBF: Headings erben sauber */
.fl-module h1, .fl-module h2, .fl-module h3, .fl-module h4, .fl-module h5, .fl-module h6 {
  font-family: inherit; font-weight: inherit; color: inherit; line-height: inherit;
}

/* =========================================================
   4. Komponenten-Typografie
   ========================================================= */

/* UABB Accordion / Toggle */
.uabb-adv-accordion-content h2 {
  font-family: var(--rm-head);
  font-weight: 600;
  line-height: 1.1;
  margin: 15px 0 20px;
}
.uabb-adv-accordion-content h3 {
  font-family: var(--rm-head);
  font-weight: 400;
  margin-top: -5px;
  font-size: 1.3em;
}
.uabb-adv-accordion-content p { margin-bottom: 20px; }

/* Formulare (Contact Form 7) */
.wpcf7, .wpcf7 * { font-family: var(--rm-text); font-weight: 400; }

/* AudioIgniter – als Fließtext */
.ai-track, .ai-track-title, .ai-controls, .ai-playlist { font-family: var(--rm-text); }

/* Hero-Headlines – nur Typo, Layout bleibt im Customizer */
.hero-text h1 {
  font-family: var(--rm-head);
  font-weight: 700;
  font-size: clamp(2rem, 1.2rem + 1.6vw, 3rem);
}

/* =========================================================
   5. Textauszeichnung (Akzent bleibt kompatibel)
   ========================================================= */
.textauszeichnung { color: #c7cc75; }

/* =========================================================
   6. Lexikon – Seitenlook & Typo (aus Snippet 9730)
   ========================================================= */
body.lexikon-entry {
  background-color: #000;
  color: #fff;
}
body.lexikon-entry .lexikon-content {
  max-width: 900px;
  margin: 0 auto;
  padding: 2rem 0;
}
/* Headings im Lexikon: Kupfer */
body.lexikon-entry h1,
body.lexikon-entry h2,
body.lexikon-entry h3,
body.lexikon-entry h4 { color: #bcb880; }
/* Links im Lexikon */
body.lexikon-entry a { color: #fff; text-decoration: none; }
body.lexikon-entry a:hover,
body.lexikon-entry a:focus { text-decoration: underline; outline: none; }
/* Footer nur im Lexikon ausblenden – falls gewünscht */
body.lexikon-entry footer.site-footer {
  display: none; height: 0; overflow: hidden; visibility: hidden;
}
/* === v1.7 Final Font Override (fixes theme/inline overrides) === */
body { font-family: 'Pulpo', serif !important; }
h1, h2, h3, h4, h5, h6 { font-family: 'Pulpo Rust', serif !important; }
/* =========================================================
   7. Slider – Rockmöhre Räume & Technik
   ========================================================= */

.rockmoehre-slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  border: 8px solid white;
}

.rockmoehre-slider .slider-wrapper {
  display: flex;
  transition: transform 0.5s ease-in-out;
  will-change: transform; /* Performance-Hinweis für Browser */
}

.rockmoehre-slider .slider-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}

.rockmoehre-slider .slider-slide img {
  width: 100%;
  height: auto;
  display: block;
}

/* === Pfeile === */
.rockmoehre-slider .slider-prev,
.rockmoehre-slider .slider-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: white;
  border: none;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  z-index: 10;
}
.rockmoehre-slider .slider-prev { left: 10px; }
.rockmoehre-slider .slider-next { right: 10px; }

/* === Dots === */
.rockmoehre-slider .slider-dots {
  text-align: center;
  padding: 1rem 0;
  position: absolute;
  bottom: 10px;
  width: 100%;
  z-index: 5;
}
.rockmoehre-slider .slider-dots .dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin: 0 5px;
  border-radius: 50%;
  border: 2px solid white;
  background-color: #bcb880;
  transition: background-color 0.3s;
}
.rockmoehre-slider .slider-dots .dot.active {
  background-color: white;
}

/* === Individuelle Slider-Höhen === */
.slider-raeume .slider-slide img {
  height: 600px;
  object-fit: cover;
}

.slider-technik .slider-slide img {
  height: 600px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .slider-raeume .slider-slide img,
  .slider-technik .slider-slide img {
    height: 300px;
  }
}