/*
 Theme Name:   Divi Child - RITTER Amplification
 Template:     Divi
 Description:  Child Theme f r ritteramps.de - basierend auf dem RITTER Werkstatt-Design
 Version:      1.0.0
*/

/* ==========================================================================
   GOOGLE FONTS
   ========================================================================== */



/* ==========================================================================
   DESIGN TOKENS - Zentrale Farbpalette & Typografie
   Hier alle Werte  ndern, die dann  berall wirken.
   ========================================================================== */

:root {
  /* Hintergrundfarben */
  --ra-bg:           #0f0e0c;
  --ra-bg-2:         #17140f;
  --ra-bg-3:         #1f1b14;

  /* Textfarben */
  --ra-ink:          #ece4d1;
  --ra-ink-dim:      #b7ac95;
  --ra-ink-faint:    #7a6f59;

  /* Linien / Borders */
  --ra-line:         #2a241a;
  --ra-line-strong:  #3b3222;

  /* Markenfarbe */
  --ra-accent:       #8c1a2b;
  --ra-accent-ink:   #ffecd8;
  --ra-brass:        #c8a25a;

  /* Typografie */
  --ra-serif:        'Fraunces', 'Cormorant Garamond', Georgia, serif;
  --ra-sans:         'Inter', 'Helvetica Neue', Arial, sans-serif;
  --ra-mono:         'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Layout */
  --ra-maxw:         1320px;
  --ra-pad:          clamp(20px, 3vw, 48px);
}


/* ==========================================================================
   GLOBALE DIVI-OVERRIDES
   ========================================================================== */

body,
#page-container,
.et_pb_section {
  background-color: var(--ra-bg) !important;
  color: var(--ra-ink) !important;
  font-family: var(--ra-sans) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Divi Standard-Padding entfernen */
.et_pb_section {
  padding: 0 !important;
}

.et_pb_row {
  max-width: var(--ra-maxw) !important;
  padding-left: var(--ra-pad) !important;
  padding-right: var(--ra-pad) !important;
  width: 100% !important;
}

/* Divi Standard-Links */
a {
  color: inherit;
  text-decoration: none;
}

/* Divi  berschriften global */
body .et_pb_module h1,
body .et_pb_module h2,
body .et_pb_module h3,
body .et_pb_module h4 {
  font-family: var(--ra-serif) !important;
  color: var(--ra-ink) !important;
}

body .et_pb_module p {
  font-family: var(--ra-sans) !important;
  color: var(--ra-ink-dim) !important;
}

/* Globale Button-Overrides */
body .et_pb_button {
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  padding: 14px 22px !important;
  border-radius: 0 !important;
  border: 1px solid var(--ra-ink) !important;
  color: var(--ra-ink) !important;
  background: transparent !important;
  transition: background 0.2s, color 0.2s !important;
}

body .et_pb_button:hover {
  background: var(--ra-ink) !important;
  color: var(--ra-bg) !important;
}

/* Prim r-Button (Klasse "ra-btn-primary" im Builder vergeben) */
body .et_pb_button.ra-btn-primary {
  background: var(--ra-accent) !important;
  border-color: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
}

body .et_pb_button.ra-btn-primary:hover {
  background: #6e1422 !important;
  border-color: #6e1422 !important;
}


/* ==========================================================================
   TOPBAR
   Klasse im Builder: "ra-topbar" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-topbar {
  background-color: var(--ra-bg-2) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: 0 !important;
}

.et_pb_section.ra-topbar .et_pb_row {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.et_pb_section.ra-topbar .et_pb_text_inner {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}

.et_pb_section.ra-topbar .et_pb_text_inner a {
  color: var(--ra-ink-faint);
  transition: color 0.2s;
}

.et_pb_section.ra-topbar .et_pb_text_inner a:hover {
  color: var(--ra-ink);
}

/* Leuchtpunkt */
.ra-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ra-accent);
  box-shadow: 0 0 10px var(--ra-accent);
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}


/* 
==========================================================================
   NAVIGATION
   Divi's eigene Navigation wird hier  berschrieben.
   ==========================================================================*/


/* Sticky Nav Hintergrund*/

#main-header,
#main-header.et-fixed-header {
  background: color-mix(in oklab, var(--ra-bg) 90%, transparent) !important;
  backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  box-shadow: none !important;
}

/* Logo */

#main-header .logo_container a {
  font-family: var(--ra-serif) !important;
  font-size: 22px !important;
  font-weight: 600 !important;
  color: var(--ra-ink) !important;
  letter-spacing: 0.02em !important;
}

/* Nav Links */

#main-header #et-top-navigation nav > ul > li > a {
  font-family: var(--ra-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: var(--ra-ink-dim) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: color 0.2s !important;
}

#main-header #et-top-navigation nav > ul > li > a:hover,
#main-header #et-top-navigation nav > ul > li.current-menu-item > a {
  color: var(--ra-ink) !important;
}

/* Nav CTA-Button */

#main-header .et_pb_button,
#main-header .ra-nav-cta {
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 10px 18px !important;
  border: 1px solid var(--ra-ink) !important;
  color: var(--ra-ink) !important;
  background: transparent !important;
  transition: background 0.2s, color 0.2s !important;
}

#main-header .et_pb_button:hover,
#main-header .ra-nav-cta:hover {
  background: var(--ra-ink) !important;
  color: var(--ra-bg) !important;
}




/* ==========================================================================
   HERO SECTION
   Klasse "ra-hero" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-hero {
  background-color: var(--ra-bg) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px) !important;
  position: relative;
  overflow: hidden;
}

/* Roter Glow-Hintergrund
.et_pb_section.ra-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(800px 400px at 85% 10%, color-mix(in oklab, var(--ra-accent) 22%, transparent) 0%, transparent 60%),
    radial-gradient(600px 400px at 10% 110%, color-mix(in oklab, var(--ra-brass) 12%, transparent) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}*/

.et_pb_section.ra-hero::before {
  display: none !important;
}

.ra-hero-image-glow {
  position: relative;
}

.ra-hero-image-glow::before {
  content: "";
  position: absolute;
  inset: -80px -80px -80px -80px;
  background:
    radial-gradient(
      520px 280px at 70% 10%,
      color-mix(in oklab, var(--ra-accent) 20%, transparent),
      transparent 65%
    ),
    radial-gradient(
      360px 220px at 55% 25%,
      color-mix(in oklab, var(--ra-brass) 8%, transparent),
      transparent 70%
    );
  pointer-events: none;
  z-index: 0;
}

.ra-hero-image-glow > * {
  position: relative;
  z-index: 1;
}


.et_pb_section.ra-hero .et_pb_row {
  position: relative;
  z-index: 1;
}

/* Meta-Zeile  ber der Headline*/
.hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  color: #8f8a7a;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  margin-bottom: 28px;
}

.hero-meta .bar {
  display: block;
  width: 42px;
  min-width: 42px;
  height: 1px;
  background: #8f8a7a;
  flex: 0 0 42px;
}

/* Hero H1*/
.et_pb_section.ra-hero h1,
.et_pb_section.ra-hero .et_pb_text_inner h1,
.hero-title {
  font-family: var(--ra-serif) !important;
  font-style: normal !important;
  font-weight: 400 !important;
  font-size: clamp(48px, 7vw, 104px) !important;
  line-height: 0.98 !important;
  letter-spacing: -0.02em !important;
  color: var(--ra-ink) !important;
  margin: 0 0 28px 0 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

/* Nur das hervorgehobene Wort*/
.et_pb_section.ra-hero h1 em,
.et_pb_section.ra-hero .et_pb_text_inner h1 em,
.hero-title em {
  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--ra-accent) !important;
  font-synthesis: none !important;
}

/* Hero Flie text*/
.et_pb_section.ra-hero .ra-hero-lead,
.et_pb_section.ra-hero .et_pb_text_inner p {
  max-width: 520px;
  font-size: 18px !important;
  line-height: 1.55 !important;
  color: var(--ra-ink-dim) !important;
  margin-bottom: 36px !important;
}


/* Hero Bild-Platzhalter */
.ra-hero-visual {
  aspect-ratio: 4 / 5;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
  overflow: hidden;
  position: relative;
}

/* Hero Stats */
.et_pb_section.ra-hero .ra-stats-row {
  border-top: 1px solid var(--ra-line);
  padding-top: 24px;
  margin-top: 24px;
}

.ra-stat .ra-stat-number {
  font-family: var(--ra-serif) !important;
  font-size: 40px !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ra-ink) !important;
}

.ra-stat .ra-stat-number em {
  color: var(--ra-accent) !important;
  font-style: normal !important;
  font-weight: 400 !important;
}

.ra-stat .ra-stat-label {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-top: 6px !important;
}

/* Trennlinie zwischen Stat-Spalten */
.et_pb_section.ra-hero .et_pb_column:not(:last-child) .et_pb_text_inner {
  border-right: 1px solid var(--ra-line);
}

/* ==========================================================================
   MARQUEE / LAUFBAND
    Als Code-Modul einzuf gen (HTML-Snippet unten in der Dokumentation)
   Klasse "ra-marquee" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-marquee {
  background: var(--ra-bg) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: 0 !important;
  overflow: hidden;
}

.ra-marquee-inner {
  display: flex;
  gap: 40px;
  overflow: hidden;
  padding: 18px 0;

  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: 22px;
  letter-spacing: -0.01em;

  color: var(--ra-ink-dim);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

.ra-marquee-track {
  display: flex;
  gap: 40px;
  animation: ra-marquee 40s linear infinite;
  white-space: nowrap;
  flex-shrink: 0;
}

.ra-marquee-track span::before {
  content: "?";
  color: var(--ra-accent);
  margin-right: 40px;
  font-size: 10px;
  vertical-align: middle;
  font-style: normal;
}

@keyframes ra-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .ra-marquee-track { animation: none; }
}


/* ==========================================================================
   SECTION - Allgemeiner Abschnitt mit Kicker + H2
   Klasse "ra-section" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-section {
  background-color: var(--ra-bg) !important;
  padding: clamp(60px, 7vw, 120px) 0 !important;
  border-bottom: 1px solid var(--ra-line) !important;
}

.et_pb_section.ra-section-alt {
  background-color: var(--ra-bg-2) !important;
  padding: clamp(60px, 7vw, 120px) 0 !important;
  border-bottom: 1px solid var(--ra-line) !important;
}

/* Kicker (z.B. "01 Produktfamilien") */
.ra-kicker {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px !important;
}

.ra-kicker .ra-num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink);
}

/* Section H2 */
.et_pb_section.ra-section h2,
.et_pb_section.ra-section-alt h2,
.et_pb_section.ra-section .et_pb_text_inner h2,
.et_pb_section.ra-section-alt .et_pb_text_inner h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ra-ink) !important;
  margin-bottom: 18px !important;
}

.et_pb_section.ra-section h2 em,
.et_pb_section.ra-section-alt h2 em {
  font-style: italic;
  color: var(--ra-accent);
}

/* Globaler Fallback: <em> in Überschriften immer kursiv + Akzentfarbe,
   unabhängig von der Section-Klasse. Nötig weil seitenspezifische
   Klassen (ra-about-hero, ra-section usw.) sonst auf neuen Seiten
   fehlen und <em> wirkungslos bleibt. */
.et_pb_section h1 em,
.et_pb_section h2 em,
.et_pb_section h3 em {
  font-style: italic;
  color: var(--ra-accent);
}

/* Section Beschreibungstext */
.et_pb_section.ra-section .ra-section-p,
.et_pb_section.ra-section-alt .ra-section-p {
  max-width: 620px;
  color: var(--ra-ink-dim) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   PRODUKTFAMILIEN - Kategorie-Karten
   Klasse "ra-cats" an die Row vergeben
   ========================================================================== */

.et_pb_section.ra-section .ra-cat-card,
.et_pb_column.ra-cat-card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s;
}

.ra-cat-card:hover {
  border-color: var(--ra-ink) !important;
}

/* Karten-Bild-Platzhalter */
.ra-cat-img {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--ra-bg-3) 80%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 90%, transparent) 12px 24px
  );
}

/* Karten-Text unten */
.ra-cat-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, color-mix(in oklab, var(--ra-bg) 92%, transparent), transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ra-cat-body .ra-num-lbl {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

.ra-cat-body h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.2vw, 34px) !important;
  line-height: 1.05 !important;
  color: var(--ra-ink) !important;
  margin: 0 !important;
}

.ra-cat-body .ra-meta {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--ra-ink-dim);
  text-transform: uppercase;
}

.ra-cat-body .ra-meta em {
  color: var(--ra-accent);
  font-style: normal;
}

/* Pfeil-Button oben rechts */
.ra-arrow-link {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ra-bg);
  border: 1px solid var(--ra-line-strong);
  display: grid;
  place-items: center;
  transition: transform 0.3s, background 0.3s;
}

.ra-cat-card:hover .ra-arrow-link {
  background: var(--ra-accent);
  border-color: var(--ra-accent);
  transform: rotate(-45deg);
}


/* ==========================================================================
   STORY / WERKSTATT SECTION
   Klasse "ra-story" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-story {
  background-color: var(--ra-bg-2) !important;
  border-top: 1px solid var(--ra-line) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: clamp(48px, 6vw, 96px) 0 !important;
}

/* Story Kicker */
.et_pb_section.ra-story .ra-kicker::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--ra-accent);
}

/* Story H2 */
.et_pb_section.ra-story h2,
.et_pb_section.ra-story .et_pb_text_inner h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 4.5vw, 60px) !important;
  line-height: 1.02 !important;
  letter-spacing: -0.02em !important;
  color: var(--ra-ink) !important;
  margin: 14px 0 22px !important;
}

.et_pb_section.ra-story h2 em {
  font-style: italic;
}

/* Story Flie text */
.et_pb_section.ra-story p,
.et_pb_section.ra-story .et_pb_text_inner p {
  color: var(--ra-ink-dim) !important;
  font-size: 17px !important;
  line-height: 1.7 !important;
  margin-bottom: 16px !important;
}

/* Signatur */
.ra-signature {
  margin-top: 28px;
  padding-top: 28px;

  border-top: 1px solid var(--ra-line);
  display: flex;
  align-items: center;
  gap: 16px;
}

.ra-sig-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: repeating-linear-gradient(45deg, var(--ra-bg-2) 0 4px, var(--ra-bg-3) 4px 8px);
  border: 1px solid var(--ra-line-strong);
  flex-shrink: 0;
}

.ra-sig-name {
  font-family: var(--ra-serif);
  font-size: 18px;
  font-style: italic;
  color: var(--ra-ink);
}

.ra-sig-role {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
  margin-top: 2px;
}

/* Story Bild-Grid (Platzhalter) */
.ra-story-visual {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 60px;
  gap: 8px;
}

.ra-story-visual .ra-sv {
  background: var(--ra-bg-3);
  border: 1px solid var(--ra-line-strong);
}

.ra-story-visual .ra-sv.a { grid-area: 1 / 1 / 5 / 5; }
.ra-story-visual .ra-sv.b { grid-area: 1 / 5 / 3 / 7; }
.ra-story-visual .ra-sv.c { grid-area: 3 / 5 / 5 / 7; }
.ra-story-visual .ra-sv.d { grid-area: 5 / 1 / 7 / 4; }
.ra-story-visual .ra-sv.e { grid-area: 5 / 4 / 7 / 7; }


/* ==========================================================================
   PRODUKT-KARTEN
   Klasse "ra-product-card" an et_pb_blurb oder Column vergeben
   ========================================================================== */

.ra-product-card {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s, border-color 0.3s;
  position: relative;
}

.ra-product-card:hover {
  border-color: var(--ra-ink) !important;
}

/* Produkt-Bild Platzhalter */
.ra-product-img {
  aspect-ratio: 4 / 3;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ra-bg) 30%, var(--ra-bg-3)) 0 10px,
    var(--ra-bg-3) 10px 20px
  );
  border-bottom: 1px solid var(--ra-line-strong);
  position: relative;
  overflow: hidden;
}

/* "NEU   MK II" Badge */
.ra-badge {
  position: absolute;
  top: 16px; left: 16px;
  font-family: var(--ra-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: var(--ra-accent);
  color: var(--ra-accent-ink);
  padding: 5px 9px;
}

.ra-badge-secondary {
  background: var(--ra-bg-3);
  color: var(--ra-ink-dim);
  border: 1px solid var(--ra-line-strong);
}

/* Produkt-Body */
.ra-product-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.ra-product-cat {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

.ra-product-body h3 {
  font-family: var(--ra-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  color: var(--ra-ink) !important;
  margin: 0 !important;
}

.ra-product-body p {
  color: var(--ra-ink-dim) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* Specs (Watt / R hre / Preis) */
.ra-specs {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--ra-line);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  font-family: var(--ra-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

.ra-specs strong {
  display: block;
  color: var(--ra-ink);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  margin-bottom: 2px;
}

/* "Mehr erfahren " Link */
.ra-more {
  margin-top: 14px;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ra-ink);
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.ra-more::after {
  content: "";
  color: var(--ra-accent);
}

/* Feature-Karte (gr  er, 2-spaltig) */
.ra-product-card.ra-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.ra-product-card.ra-feature .ra-product-img {
  aspect-ratio: auto;
  border-bottom: 0;
  border-right: 1px solid var(--ra-line-strong);
}

.ra-product-card.ra-feature h3 {
  font-size: 40px !important;
}


/* ==========================================================================
   ZITAT / QUOTE SECTION
   Klasse "ra-quote" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-quote {
  background-color: var(--ra-bg) !important;
  border-top: 1px solid var(--ra-line) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: clamp(64px, 8vw, 140px) 0 !important;
  text-align: center;
}

.et_pb_section.ra-quote blockquote,
.et_pb_section.ra-quote .et_pb_text_inner blockquote {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-style: italic !important;
  font-size: clamp(30px, 4vw, 54px) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  max-width: 1000px !important;
  margin: 0 auto !important;
  color: var(--ra-ink) !important;
  border: none !important;
  padding: 0 !important;
}

.et_pb_section.ra-quote blockquote::before {
  content: "\\201C";
  display: block;
  font-size: 120px;
  line-height: 0.4;
  color: var(--ra-accent);
  margin-bottom: 20px;
  font-family: var(--ra-serif);
}

.et_pb_section.ra-quote cite {
  display: block;
  margin-top: 36px;
  font-style: normal;
  font-family: var(--ra-mono);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

/* Presse-Logos Zeile */
.et_pb_section.ra-press {
  background-color: var(--ra-bg) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: 40px 0 !important;
}

.et_pb_section.ra-press .et_pb_text_inner {
  display: flex;
  gap: 44px;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--ra-serif);
  font-style: italic;
  font-size: 22px;
  color: var(--ra-ink-dim);
}

.ra-star {
  color: var(--ra-accent);
  font-size: 10px;
  vertical-align: middle;
}


/* ==========================================================================
   CTA BAND
   Klasse "ra-cta" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-cta {
  background-color: var(--ra-accent) !important;
  padding: clamp(64px, 8vw, 120px) 0 !important;
  position: relative;
  overflow: hidden;
}

/* Subtiles Schraffurmuster */
.et_pb_section.ra-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    transparent 0px,
    transparent 30px,
    rgba(255,255,255,0.04) 30px,
    rgba(255,255,255,0.04) 31px
  );
  pointer-events: none;
}

.et_pb_section.ra-cta h2,
.et_pb_section.ra-cta .et_pb_text_inner h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 80px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ra-accent-ink) !important;
  margin: 0 !important;
}

.et_pb_section.ra-cta h2 em {
  font-style: italic;
  /* Auf rotem Grund darf das <em> nicht rot sein: sonst überschreibt die globale
     Regel ".et_pb_section h2 em" (Akzentfarbe) die helle Schriftfarbe → unsichtbar. */
  color: inherit;
}

.et_pb_section.ra-cta p,
.et_pb_section.ra-cta .et_pb_text_inner p {
  color: var(--ra-accent-ink) !important;
  font-size: 16px !important;
  line-height: 1.55 !important;
  opacity: 0.85;
  max-width: 420px;
}

/* CTA Button (wei  auf Rot) */
body .et_pb_section.ra-cta .et_pb_button {
  border-color: var(--ra-accent-ink) !important;
  color: var(--ra-accent-ink) !important;
  background: transparent !important;
}

body .et_pb_section.ra-cta .et_pb_button:hover {
  background: var(--ra-accent-ink) !important;
  color: var(--ra-accent) !important;
}


/* ==========================================================================
   FOOTER
   Klasse "ra-footer" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-footer,
#main-footer {
  background-color: var(--ra-bg-2) !important;
  border-top: 1px solid var(--ra-line) !important;
  padding: 64px 0 28px !important;
}

.et_pb_section.ra-footer h4,
.et_pb_section.ra-footer .et_pb_text_inner h4 {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin: 0 0 18px !important;
  font-weight: 500 !important;
}

.et_pb_section.ra-footer ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14px;
}

.et_pb_section.ra-footer a {
  color: var(--ra-ink-faint);
  transition: color 0.2s;
}

.et_pb_section.ra-footer a:hover {
  color: var(--ra-ink) !important;
}

/* Footer Beschreibungstext */
.et_pb_section.ra-footer .ra-footer-about {
  font-size: 14px;
  line-height: 1.6;
  max-width: 360px;
  color: var(--ra-ink-faint);
}

/* Footer Copyright Leiste */
.ra-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  border-top: 1px solid var(--ra-line);
  margin-top: 40px;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

/* Social Icons */
.ra-socials {
  display: flex;
  gap: 14px;
}

.ra-socials a {
  width: 32px;
  height: 32px;
  border: 1px solid var(--ra-line-strong);
  display: grid;
  place-items: center;
  color: var(--ra-ink-dim);
  transition: color 0.2s, border-color 0.2s;
}

.ra-socials a:hover {
  color: var(--ra-ink) !important;
  border-color: var(--ra-ink) !important;
}


/* ==========================================================================
   RESPONSIVE - Mobilansicht
   ========================================================================== */

@media (max-width: 980px) {

  /* Hero: 1-spaltig */
  .et_pb_section.ra-hero .et_pb_row {
    grid-template-columns: 1fr !important;
  }

  /* Stats: 2-spaltig */
  .et_pb_section.ra-hero .ra-stats-row .et_pb_row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Kategorie-Karten: volle Breite */
  .ra-cat-card {
    aspect-ratio: 5 / 4 !important;
  }

  /* Story: 1-spaltig */
  .et_pb_section.ra-story .et_pb_row {
    grid-template-columns: 1fr !important;
  }

  /* Feature-Produkt: 1-spaltig */
  .ra-product-card.ra-feature {
    grid-template-columns: 1fr !important;
  }

  .ra-product-card.ra-feature .ra-product-img {
    border-right: 0 !important;
    border-bottom: 1px solid var(--ra-line-strong) !important;
  }

  /* CTA: 1-spaltig */
  .et_pb_section.ra-cta .et_pb_row {
    grid-template-columns: 1fr !important;
  }

  /* Footer: 2-spaltig */
  .et_pb_section.ra-footer .et_pb_row {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }

  /* Nav: Men punkte ausblenden (Divi Mobile-Men   bernimmt) */
  #main-header #et-top-navigation nav > ul {
    display: none;
  }
}

@media (max-width: 480px) {

  .et_pb_section.ra-footer .et_pb_row {
    grid-template-columns: 1fr !important;
  }

  .et_pb_section.ra-hero h1,
  .et_pb_section.ra-hero .et_pb_text_inner h1 {
    font-size: clamp(40px, 12vw, 64px) !important;
  }
}

/* ==========================================================================
   RITTER AMPLIFICATION - Child Theme Erweiterungen
   Erg nzung zur bestehenden style.css
   Alle neuen Klassen f r Preislisten, Camplifier, Blog und Klassiker- bersicht
   ========================================================================== */


/* ==========================================================================
   BREADCRUMB NAVIGATION
   Klasse "ra-crumbs" an den Wrapper-Div vergeben
   ========================================================================== */

.ra-crumbs {
  padding: 14px var(--ra-pad, clamp(20px,3vw,48px));
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid var(--ra-line) !important;
}

.ra-crumbs a { color: var(--ra-ink-faint); transition: color .2s; }
.ra-crumbs a:hover { color: var(--ra-ink) !important; }
.ra-crumbs .sep { opacity: .4; }
.ra-crumbs .cur { color: var(--ra-ink) !important; }


/* ==========================================================================
   PREISLISTEN HERO
   Klasse "ra-pl-hero" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-pl-hero {
  padding: clamp(40px,5vw,72px) 0 !important;
  background: var(--ra-bg-2) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  position: relative;
  overflow: hidden;
}

.et_pb_section.ra-pl-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 90% 50%, color-mix(in oklab, var(--ra-accent) 14%, transparent), transparent 60%);
  pointer-events: none;
}

/* Divi 5 zentriert Flex-Spalten standardmässig (align-items:center). Fällt nur auf, wenn der
   Modul-Inhalt schmaler als die Spalte ist (z.B. max-width im Kontakt-Hero) — bei vollbreiten
   Grids (Preislisten-Heros) unsichtbar, deshalb hier explizit erzwungen. */
.et_pb_section.ra-pl-hero .et_pb_row,
.et_pb_section.ra-pl-hero .et_pb_column {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}

/* h1 in ra-pl-hero Sektionen (war nie eingetragen, obwohl in CLAUDE.md als "braucht extra CSS"
   dokumentiert — erklärt fehlende Schriftgrösse und fehlendes Rot beim <em>) */
.et_pb_section.ra-pl-hero h1 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(36px, 4.5vw, 64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  color: var(--ra-ink) !important;
}
.et_pb_section.ra-pl-hero h1 em {
  font-style: italic !important;
  color: var(--ra-accent) !important;
}

.ra-pl-era {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px !important;
}

.ra-pl-era::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--ra-accent);
}


/* ==========================================================================
   AMP KARTE (Preislisten)
   Klasse "ra-amp-card" an die Card-Section/Div vergeben
   ========================================================================== */

.ra-amp-card {
  display: grid !important;
  grid-template-columns: 340px 1fr !important;
  border: 1px solid var(--ra-line-strong) !important;
  background: var(--ra-bg-2) !important;
  transition: border-color .3s;
}

.ra-amp-card:hover {
  border-color: var(--ra-ink) !important;
}

.ra-amp-card.alt {
  background: var(--ra-bg) !important;
}

.ra-amp-img {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ra-bg-3) 70%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 80%, transparent) 12px 24px
  ) !important;
  border-right: 1px solid var(--ra-line-strong) !important;
  position: relative;
  overflow: hidden;
  min-height: 240px;
  display: flex;
  align-items: flex-end;
  padding: 16px;
}

.ra-amp-body {
  padding: 28px 32px !important;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ra-amp-model {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 8px !important;
}

.ra-amp-body h3 {
  font-family: var(--ra-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  color: var(--ra-ink) !important;
  margin-bottom: 4px !important;
}

.ra-amp-sub {
  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  color: var(--ra-ink-dim) !important;
  margin-bottom: 20px !important;
}

/* Specs-Grid (4 Spalten: Watt, R hre, Speaker, Kan le) */
.ra-amp-specs {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  padding: 16px 0 !important;
  border-top: 1px solid var(--ra-line) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  margin-bottom: 16px !important;
}

.ra-amp-specs .ra-spec strong {
  font-family: var(--ra-serif) !important;
  font-size: 18px !important;
  color: var(--ra-ink) !important;
  display: block;
  margin-bottom: 2px;
}

.ra-amp-specs .ra-spec span {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}

/* Beschreibungstext */
.ra-amp-desc {
  color: var(--ra-ink-dim) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
  margin-bottom: 16px !important;
  font-family: var(--ra-sans) !important;
}

/* Preis-Zeile */
.ra-amp-price-row {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: auto !important;
  padding-top: 16px;
}

.ra-amp-price {
  font-family: var(--ra-serif) !important;
  font-size: 32px !important;
  color: var(--ra-ink) !important;
}

.ra-amp-price small {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-left: 6px;
}

.ra-amp-price.anfrage {
  font-size: 20px !important;
  color: var(--ra-ink-dim) !important;
}

/* Amp auf Anfrage (ausgegraut) */
.ra-amp-card.anfrage {
  opacity: .75;
}


/* ==========================================================================
   AUDIO PLAYER (Code-Modul)
   ========================================================================== */

.ra-audio-box {
  border: 1px solid var(--ra-line-strong) !important;
  background: var(--ra-bg-3) !important;
  padding: 16px 20px !important;
  margin-top: 16px !important;
}

.ra-audio-title {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 10px !important;
}

.ra-waveform {
  display: flex !important;
  align-items: center !important;
  gap: 2px !important;
  height: 40px !important;
  margin-bottom: 10px !important;
}

.ra-waveform span {
  flex: 1;
  background: var(--ra-line-strong);
  border-radius: 1px;
}

.ra-waveform span:nth-child(3n)   { height: 80%; }
.ra-waveform span:nth-child(3n+1) { height: 50%; }
.ra-waveform span:nth-child(3n+2) { height: 100%; }
.ra-waveform span.hi { background: var(--ra-accent) !important; }

.ra-audio-controls {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ra-play-btn {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  display: grid !important;
  place-items: center !important;
  cursor: pointer !important;
  border: 0 !important;
  flex-shrink: 0;
}

.ra-play-btn svg { width: 14px; height: 14px; }

.ra-audio-bar {
  flex: 1;
  height: 2px;
  background: var(--ra-line-strong);
  position: relative;
}

.ra-audio-bar::before {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: var(--ra-progress, 0%);
  height: 100%;
  background: var(--ra-accent);
  transition: width 0.2s linear;
}

.ra-audio-time {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  color: var(--ra-ink-faint) !important;
  letter-spacing: .12em !important;
}


/* ==========================================================================
   TOLEX FARB-TAGS (Blackface Preisliste)
   ========================================================================== */

.ra-tolex-row {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 16px !important;
}

.ra-tolex-tag {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  border: 1px solid var(--ra-line-strong) !important;
  padding: 5px 10px !important;
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-dim) !important;
}

.ra-tolex-dot {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  border: 1px solid var(--ra-line-strong) !important;
  flex-shrink: 0;
}

/* Vordefinierte Tolex-Farben */
.ra-tolex-dot.black  { background: #1a1a1a !important; }
.ra-tolex-dot.brown  { background: #8B4513 !important; }
.ra-tolex-dot.oxblood{ background: #3d5a3e !important; }
.ra-tolex-dot.tan    { background: #8B7355 !important; }
.ra-tolex-dot.red    { background: #c0392b !important; }
.ra-tolex-dot.tweed  { background: #c8a25a !important; }


/* ==========================================================================
   OPTIONS MINI TAGS (Preislisten)
   ========================================================================== */

.ra-opts-mini {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-bottom: 20px !important;
}

.ra-opt-mini-tag {
  background: var(--ra-bg-3) !important;
  border: 1px solid var(--ra-line-strong) !important;
  color: var(--ra-ink-faint) !important;
  font-family: var(--ra-mono) !important;
  font-size: 9px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  padding: 4px 8px !important;
}


/* ==========================================================================
   PREISLISTEN KARTEN (Klassiker- bersicht)
   Klasse "ra-pl-card" an die Karte vergeben
   ========================================================================== */

.ra-pl-card {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  overflow: hidden;
  transition: border-color .3s;
  display: block;
}

.ra-pl-card:hover {
  border-color: var(--ra-ink) !important;
}

.ra-pl-img {
  height: 200px !important;
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ra-bg-3) 70%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 80%, transparent) 12px 24px
  ) !important;
  border-bottom: 1px solid var(--ra-line-strong) !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ra-pl-body {
  padding: 24px !important;
}

.ra-pl-era {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 8px !important;
}

.ra-pl-body h3 {
  font-family: var(--ra-serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  line-height: 1.05 !important;
  margin-bottom: 8px !important;
}

.ra-pl-meta {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  color: var(--ra-ink-dim) !important;
  text-transform: uppercase !important;
  margin-bottom: 18px !important;
}

.ra-pl-meta em { color: var(--ra-accent) !important; font-style: normal !important; }

.ra-pl-link {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.ra-pl-link::after { content: ""; color: var(--ra-accent); }


/* ==========================================================================
   OPTIONEN GRUPPEN (Klassiker- bersicht)
   ========================================================================== */

.ra-opts-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin-bottom: 48px !important;
}

.ra-opt-group {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  padding: 24px !important;
}

.ra-opt-group h3 {
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .22em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink) !important;
  margin-bottom: 16px !important;
  padding-bottom: 12px !important;
  border-bottom: 1px solid var(--ra-line-strong) !important;
}

.ra-opt-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
}

.ra-opt-tag {
  background: var(--ra-bg-3) !important;
  border: 1px solid var(--ra-line-strong) !important;
  color: var(--ra-ink-faint) !important;
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
}


/* ==========================================================================
   MODIFIKATIONS-KARTEN (Klassiker- bersicht)
   ========================================================================== */

.ra-mods-grid {
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  gap: 8px !important;
}

.ra-mod-card {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  padding: 16px !important;
  position: relative;
}

.ra-mod-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 36px; height: 2px;
  background: var(--ra-accent);
}

.ra-mod-title {
  font-family: var(--ra-serif) !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  color: var(--ra-ink) !important;
  margin-bottom: 4px !important;
}

.ra-mod-sub {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}


/* ==========================================================================
   BESTELLPROZESS SCHRITTE (Klassiker- bersicht)
   ========================================================================== */

.ra-steps {
  display: flex !important;
  flex-direction: column !important;
  gap: 20px !important;
}

.ra-step {
  display: flex !important;
  gap: 16px !important;
  align-items: flex-start !important;
}

.ra-step-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  flex-shrink: 0;
  margin-top: 2px;
}

.ra-step-body strong {
  color: var(--ra-ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  display: block;
  margin-bottom: 4px;
}

.ra-step-body span {
  color: var(--ra-ink-dim) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
}


/* ==========================================================================
   CAMPLIFIER - FEATURE STRIP
   Klasse "ra-feat-strip" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-feat-strip {
  background: var(--ra-bg-2) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: 0 !important;
}

/* Einzelnes Feature (Klasse "ra-feat" an Column vergeben) */
.ra-feat {
  padding: 24px 32px !important;
  border-right: 1px solid var(--ra-line) !important;
}

.et_pb_column:last-child .ra-feat {
  border-right: none !important;
}

.ra-feat-icon {
  width: 32px !important;
  height: 32px !important;
  background: var(--ra-bg-3) !important;
  border: 1px solid var(--ra-line-strong) !important;
  display: grid !important;
  place-items: center !important;
  margin-bottom: 12px !important;
  font-size: 16px !important;
  color: var(--ra-accent) !important;
}

.ra-feat strong {
  color: var(--ra-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  display: block;
  margin-bottom: 4px;
}

.ra-feat p {
  color: var(--ra-ink-faint) !important;
  font-size: 12px !important;
  line-height: 1.5 !important;
  font-family: var(--ra-mono) !important;
  letter-spacing: .04em !important;
}


/* ==========================================================================
   CAMPLIFIER - MODUL KARTEN
   Klasse "ra-mod-card-camp" an die Karte vergeben
   (unterschiedlich von ra-mod-card f r Klassiker!)
   ========================================================================== */

.ra-camp-card {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  overflow: hidden;
  transition: border-color .3s;
}

.ra-camp-card:hover {
  border-color: var(--ra-ink) !important;
}

.ra-camp-card.featured {
  border-color: var(--ra-accent) !important;
}

.ra-camp-badge {
  background: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 7px 16px !important;
  text-align: center;
}

.ra-camp-use {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 8px !important;
}

.ra-camp-body h3 {
  font-family: var(--ra-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  margin-bottom: 8px !important;
}

.ra-camp-desc {
  color: var(--ra-ink-dim) !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  margin-bottom: 14px !important;
}

.ra-camp-specs {
  border-top: 1px solid var(--ra-line) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  padding: 10px 0 !important;
  margin-bottom: 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
}

.ra-camp-spec {
  display: flex !important;
  justify-content: space-between !important;
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
}

.ra-camp-spec .lbl { color: var(--ra-ink-faint); }
.ra-camp-spec .val { color: var(--ra-ink-dim); font-weight: 500; }

.ra-camp-bottom {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.ra-camp-price {
  font-family: var(--ra-serif) !important;
  font-size: 26px !important;
  color: var(--ra-ink) !important;
}


/* ==========================================================================
   CAMPLIFIER - VERGLEICHSTABELLE
   ========================================================================== */

.ra-comp-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
}

.ra-comp-table th {
  background: var(--ra-bg-2) !important;
  color: var(--ra-ink) !important;
  padding: 12px 16px !important;
  text-align: left !important;
  border: 1px solid var(--ra-line-strong) !important;
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
}

.ra-comp-table th.accent {
  background: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  border-color: var(--ra-accent) !important;
}

.ra-comp-table td {
  padding: 10px 16px !important;
  border: 1px solid var(--ra-line) !important;
  color: var(--ra-ink-dim) !important;
  font-size: 13px !important;
}

.ra-comp-table td.lbl {
  color: var(--ra-ink-faint) !important;
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.ra-comp-table td.hi { color: var(--ra-ink) !important; }
.ra-comp-table td.hi.bold { font-family: var(--ra-serif) !important; font-size: 16px !important; }

.ra-comp-table tr:nth-child(even) td {
  background: color-mix(in oklab, var(--ra-bg-2) 40%, transparent) !important;
}


/* ==========================================================================
   CAMPLIFIER - KUNDENSTIMMEN
   ========================================================================== */

.ra-review-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

.ra-review {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  padding: 26px !important;
}

.ra-review-quote {
  border-left: 2px solid var(--ra-accent) !important;
  padding-left: 16px !important;
  margin-bottom: 18px !important;
}

.ra-review-quote p {
  color: var(--ra-ink-dim) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
  font-style: italic !important;
}

.ra-review-footer {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.ra-review-avatar {
  width: 36px !important;
  height: 36px !important;
  background: var(--ra-bg-3) !important;
  border-radius: 50% !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--ra-serif) !important;
  font-size: 16px !important;
  color: var(--ra-accent) !important;
  font-style: italic !important;
  flex-shrink: 0;
}

.ra-review-name {
  color: var(--ra-ink) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}

.ra-review-prod {
  color: var(--ra-ink-faint) !important;
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  margin-top: 2px;
}


/* ==========================================================================
   CAMPLIFIER - EINBAU SCHRITTE
   ========================================================================== */

.ra-install {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 48px !important;
  align-items: center !important;
}

.ra-tech-notes {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 24px !important;
}

.ra-tech-note {
  border-left: 2px solid var(--ra-line-strong) !important;
  padding-left: 20px !important;
}

.ra-tech-note h4 {
  color: var(--ra-ink) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-bottom: 8px !important;
}

.ra-tech-note p {
  color: var(--ra-ink-dim) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
}


/* ==========================================================================
   BLOG - ARTIKEL HERO
   Klasse "ra-art-hero" an die Section vergeben
   ========================================================================== */

.et_pb_section.ra-art-hero {
  padding: clamp(48px,6vw,80px) 0 clamp(32px,4vw,56px) !important;
  background: var(--ra-bg-2) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  position: relative;
  overflow: hidden;
}

.et_pb_section.ra-art-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(600px 400px at 80% 20%, color-mix(in oklab, var(--ra-accent) 12%, transparent), transparent 60%);
  pointer-events: none;
}

.ra-art-meta {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-bottom: 24px !important;
  flex-wrap: wrap;
}

.ra-art-cat {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ra-accent-ink) !important;
  background: var(--ra-accent) !important;
  padding: 4px 10px !important;
}

.ra-art-date, .ra-art-read {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}

.et_pb_section.ra-art-hero h1 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(36px,5vw,72px) !important;
  line-height: 1.02 !important;
  letter-spacing: -.02em !important;
  max-width: 800px;
  margin-bottom: 20px !important;
}

.et_pb_section.ra-art-hero h1 em {
  font-style: italic;
  color: var(--ra-accent);
}

.ra-art-lead {
  font-size: 18px !important;
  line-height: 1.65 !important;
  color: var(--ra-ink-dim) !important;
  max-width: 660px;
  margin-bottom: 28px !important;
}

/* Autor-Block */
.ra-art-author {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
}

.ra-art-avatar {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background: var(--ra-bg-3) !important;
  border: 1px solid var(--ra-line-strong) !important;
  display: grid !important;
  place-items: center !important;
  font-family: var(--ra-serif) !important;
  font-size: 18px !important;
  color: var(--ra-accent) !important;
  font-style: italic !important;
  flex-shrink: 0;
}

.ra-art-author-name {
  font-family: var(--ra-serif) !important;
  font-size: 16px !important;
  font-style: italic !important;
  color: var(--ra-ink) !important;
}

.ra-art-author-role {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-top: 2px;
}


/* ==========================================================================
   BLOG - ARTIKEL INHALT TYPOGRAFIE
   Klasse "ra-art-content" an das Text-Modul / Wrapper vergeben
   ========================================================================== */

.ra-art-content {
  max-width: 720px !important;
  margin: 0 auto !important;
}

.ra-art-content h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(26px,3vw,38px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.015em !important;
  margin: 48px 0 18px !important;
  color: var(--ra-ink) !important;
}

.ra-art-content h2 em { font-style: italic; color: var(--ra-accent); }

.ra-art-content h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(20px,2.2vw,26px) !important;
  line-height: 1.2 !important;
  margin: 32px 0 12px !important;
  color: var(--ra-ink) !important;
}

.ra-art-content p {
  color: var(--ra-ink-dim) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
}

.ra-art-content p:first-child {
  font-size: 19px !important;
  color: var(--ra-ink) !important;
}

.ra-art-content strong { color: var(--ra-ink) !important; font-weight: 600 !important; }

.ra-art-content ul, .ra-art-content ol {
  padding-left: 0 !important;
  margin: 0 0 20px !important;
  list-style: none !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ra-art-content li {
  color: var(--ra-ink-dim) !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
  padding-left: 20px !important;
  position: relative;
}

.ra-art-content ul li::before {
  content: "";
  position: absolute;
  left: 0; top: .75em;
  width: 10px; height: 1px;
  background: var(--ra-accent);
}

.ra-art-content blockquote {
  border-left: 2px solid var(--ra-accent) !important;
  padding: 16px 0 16px 24px !important;
  margin: 32px 0 !important;
  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--ra-ink) !important;
}

.ra-art-content hr {
  border: 0 !important;
  border-top: 1px solid var(--ra-line) !important;
  margin: 40px 0 !important;
}

/* Info-Box im Artikel */
.ra-info-box {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  border-left: 3px solid var(--ra-accent) !important;
  padding: 20px 24px !important;
  margin: 28px 0 !important;
}

.ra-info-box p {
  color: var(--ra-ink-dim) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Tags */
.ra-art-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 32px !important;
}

.ra-art-tag {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  color: var(--ra-ink-faint) !important;
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  padding: 5px 10px !important;
}

/* Verwandte Artikel */
.ra-related-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 16px !important;
}

.ra-rel-card {
  background: var(--ra-bg) !important;
  border: 1px solid var(--ra-line-strong) !important;
  overflow: hidden;
  transition: border-color .3s;
  display: block;
}

.ra-rel-card:hover { border-color: var(--ra-ink) !important; }

.ra-rel-body { padding: 18px !important; }

.ra-rel-cat {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 8px !important;
}

.ra-rel-body h4 {
  font-family: var(--ra-serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  margin-bottom: 6px !important;
  color: var(--ra-ink) !important;
}

.ra-rel-date {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}


/* ==========================================================================
   RESPONSIVE - Mobile Anpassungen f r neue Klassen
   ========================================================================== */

@media (max-width: 980px) {

  .ra-amp-card {
    grid-template-columns: 1fr !important;
  }

  .ra-amp-img {
    border-right: none !important;
    border-bottom: 1px solid var(--ra-line-strong) !important;
    min-height: 200px !important;
  }

  .ra-opts-grid {
    grid-template-columns: 1fr !important;
  }

  .ra-mods-grid {
    grid-template-columns: repeat(2,1fr) !important;
  }

  .ra-review-grid {
    grid-template-columns: 1fr !important;
  }

  .ra-install {
    grid-template-columns: 1fr !important;
  }

  .ra-tech-notes {
    grid-template-columns: 1fr !important;
  }

  .ra-related-grid {
    grid-template-columns: 1fr !important;
  }

  .ra-feat-strip {
    grid-template-columns: repeat(2,1fr) !important;
  }

  .ra-comp-table {
    font-size: 11px !important;
  }

  .ra-amp-specs {
    grid-template-columns: repeat(2,1fr) !important;
  }

}

/* ==========================================================================
   KATEGORIE-KARTEN INNEN-ELEMENTE (Homepage Produktfamilien)
   ra-cat-card ist der  u ere Container (bereits in style.css)
   Diese Klassen gehen INNEN ins Code-Modul der Karte
   ========================================================================== */

.ra-cat-img {
  position: absolute !important;
  inset: 0 !important;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--ra-bg-3) 80%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 90%, transparent) 12px 24px
  );
}

.ra-cat-img::after {
  content: attr(data-label);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

.ra-cat-body {
  position: absolute !important;
  left: 0; right: 0; bottom: 0;
  padding: 24px !important;
  background: linear-gradient(to top, color-mix(in oklab, var(--ra-bg) 92%, transparent), transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ra-num-lbl {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}

.ra-cat-body h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(22px,2.2vw,32px) !important;
  line-height: 1.05 !important;
  color: var(--ra-ink) !important;
  margin: 0 !important;
}

.ra-cat-body .ra-meta {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  color: var(--ra-ink-dim) !important;
  text-transform: uppercase !important;
}

.ra-cat-body .ra-meta em {
  color: var(--ra-accent) !important;
  font-style: normal !important;
}

/* Pfeil-Button oben rechts auf der Karte */
.ra-arrow-link {
  position: absolute !important;
  top: 20px; right: 20px !important;
  width: 40px; height: 40px !important;
  border-radius: 50% !important;
  background: var(--ra-bg) !important;
  border: 1px solid var(--ra-line-strong) !important;
  display: grid !important;
  place-items: center !important;
  transition: transform .3s, background .3s;
}

.ra-cat-card:hover .ra-arrow-link {
  background: var(--ra-accent) !important;
  border-color: var(--ra-accent) !important;
  transform: rotate(-45deg);
}

.ra-cat-card:hover .ra-arrow-link svg {
  stroke: var(--ra-accent-ink) !important;
}

/* ==========================================================================
   HERO BLOCK - isolierter Custom Block 
   ========================================================================== */

.ra-hero-block {
  width: 100%;
}

.ra-hero-copy {
  max-width: 660px;
}

.ra-hero-meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 0 0 28px 0;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--ra-ink-faint);
}

.ra-hero-bar {
  display: block;
  width: 42px;
  min-width: 42px;
  height: 1px;
  background: var(--ra-ink-faint);
  flex: 0 0 42px;
}

.ra-hero-title {
  margin: 0 0 28px 0;
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-style: normal;
  font-weight: 400;
  font-size: clamp(44px, 6vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ra-ink);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

.ra-hero-accent {
  font-family: "Fraunces", "Cormorant Garamond", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--ra-accent);
  font-synthesis: none;
}

.ra-hero-lead {
  max-width: 520px;
  margin: 0 0 36px 0;
  font-family: var(--ra-sans);
  font-size: 18px;
  line-height: 1.55;
  color: var(--ra-ink-dim);
}

.ra-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.ra-hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 22px;
  border: 1px solid var(--ra-ink);
  background: transparent;
  color: var(--ra-ink);
  font-family: var(--ra-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.ra-hero-btn:hover {
  background: var(--ra-ink);
  color: var(--ra-bg);
}

.ra-hero-btn-primary {
  background: var(--ra-accent);
  border-color: var(--ra-accent);
  color: var(--ra-accent-ink);
}

.ra-hero-btn-primary:hover {
  background: #6e1422;
  border-color: #6e1422;
  color: var(--ra-accent-ink);
}

@media (max-width: 980px) {
  .ra-hero-copy {
    max-width: 100%;
  }

  .ra-hero-title {
    font-size: clamp(40px, 9vw, 72px);
  }
}

@media (max-width: 767px) {
  .ra-hero-title {
    font-size: clamp(34px, 11vw, 56px);
    line-height: 1.02;
  }

  .ra-hero-meta {
    gap: 14px;
    font-size: 10px;
  }

  .ra-hero-bar {
    width: 30px;
    min-width: 30px;
    flex-basis: 30px;
  }
}

/* Hero Buttons nebeneinander erzwingen
.et_pb_section.ra-hero .ra-hero-button {
  display: inline-block !important;
  width: auto !important;
  margin-right: 12px !important;
  margin-bottom: 12px !important;
}

/* letzten Button sauber
.et_pb_section.ra-hero .ra-hero-button:last-child {
  margin-right: 0 !important;
}*/

.ra-section-heading {
  max-width: 760px;
  margin-bottom: 48px;
}

.ra-section-title-custom {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5vw, 72px) !important;
  line-height: 1 !important;
  letter-spacing: -0.02em !important;
  color: var(--ra-ink) !important;
  margin: 12px 0 18px 0 !important;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}

.ra-section-accent {
  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  color: var(--ra-accent) !important;
  font-synthesis: none;
}

.ra-section-lead-custom {
  max-width: 620px;
  font-family: var(--ra-sans) !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--ra-ink-dim) !important;
  margin: 0 !important;
}

.ra-section-heading {
  max-width: none;
}

.ra-section-title-custom {
  max-width: 1000px;
}

.ra-section-lead-custom {
  max-width: 620px;
}

.ra-cat-card {
  position: relative;
  overflow: hidden;
}

.ra-cat-body {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
}

.ra-cat2-card {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
  overflow: hidden;
}

.ra-cat2-img::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(15,14,12,0.9) 0%,
    rgba(15,14,12,0.75) 25%,
    rgba(15,14,12,0.45) 50%,
    rgba(15,14,12,0.2) 75%,
    rgba(15,14,12,0.05) 100%
  );


}

.ra-cat2-img::after {
  display: none !important;
}

.ra-cat2-body {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 32px;
  z-index: 2;
}

.ra-cat2-num {
  display: block;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
  margin-bottom: 6px;
}

.ra-cat2-body h3 {
  font-family: var(--ra-serif);
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.05;
  font-weight: 500;
  color: var(--ra-ink);
  margin: 0 0 8px 0;
}

.ra-cat2-meta {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ra-ink-dim);
}

.ra-cat2-meta em {
  color: var(--ra-accent);
  font-style: normal;
}

.ra-cat2-arrow {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ra-bg);
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink);
  display: grid;
  place-items: center;
  z-index: 3;
}
.ra-cat2-arrow:hover {
  transform: rotate(-45deg);
  background: var(--ra-accent);
  border-color: var(--ra-accent);
  color: var(--ra-accent-ink);
}

.ra-cat2-arrow {
  cursor: pointer;
  transition: transform 0.3s, background 0.3s, color 0.3s, border-color 0.3s;
}
.ra-cat2-img {
  position: absolute;
  inset: 0;
  background-image: var(--cat-img) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

.ra-mosaic {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 180px 180px 160px;
  gap: 14px;
}

/* gro e Kachel */
.ra-mosaic-big {
  grid-column: span 4;
  grid-row: span 2;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
}

/* kleine rechts oben */
.ra-mosaic-small {
  grid-column: span 2;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
}

/* breite unten */
.ra-mosaic-wide {
  grid-column: span 3;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
}

/* rote Variante f r Sections */
.ra-hero-meta--red .ra-hero-bar {
  background: var(--ra-accent);
}

.ra-hero-meta--red span {
  color: var(--ra-ink-faint);
}

.ra-hero-meta--red .ra-num {
  color: var(--ra-accent);
}

/* ==========================================================================
   VIER RICHTUNGEN - Asymmetrisches Kachel-Grid
   ========================================================================== */

.cats {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.cats .cat {
  grid-column: span 4;
  aspect-ratio: 4 / 5;
  position: relative;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s, border-color 0.3s;
  text-decoration: none;
  display: block;
}

.cats .cat:nth-child(1),
.cats .cat:nth-child(2) {
  grid-column: span 6;
  aspect-ratio: 6 / 5;
}

.cats .cat:hover {
  border-color: var(--ra-ink);
}

.cats .cat .cat-ph {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    color-mix(in oklab, var(--ra-bg-3) 80%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 90%, transparent) 12px 24px
  );
}

.cats .cat .cat-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 24px;
  background: linear-gradient(to top, color-mix(in oklab, var(--ra-bg) 92%, transparent), transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 2;
}

.cats .cat .num-lbl {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

.cats .cat .cat-body h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(22px, 2.2vw, 32px) !important;
  line-height: 1.05 !important;
  color: var(--ra-ink) !important;
  margin: 0 !important;
}

.cats .cat .meta {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ra-ink-dim);
}

.cats .cat .meta em {
  color: var(--ra-accent);
  font-style: normal;
}

.cats .cat .arrow-link {
  position: absolute;
  top: 20px; right: 20px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--ra-bg);
  border: 1px solid var(--ra-line-strong);
  display: grid;
  place-items: center;
  transition: transform 0.3s, background 0.3s;
  z-index: 3;
  color: var(--ra-ink);
}

.cats .cat:hover .arrow-link {
  background: var(--ra-accent);
  border-color: var(--ra-accent);
  transform: rotate(-45deg);
}

.cats .cat:hover .arrow-link svg {
  stroke: var(--ra-accent-ink);
}

@media (max-width: 768px) {
  .cats .cat,
  .cats .cat:nth-child(1),
  .cats .cat:nth-child(2) {
    grid-column: span 12;
    aspect-ratio: 5 / 4;
  }
}


/* ==========================================================================
   BLOG - SINGLE POST TYPOGRAFIE & BILDUNTERSCHRIFTEN
   Greift auf body.single-post — unabhaengig vom Divi-Modul (et_pb_post_content
   oder et_pb_text), weil beide .entry-content als Wrapper benutzen.
   ========================================================================== */

/* Dunkler Hintergrund auf Blog-Einzelbeiträgen */
body.single-post,
body.single-post .et_pb_section,
body.single-post .et_pb_row {
  background-color: #0f0e0c !important;
}

/* Überschriften im Artikeltext */
body.single-post .entry-content h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(24px, 3vw, 36px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.015em !important;
  margin: 48px 0 18px !important;
  color: var(--ra-ink) !important;
}

body.single-post .entry-content h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(20px, 2.2vw, 26px) !important;
  line-height: 1.2 !important;
  margin: 32px 0 12px !important;
  color: var(--ra-ink) !important;
}

body.single-post .entry-content h4 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(17px, 1.8vw, 22px) !important;
  line-height: 1.3 !important;
  margin: 28px 0 10px !important;
  color: var(--ra-ink) !important;
}

/* Fließtext */
body.single-post .entry-content p {
  color: var(--ra-ink-dim) !important;
  font-size: 17px !important;
  line-height: 1.75 !important;
  margin-bottom: 20px !important;
}

body.single-post .entry-content strong {
  color: var(--ra-ink) !important;
  font-weight: 600 !important;
}

body.single-post .entry-content em {
  font-style: italic !important;
}

/* Listen */
body.single-post .entry-content ul,
body.single-post .entry-content ol {
  padding-left: 20px !important;
  margin-bottom: 20px !important;
  color: var(--ra-ink-dim) !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

body.single-post .entry-content li {
  margin-bottom: 8px !important;
}

/* Zitat */
body.single-post .entry-content blockquote {
  border-left: 2px solid var(--ra-accent) !important;
  padding: 16px 0 16px 24px !important;
  margin: 32px 0 !important;
  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: var(--ra-ink) !important;
  background: none !important;
}

/* Trennlinie */
body.single-post .entry-content hr {
  border: 0 !important;
  border-top: 1px solid var(--ra-line) !important;
  margin: 40px 0 !important;
}

/* Bilder mit Bildunterschrift */
body.single-post .entry-content figure {
  margin: 32px 0 !important;
}

body.single-post .entry-content figure img {
  width: 100% !important;
  display: block !important;
  border: 1px solid var(--ra-line-strong) !important;
  margin: 0 !important;
}

body.single-post .entry-content figcaption {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  text-align: center !important;
  padding: 10px 0 0 !important;
  margin: 0 !important;
}

/* Info-Box im Artikel: <div class="ritter-info-box"> */
body.single-post .entry-content .ritter-info-box {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  border-left: 3px solid var(--ra-accent) !important;
  padding: 20px 24px !important;
  margin: 28px 0 !important;
}

body.single-post .entry-content .ritter-info-box p {
  color: var(--ra-ink-dim) !important;
  font-size: 15px !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

/* Responsive Video-Container: <div class="ritter-video"><iframe ...></div> */
body.single-post .entry-content .ritter-video {
  position: relative !important;
  padding-bottom: 56.25% !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 32px 0 !important;
}

body.single-post .entry-content .ritter-video iframe {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0 !important;
}
.ra-expand-btn {
  background: none;
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink-faint);
  font-family: var(--ra-mono);
  font-size: 14px;
  width: 22px;
  height: 22px;
  line-height: 1;
  cursor: pointer;
  margin-left: 8px;
  vertical-align: middle;
  transition: all 0.2s;
}

.ra-expand-btn:hover {
  border-color: var(--ra-ink);
  color: var(--ra-ink);
}

.ra-expand-text {
  display: none;
  margin-top: 8px;
}

.ra-expand-text.open {
  display: block;
}

/* ==========================================================================
   CAMPLIFIER-SEITE
   ========================================================================== */

/* Features Strip */
.ra-feat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--ra-line);
  border-bottom: 1px solid var(--ra-line);
}

.ra-feat {
  padding: 28px 24px;
  border-right: 1px solid var(--ra-line);
}

.ra-feat:last-child {
  border-right: none;
}

.ra-feat-icon {
  width: 40px;
  height: 40px;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}

.ra-feat strong {
  color: var(--ra-ink);
  font-size: 14px;
  font-weight: 600;
  display: block;
  margin-bottom: 6px;
}

.ra-feat p {
  color: var(--ra-ink-faint) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  font-family: var(--ra-mono) !important;
  letter-spacing: .03em !important;
}

/* Camplifier Produkt-Karten */
.ra-camp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}

.ra-camp-card {
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color .3s;
}

.ra-camp-card:hover {
  border-color: var(--ra-ink);
}

.ra-camp-img {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-bottom: 1px solid var(--ra-line);
  background: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--ra-bg-3) 70%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 80%, transparent) 12px 24px
  );
}

.ra-camp-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ra-camp-body {
  padding: 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 6px;
}

.ra-camp-tag {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}

.ra-camp-body h3 {
  font-family: var(--ra-serif) !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  color: var(--ra-ink) !important;
}

.ra-camp-body p {
  color: var(--ra-ink-dim) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  flex: 1;
}

.ra-camp-price {
  font-family: var(--ra-serif) !important;
  font-size: 28px !important;
  color: var(--ra-ink) !important;
  margin-top: 4px;
}

.ra-camp-price small {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .12em !important;
  color: var(--ra-ink-faint) !important;
  margin-left: 6px;
}

.ra-camp-btn {
  display: block;
  text-align: center;
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 11px 16px;
  background: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  margin-top: 14px;
  text-decoration: none;
  transition: background .2s;
}

.ra-camp-btn:hover {
  background: #6e1422 !important;
}

/* Vergleichstabelle */
.ra-comp-wrap {
  overflow-x: auto;
}

.ra-comp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.ra-comp-table th {
  background: var(--ra-bg-2);
  color: var(--ra-ink);
  padding: 12px 16px;
  text-align: left;
  border: 1px solid var(--ra-line);
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 500;
}

.ra-comp-table th.hl {
  background: var(--ra-accent);
  color: var(--ra-accent-ink);
  border-color: var(--ra-accent);
}

.ra-comp-table td {
  padding: 11px 16px;
  border: 1px solid var(--ra-line);
  color: var(--ra-ink-dim);
  vertical-align: top;
}

.ra-comp-table td.lbl {
  color: var(--ra-ink-faint);
  font-family: var(--ra-mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.ra-comp-table td.hl {
  color: var(--ra-ink);
}

.ra-comp-table .ra-comp-price {
  font-family: var(--ra-serif);
  font-size: 20px;
  color: var(--ra-ink);
}

.ra-comp-table a {
  color: var(--ra-accent);
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}

.ra-comp-table a:hover {
  color: var(--ra-ink);
}

.ra-comp-footnotes {
  margin-top: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.ra-comp-fn {
  border-left: 2px solid var(--ra-line);
  padding-left: 18px;
}

.ra-comp-fn h5 {
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ra-ink);
  margin-bottom: 8px;
}

.ra-comp-fn p {
  color: var(--ra-ink-dim) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

/* Kundenstimmen */
.ra-review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.ra-review-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.ra-review-card {
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ra-review-stars {
  color: var(--ra-accent);
  font-size: 16px;
  letter-spacing: 2px;
}

.ra-review-text {
  color: var(--ra-ink-dim);
  font-size: 14px;
  line-height: 1.65;
  flex: 1;
}

.ra-review-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--ra-line);
}

.ra-review-avatar {
  width: 36px;
  height: 36px;
  background: var(--ra-accent);
  color: var(--ra-accent-ink);
  display: grid;
  place-items: center;
  font-family: var(--ra-mono);
  font-size: 13px;
  font-weight: 600;
  flex-shrink: 0;
}

.ra-review-name {
  color: var(--ra-ink);
  font-size: 14px;
  font-weight: 600;
}

.ra-review-prod {
  font-family: var(--ra-mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--ra-ink-faint);
  text-transform: uppercase;
}

/* Einbau-Video */
.ra-video-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}

.ra-video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border: 1px solid var(--ra-line);
}

.ra-video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ==========================================================================
   CONTACT FORM (Divi Contact Form Module, RITTER Dark Theme)
   ========================================================================== */

.et_pb_contact_form_container .et_pb_contact_field input,
.et_pb_contact_form_container .et_pb_contact_field textarea {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  border-radius: 0 !important;
  color: var(--ra-ink) !important;
  font-family: var(--ra-sans) !important;
  font-size: 14px !important;
  padding: 12px 16px !important;
  transition: border-color .2s !important;
  box-shadow: none !important;
}

.et_pb_contact_form_container .et_pb_contact_field input:focus,
.et_pb_contact_form_container .et_pb_contact_field textarea:focus {
  border-color: var(--ra-ink) !important;
  outline: none !important;
  box-shadow: none !important;
}

.et_pb_contact_form_container .et_pb_contact_field input::placeholder,
.et_pb_contact_form_container .et_pb_contact_field textarea::placeholder {
  color: var(--ra-ink-faint) !important;
}

.et_pb_contact_form_container .et_pb_contact_field label {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 6px !important;
  display: block !important;
}

.et_pb_contact_form_container .et_pb_contact_submit.et_pb_button {
  background: var(--ra-accent) !important;
  border-color: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 12px 24px !important;
  border-radius: 0 !important;
  transition: background .2s !important;
}

.et_pb_contact_form_container .et_pb_contact_submit.et_pb_button:hover {
  background: #6e1422 !important;
  border-color: #6e1422 !important;
}

/* CAPTCHA-Zeile */
.et_pb_contact_form_container .et_contact_bottom_container {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.et_pb_contact_form_container .et_pb_contact_captcha_question {
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  color: var(--ra-ink-faint) !important;
}

.et_pb_contact_form_container .et_pb_contact_captcha {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  border-radius: 0 !important;
  color: var(--ra-ink) !important;
  font-family: var(--ra-mono) !important;
  font-size: 13px !important;
  padding: 8px 12px !important;
  width: 80px !important;
}

/* Erfolgsmeldung */
.et_pb_contact_form_container .et-pb-contact-message {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line) !important;
  border-left: 3px solid var(--ra-accent) !important;
  color: var(--ra-ink-dim) !important;
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .06em !important;
  padding: 16px 20px !important;
  border-radius: 0 !important;
}
/* Divi Honeypot-Feld ausblenden */
.et_pb_contact_form_container .et_pb_contact_field input[name*="et_number"],
.et_pb_contact_form_container .et_pb_contact_field input[name*="et_pb_contact_et_number"] {
  display: none !important;
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
}
.et_pb_contact_form_container .et-pb-contact-message:empty {
  display: none !important;
}
/* Spaltenbreiten 60/40 */
.ra-col-60 { width: 60% !important; }
.ra-col-40 { width: 40% !important; }

/* ==========================================================================
   KONTAKTSEITE LAYOUT
   ========================================================================== */

.et_pb_section.ra-contact-grid {
  padding: 0 !important;
  background: var(--ra-bg-2);
  border-bottom: 1px solid var(--ra-line);
}
.et_pb_section.ra-contact-grid .et_pb_row {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et_pb_section.ra-contact-grid .et_pb_column:first-child {
  border-right: 1px solid var(--ra-line);
}
.et_pb_section.ra-contact-grid .et_pb_column {
  padding: clamp(48px,5vw,72px) clamp(20px,3vw,48px) !important;
}
.et_pb_section.ra-contact-map {
  padding: 0 !important;
  background: var(--ra-bg);
  border-bottom: 1px solid var(--ra-line);
}
.et_pb_section.ra-contact-map .et_pb_row {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

.ra-contact-grid .et_pb_column:first-child h2 {
  font-family: var(--ra-serif);
  font-weight: 400;
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 8px;
}
.ra-contact-grid .et_pb_column:first-child h2 em {
  font-style: italic;
  color: var(--ra-accent);
}
.et_pb_contact_form_container .et_pb_contact_field input,
.et_pb_contact_form_container .et_pb_contact_field select,
.et_pb_contact_form_container .et_pb_contact_field textarea {
  background: var(--ra-bg-3) !important;
  border: 1px solid var(--ra-line-strong) !important;
  border-radius: 0 !important;
  color: var(--ra-ink) !important;
  font-family: var(--ra-sans) !important;
  font-size: 15px !important;
  padding: 11px 14px !important;
  box-shadow: none !important;
}
.et_pb_contact_form_container .et_pb_contact_field input:focus,
.et_pb_contact_form_container .et_pb_contact_field select:focus,
.et_pb_contact_form_container .et_pb_contact_field textarea:focus {
  border-color: var(--ra-accent) !important;
  outline: none !important;
}
.et_pb_contact_form_container .et_pb_contact_field label {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 7px !important;
  display: block !important;
}
.et_pb_contact_form_container .et_pb_contact_submit.et_pb_button {
  background: var(--ra-accent) !important;
  border-color: var(--ra-accent) !important;
  color: var(--ra-accent-ink) !important;
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 14px 24px !important;
  border-radius: 0 !important;
  width: 100% !important;
}

/* ==========================================================================
   ABOUT-SEITE LAYOUT
   ========================================================================== */

/* Hero: Portrait links / Text rechts, volle Breite, min-height 70vh */
.et_pb_section.ra-about-hero {
  padding-top: 48px !important;
  padding-bottom: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  background: var(--ra-bg) !important;
  border-bottom: 1px solid var(--ra-line) !important;
}
.et_pb_section.ra-about-hero .et_pb_row {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et_pb_section.ra-about-hero .et_pb_column:first-child {
  min-height: 70vh;
  border-right: 1px solid var(--ra-line) !important;
  background: repeating-linear-gradient(
    135deg,
    rgba(31,27,20,.7) 0 14px,
    rgba(23,20,15,.8) 14px 28px
  ) !important;
  position: relative;
}
.et_pb_section.ra-about-hero .et_pb_column:last-child {
  padding: clamp(48px,6vw,80px) clamp(20px,3vw,48px) !important;
}

/* h1 im About-Hero */
.et_pb_section.ra-about-hero h1 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(36px,4.5vw,64px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.02em !important;
  color: var(--ra-ink) !important;
  margin-bottom: 20px !important;
}
.et_pb_section.ra-about-hero h1 em {
  font-style: italic !important;
  color: var(--ra-accent) !important;
}

/* Story: Text links / Foto-Grid rechts, volle Breite */
.et_pb_section.ra-about-story {
  padding: 0 !important;
  background: var(--ra-bg) !important;
  border-bottom: 1px solid var(--ra-line) !important;
}
.et_pb_section.ra-about-story .et_pb_row {
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}
.et_pb_section.ra-about-story .et_pb_column:first-child {
  border-right: 1px solid var(--ra-line) !important;
  padding: clamp(60px,7vw,100px) clamp(20px,3vw,48px) !important;
}
.et_pb_section.ra-about-story .et_pb_column:last-child {
  padding: clamp(60px,7vw,100px) clamp(20px,3vw,48px) !important;
}

/* h2 + Zitat in Story */
.et_pb_section.ra-about-story h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(28px,3.5vw,48px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.015em !important;
  color: var(--ra-ink) !important;
  margin-bottom: 20px !important;
}
.et_pb_section.ra-about-story h2 em {
  font-style: italic !important;
  color: var(--ra-accent) !important;
}
.ra-story-quote {
  border-left: 2px solid var(--ra-accent);
  padding-left: 20px;
  margin: 28px 0;
  font-family: var(--ra-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.5;
  color: var(--ra-ink);
}

/* Prinzipien-Kacheln (3 Spalten) */
.ra-principles-grid {
  display: grid !important;
  grid-template-columns: repeat(3,1fr) !important;
  gap: 2px !important;
  margin-top: 40px !important;
}
.ra-principle {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line-strong) !important;
  padding: 28px !important;
  position: relative;
}
.ra-principle::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--ra-accent);
}
.ra-principle-num {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  margin-bottom: 12px !important;
}
.ra-principle h3 {
  font-family: var(--ra-serif) !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  line-height: 1.15 !important;
  margin-bottom: 10px !important;
  color: var(--ra-ink) !important;
}
.ra-principle h3 em {
  font-style: italic !important;
  color: var(--ra-accent) !important;
}
.ra-principle p {
  color: var(--ra-ink-dim) !important;
  font-size: 14px !important;
  line-height: 1.65 !important;
}

/* Presse-Zitate (2 Spalten) */
.ra-press-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  margin-top: 28px !important;
}
.ra-press-quote {
  border-left: 2px solid var(--ra-line-strong);
  padding: 16px 20px;
}
.ra-press-quote p {
  font-family: var(--ra-serif) !important;
  font-style: italic !important;
  font-size: 16px !important;
  line-height: 1.6 !important;
  color: var(--ra-ink) !important;
  margin-bottom: 10px !important;
}
.ra-press-quote cite {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
  font-style: normal !important;
}

/* Responsive About */
@media (max-width: 980px) {
  .et_pb_section.ra-about-hero .et_pb_column:first-child { min-height: 40vw; border-right: none !important; border-bottom: 1px solid var(--ra-line) !important; }
  .et_pb_section.ra-about-story .et_pb_column:first-child { border-right: none !important; border-bottom: 1px solid var(--ra-line) !important; }
  .ra-principles-grid { grid-template-columns: 1fr !important; }
  .ra-press-grid { grid-template-columns: 1fr !important; }
}

/* ==========================================================================
   FAQ-SEITE — Accordion Styling
   ========================================================================== */

.et_pb_accordion .et_pb_toggle {
  background: var(--ra-bg-2) !important;
  border: 1px solid var(--ra-line) !important;
  border-radius: 0 !important;
  margin-bottom: 4px !important;
  padding: 0 !important;
}
.et_pb_accordion .et_pb_toggle_title {
  font-family: var(--ra-serif) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  color: var(--ra-ink) !important;
  padding: 20px 24px !important;
  cursor: pointer !important;
}
.et_pb_accordion .et_pb_toggle_title::before {
  color: var(--ra-accent) !important;
  font-size: 20px !important;
  line-height: 1 !important;
}
.et_pb_accordion .et_pb_toggle_open .et_pb_toggle_title {
  border-bottom: 1px solid var(--ra-line) !important;
}
.et_pb_accordion .et_pb_toggle_content {
  font-size: 15px !important;
  line-height: 1.75 !important;
  color: var(--ra-ink-dim) !important;
  padding: 20px 24px !important;
  background: var(--ra-bg) !important;
}
.et_pb_accordion .et_pb_toggle_content ul,
.et_pb_accordion .et_pb_toggle_content p {
  color: var(--ra-ink-dim) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  margin-bottom: 8px !important;
}



/* ==========================================================================
   PRODUKT-UNTERSEITE (Klassen "ra-pp-…")
   Vorlage für Einzelprodukt-Seiten, erstmals für den TRANSFORMATOR MK II.
   Wiederverwendet werden: ra-crumbs, ra-section, ra-kicker/ra-num, ra-section-p,
   ra-audio-box (+ Player-Script), ra-related-grid/ra-rel-*, ra-cta, Divi-Accordion.
   Section-Klassen: ra-pp-crumbs-sec, ra-pp-hero, ra-pp-tabs-sec (+ ra-section, ra-cta).
   ========================================================================== */

/* Anker: Sprungziele nicht unter der festen Kopf-/Reiterleiste verstecken */
.ra-pp-anchor { scroll-margin-top: 150px; }

/* --- Breadcrumb-Sektion: Row bleibt "boxy" (max-width + Seitenrand wie Hero und Menü);
   ra-crumbs bringt eigenes Padding/Linie mit → hier neutralisiert, Linie sitzt an der Section --- */
.et_pb_section.ra-pp-crumbs-sec { border-bottom: 1px solid var(--ra-line) !important; }
.et_pb_section.ra-pp-crumbs-sec .ra-crumbs {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-bottom: 0 !important;
}

/* --- Produkt-Hero --- */
.et_pb_section.ra-pp-hero {
  padding: clamp(24px, 4vw, 56px) 0 clamp(48px, 6vw, 80px) !important;
  border-bottom: 1px solid var(--ra-line) !important;
  position: relative;
  overflow: hidden;
}
.et_pb_section.ra-pp-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 500px at 85% 15%, color-mix(in oklab, var(--ra-accent) 20%, transparent), transparent 60%);
}
/* Divi 5 zentriert Code-Module, deren Inhalt schmaler ist als die Spalte → links erzwingen */
.et_pb_section.ra-pp-hero .et_pb_row,
.et_pb_section.ra-pp-hero .et_pb_column {
  justify-content: flex-start !important;
  align-items: flex-start !important;
}
/* Code-Modul im Hero immer volle Spaltenbreite (unabhängig von der Divi-Größen-Einstellung);
   nötig, weil die Info-Spalte als Container gemessen wird. */
.et_pb_section.ra-pp-hero .et_pb_module { width: 100% !important; max-width: 100% !important; }
.ra-pp-hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 4vw, 64px);
  width: 100%;
  position: relative;
}
.ra-pp-hero-grid > * { min-width: 0; }
/* Info-Spalte ist ein "Container": die Überschrift misst sich an ihr (Einheit cqw) */
.ra-pp-info { container-type: inline-size; }

/* Galerie */
.ra-pp-gallery { display: flex; flex-direction: column; gap: 14px; }
.ra-pp-main {
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--ra-line-strong);
  overflow: hidden;
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--ra-bg-3) 80%, transparent) 0 14px,
    color-mix(in oklab, var(--ra-bg-2) 80%, transparent) 14px 28px);
}
.ra-pp-main img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(.88) contrast(1.05) saturate(.9);
}
.ra-pp-tags { position: absolute; top: 16px; left: 16px; display: flex; gap: 8px; z-index: 2; }
.ra-pp-tag, .ra-pp-label {
  font-family: var(--ra-mono) !important;
  font-size: 10px !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  padding: 6px 10px;
  background: var(--ra-bg);
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink) !important;
}
.ra-pp-tag.accent { background: var(--ra-accent); color: var(--ra-accent-ink) !important; border-color: var(--ra-accent); }
.ra-pp-label { position: absolute; left: 16px; bottom: 16px; color: var(--ra-ink-dim) !important; z-index: 2; letter-spacing: .2em !important; }

.ra-pp-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ra-pp-thumb {
  appearance: none;
  -webkit-appearance: none;
  padding: 0;
  margin: 0;
  aspect-ratio: 1;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  background: repeating-linear-gradient(45deg, var(--ra-bg-3) 0 10px, var(--ra-bg-2) 10px 20px);
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink-faint);
  font-family: var(--ra-mono);
  font-size: 8px;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.ra-pp-thumb:nth-child(2) { background: repeating-linear-gradient(90deg, var(--ra-bg-3) 0 8px, color-mix(in oklab, var(--ra-accent) 18%, var(--ra-bg-2)) 8px 16px); }
.ra-pp-thumb:nth-child(4) { background: repeating-linear-gradient(60deg, color-mix(in oklab, var(--ra-brass) 15%, var(--ra-bg-3)) 0 9px, var(--ra-bg-2) 9px 18px); }
.ra-pp-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) contrast(1.05) saturate(.9); }
.ra-pp-thumb.on { outline: 1px solid var(--ra-accent); outline-offset: -2px; }
.ra-pp-thumb:hover { border-color: var(--ra-ink-dim); }

/* Info-Spalte */
.et_pb_section.ra-pp-hero h1.ra-pp-h1 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(34px, 3.7vw, 62px) !important;   /* Rückfall für alte Browser */
  font-size: clamp(26px, 10.4cqw, 76px) !important;  /* "TRANSFORMATOR" ist 8,4–9 × Schriftgröße breit → 10,4 % der Spalte lassen ~9 % Luft */
  line-height: .98 !important;
  letter-spacing: -.02em !important;
  margin: 14px 0 10px !important;
  overflow-wrap: break-word;
}
body .et_pb_module .ra-pp-sub {
  font-family: var(--ra-serif) !important;
  font-style: italic;
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.25;
  color: var(--ra-ink-dim) !important;
  margin: 0 0 22px !important;
}
body .et_pb_module .ra-pp-lead {
  font-size: 17px !important;
  line-height: 1.65 !important;
  color: var(--ra-ink-dim) !important;
  margin: 0 0 26px !important;
  max-width: 560px;
}
.ra-pp-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 20px 0;
  margin: 8px 0 20px;
  border-top: 1px solid var(--ra-line);
  border-bottom: 1px solid var(--ra-line);
}
.ra-pp-from, .ra-pp-vat {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}
.ra-pp-vat { font-size: 10px !important; letter-spacing: .14em !important; margin-left: auto; }
.ra-pp-price { font-family: var(--ra-serif) !important; font-size: 40px !important; letter-spacing: -.01em; color: var(--ra-ink) !important; }
.ra-pp-avail {
  display: flex;
  gap: 10px;
  align-items: center;
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-dim) !important;
  margin: 0 0 22px !important;
}
.ra-pp-avail .live { width: 8px; height: 8px; border-radius: 50%; background: #6fbf6f; box-shadow: 0 0 10px rgba(111,191,111,.5); flex-shrink: 0; }
.ra-pp-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* Knöpfe (Links mit Knopf-Optik, für Code-Module) */
a.ra-pp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 14px 22px;
  border: 1px solid var(--ra-ink);
  color: var(--ra-ink) !important;
  background: transparent;
  text-decoration: none !important;
  cursor: pointer;
  transition: background .2s, color .2s;
}
a.ra-pp-btn:hover { background: var(--ra-ink); color: var(--ra-bg) !important; }
a.ra-pp-btn.primary { background: var(--ra-accent); border-color: var(--ra-accent); color: var(--ra-accent-ink) !important; }
a.ra-pp-btn.primary:hover { background: #6e1422; border-color: #6e1422; color: var(--ra-accent-ink) !important; }

/* Kennzahlen unter dem Hero-Text */
.ra-pp-mini { margin-top: 28px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.ra-pp-mini div { border: 1px solid var(--ra-line); padding: 12px 14px; }
.ra-pp-mini strong { font-family: var(--ra-serif); font-size: 22px; font-weight: 400; color: var(--ra-ink); display: block; line-height: 1.2; }
.ra-pp-mini span { font-family: var(--ra-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-ink-faint); }

/* --- Reiter-Leiste (beim Scrollen läuft eine feste Kopie unter dem Seitenkopf mit) --- */
.et_pb_section.ra-pp-tabs-sec { border-bottom: 1px solid var(--ra-line) !important; }
.et_pb_section.ra-pp-tabs-sec .et_pb_row { max-width: 100% !important; padding: 0 !important; }
.ra-pp-tabs {
  width: 100%;
  background: color-mix(in oklab, var(--ra-bg) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  padding: 0 var(--ra-pad);
  z-index: 90;
}
/* Feste Kopie der Leiste (vom Script ans <body> gehängt, nur sichtbar sobald die Original-Leiste oben anstößt) */
.ra-pp-tabs-clone { display: none; position: fixed; left: 0; right: 0; width: auto; top: 0; border-bottom: 1px solid var(--ra-line); background: color-mix(in oklab, var(--ra-bg) 94%, transparent); }
.ra-pp-tabs-clone.on { display: block; }
.ra-pp-tabs-inner { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: calc(var(--ra-maxw) - 2 * var(--ra-pad)); margin: 0 auto; }
.ra-pp-tabs-inner::-webkit-scrollbar { display: none; }
.ra-pp-tabs a {
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .2em !important;
  text-transform: uppercase !important;
  padding: 18px 14px;
  color: var(--ra-ink-faint) !important;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
  transition: color .2s, border-color .2s;
}
.ra-pp-tabs a:first-child { padding-left: 0; }
.ra-pp-tabs a:hover, .ra-pp-tabs a.active { color: var(--ra-ink) !important; border-bottom-color: var(--ra-accent); }

/* --- Warum: drei Säulen --- */
.ra-pp-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.ra-pp-pill {
  position: relative;
  border: 1px solid var(--ra-line-strong);
  background: var(--ra-bg-2);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ra-pp-pill::after { content: ""; position: absolute; left: 0; top: 0; width: 40%; height: 1px; background: var(--ra-accent); }
.ra-pp-pill .n { font-family: var(--ra-mono); font-size: 11px; letter-spacing: .2em; color: var(--ra-accent); }
.ra-pp-pill h3 { font-family: var(--ra-serif) !important; font-size: 24px !important; font-weight: 500 !important; line-height: 1.2 !important; letter-spacing: -.01em; margin: 0 !important; }
.ra-pp-pill p { margin: 0 !important; color: var(--ra-ink-dim) !important; font-size: 15px !important; line-height: 1.6 !important; }

/* --- Features: Text + Bild im Wechsel --- */
.ra-pp-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: 40px; }
.ra-pp-split + .ra-pp-split { margin-top: clamp(48px, 6vw, 80px); }
.ra-pp-split.rev .ra-pp-split-visual { order: -1; }
.ra-pp-split > * { min-width: 0; }
.ra-pp-split-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--ra-line-strong);
  overflow: hidden;
  background: repeating-linear-gradient(30deg, var(--ra-bg-3) 0 14px, var(--ra-bg-2) 14px 28px);
}
.ra-pp-split.rev .ra-pp-split-visual { background: repeating-linear-gradient(90deg, var(--ra-bg-3) 0 12px, color-mix(in oklab, var(--ra-accent) 16%, var(--ra-bg-2)) 12px 24px); }
.ra-pp-split-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) contrast(1.05) saturate(.9); }
.ra-pp-split-visual .lab { position: absolute; left: 16px; bottom: 16px; z-index: 2; font-family: var(--ra-mono); font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: var(--ra-ink-dim); background: var(--ra-bg); padding: 6px 10px; border: 1px solid var(--ra-line-strong); }
.ra-pp-feat-num { font-family: var(--ra-mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--ra-ink-faint); }
.ra-pp-split-text h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 3.2vw, 46px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.015em;
  margin: 10px 0 18px !important;
}
.ra-pp-split-text p { color: var(--ra-ink-dim) !important; font-size: 16px !important; line-height: 1.7 !important; }
.ra-pp-split-text ul { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-direction: column; gap: 10px; }
.ra-pp-split-text li { padding-left: 22px; position: relative; font-size: 15px; color: var(--ra-ink-dim); list-style: none; }
.ra-pp-split-text li::before { content: ""; position: absolute; left: 0; top: .65em; width: 12px; height: 1px; background: var(--ra-accent); }

/* --- Spezifikationen --- */
.ra-pp-specs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--ra-line-strong); background: var(--ra-bg-2); margin-top: 40px; }
.ra-pp-spec-row { display: grid; grid-template-columns: 200px 1fr; gap: 18px; padding: 18px 22px; border-bottom: 1px solid var(--ra-line); align-items: baseline; }
.ra-pp-spec-row:nth-child(odd) { background: color-mix(in oklab, var(--ra-bg-3) 50%, transparent); }
.ra-pp-spec-row .k { font-family: var(--ra-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--ra-ink-faint); }
.ra-pp-spec-row .v { font-family: var(--ra-serif); font-size: 18px; color: var(--ra-ink); }
.ra-pp-spec-row .v small { display: block; margin-top: 2px; font-family: var(--ra-mono); font-size: 11px; letter-spacing: .12em; color: var(--ra-ink-dim); }

/* --- Lieferumfang --- */
.ra-pp-box-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.ra-pp-box-item { border: 1px solid var(--ra-line); background: var(--ra-bg-2); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.ra-pp-box-row > * { min-width: 0; }
.ra-pp-box-item strong, .ra-pp-box-item span { overflow-wrap: anywhere; }
.ra-pp-box-item .icon { width: 36px; height: 36px; border: 1px solid var(--ra-line-strong); display: grid; place-items: center; font-family: var(--ra-mono); font-size: 11px; color: var(--ra-accent); }
.ra-pp-box-item strong { font-family: var(--ra-serif); font-size: 18px; font-weight: 500; color: var(--ra-ink); }
.ra-pp-box-item span { font-family: var(--ra-mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ra-ink-faint); }

/* --- Audio-Demos (nutzt .ra-audio-box aus dem Player-Block) --- */
.ra-pp-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.ra-pp-demo-card h4 { font-family: var(--ra-serif) !important; font-size: 22px !important; font-weight: 500 !important; margin: 0 0 4px !important; }
.ra-pp-demo-card .ra-audio-box { margin-top: 10px !important; padding: 22px 24px !important; }

/* --- Ähnliche Modelle (nutzt .ra-related-grid / .ra-rel-card) --- */
.ra-pp-rel-img {
  position: relative;
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--ra-line-strong);
  background: repeating-linear-gradient(135deg, color-mix(in oklab, var(--ra-bg) 30%, var(--ra-bg-3)) 0 10px, var(--ra-bg-3) 10px 20px);
}
.ra-pp-rel-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.88) contrast(1.05) saturate(.9); }
.ra-pp-rel-price { font-family: var(--ra-mono); font-size: 12px; letter-spacing: .04em; color: var(--ra-ink); margin-top: 4px; display: block; }

/* --- CTA-Band-Inhalt (Section-Klasse ra-cta kommt aus dem Basis-CSS) --- */
.ra-pp-cta-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; align-items: end; position: relative; width: 100%; }
.ra-pp-cta-grid > * { min-width: 0; }
a.ra-pp-cta-link {
  font-family: var(--ra-mono) !important;
  font-size: 12px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  padding: 12px 20px;
  border: 1px solid currentColor;
  color: inherit !important;
  background: transparent;
  display: inline-block;
  text-decoration: none !important;
  transition: background .2s, color .2s;
}
a.ra-pp-cta-link:hover { background: var(--ra-accent-ink); color: var(--ra-accent) !important; }

/* --- Mobil --- */
@media (max-width: 980px) {
  .ra-pp-hero-grid { grid-template-columns: 1fr; }
  .ra-pp-mini { grid-template-columns: repeat(2, 1fr); }
  .ra-pp-why { grid-template-columns: 1fr; }
  .ra-pp-split, .ra-pp-split.rev { grid-template-columns: 1fr; }
  .ra-pp-split.rev .ra-pp-split-visual { order: 0; }
  .ra-pp-specs { grid-template-columns: 1fr; }
  .ra-pp-box-row { grid-template-columns: repeat(2, 1fr); }
  .ra-pp-demo { grid-template-columns: 1fr; }
  .ra-pp-cta-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 600px) {
  .ra-pp-box-row { grid-template-columns: 1fr; }
  .ra-pp-spec-row { grid-template-columns: 1fr; gap: 4px; }
  .ra-pp-price-row .ra-pp-vat { margin-left: 0; width: 100%; }
}


/* ==========================================================================
   HOME EN (ritteramps.com) – Klassen "ra-en-…"
   Englische Startseite ohne Hero: Intro + 5 Modul-Kacheln, "Also from the bench"
   (Transformator + Klassiker), CTA-Band. Mockup: mockups/home-en.html
   Section-Klassen: ra-section (Intro + Kacheln), ra-section-alt (Bench), ra-cta.
   Wiederverwendet: ra-pl-era, ra-camp-badge, ra-pp-cta-grid, ra-pp-cta-link.
   Hinweis: Die h2-Regel von ra-section/ra-section-alt (40–72 px) gilt für ALLE h2 der
   Sektion – die Kachel-Überschriften werden deshalb hier gezielt kleiner gesetzt.
   ========================================================================== */

/* Divi 5 zentriert schmale Code-Module → auf der EN-Home alles volle Breite */
.et_pb_section .et_pb_module:has(.ra-en-intro, .ra-en-tiles, .ra-en-bench-head, .ra-en-cta-acts) {
  width: 100% !important;
  max-width: 100% !important;
}

/* --- Glow hinter dem Intro (wie ra-pp-hero, etwas schwächer, läuft vor den Kacheln aus).
   Die Section wird an ihrem Inhalt erkannt → in Divi keine zusätzliche Klasse nötig. --- */
.et_pb_section.ra-section:has(.ra-en-intro) {
  position: relative;
  overflow: hidden;
}
.et_pb_section.ra-section:has(.ra-en-intro)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(900px 480px at 82% 8%, color-mix(in oklab, var(--ra-accent) 16%, transparent), transparent 60%);
}
.et_pb_section.ra-section:has(.ra-en-intro) > .et_pb_row {
  position: relative;
  z-index: 1;
}

/* --- Intro --- */
.ra-en-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 48px);
}
.ra-en-intro .ra-pl-era { margin: 0 !important; }
.et_pb_section .ra-en-intro h1 {
  font-family: var(--ra-serif) !important;
  font-weight: 400 !important;
  font-size: clamp(40px, 5.6vw, 84px) !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
  color: var(--ra-ink) !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  text-wrap: balance;
}
.et_pb_section .ra-en-intro p {
  margin: 0 !important;
  padding: 0 !important;
  font-size: 17px !important;
  line-height: 1.6 !important;
  color: var(--ra-ink-dim) !important;
  max-width: 440px;
}
.et_pb_section .ra-en-intro p.ra-en-works {
  margin-top: 18px !important;
  font-family: var(--ra-mono) !important;
  font-size: 11px !important;
  letter-spacing: .14em !important;
  text-transform: uppercase !important;
  color: var(--ra-ink-faint) !important;
}
.ra-en-works b { color: var(--ra-ink-dim); font-weight: 500; }

/* --- Bildfläche (Muster wie .ra-amp-img: Schraffur + gedämpftes Foto) --- */
.ra-en-img {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--ra-line-strong);
  background: repeating-linear-gradient(135deg,
    color-mix(in oklab, var(--ra-bg-3) 70%, transparent) 0 12px,
    color-mix(in oklab, var(--ra-bg-2) 80%, transparent) 12px 24px);
}
.ra-en-img img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(.88) contrast(1.05) saturate(.9);
  transition: transform .5s;
}
/* Beschriftung, die nur sichtbar ist, solange kein Foto da ist */
.ra-en-img .ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}

/* --- 5 Modul-Kacheln: 2 groß + 3 klein im 6er-Raster --- */
.ra-en-tiles {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
}
a.ra-en-tile {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  background: var(--ra-bg-2);
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink) !important;
  text-decoration: none !important;
  transition: border-color .3s;
}
a.ra-en-tile.big { grid-column: span 3; }
a.ra-en-tile:hover { border-color: var(--ra-ink); }
.ra-en-tile.big .ra-en-img { aspect-ratio: 16 / 10; }
.ra-en-tile:hover .ra-en-img img { transform: scale(1.03); }
.ra-en-body {
  flex-grow: 1;
  padding: 20px 22px 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 16px;
  align-items: end;
}
.ra-en-for {
  grid-column: 1 / -1;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}
.ra-en-for em { font-style: normal; color: var(--ra-accent); }
.et_pb_section .ra-en-tile .ra-en-body h2 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(24px, 2.3vw, 34px) !important;
  line-height: 1.05 !important;
  letter-spacing: -.01em !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_section .ra-en-tile .ra-en-body p {
  grid-column: 1;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
}
/* runder Pfeil – gleiches Verhalten wie .ra-cat2-arrow der deutschen Home */
.ra-en-arrow {
  grid-column: 2;
  grid-row: 2 / 4;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--ra-line-strong);
  display: grid;
  place-items: center;
  transition: transform .3s, background .3s, border-color .3s, color .3s;
}
.ra-en-tile:hover .ra-en-arrow {
  transform: rotate(-45deg);
  background: var(--ra-accent);
  border-color: var(--ra-accent);
  color: var(--ra-accent-ink);
}

/* --- "Also from the bench" --- */
.ra-en-bench-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.ra-en-bench-head .ra-pl-era { margin: 0 !important; }
.et_pb_section .ra-en-bench-head h2 { margin: 16px 0 0 !important; padding: 0 !important; }
.et_pb_section .ra-en-bench-head p { margin: 0 !important; padding: 0 !important; max-width: 440px; }
.ra-en-bench-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 16px;
}
a.ra-en-feat,
.ra-en-cls a {
  background: var(--ra-bg);
  border: 1px solid var(--ra-line-strong);
  color: var(--ra-ink) !important;
  text-decoration: none !important;
  transition: border-color .3s;
}
a.ra-en-feat:hover,
.ra-en-cls a:hover { border-color: var(--ra-ink); }
a.ra-en-feat { display: flex; flex-direction: column; }
.ra-en-feat .ra-en-img { aspect-ratio: 16 / 10; }
.ra-en-feat-body { flex-grow: 1; padding: 26px 28px 28px; display: flex; flex-direction: column; gap: 10px; }
.ra-en-feat-body .ra-camp-badge { align-self: flex-start; padding: 6px 10px !important; }
.et_pb_section .ra-en-feat h3 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: clamp(30px, 3vw, 44px) !important;
  line-height: 1 !important;
  letter-spacing: -.01em !important;
  margin: 4px 0 0 !important;
  padding: 0 !important;
}
.et_pb_section .ra-en-feat p { margin: 0 !important; padding: 0 !important; max-width: 520px; }
.ra-en-more {
  margin-top: auto;
  padding-top: 10px;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ra-ink);
}
.ra-en-more::after { content: " →"; color: var(--ra-accent); }
.ra-en-cls { display: flex; flex-direction: column; gap: 16px; }
.ra-en-cls a { flex: 1; display: grid; grid-template-columns: 150px minmax(0, 1fr); }
.ra-en-cls .ra-en-img { aspect-ratio: auto; min-height: 140px; border-bottom: 0; border-right: 1px solid var(--ra-line-strong); }
.ra-en-cls-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.ra-en-era {
  font-family: var(--ra-mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
}
.et_pb_section .ra-en-cls h4 {
  font-family: var(--ra-serif) !important;
  font-weight: 500 !important;
  font-size: 24px !important;
  line-height: 1.1 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.et_pb_section .ra-en-cls p { margin: 0 !important; padding: 0 !important; font-size: 14px !important; line-height: 1.5 !important; }
.et_pb_section p.ra-en-note { margin: 20px 0 0 !important; padding: 0 !important; font-size: 14px !important; color: var(--ra-ink-faint) !important; }

/* --- CTA-Band (Section ra-cta; Raster = ra-pp-cta-grid) --- */
.ra-en-cta-acts { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.et_pb_section.ra-cta .ra-pp-cta-grid p { margin: 12px 0 0 !important; padding: 0 !important; max-width: 520px; }
a.ra-pp-cta-link.solid { background: var(--ra-accent-ink); color: var(--ra-accent) !important; border-color: var(--ra-accent-ink); }
a.ra-pp-cta-link.solid:hover { background: transparent; color: var(--ra-accent-ink) !important; }

/* --- Mobil --- */
@media (max-width: 980px) {
  .ra-en-intro { grid-template-columns: 1fr; gap: 24px; }
  .ra-en-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  a.ra-en-tile, a.ra-en-tile.big { grid-column: span 1; }
  a.ra-en-tile:first-child { grid-column: 1 / -1; }
  .ra-en-bench-grid { grid-template-columns: 1fr; }
  .ra-en-cta-acts { justify-content: flex-start; }
}
@media (max-width: 600px) {
  .ra-en-tiles { grid-template-columns: 1fr; }
  a.ra-en-tile:first-child { grid-column: auto; }
  .ra-en-cls a { grid-template-columns: 110px minmax(0, 1fr); }
}


/* ==========================================================================
   TOPBAR-ZEILE + SPRACHUMSCHALTER (Klassen "ra-topbar-line", "ra-lang")
   Inhalt des Code-Moduls in der Theme-Builder-Section "ra-topbar" (DE + EN).
   Anleitung: docs/SPRACHUMSCHALTER.txt
   ========================================================================== */

.ra-topbar-line {
  display: flex;
  align-items: center;
  gap: 24px;
  font-family: var(--ra-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ra-ink-faint);
  line-height: 1.4;
}
/* Code-Modul immer volle Breite (Divi 5 zentriert sonst schmale Module) */
.et_pb_section .et_pb_module:has(> .et_pb_code_inner > .ra-topbar-line) { width: 100% !important; max-width: 100% !important; }
.ra-topbar-line .ra-dot { margin-right: 0; flex-shrink: 0; }
.ra-topbar-line .grow { flex: 1; }
.ra-topbar-line .sep { color: var(--ra-line-strong); }
.ra-topbar-line a { color: var(--ra-ink-faint) !important; text-decoration: none !important; transition: color .2s; }
.ra-topbar-line a:hover { color: var(--ra-ink) !important; }

/* Umschalter: kleines Feld "DE | EN", aktive Sprache hell gefüllt */
.ra-lang {
  display: inline-flex;
  border: 1px solid var(--ra-line-strong);
  flex-shrink: 0;
}
.ra-lang a,
.ra-lang span {
  padding: 5px 9px;
  line-height: 1;
}
.ra-lang a + span,
.ra-lang span + a { border-left: 1px solid var(--ra-line-strong); }
.ra-lang [aria-current] {
  background: var(--ra-ink);
  color: var(--ra-bg) !important;
}

/* Handy: nur Status + Umschalter, Kontakt steht ohnehin im Menü/Footer */
@media (max-width: 767px) {
  .ra-topbar-line { gap: 14px; }
  .ra-topbar-line .hide-m { display: none; }
}