/* =====================================================================
   OM Design-Tokens — verbindlich aus CLAUDE.md.
   Reproduziert Farben, Typografie, Spacing des OM-Design-Systems in WP/Kadence.
   ===================================================================== */

:root {
  /* Farben */
  --om-bg: #000000;
  --om-accent: #f49e00;
  --om-accent-hover: #ffb01e;
  --om-heading: #ffffff;
  --om-body: #d9d9d9;
  --om-body-small: #9a9a9a;
  --om-caption: #999999;
  --om-card: #111111;
  --om-divider: rgba(255, 255, 255, 0.08);
  --om-ghost-border: rgba(255, 255, 255, 0.4);

  /* Spacing — 4px-Basis */
  --om-s1: 4px;  --om-s2: 8px;  --om-s3: 12px; --om-s4: 16px;
  --om-s6: 24px; --om-s8: 32px; --om-s12: 48px; --om-s16: 64px; --om-s24: 96px;

  --om-font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Neue UI-Tokens (Ergänzung zum Design-System aus CLAUDE.md, für Dropdowns/Hover) */
  --om-radius: 8px;                       /* Panel-Rundung (Dropdown) */
  --om-radius-sm: 6px;                    /* Item-Rundung */
  --om-hover-bg: rgba(255, 255, 255, 0.05); /* dezenter Hover-Hintergrund */

  /* Kadence-Globals auf OM-Palette mappen */
  --global-palette1: #f49e00; /* Accent */
  --global-palette2: #ffb01e; /* Accent hover */
  --global-palette3: #ffffff; /* Headings */
  --global-palette4: #d9d9d9; /* Body */
  --global-palette5: #9a9a9a;
  --global-palette6: #111111;
  --global-palette7: #000000;
  --global-palette8: #000000;
  --global-palette9: #000000; /* Background */
  --global-palette-highlight: #f49e00;
}

/* ---- Basis ---- */
body {
  background-color: var(--om-bg);
  color: var(--om-body);
  font-family: var(--om-font);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--om-heading);
  font-family: var(--om-font);
  letter-spacing: -0.02em;
}

a { color: var(--om-accent); }
a:hover { color: var(--om-accent-hover); }

/* =====================================================================
   HEADER (Svens Design: schwarz, zentriertes Logo, Split-Nav, Caps)
   ===================================================================== */

.site-header,
.site-header-row-container-inner,
#main-header,
.site-top-header-wrap .site-header-row-container-inner,
.site-main-header-wrap .site-header-row-container-inner {
  background-color: var(--om-bg) !important;
}

/* Transparenter Header (Startseite): DEFAULT transparent + dezenter Verlauf (gilt auch sofort
   beim Laden, unabhaengig vom Sticky-JS). Schwarz ERST im gescrollten Sticky-Zustand
   (Kadence: item-is-fixed ohne item-at-start). */
.transparent-header .site-header-wrap,
.transparent-header .site-header,
.transparent-header #main-header,
.transparent-header .site-main-header-wrap,
.transparent-header .site-main-header-wrap .site-header-row-container-inner {
  background: transparent !important;
  background-color: transparent !important;
}
/* Weicher Fade auf Schwarz nach kurzem Scroll-Offset (Klasse om-scrolled via JS) */
.transparent-header .site-main-header-wrap,
.transparent-header .site-main-header-wrap .site-header-row-container-inner {
  transition: background-color .4s ease !important;
}
.transparent-header.om-scrolled .site-main-header-wrap,
.transparent-header.om-scrolled .site-main-header-wrap .site-header-row-container-inner {
  background-color: #000 !important;
}

/* Navigationspunkte: weiße fette Caps, Roboto */
.header-navigation .menu > li > a,
.secondary-navigation .menu > li > a,
.header-menu-container .menu > li > a {
  color: var(--om-heading) !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  font-family: var(--om-font);
}
.header-navigation .menu > li > a:hover,
.secondary-navigation .menu > li > a:hover,
.header-navigation .menu > li.current-menu-item > a {
  color: var(--om-accent) !important;
}

/* Jobs-Punkt: nur fett (weiss), Hover wie die uebrigen Nav-Punkte (Akzent) */
.menu li.om-nav-jobs > a { color: var(--om-heading) !important; font-weight: 800 !important; }
.menu li.om-nav-jobs > a:hover { color: var(--om-accent) !important; }

/* Dropdown-Panel wie offroad-manufaktur.pages.dev (einzeilig), Farben aus unserem System */
.header-navigation .sub-menu,
.secondary-navigation .sub-menu {
  background-color: var(--om-card) !important;
  border: none !important;
  border-radius: var(--om-radius) !important;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5) !important;
  padding: 8px !important;
  min-width: 220px;
}
.header-navigation .sub-menu li,
.secondary-navigation .sub-menu li { margin: 0 !important; }
.header-navigation .sub-menu li a,
.secondary-navigation .sub-menu li a {
  display: block;
  padding: 11px 16px !important;
  border-radius: var(--om-radius-sm);
  color: var(--om-heading) !important;
  text-transform: uppercase !important;   /* alles Caps wie die Nav */
  font-weight: 600 !important;
  font-size: 13px !important;
  letter-spacing: 0.05em !important;
}
.header-navigation .sub-menu li a:hover,
.secondary-navigation .sub-menu li a:hover {
  background: var(--om-hover-bg) !important;
  color: var(--om-accent) !important;       /* Hover = Akzentfarbe wie Parents/Nav */
}

/* Fokus/Klick im Dropdown: dezenter Hintergrund + Akzent (nicht weiss) */
.header-navigation .sub-menu li a:focus,
.secondary-navigation .sub-menu li a:focus,
.header-navigation .sub-menu li a:active,
.secondary-navigation .sub-menu li a:active {
  background: var(--om-hover-bg) !important;
  color: var(--om-accent) !important;
}

/* Aktiver/aktueller Menuepunkt (Nav + Dropdown): nur Akzentfarbe, KEIN weisser Hintergrund */
.header-navigation .menu li.current-menu-item > a,
.header-navigation .menu li.current-menu-ancestor > a,
.header-navigation .menu li.current_page_item > a,
.secondary-navigation .menu li.current-menu-item > a,
.secondary-navigation .menu li.current-menu-ancestor > a,
.secondary-navigation .menu li.current_page_item > a {
  background: transparent !important;
  color: var(--om-accent) !important;
}

/* Dropdown-Pfeil am Text ausrichten (Kadence setzt sonst vertical-align:baseline) */
.nav-drop-title-wrap { display: inline-flex !important; align-items: center; gap: 5px; }
.dropdown-nav-toggle { display: inline-flex; align-items: center; line-height: 0; }
.kadence-svg-icon.kadence-arrow-down-svg {
  vertical-align: middle; transition: transform .2s ease;
  /* Kadence svg-baseline setzt top:~1.46px -> ueberschreiben, optisch zentrieren */
  position: relative; top: -1px !important;
}
/* Pfeil bei Hover drehen */
.menu-item-has-children:hover > a .kadence-arrow-down-svg { transform: rotate(180deg); }

/* Logo mittig nicht beschneiden */
.site-branding img.custom-logo { height: auto; }

/* Site-Titel/Tagline neben dem Logo ausblenden (Logo enthaelt den Namen bereits) */
.site-branding .site-title,
.site-branding .site-description,
.site-header .site-title { display: none !important; }

/* Navigation einzeilig halten (Svens Design: je eine Reihe links/rechts) */
.header-navigation ul.menu,
.secondary-navigation ul.menu { flex-wrap: nowrap !important; }
.header-navigation .menu > li > a,
.secondary-navigation .menu > li > a { white-space: nowrap; }
/* Etwas kompakter, damit beide Seiten in einer Reihe bleiben */
.header-navigation .menu > li,
.secondary-navigation .menu > li { margin: 0; }
/* Nav kleiner & subtiler (naeher an Svens Design); Item-Padding = halber Item-Abstand */
.header-navigation .menu > li > a,
.secondary-navigation .menu > li > a {
  padding-left: 12px; padding-right: 12px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
}

/* Mehr vertikaler Atem im Haupt-Header */
.site-main-header-wrap .site-header-row-container-inner { padding-top: 20px; padding-bottom: 20px; }

/* Die Header-Zeile ist ein CSS-Grid (Kadence: 1fr auto 1fr -> grosse feste Luecken).
   Wir setzen die Spalten auf Inhaltsbreite und zentrieren die Gruppe -> Nav dicht
   am Logo, gleiche Abstaende (Logo<->Nav == zwischen den Punkten). */
.site-main-header-inner-wrap.site-header-row-has-sides {
  grid-template-columns: 1fr auto 1fr !important;   /* gleiche Seitenspalten -> Logo exakt mittig,
                                                        unabhängig von Nav-/Social-Breite rechts/links */
  justify-content: center !important;
  column-gap: 0 !important;
}
.site-header-section-center { padding-left: 4px !important; padding-right: 4px !important; }
/* Desktop: Nav rückt ans (mittige) Logo heran — Svens Prinzip. 1fr-Spalten halten das Logo exakt
   mittig, die Nav richtet sich zum Logo hin aus (links rechtsbündig, rechts linksbündig). Greift nur
   am Desktop (≥1025px); Mobil bleibt unberührt (Telefon links / Burger rechts). */
@media (min-width: 1025px) {
  .site-header-main-section-left  { justify-content: flex-end !important; }
  .site-header-main-section-right { justify-content: flex-start !important; }
  /* leere Kadence-Center-Subzonen raus -> Nav steht direkt am Logo (keine Lücke) */
  .site-header-main-section-left-center,
  .site-header-main-section-right-center { display: none !important; }
}

/* =====================================================================
   MOBILE-HEADER & DRAWER  (Vollbild-Overlay, OM-Brand)
   ---------------------------------------------------------------------
   Befund: Kadences Mobile-Drawer rendert nur EINE Menue-Location. Das
   Split-Desktop-Design nutzt zwei Menues (primary + secondary) -> auf Mobil
   fehlten Showroom/Events/Team/Kontakt/Jobs. Fix = kombiniertes Menue auf
   Location `mobile` (siehe mobile-nav-setup.php). Hier nur die Optik:
   schwarzer Vollbild-Overlay, grosse Caps-Links (weiss -> orange), Akkordeon,
   grosses X-Close, Trennlinien, CTA/Kontakt/Social-Block. Referenz:
   offroad-manufaktur.pages.dev (schwarzes Full-Width-Panel) + Research
   (Full-Screen-Overlay statt heller E-Commerce-Drawer = Differenzierung).
   ===================================================================== */

/* Mobile-Header-Leiste: kompakt, Logo links / Burger rechts (Kadence-Default) */
.site-mobile-header-wrap .site-header-row-container-inner { padding-top: 14px; padding-bottom: 14px; }
.mobile-site-branding img.custom-logo { height: 34px !important; width: auto; }

/* Burger: 44px-Tap-Target, weiss -> Akzent */
#mobile-toggle.menu-toggle-open { padding: 10px; color: #fff; }
#mobile-toggle .kadence-svg-icon { width: 28px; height: 28px; transition: color .2s ease; }
#mobile-toggle:hover .kadence-svg-icon,
#mobile-toggle:focus .kadence-svg-icon { color: var(--om-accent); }

/* --- Drawer = schwarzer Vollbild-Overlay --- */
#mobile-drawer .drawer-overlay { background: rgba(0,0,0,0.7) !important; }
#mobile-drawer.popup-drawer-layout-sidepanel .drawer-inner {
  width: 100% !important; max-width: 100% !important; left: 0 !important; right: 0 !important;
  background: #000 !important;
  display: flex; flex-direction: column; height: 100%;
}

/* Drawer-Header: schwarze Leiste, X gross rechts */
#mobile-drawer .drawer-header {
  padding: 12px 18px; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--om-divider);
}
/* Logo im offenen Menue (per JS gespiegelt) -> Markenkonsistenz mit der Kopfleiste */
#mobile-drawer .drawer-header .om-mm-logo { display: inline-flex; align-items: center; }
#mobile-drawer .drawer-header .om-mm-logo img { height: 34px; width: auto; max-height: 34px; display: block; }
#mobile-drawer .menu-toggle-close { width: 44px; height: 44px; position: relative; }
#mobile-drawer .menu-toggle-close .toggle-close-bar { background: #fff !important; height: 2px; transition: background-color .2s ease; }
#mobile-drawer .menu-toggle-close:hover .toggle-close-bar { background: var(--om-accent) !important; }

/* Drawer-Content scrollbar (viele Punkte) */
#mobile-drawer .drawer-content { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 0 0; }
#mobile-drawer .drawer-content > .site-header-item { width: 100%; }

/* Menue-Liste mit Trennlinien */
#mobile-drawer #mobile-menu { padding: 0 24px; }
#mobile-drawer #mobile-menu > li { border-bottom: 1px solid var(--om-divider); }
#mobile-drawer #mobile-menu > li:last-child { border-bottom: none; }
#mobile-drawer .drawer-nav-drop-wrap { display: flex; align-items: center; justify-content: space-between; }

/* Top-Level: kompakt, Caps, fett, weiss -> Akzent */
#mobile-drawer .mobile-navigation .menu > li > a,
#mobile-drawer .mobile-navigation .menu > li > .drawer-nav-drop-wrap > a {
  display: block; flex: 1; padding: 10px 0;
  color: #fff !important; font-family: var(--om-font);
  font-size: 16px; font-weight: 700; letter-spacing: 0.02em;
  text-transform: uppercase; text-decoration: none; line-height: 1.2;
}
#mobile-drawer .mobile-navigation .menu > li > a:hover,
#mobile-drawer .mobile-navigation .menu > li > .drawer-nav-drop-wrap > a:hover,
#mobile-drawer .mobile-navigation .menu > li.current-menu-item > a,
#mobile-drawer .mobile-navigation .menu > li.current-menu-item > .drawer-nav-drop-wrap > a,
#mobile-drawer .mobile-navigation .menu > li.current-menu-ancestor > .drawer-nav-drop-wrap > a {
  color: var(--om-accent) !important;
}
/* Jobs: nur fett (weiss), Akzent erst bei Hover/aktiv (wie Desktop) */
#mobile-drawer #mobile-menu > li.om-nav-jobs > a { color: #fff !important; font-weight: 800 !important; }
#mobile-drawer #mobile-menu > li.om-nav-jobs > a:hover,
#mobile-drawer #mobile-menu > li.om-nav-jobs.current-menu-item > a { color: var(--om-accent) !important; }

/* Akkordeon-Toggle (Caret) */
#mobile-drawer .drawer-sub-toggle {
  width: 44px; height: 38px; flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: #fff; cursor: pointer;
}
#mobile-drawer .drawer-sub-toggle .kadence-svg-icon { width: 18px; height: 18px; transition: transform .25s ease; }
#mobile-drawer .drawer-sub-toggle[aria-expanded="true"] .kadence-svg-icon { transform: rotate(180deg); }
#mobile-drawer .drawer-sub-toggle:hover { color: var(--om-accent); }

/* Sub-Menue = Accordion: klappt inline auf (gleiche Breite + Padding wie Top-Level,
   kein Seiten-Slide -> konsequent zum Fade-Drawer). Toggle via .om-open (JS). */
#mobile-drawer .sub-menu {
  display: block; list-style: none; margin: 0; padding: 0;
  max-height: 0; overflow: hidden; visibility: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s;
}
#mobile-drawer li.menu-item-has-children.om-open > .sub-menu {
  max-height: 720px; visibility: visible; padding: 0 0 8px;
  transition: max-height .32s cubic-bezier(.4,0,.2,1);
}
#mobile-drawer .sub-menu li a {
  display: block; padding: 9px 0 9px 16px;
  color: var(--om-body-small) !important; font-size: 13px; font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; text-decoration: none;
}
#mobile-drawer .sub-menu li a:hover,
#mobile-drawer .sub-menu li.current-menu-item > a {
  color: var(--om-accent) !important;
}

/* --- Drawer-Extras (managebar via Customizer: Header > Mobil > HTML) --- */
.om-mobnav-extra { padding: 28px 24px 32px; border-top: 1px solid var(--om-divider); margin-top: 8px; }
.om-mobnav-cta {
  display: block; width: 100%; box-sizing: border-box; text-align: center;
  background: var(--om-accent); color: #000 !important;
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 16px 24px; text-decoration: none; transition: background-color .2s ease;
}
.om-mobnav-cta:hover { background: var(--om-accent-hover); color: #000 !important; }
.om-mobnav-contact { list-style: none; margin: 24px 0 0; padding: 0; }
.om-mobnav-contact li { color: var(--om-body-small); font-size: 14px; line-height: 1.6; margin-bottom: 8px; }
.om-mobnav-contact li:last-child { margin-bottom: 0; }
.om-mobnav-contact a { color: var(--om-body-small) !important; text-decoration: none; transition: color .15s ease; }
.om-mobnav-contact a:hover { color: var(--om-accent) !important; }
.om-mobnav-social { display: flex; gap: 12px; margin-top: 24px; }
.om-mobnav-social a {
  width: 44px; height: 44px; border-radius: 8px; background: #1c1c1c; color: var(--om-body);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color .15s ease, color .15s ease;
}
.om-mobnav-social svg { width: 20px; height: 20px; fill: currentColor; }
.om-mobnav-social a:hover { background: var(--om-accent); color: #000; }

/* =====================================================================
   BUTTONS (Primary / Ghost aus dem Design-System)
   ===================================================================== */
.button, .wp-block-button__link, .kb-button, input[type="submit"] {
  background-color: var(--om-accent);
  color: #000;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
  border-radius: 0;
  padding: 16px 24px;
}
.button:hover, .wp-block-button__link:hover, input[type="submit"]:hover {
  background-color: var(--om-accent-hover);
  color: #000;
}

/* =====================================================================
   HERO (Startseite) — Svens leichter, gemischter Headline-Stil
   (kein Caps, Light 300) + unser oranges Highlighting.
   ===================================================================== */
/* Front-Page: kein oberes Content-Padding, damit der Hero unter den
   transparenten (absoluten) Header bis ganz nach oben laeuft. */
.home.content-vertical-padding-show .site-main,
.home .content-area,
.home .entry-content { padding-top: 0 !important; margin-top: 0 !important; }

/* Hero: nur Layout/Abstände. Typografie, Gewicht & Farben liegen in den Elementor-Widgets
   (Style-Tab, per-Widget) bzw. Global Colors/Button — komplett in der Elementor-GUI wartbar. */
.om-hero { min-height: 100vh !important; }
.om-hero > .elementor-container { text-align: center; }
.om-accent { color: var(--om-accent); }
.om-eyebrow .elementor-heading-title { margin: 0 0 16px; }
.om-hero-sub .elementor-widget-container { margin-top: 24px; }
.om-hero-sub p { max-width: 600px; margin: 0 auto; }

/* Bildbruch (om-break) — nur Layout; Typo/Farben in den Elementor-Widgets */
.om-break-eyebrow .elementor-heading-title { margin: 0 0 16px; }
.om-break .elementor-widget-text-editor { margin-top: 16px; }
.om-break-sub p { max-width: 600px; margin: 0 auto; }

/* Sektions-Header (Eyebrow + H2), zentriert mit Abstand zum Inhalt */
.om-sec-eyebrow .elementor-heading-title { margin: 0 0 16px; }
.om-sec-title .elementor-heading-title { margin: 0 0 48px; }

/* Leistungen-Karten sind native Elementor-Spalten/-Widgets (im GUI editierbar).
   Inhalt/Optik liegen in Elementor. Hier nur die 3px-Fuge zwischen den Boxen: Elementors
   "Gap" wird als Innen-Padding gerendert (vom expliziten 28px-Padding überschrieben) und
   trennt die farbigen Boxen nicht — daher echter Margin auf der Box (.elementor-element-populated). */
.om-services .elementor-col-50 > .elementor-element-populated {
  margin: 1.5px; cursor: pointer;
  transition: background-color .25s ease;
}
/* Karte selbst aufhellen (kein Box-Shadow). Generische (0,6,0)-Spezifität, um Elementors
   page-/element-spezifische `#111`-Regel (0,5,0) zuverlässig zu schlagen — ohne !important. */
.om-services .elementor-column.elementor-col-50.elementor-element > .elementor-element-populated:hover {
  background-color: #222222;
}

/* Trust-Leiste: Trennlinien zwischen den 3 Spalten (Desktop vertikal, Mobile horizontal).
   Inhalt (Kennzahl + Untertext) sind native Elementor-Widgets (GUI-editierbar). */
.om-trust .elementor-col-33:not(:last-child) > .elementor-element-populated { border-right: 1px solid rgba(255,255,255,0.08); }
.om-trust .elementor-widget-text-editor { margin-top: 4px; }
@media (max-width: 767px) {
  .om-trust .elementor-col-33 > .elementor-element-populated { border-right: none; }
  .om-trust .elementor-col-33:not(:last-child) > .elementor-element-populated { border-bottom: 1px solid rgba(255,255,255,0.08); }
}

/* Builds: 3 Hochkant-Kacheln (4:5) nebeneinander, ~16px Fuge. Foto = Hintergrundbild der
   Media-Inner-Section → in Elementor unter Stil > Hintergrund > Position frei verschiebbar.
   Inhalt (Kategorie/Titel/Text) sind native Elementor-Widgets. */
.om-builds .elementor-col-33 > .elementor-element-populated { margin: 0 8px; }
.om-builds .elementor-col-33 .elementor-inner-section { aspect-ratio: 4 / 5; min-height: 1px; }
@media (max-width: 767px) {
  .om-builds .elementor-col-33 > .elementor-element-populated { margin: 0 0 16px; }
}

/* Showroom-Split: linke Foto-Spalte mit Mindesthöhe. Bild = anklickbares Image-Widget
   (om-shimg), das die Spalte komplett füllt (Cover) -> GUI-tauschbar wie die Story-Bilder. */
.om-showroom .elementor-col-50:first-child { min-height: 480px; }
@media (max-width: 1024px) { .om-showroom .elementor-col-50:first-child { min-height: 320px; } }
.om-showroom .om-shimg .elementor-widget-container { margin: 0; }
.om-showroom .om-shimg img { width: 100%; height: 480px; object-fit: cover; display: block; }
@media (max-width: 1024px) { .om-showroom .om-shimg img { height: 320px; } }
@media (max-width: 767px)  { .om-showroom .om-shimg img { height: 260px; } }

/* Footer-CTA: Subtext mittig begrenzt, Button-Gruppe mit Abstand */
.om-cta .elementor-widget-text-editor { max-width: 600px; margin: 24px auto 0; }
.om-cta .elementor-inner-section { margin-top: 32px; }

/* Info-Karten (NICHT klickbar) — 2-/3-spaltig, 3px-Fuge, kein Lift/Cursor */
.om-svcinfo .elementor-col-50 > .elementor-element-populated,
.om-svcinfo .elementor-col-33 > .elementor-element-populated { margin: 1.5px; }

/* Service-Listen mit ›-Marker */
.om-list { list-style: none; margin: 16px 0 0; padding: 0; }
.om-list li { color: var(--om-body); font-size: 15px; line-height: 1.5; padding-left: 18px; position: relative; margin-bottom: 10px; }
.om-list li:last-child { margin-bottom: 0; }
.om-list li::before { content: "›"; color: var(--om-accent); position: absolute; left: 0; font-weight: 700; }

/* Intro-Statement: Text mittig begrenzt */
.om-intro-sub .elementor-widget-container { margin-top: 24px; }
.om-intro-sub p { max-width: 640px; margin: 0 auto; }

/* Prozess-Schritte: nummerierte Spalten, transparent, dezente Trennlinie links */
.om-steps-sec .om-step-num .elementor-heading-title { line-height: 1; }
.om-steps-sec .elementor-col-25 .elementor-widget-heading + .elementor-widget-heading { margin-top: 12px; }
.om-steps-sec .elementor-col-25 .elementor-widget-text-editor { margin-top: 8px; }
.om-steps-sec .elementor-col-25 > .elementor-element-populated { padding: 8px 18px; border-left: 1px solid rgba(255,255,255,0.08); }
.om-steps-sec .elementor-col-25:first-child > .elementor-element-populated { border-left: none; }
@media (max-width: 767px) {
  .om-steps-sec .elementor-col-25 > .elementor-element-populated { border-left: none; padding: 24px 0; }
}

/* Galerie — modernes Bento-Grid (asymmetrisch) + native Elementor-Lightbox.
   Editorialer Look: Hover-Zoom, Aufhellen, oranger Akzentrahmen, Lupen-Badge (signalisiert Klick).
   Optimiert für 8 Bilder → 4×3-Raster (Tile 1 = 2×2, Tile 6 = 2×1). */
.om-gallery .elementor-widget-image-gallery { margin-top: 40px; }
.om-gallery .gallery {
  display: grid; grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px; gap: 8px; margin: 0 !important;
}
.om-gallery .gallery-item { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; }
.om-gallery .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.om-gallery .gallery-item:nth-child(6) { grid-column: span 2; }
.om-gallery .gallery-icon { height: 100%; }
.om-gallery .gallery-icon a {
  position: relative; overflow: hidden; display: block; height: 100%; background: #111; cursor: pointer;
}
/* oranger Akzentrahmen beim Hover */
.om-gallery .gallery-icon a::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  box-shadow: inset 0 0 0 0 #F49E00; transition: box-shadow .3s ease; pointer-events: none;
}
.om-gallery .gallery-icon a:hover::after { box-shadow: inset 0 0 0 3px #F49E00; }
/* Lupen-Badge mittig — fadet beim Hover ein, signalisiert die Lightbox */
.om-gallery .gallery-icon a::before {
  content: ""; position: absolute; top: 50%; left: 50%; z-index: 3;
  width: 52px; height: 52px; transform: translate(-50%, -50%) scale(0.8);
  border-radius: 50%; background-color: rgba(0,0,0,0.55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='16.5' y1='16.5' x2='21' y2='21'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: center;
  opacity: 0; transition: opacity .3s ease, transform .3s ease; pointer-events: none;
}
.om-gallery .gallery-icon a:hover::before { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.om-gallery .gallery-icon img {
  border: none !important; width: 100% !important; height: 100% !important;
  object-fit: cover; display: block;
  filter: brightness(0.88); transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .3s ease;
}
.om-gallery .gallery-icon a:hover img { transform: scale(1.06); filter: brightness(0.7); }
.om-gallery .gallery-caption { display: none !important; }
@media (max-width: 1024px) {
  .om-gallery .gallery { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; }
  .om-gallery .gallery-item:nth-child(6) { grid-column: auto; }
}
@media (max-width: 700px) {
  .om-gallery .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 6px; }
  .om-gallery .gallery-item:nth-child(1) { grid-column: span 2; grid-row: span 2; }
}

/* Elementor-Lightbox: Datei-Titel/Beschreibung ausblenden (zeigt sonst Dateinamen der Platzhalter) */
.elementor-lightbox .elementor-slideshow__title,
.elementor-lightbox .elementor-slideshow__description { display: none !important; }

/* Builds-Teaser-Bild (Platzhalter — Grischa hinterlegt später ein echtes Build-Foto in der GUI) */
.om-builds-teaser .elementor-widget-container { margin-top: 32px; }
.om-builds-teaser img { width: 100%; height: auto; display: block; aspect-ratio: 16 / 9; object-fit: cover; }

/* Partner-/Marken-Wall: weiße Chip-Kacheln im responsiven Raster */
.om-logo-wall { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; }
@media (max-width: 1024px) { .om-logo-wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 700px)  { .om-logo-wall { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 440px)  { .om-logo-wall { grid-template-columns: repeat(2, 1fr); } }
.om-logo { display: flex; align-items: center; justify-content: center; background: #fff; padding: 20px 16px; min-height: 96px; text-decoration: none; transition: transform .15s ease; }
.om-logo img { max-height: 46px; max-width: 100%; width: auto; object-fit: contain; display: block; }
.om-logo[href]:hover { transform: translateY(-3px); }
/* Buttons: Container-Layout (gleich breit via 50/50-Spalten + Button-Align "justify").
   Farben/Typo/Padding kommen aus Elementor (Global Button + per-Widget-Style fuer Ghost),
   damit alles in der Elementor-GUI wartbar bleibt — KEIN Color-Forcing im CSS. */
.om-hero-btns { max-width: 480px; margin: 32px auto 0; }

/* =====================================================================
   FOOTER — Layout nach offroad-manufaktur.pages.dev, Farben aus dem
   OM-Design-System (CLAUDE.md): bg #000, Karte #111, Text #9a9a9a,
   Akzent #F49E00, Trennlinie rgba(255,255,255,.08). 4 gleiche Spalten.
   ===================================================================== */
/* Footer leicht abgesetzt vom #000-Seitenhintergrund, damit er erkennbar ist */
.site-footer-wrap, .site-footer, #colophon { background-color: #0d0d0d !important; }

/* Kadence zentriert Footer-Widgets per Default — wir wollen linksbündig */
.site-footer .footer-widget-area,
.site-footer .footer-widget-area-inner,
.om-footer, .om-footer-grid, .om-foot-col { text-align: left !important; }

.om-footer { width: 100%; box-sizing: border-box; padding: 64px 0; }
.om-footer-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1024px) { .om-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; } .om-foot-brand { grid-column: span 2; } }
@media (max-width: 640px)  { .om-footer-grid { grid-template-columns: 1fr; gap: 40px; } .om-foot-brand { grid-column: auto; } }

.om-foot-logo-link { display: inline-block; }
.om-foot-logo { height: 40px; width: auto; display: block; }
.om-foot-desc { color: var(--om-body-small); font-size: 14px; line-height: 1.625; margin: 16px 0 0; }

.om-foot-social { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.om-foot-chip {
  width: 40px; height: 40px; border-radius: 8px;
  background: #1c1c1c; color: var(--om-body);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none; transition: background-color .15s ease, color .15s ease;
}
.om-foot-chip svg { width: 20px; height: 20px; fill: currentColor; }
.om-foot-chip:hover { background: var(--om-accent); color: #000; }
.om-foot-chip:hover svg { fill: #000; color: #000; }

.om-foot-h {
  color: var(--om-heading); font-size: 14px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 16px;
}

.om-foot-list, .om-foot-contact-list { list-style: none; margin: 0; padding: 0; }
.om-foot-list li { margin-bottom: 12px; }
.om-foot-list li:last-child, .om-foot-contact-list li:last-child { margin-bottom: 0; }
.om-foot-link { color: var(--om-body-small); text-decoration: none; font-size: 14px; transition: color .15s ease; }
.om-foot-link:hover { color: var(--om-accent); }

.om-foot-contact {
  display: flex; align-items: center; gap: 8px;
  color: var(--om-body-small); font-size: 14px; line-height: 1.5; margin-bottom: 12px;
}
/* Adresse (mehrzeilig): Icon an der ersten Zeile ausrichten */
.om-foot-contact-list li:first-child { align-items: flex-start; }
.om-foot-contact-list li:first-child svg { margin-top: 3px; }
.om-foot-contact svg { width: 16px; height: 16px; color: var(--om-accent); flex: 0 0 auto; }
.om-foot-contact-link { color: var(--om-body-small); text-decoration: none; transition: color .15s ease; }
.om-foot-contact-link:hover { color: var(--om-accent); }

/* Footer-Bottom (Copyright links, Impressum/Datenschutz rechts = justify-between) */
.site-footer .site-footer-row-container-inner { border-top: 1px solid var(--om-divider); }
/* Bottom-Zeile: Copyright + Links vertikal mittig (Kadence gibt .footer-html 14px Margin) */
.site-footer .footer-html { text-align: left !important; margin: 0; }
.site-bottom-footer-inner-wrap { align-items: center; }
.footer-html, .site-footer .footer-navigation .menu > li > a {
  color: var(--om-body-small) !important; font-size: 14px;
}
/* Nav an die rechte Aussenkante */
.site-footer .footer-navigation { justify-content: flex-end !important; width: 100%; }
.site-footer .footer-navigation .menu { margin-left: auto !important; gap: 24px; }
.site-footer .footer-navigation .menu > li > a { text-decoration: none; }
.site-footer .footer-navigation .menu > li > a:hover { color: var(--om-heading) !important; }

/* =====================================================================
   KONTAKTSEITE — 2 Karten, Social-Chips, CF7-Formular, Vollbreite-Google-Maps
   ===================================================================== */

/* Zwei Karten (Kontaktdaten | Öffnungszeiten) gleich hoch + schwarze Trennfuge dazwischen.
   Elementors Gap rendert nur als Innen-Padding (vom 36px-Padding überschrieben) → echte Fuge
   per Margin auf dem Box-Wrapper (.elementor-element-populated trägt Hintergrund + Padding). */
.om-contact .elementor-inner-section > .elementor-container { align-items: stretch; }
.om-contact .elementor-col-50:first-child > .elementor-element-populated { margin-right: 1.5px; }
.om-contact .elementor-col-50:last-child  > .elementor-element-populated { margin-left: 1.5px; }
.om-contact .om-card-body .elementor-widget-container { margin-top: 16px; }
@media (max-width: 767px) {
  .om-contact .elementor-col-50:first-child > .elementor-element-populated { margin: 0 0 3px 0; }
  .om-contact .elementor-col-50:last-child  > .elementor-element-populated { margin: 0; }
}

/* Social — runde Icon-Chips */
.om-social-chips { display: flex; gap: 16px; justify-content: center; margin-top: 32px; }
.om-social-chips a {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--om-ghost-border);
  display: flex; align-items: center; justify-content: center;
  color: #fff; transition: border-color .2s ease, color .2s ease;
}
.om-social-chips a:hover { border-color: var(--om-accent); color: var(--om-accent); }
.om-social-chips svg { width: 22px; height: 22px; }

/* Vollbreite-Karte (Google Maps) — dunkel eingefärbt passend zum schwarzen Design */
.om-map-full iframe { filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9); }

/* Contact Form 7 — Grid (2 Spalten), Labels, dunkle Felder, oranger Submit */
.om-form .wpcf7 { margin: 0; }
.om-form .wpcf7-form .cf7-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.om-form .wpcf7-form .cf7-field { margin: 0 0 14px; }
.om-form .wpcf7-form .cf7-field label { display: block; color: #999; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 8px; }
.om-form .wpcf7-form .cf7-consent { margin: 4px 0 20px; color: #9a9a9a; font-size: 14px; }
.om-form .wpcf7-form .cf7-consent a { color: var(--om-accent); }
.om-form .wpcf7-form .cf7-consent input[type="checkbox"] { width: auto; margin-right: 8px; accent-color: #F49E00; }
.om-form .wpcf7-form .cf7-submit { margin: 0; }
@media (max-width: 600px) { .om-form .wpcf7-form .cf7-row { grid-template-columns: 1fr; gap: 0; } }
.om-form input[type="text"],
.om-form input[type="email"],
.om-form input[type="tel"],
.om-form textarea {
  width: 100%; box-sizing: border-box;
  background: #111; border: 1px solid rgba(255,255,255,0.15);
  color: #fff; font-family: Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 16px; padding: 14px 16px; border-radius: 0;
  transition: border-color .2s ease;
}
.om-form textarea { resize: vertical; min-height: 140px; }
.om-form input:focus, .om-form textarea:focus { outline: none; border-color: var(--om-accent); }
.om-form input::placeholder, .om-form textarea::placeholder { color: #8a8a8a; }
.om-form input[type="submit"] {
  width: 100%; background: var(--om-accent); color: #000; border: none;
  font-family: Roboto, sans-serif; font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 28px;
  border-radius: 0; cursor: pointer; transition: background-color .2s ease; margin-top: 8px;
}
.om-form input[type="submit"]:hover { background: var(--om-accent-hover); }
.om-form .wpcf7-spinner { margin: 16px auto 0; display: block; }
/* CF7 Hinweis-/Fehlermeldungen */
.om-form .wpcf7-response-output {
  border-radius: 0 !important; color: #d9d9d9; border-color: rgba(255,255,255,0.2) !important;
  margin: 16px 0 0 !important; padding: 12px 16px !important; font-size: 14px;
}
.om-form .wpcf7-not-valid-tip { color: #ff8a8a; font-size: 13px; margin-top: 4px; }
.om-form .wpcf7-form.invalid .wpcf7-response-output,
.om-form .wpcf7-form.unaccepted .wpcf7-response-output { border-color: #ff8a8a !important; }
.om-form .wpcf7-form.sent .wpcf7-response-output { border-color: var(--om-accent) !important; color: #fff; }

/* =====================================================================
   RESTLICHE SEITEN — Team, Events, OnlyManufaktur, Facts, Legal, CF7-Extras
   ===================================================================== */

/* Team-Grid (HTML-Widget, wie Partner-Wall pflegbar) */
.om-team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 3px; }
.om-team-card { background: #111; display: flex; flex-direction: column; }
.om-team-photo { width: 100%; aspect-ratio: 4/5; background-size: cover; background-position: center top; background-color: #1a1a1a; }
.om-team-body { padding: 20px; }
.om-team-name { color: #fff; font-size: 18px; font-weight: 600; text-transform: uppercase; }
.om-team-role { color: var(--om-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 6px; }
.om-team-desc { color: #9a9a9a; font-size: 14px; line-height: 1.55; margin-top: 12px; }
@media (max-width:1024px){ .om-team-grid{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:680px){ .om-team-grid{ grid-template-columns: repeat(2,1fr);} }
@media (max-width:440px){ .om-team-grid{ grid-template-columns: 1fr;} }

/* Recruit-Karte (letzte Kachel, verlinkt auf /jobs/) — "Vielleicht bald Du?" */
.om-team-card.om-team-recruit {
  text-decoration: none; border: 1px solid rgba(244, 158, 0, 0.35);
  transition: transform .2s ease, border-color .2s ease;
}
.om-team-recruit:hover { transform: translateY(-4px); border-color: var(--om-accent); }
.om-team-recruit-photo {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 40%, #1d1a14 0%, #111 70%);
  border-bottom: 2px solid var(--om-accent);
}
.om-team-recruit-plus {
  font-size: 72px; font-weight: 300; line-height: 1; color: var(--om-accent);
  transition: transform .25s ease;
}
.om-team-recruit:hover .om-team-recruit-plus { transform: rotate(90deg); }
.om-team-recruit .om-team-name { transition: color .2s ease; }
.om-team-recruit:hover .om-team-name { color: var(--om-accent); }
.om-team-recruit-cta {
  color: var(--om-accent); font-size: 12px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase; margin-top: 16px;
}

/* Event-Karten (klickbar) */
.om-ev-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; }
.om-ev-card { display: block; background: #111; text-decoration: none; overflow: hidden; }
.om-ev-img { width: 100%; aspect-ratio: 4/3; background-size: cover; background-position: center; transition: transform .5s ease; }
.om-ev-card:hover .om-ev-img { transform: scale(1.05); }
.om-ev-body { padding: 28px 24px; }
.om-ev-title { color: #fff; font-size: 22px; font-weight: 700; text-transform: uppercase; transition: color .2s ease; }
.om-ev-card:hover .om-ev-title { color: var(--om-accent); }
.om-ev-teaser { color: #d9d9d9; font-size: 15px; line-height: 1.6; margin-top: 12px; }
.om-ev-more { color: var(--om-accent); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-top: 20px; }
@media (max-width:768px){ .om-ev-grid{ grid-template-columns: 1fr;} }

/* Events-Übersicht — NATIVE Elementor-Karten (GUI-editierbar): Bild oben + Körper (Titel/Teaser/Mehr).
   Karten = Spalten einer Inner-Section in .om-events. Optik wie die alten .om-ev-Karten. */
.om-events .elementor-inner-section > .elementor-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 3px; align-items: stretch; }
.om-events .elementor-inner-section .elementor-column { width: auto !important; }
.om-events .elementor-inner-section .elementor-column > .elementor-element-populated { background: #111; overflow: hidden; padding: 0; height: 100%; cursor: pointer; }
.om-events .om-evn-img, .om-events .om-evn-img .elementor-widget-container { margin: 0; }
.om-events .om-evn-img img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .5s ease; }
.om-events .elementor-inner-section .elementor-column:hover .om-evn-img img { transform: scale(1.05); }
.om-events .om-evn-title .elementor-widget-container { margin: 0; padding: 28px 24px 0; }
.om-events .om-evn-title a { color: #fff; text-decoration: none; transition: color .2s ease; }
.om-events .elementor-inner-section .elementor-column:hover .om-evn-title a { color: var(--om-accent); }
.om-events .om-evn-teaser .elementor-widget-container { margin: 0; padding: 12px 24px 0; }
.om-events .om-evn-more .elementor-widget-container { margin: 0; padding: 20px 24px 28px; }
@media (max-width:768px){ .om-events .elementor-inner-section > .elementor-container { grid-template-columns: 1fr; } }

/* Frühjahrsausfahrt — mehrere Jahres-Karussells untereinander: klarer Abstand vor jeder Jahreszahl */
.om-fysec .om-yr .elementor-widget-container { margin-top: 48px; }
.om-fysec .om-yr:first-of-type .elementor-widget-container { margin-top: 8px; }

/* =====================================================================
   MOBILES MENÜ — ACCORDION (Untermenüs klappen inline auf, KEIN Slide).
   Konsequent zum Fade-Drawer; Layout/Optik siehe #mobile-drawer-Block oben.
   Aufklapp-Zustand = .om-open am <li> (JS: omMobileDrill = Accordion-Toggle).
   ===================================================================== */
.mobile-navigation .drawer-nav-drop-wrap { display: flex; align-items: center; justify-content: space-between; }
.mobile-navigation .drawer-nav-drop-wrap > a { flex: 1; }
.mobile-navigation .drawer-sub-toggle { color: #fff; background: none; border: 0; transition: color .2s ease; }
.mobile-navigation .drawer-sub-toggle:hover { color: var(--om-accent); }
.mobile-navigation .drawer-sub-toggle .kadence-svg-icon { transition: transform .28s ease; }
.mobile-navigation li.menu-item-has-children.om-open > .drawer-nav-drop-wrap .drawer-sub-toggle .kadence-svg-icon { transform: rotate(180deg); }

/* ---- Mobile-Header: Logo (SVG) + Burger sauber/professionell ---- */
.site-mobile-header-wrap { background: #000; border-bottom: 1px solid rgba(255,255,255,0.08); }
.site-mobile-header-wrap .site-header-row-container-inner { padding: 8px 18px; }
.site-mobile-header-wrap .site-main-header-inner-wrap { min-height: 56px; }
/* Logo: NUR Höhe steuern, Breite auto -> Seitenverhältnis bleibt (nicht gequetscht) */
.site-mobile-header-wrap .site-branding { display: flex; align-items: center; }
.site-mobile-header-wrap .site-branding .custom-logo { height: 44px !important; width: auto !important; max-width: none !important; max-height: 44px !important; display: block; }
/* Drei Zonen über die volle Breite verteilen: Telefon links, Logo exakt mittig, Burger rechts.
   (Kadence-Default war `auto auto auto` + center -> Elemente klebten in der Mitte zusammen.) */
.site-mobile-header-wrap .site-main-header-inner-wrap { display: flex !important; align-items: center; justify-content: space-between !important; position: relative; }
.site-mobile-header-wrap .site-header-main-section-right { justify-content: flex-end; }
/* Logo exakt auf 50% zentriert (unabhängig von den Icon-Breiten links/rechts) */
.site-mobile-header-wrap .site-header-main-section-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
/* Leeres Site-Title-Wrap raus (Mobil + Desktop) -> kein Flex-Gap, Logo-Box = Logo-Breite (exakt mittig) */
.site-title-wrap { display: none !important; }
/* Tap-to-Call Telefon-Icon links (per JS injiziert) — balanciert das mittige Logo */
.site-mobile-header-wrap .site-header-main-section-left { justify-content: flex-start; }
.site-mobile-header-wrap .om-mobcall {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; color: #fff; transition: color .2s ease;
}
.site-mobile-header-wrap .om-mobcall:hover,
.site-mobile-header-wrap .om-mobcall:focus { color: var(--om-accent); }
.site-mobile-header-wrap .om-mobcall svg { width: 24px; height: 24px; }

/* Social-Icons im Desktop-Header (per JS in die rechte Zone injiziert) — dezent, weiß -> orange.
   Auf Mobil nicht sichtbar (Desktop-Header ist dort ausgeblendet; Social steckt im Drawer). */
.om-headsocial { display: inline-flex; align-items: center; gap: 14px; margin-left: 20px; }
.om-headsocial a { color: #fff; display: inline-flex; transition: color .2s ease; }
.om-headsocial a:hover, .om-headsocial a:focus { color: var(--om-accent); }
.om-headsocial svg { width: 18px; height: 18px; fill: currentColor; }
/* Burger: oranger Kadence-Kit-Kasten weg -> minimalistisch weiß */
.site-mobile-header-wrap .menu-toggle-open,
.site-mobile-header-wrap .menu-toggle-open:hover,
.site-mobile-header-wrap .menu-toggle-open:focus,
.site-mobile-header-wrap .menu-toggle-open:active {
  background: transparent !important; box-shadow: none !important; outline: none !important;
  border: 0 !important; color: #fff !important; padding: 6px !important;
}
.site-mobile-header-wrap .menu-toggle-open .kadence-menu-svg { fill: #fff; width: 30px; height: 30px; }

/* ---- Drawer: ruhiger, mehr Luft, klare Rhythmik ---- */
.popup-drawer .drawer-inner { background: #000; }
.popup-drawer .drawer-header { padding: 14px 24px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.popup-drawer .menu-toggle-close { color: #fff !important; background: transparent !important; box-shadow: none !important; }
.popup-drawer .drawer-content.mobile-drawer-content { padding: 8px 24px 24px; }
.mobile-navigation .menu > li > a,
.mobile-navigation .drawer-nav-drop-wrap > a,
.mobile-navigation .sub-menu > li > a {
  padding: 16px 0 !important; font-size: 15px; letter-spacing: 0.06em;
}
.mobile-navigation .menu > li,
.mobile-navigation .sub-menu > li { border-bottom: 1px solid rgba(255,255,255,0.07); }
/* Footer-Block (Termin-Button, Kontakt, Social) klar abgesetzt */
.popup-drawer .mobile-html { margin-top: 24px; padding-top: 8px; }

/* OnlyManufaktur — Marken-Filter: subtile Text-Tabs (statt großer Pills), konsistent mit
   Eyebrow/Nav-Typo. Aktiv = Akzent + dünne Unterstreichung, inaktiv = grau, Hover = weiß.
   Unter .om-umsec gescoped (schlägt Elementors Global-Button-Style .elementor-kit-5 button). */
.om-umsec .om-umfilter { display: flex; flex-wrap: wrap; gap: 28px; justify-content: center; margin-bottom: 44px; }
/* Kadence-Kit gibt JEDEM <button> bei Hover/Fokus orangen BG + Schatten (.elementor-kit-5 button:hover,
   Spezifität 0,2,1). Hier für alle States neutralisieren — unsere Selektoren (0,2,0 / 0,3,0) gewinnen. */
.om-umsec .om-umfilter-btn,
.om-umsec .om-umfilter-btn:hover,
.om-umsec .om-umfilter-btn:focus,
.om-umsec .om-umfilter-btn:active,
.om-umsec .om-umfilter-btn:focus-visible {
  background: transparent; box-shadow: none; outline: none;
}
.om-umsec .om-umfilter-btn {
  display: inline-flex; align-items: baseline; gap: 6px;
  border-style: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 0 0 6px;
  color: var(--om-body-small); font-family: var(--om-font); font-size: 13px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer;
  transition: color .2s ease, border-color .2s ease;
}
.om-umsec .om-umfilter-btn:hover { color: #fff; border-bottom-color: rgba(255,255,255,0.25); }
.om-umsec .om-umfilter-count { font-size: 11px; font-weight: 400; line-height: 1; opacity: 0.5; }
.om-umsec .om-umfilter-btn.is-active { color: var(--om-accent); border-bottom-color: var(--om-accent); }
.om-umsec .om-umfilter-btn.is-active .om-umfilter-count { opacity: 0.8; }

/* OnlyManufaktur Übersicht — Build-Karten als NATIVE Elementor-Spalten (Bild = Image-Widget,
   Bereich/Titel = Heading-Widgets → GUI-editierbar). Grid/Overlay/Hover fix in CSS.
   Karten = Spalten der einen Inner-Section in .om-umsec; Container per CSS zu Grid (reflowt beim Filtern). */
.om-umsec .elementor-inner-section > .elementor-container { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; align-items: start; }
.om-umsec .elementor-inner-section .elementor-column { width: auto !important; }
.om-umsec .elementor-inner-section .elementor-column > .elementor-element-populated {
  position: relative; aspect-ratio: 4/5; overflow: hidden; padding: 24px; background: #111; cursor: pointer;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.om-umsec .om-um-imgw { position: absolute; inset: 0; margin: 0; z-index: 0; }
.om-umsec .om-um-imgw .elementor-widget-container, .om-umsec .om-um-imgw a, .om-umsec .om-um-imgw img { height: 100%; width: 100%; margin: 0; }
.om-umsec .om-um-imgw img { object-fit: cover; display: block; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.om-umsec .elementor-inner-section .elementor-column:hover .om-um-imgw img { transform: scale(1.06); }
/* Overlay/Akzentstrich NUR auf Karten-Spalten (Inner-Section), nicht auf der äußeren Wrapper-Spalte */
.om-umsec .elementor-inner-section .elementor-column > .elementor-element-populated::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 45%, rgba(0,0,0,0) 70%); transition: background .35s ease; }
.om-umsec .elementor-inner-section .elementor-column:hover > .elementor-element-populated::before {
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.4) 55%, rgba(0,0,0,0.05) 85%); }
.om-umsec .elementor-inner-section .elementor-column > .elementor-element-populated::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 3;
  background: var(--om-accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
.om-umsec .elementor-inner-section .elementor-column:hover > .elementor-element-populated::after { transform: scaleX(1); }
.om-umsec .om-um-cat, .om-umsec .om-um-title { position: relative; z-index: 2; }
.om-umsec .om-um-cat .elementor-widget-container { margin: 0; }
.om-umsec .om-um-title .elementor-widget-container { margin: 6px 0 0; }
.om-umsec .om-um-title a { color: #fff; text-decoration: none; }
@media (max-width:980px){ .om-umsec .elementor-inner-section > .elementor-container { grid-template-columns: repeat(2,1fr);} }
@media (max-width:560px){ .om-umsec .elementor-inner-section > .elementor-container { grid-template-columns: 1fr;}
  .om-umsec .elementor-inner-section .elementor-column > .elementor-element-populated { aspect-ratio: 3/2; } }

/* Facts-Box (Events "Auf einen Blick") zentriert */
/* Event-Detail: 2 Spalten (Beschreibung links, "Auf einen Blick"-Karte rechts), vertikal zentriert */
.om-facts-sec .elementor-inner-section > .elementor-container { align-items: center; }
.om-facts-sec .om-facts-table .elementor-widget-container { margin-top: 16px; }
@media (max-width: 767px){ .om-facts-sec .elementor-col-50:first-child { margin-bottom: 24px; } }

/* CF7 — 3-Spalten-Reihe + Selects + Radios */
.om-form .wpcf7-form .cf7-row.cf7-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.om-form select { width: 100%; box-sizing: border-box; background: #111; border: 1px solid rgba(255,255,255,0.15); color: #fff; font-family: Roboto, sans-serif; font-size: 16px; padding: 14px 16px; border-radius: 0; }
.om-form select:focus { outline: none; border-color: var(--om-accent); }
.om-form .wpcf7-radio { display: flex; gap: 20px; flex-wrap: wrap; padding-top: 4px; }
.om-form .wpcf7-radio .wpcf7-list-item { margin: 0; }
.om-form .wpcf7-radio label { display: flex; align-items: center; gap: 8px; color: #d9d9d9; font-size: 16px; text-transform: none; letter-spacing: 0; font-weight: 400; cursor: pointer; margin: 0; }
.om-form .wpcf7-radio input[type=radio] { accent-color: var(--om-accent); width: auto; }
@media (max-width:600px){ .om-form .wpcf7-form .cf7-row.cf7-row-3 { grid-template-columns: 1fr; gap: 0; } }

/* Legal-Seiten */
.om-legal-body h3 { color: #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; margin: 32px 0 12px; }
.om-legal-body h4 { color: #fff; font-size: 16px; font-weight: 600; margin: 20px 0 8px; }
.om-legal-body p { margin: 0 0 14px; }

/* OnlyManufaktur Detailseite — Story-Blöcke (Bild ↔ Text alternierend, GUI-editierbar:
   Bild = Image-Widget .om-story-img, Text = Heading/Text-Widgets). Layout fix in CSS. */
.om-storyblocks .elementor-inner-section > .elementor-container { align-items: center; }
.om-storyblocks .elementor-inner-section + .elementor-inner-section { margin-top: 56px; }
.om-storyblocks .om-story-img img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.om-storyblocks .om-story-text .elementor-widget-container { margin-top: 0; }
@media (max-width: 767px){
  .om-storyblocks .elementor-inner-section + .elementor-inner-section { margin-top: 32px; }
  /* Mobile: in JEDER Reihe das Bild zuerst, dann der Text — verhindert Bild-Bild-/Text-Text-Folgen,
     die durch die alternierende Desktop-Spaltenreihenfolge beim Stapeln entstehen. */
  .om-storyblocks .elementor-inner-section .elementor-column:has(.om-story-img) { order: -1; }
  .om-storyblocks .om-story-img .elementor-widget-container { margin-bottom: 16px; }
}

/* =====================================================================
   TOPO-TEXTUR (Test) — subtile Höhenlinien statt plain schwarz.
   Fix im Viewport → durchgehende Karte hinter allen schwarzen Inhalts-Sektionen.
   Hero/Bildbruch ausgenommen (haben Fotos). SVG-Linien: #2f2f2f auf transparent.
   ===================================================================== */
.elementor-top-section:not(.om-hero):not(.om-break) {
  background-image: url('om-topo-lines.svg?v=2');
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
/* Mobile: KEINE Topo-Linien — bewusst nur sauberes Schwarz (ruhiger auf kleinen Screens). Die
   Topo-Textur bleibt dem Desktop vorbehalten. Sektionen behalten ihr Schwarz, nur das Topo-Bild
   wird entfernt; Hero/Bildbruch behalten ihre Fotos. */
@media (max-width: 767px) {
  .elementor-top-section:not(.om-hero):not(.om-break) {
    background-image: none !important;
  }
}

/* Google-Maps Click-to-Load (DSGVO) — Platzhalter statt Auto-Laden des iframes */
.om-map-consent { position: relative; height: 460px; background: #111; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.om-map-ph { max-width: 520px; padding: 32px 24px; }
.om-map-ph-title { color: #fff; font-size: 20px; font-weight: 600; text-transform: uppercase; }
.om-map-ph-text { color: #9a9a9a; font-size: 15px; line-height: 1.6; margin-top: 12px; }
.om-map-ph-text a { color: var(--om-accent); }
.om-map-consent iframe { filter: invert(0.92) hue-rotate(180deg) brightness(0.95) contrast(0.9); }
/* „Karte laden"-Button (Ghost) — Kadence-Kit-Hover (oranger BG/Schatten/Outline) neutralisieren */
.om-map-consent .om-map-load,
.om-map-consent .om-map-load:hover,
.om-map-consent .om-map-load:focus,
.om-map-consent .om-map-load:active { background: transparent; box-shadow: none; outline: none; }
.om-map-consent .om-map-load {
  margin-top: 20px; border: 1.5px solid var(--om-ghost-border); border-radius: 0;
  color: #fff; font-family: var(--om-font); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; padding: 14px 24px; cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}
.om-map-consent .om-map-load:hover { border-color: var(--om-accent); color: var(--om-accent); }

/* =====================================================================
   IMAGE-CAROUSEL (Elementor) — einheitlicher 4:3-Cover-Crop + OM-Steuerung.
   Default: kleine, verzerrte Bilder + weiße Pfeile/Punkte → on-brand schwarz/orange.
   Klasse `om-carousel` am Widget. Bildgröße/Tempo/Fuge via Widget-Settings.
   ===================================================================== */
.om-carousel .swiper-slide-inner,
.om-carousel .swiper-slide-image { display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 0; }
.om-carousel .swiper-slide img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
/* Pfeile orange (statt hellgrau/weiß) */
.om-carousel .elementor-swiper-button { color: var(--om-accent); text-shadow: 0 1px 6px rgba(0,0,0,0.5); transition: color .2s ease; }
.om-carousel .elementor-swiper-button:hover { color: var(--om-accent-hover); }
/* Pagination-Punkte: inaktiv dezent weiß, aktiv orange (kein Weiß mehr) */
.om-carousel .swiper-pagination-bullet { background: #fff; opacity: 0.35; }
.om-carousel .swiper-pagination-bullet-active { background: var(--om-accent); opacity: 1; }

/* =====================================================================
   CUSTOM 404 (child-theme/404.php) — gebrandet, Header/Footer bleiben.
   ===================================================================== */
.om-404 { padding: 96px 24px; text-align: center; }
.om-404-inner { max-width: 600px; margin: 0 auto; }
.om-404-eyebrow { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #999; }
.om-404-title { font-size: clamp(28px, 6vw, 40px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; color: #fff; margin: 16px 0 0; }
.om-404-title span { color: var(--om-accent); }
.om-404-text { font-size: 18px; line-height: 1.55; color: #d9d9d9; margin: 24px 0 0; }
.om-404-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }
.om-404 a { display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 16px 28px; text-decoration: none; }
.om-404-btn-primary { background: var(--om-accent); color: #000; }
.om-404-btn-primary:hover { background: #FFB01E; }
.om-404-btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, 0.4); }
.om-404-btn-ghost:hover { color: var(--om-accent); border-color: var(--om-accent); }

/* Akzentwort in Überschriften/Text — Klasse statt Inline-Style (sauberer im Editor-Feld). */
.acc { color: var(--om-accent) !important; }