/* ══════════════════════════════════════════════
   LEISTUNGSSEITE – Wiederverwendbares Template
   Ropa Sans, Gelb-Farbgebung (#FFDE12)
   Basiert auf Jobportale-Layout, nutzt Startseiten-Design
   ══════════════════════════════════════════════ */

/* ── CSS-Variablen (Standard: Gelb) ── */
.ls-page {
  --ls-accent: #FFDE12;
  --ls-accent2: #d4121c;
   --ls-accent3: #161922;
  --ls-accent-dark: #e6c800;
  --ls-accent-light: #fff9d4;
  --ls-dark: #161922;
  --ls-text: #1a1a2e;
  --ls-text-muted: #6b7280;
  --ls-radius: 8px;
  font-family: 'Ropa Sans', 'Inter', Arial, sans-serif;
}

/* ── Slug-basierte Farbvarianten ──
   Einfach .ls-newsportale, .ls-hr-marketing etc.
   auf <div class="ls-page ls-SLUG"> setzen.
   Weitere Farben hier ergänzen: */
/* Newsportale: nutzt Standard-Gelb (keine eigene Farbvariante nötig) */

/* Weitere Farbvarianten (auskommentiert als Vorlage): */
/* .ls-page.ls-hr-marketing { --ls-accent: #6366f1; --ls-accent-dark: #4f46e5; --ls-accent-light: #eef2ff; }
   .ls-page.ls-digital-agentur { --ls-accent: #10b981; --ls-accent-dark: #059669; --ls-accent-light: #d1fae5; } */


/* ══════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════ */
.ls-hero__overlay {
  background: linear-gradient(135deg, rgba(22, 25, 34, 0.88) 0%, rgba(22, 25, 34, 0.5) 100%);
}

/* Hero-Ausrichtung */
.ls-hero--left .container { text-align: left; }
.ls-hero--center .container { text-align: center; }
.ls-hero--center .page-hero__sub { margin-left: auto; margin-right: auto; }
.ls-hero--center .page-hero__ctas { justify-content: center; }
.ls-hero--center .page-hero__breadcrumb { justify-content: center; }
.ls-hero--right .container { text-align: right; }
.ls-hero--right .page-hero__sub { margin-left: auto; margin-right: 0; }
.ls-hero--right .page-hero__ctas { justify-content: flex-end; }
.ls-hero--right .page-hero__breadcrumb { justify-content: flex-end; }

.ls-hero .container {
  max-width: 1200px;
  width: 100%;
}
.ls-hero .page-hero__sub {
  max-width: 700px;
}

/* Hero Video-Hintergrund */
.ls-hero__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
}
.ls-hero--has-video .page-hero__overlay {
  z-index: 1;
}
.ls-hero--has-video .container {
  position: relative;
  z-index: 2;
}

/* Badge */
.ls-badge {
  background: var(--ls-accent) !important;
  color: var(--ls-dark) !important;
  font-weight: 600;
  border: none !important;
}

/* Akzent-Text im Hero */
.ls-text-accent {
  color: var(--ls-accent);
}


/* ══════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════ */
.ls-btn-accent {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: var(--ls-accent);
  color: var(--ls-dark);
  font-weight: 700;
  font-size: 15px;
  border-radius: var(--ls-radius);
  border: 2px solid var(--ls-accent);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  letter-spacing: 0.3px;
}
.ls-btn-accent:hover {
  background: var(--ls-accent-dark);
  border-color: var(--ls-accent-dark);
  color: var(--ls-dark);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.ls-btn-accent--outline {
  background: transparent;
  color: var(--ls-dark);
  border: 2px solid var(--ls-accent);
}
.ls-btn-accent--outline:hover {
  background: var(--ls-accent);
  color: var(--ls-dark);
}

/* (Newsportale-Button-Overrides entfernt – nutzt jetzt Standard-Gelb) */

.ls-page .btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  background: transparent;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--ls-radius);
  border: 2px solid rgba(255,255,255,0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
}
.ls-page .btn-outline-white:hover {
  background: rgba(255,255,255,0.1);
  border-color: #fff;
}


/* ══════════════════════════════════════════════
   SECTION LABELS
   ══════════════════════════════════════════════ */
.ls-label {
  color: var(--ls-accent2) !important;
}
.section-header--light h2 {
  color: var(--ls-dark);
}


/* ══════════════════════════════════════════════
   USP BAR
   ══════════════════════════════════════════════ */
.ls-usp-bar {
  background: var(--ls-accent) !important;
  padding: 24px 0;
  border-bottom: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.ls-usp-bar .om-usp-bar__item svg {
  stroke: var(--ls-dark) !important;
  color: var(--ls-dark) !important;
}
.ls-usp-bar .om-usp-bar__item strong {
  color: var(--ls-dark) !important;
}
.ls-usp-bar .om-usp-bar__item span {
  color: rgba(22, 25, 34, 0.75) !important;
}

/* (Newsportale-USP-Overrides entfernt – nutzt jetzt Standard-Gelb) */


/* ══════════════════════════════════════════════
   INTRO (Text links + Bild rechts, animierte Headline)
   ══════════════════════════════════════════════ */
.ls-intro {
  padding: 80px 0;
  background: #fff;
}
.ls-intro .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ls-intro__text {
  padding-right: 20px;
}

/* Animierte Headline – nutzt Theme-Klassen .jobs-hero-text h2 .anim-word
   und .anim-subtitle aus main.css. Hier nur Akzentfarbe überschreiben. */
.ls-intro .jobs-hero-text h2 {
  border-left-color: var(--ls-accent);
}
.ls-intro .jobs-hero-text h2 em {
  color: var(--ls-accent);
}

.ls-intro__text p {
  font-size: 1.05rem;
  line-height: 1.7;
  color: #555;
  margin-bottom: 16px;
}
.ls-intro__text p a {
  color: var(--ls-accent2);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}
.ls-intro__text p a:hover {
  color: var(--ls-accent-dark);
}

/* Bild rechts */
.ls-intro__media {
  position: relative;
  width: 100%;
}
.ls-intro__media img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  display: block;
}


/* ══════════════════════════════════════════════
   FEATURE SEKTION
   ══════════════════════════════════════════════ */
.ls-feature {
  padding: 100px 0;
  background-color: transparent;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}
.ls-feature__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ls-feature__image img {
  width: 100%;
  height: auto;
  max-width: 500px;
  display: block;
  margin: 0 auto;
  border-radius: 16px;
}
.ls-feature__text .section-label {
  margin-bottom: 12px;
}
.ls-feature__text h2 {
  color: var(--ls-dark);
  font-size: 2rem;
  font-weight: 800;
  margin-bottom: 20px;
  line-height: 1.2;
}
.ls-feature__text p {
  color: #444;
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 16px;
}
.ls-feature__ctas {
  display: flex;
  gap: 16px;
  margin-top: 28px;
  flex-wrap: wrap;
}


/* ══════════════════════════════════════════════
   PRODUKTE / ANGEBOTE GRID
   ══════════════════════════════════════════════ */
.ls-produkte {
  padding: 100px 0;
  background: var(--gray-light, #f5f5f7);
}
.ls-produkte__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 48px;
}

/* Produkt-Card */
.ls-produkt-card {
  background: #fff;
  border-radius: 16px;
  padding: 36px 28px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
.ls-produkt-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border-color: var(--ls-accent);
}
.ls-produkt-card--highlight {
  border: 2px solid var(--ls-accent);
  background: linear-gradient(180deg, var(--ls-accent-light) 0%, #fff 40%);
}

.ls-produkt-card__badge {
  position: absolute;
  top: -12px;
  left: 28px;
  background: var(--ls-accent);
  color: var(--ls-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.ls-produkt-card__image {
  width: calc(100% + 56px);
  height: 260px;
  margin: -36px -28px 20px -28px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}
.ls-produkt-card--highlight .ls-produkt-card__image {
  margin: -36px -28px 20px -28px;
}
.ls-produkt-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ls-produkt-card.has-image .ls-produkt-card__badge {
  top: 248px;
  z-index: 2;
}

.ls-produkt-card__icon {
  width: 48px;
  height: 48px;
  background: var(--ls-accent-light);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.ls-produkt-card__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--ls-accent-dark);
}

.ls-produkt-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ls-dark);
  margin-bottom: 8px;
}
.ls-produkt-card__subtitle {
  font-size: 14px;
  color: var(--ls-text-muted);
  margin-bottom: 20px;
  font-weight: 500;
}
.ls-produkt-card__features {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex: 1;
}
.ls-produkt-card__features li {
  position: relative;
  padding-left: 24px;
  margin-bottom: 10px;
  font-size: 14px;
  color: #374151;
  line-height: 1.5;
}
.ls-produkt-card__features li::before {
  content: '\2714';
  position: absolute;
  left: 0;
  color: var(--ls-accent-dark);
  font-weight: 700;
}
.ls-produkt-card .btn,
.ls-produkt-card .ls-btn-accent,
.ls-produkt-card .ls-btn-accent--outline {
  margin-top: auto;
  text-align: center;
  justify-content: center;
}


/* ══════════════════════════════════════════════
   PORTAL-ÜBERSICHT
   ══════════════════════════════════════════════ */
.ls-portale {
  padding: 100px 0;
}
.ls-portale__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.ls-portal-card {
  background: #fff;
  border-radius: 16px;
  padding: 32px 24px;
  border: 1px solid #e5e7eb;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.ls-portal-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border-color: var(--ls-accent);
}
.ls-portal-card img {
  height: 40px;
  width: auto;
  margin-bottom: 16px;
  object-fit: contain;
}
.ls-portal-card h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--ls-dark);
  margin-bottom: 4px;
}
.ls-portal-card p {
  font-size: 13px;
  color: var(--ls-text-muted);
}


/* ══════════════════════════════════════════════
   LOGO-MARQUEE (Referenzen / Kunden)
   ══════════════════════════════════════════════ */
.ls-marquee {
  padding: 80px 0 60px;
  overflow: hidden;
  background: #fff;
}
.ls-marquee .section-header--light {
  margin-bottom: 40px;
}

/* --- Track & Animation --- */
.ls-marquee__track {
  overflow: hidden;
  position: relative;
  padding: 12px 0;
}
/* Fade-out edges */
.ls-marquee__track::before,
.ls-marquee__track::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.ls-marquee__track::before {
  left: 0;
  background: linear-gradient(to right, #fff 0%, transparent 100%);
}
.ls-marquee__track::after {
  right: 0;
  background: linear-gradient(to left, #fff 0%, transparent 100%);
}

.ls-marquee__inner {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
}

/* Scroll left (default) */
.ls-marquee__track[data-direction="left"] .ls-marquee__inner {
  animation: marqueeLeft 47s linear infinite;
}
/* Scroll right */
.ls-marquee__track[data-direction="right"] .ls-marquee__inner {
  animation: marqueeRight 47s linear infinite;
}

@keyframes marqueeLeft {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes marqueeRight {
  0%   { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}

/* Pause on hover */
.ls-marquee__track:hover .ls-marquee__inner {
  animation-play-state: paused;
}

/* --- Logo Items --- */
.ls-marquee__logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  min-width: 260px;
}
.ls-marquee__logo img {
  max-height: 117px;
  max-width: 338px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%) opacity(0.6);
  transition: filter 0.3s ease;
}
.ls-marquee__logo img:hover {
  filter: grayscale(0%) opacity(1);
}


/* ══════════════════════════════════════════════
   PROZESS-SCHRITTE
   ══════════════════════════════════════════════ */
.ls-prozess {
  background: #f5f5f5 !important;
  padding: 100px 0;
}
.ls-prozess .section-header--light h2 {
  color: var(--ls-dark);
}
.ls-prozess .section-header--light .section-label {
  color: var(--ls-accent-dark);
}
.ls-step-num {
  color: var(--ls-accent-dark) !important;
  border-color: var(--ls-accent-dark) !important;
}
.ls-prozess .om-prozess__step h3 {
  color: var(--ls-dark);
}
.ls-prozess .om-prozess__step p {
  color: #555;
}
.ls-prozess .om-prozess__arrow {
  font-size: 2.6rem;
  color: var(--ls-accent-dark);
}


/* ══════════════════════════════════════════════
   KONTAKT / REDAKTION
   ══════════════════════════════════════════════ */
.ls-kontakt {
  padding: 100px 0;
  background: #fff;
}
.ls-kontakt__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.ls-kontakt__image {
  position: relative;
}
.ls-kontakt__image img {
  width: 100%;
  max-width: 420px;
  height: auto;
  display: block;
  margin: 0 auto;
  animation: ls-kontakt-float 4s ease-in-out infinite;
}
@keyframes ls-kontakt-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.ls-kontakt__text h2 {
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 800;
  color: var(--ls-dark);
  margin-bottom: 16px;
  line-height: 1.2;
}
.ls-kontakt__intro {
  font-size: 1.05rem;
  color: #555;
  line-height: 1.7;
  margin-bottom: 32px;
}
.ls-kontakt__channels {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-bottom: 32px;
}
.ls-kontakt__channel {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--ls-accent-light, #fdf0f0);
  border-radius: 12px;
  border-left: 4px solid var(--ls-accent);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ls-kontakt__channel:hover {
  transform: translateX(4px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}
.ls-kontakt__channel-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--ls-accent);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ls-kontakt__channel-icon svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}
.ls-kontakt__channel-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ls-kontakt__channel-info strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--ls-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.ls-kontakt__channel-info a {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ls-accent3);
  text-decoration: none;
  transition: color 0.2s ease;
}
.ls-kontakt__channel-info a:hover {
  color: var(--ls-accent-dark);
}
.ls-kontakt__channel-sub {
  font-size: 13px;
  color: var(--ls-text-muted);
}


/* ══════════════════════════════════════════════
   CTA ABSCHLUSS
   ══════════════════════════════════════════════ */
.ls-cta-final {
  background: linear-gradient(135deg, var(--ls-dark) 0%, #2d2d4e 100%);
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}
.ls-cta-final .om-cta-final__inner h2 {
  color: #fff;
}
.ls-cta-final .om-cta-final__inner p {
  color: rgba(255,255,255,0.7);
}

/* Hintergrundvideo */
.ls-cta-final__video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
}
.ls-cta-final__video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(22, 25, 34, 0.85) 0%, rgba(45, 45, 78, 0.80) 100%);
  z-index: 1;
}
.ls-cta-final.has-video .om-cta-final__inner {
  position: relative;
  z-index: 2;
}


/* ══════════════════════════════════════════════
   INLINE VIDEO (Intro / Feature Medien-Bereich)
   ══════════════════════════════════════════════ */
.ls-media-video {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 16px;
  object-fit: cover;
}
.ls-feature__image .ls-media-video {
  max-width: 500px;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════
   UTILITY: Kein-Inhalt-Hinweis
   ══════════════════════════════════════════════ */
.ls-no-items {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ls-text-muted);
  font-style: italic;
  padding: 40px 0;
}


/* ══════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════ */

@media (max-width: 1024px) {
  .ls-produkte__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ls-intro .container {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .ls-intro__text {
    padding-right: 0;
    text-align: center;
  }
  .ls-intro .jobs-hero-text h2 {
    border-left: none;
    padding-left: 0;
  }
  .ls-intro .jobs-hero-text h3.anim-subtitle {
    text-align: center;
  }
  .ls-intro__media {
    max-width: 500px;
    margin: 0 auto;
  }

  .ls-feature__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .ls-feature__image {
    order: -1;
  }
  .ls-feature__ctas {
    justify-content: center;
  }

  .ls-kontakt__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .ls-kontakt__image {
    order: -1;
  }
  .ls-kontakt__image img {
    max-width: 300px;
  }
  .ls-kontakt__channel {
    text-align: left;
  }
}

@media (max-width: 768px) {
  .ls-produkte__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .ls-portale__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }

  .ls-hero,
  .ls-usp-bar,
  .ls-intro,
  .ls-feature,
  .ls-produkte,
  .ls-portale,
  .ls-prozess,
  .ls-marquee,
  .ls-kontakt,
  .ls-cta-final {
    padding: 60px 0;
  }

  /* Marquee: kleinere Logos auf Tablet */
  .ls-marquee__logo img {
    max-height: 90px;
    max-width: 260px;
  }
  .ls-marquee__inner {
    gap: 32px;
  }
  .ls-marquee__track::before,
  .ls-marquee__track::after {
    width: 60px;
  }

  /* Hero immer links auf Mobile */
  .ls-hero--center .container,
  .ls-hero--right .container {
    text-align: left;
  }
  .ls-hero--center .page-hero__ctas,
  .ls-hero--right .page-hero__ctas {
    justify-content: flex-start;
  }
}

@media (max-width: 480px) {
  .ls-portale__grid {
    grid-template-columns: 1fr;
  }
  .ls-produkt-card {
    padding: 28px 20px;
  }
  .ls-produkt-card__image {
    width: calc(100% + 40px);
    margin: -28px -20px 16px -20px;
    height: 200px;
  }
  .ls-produkt-card.has-image .ls-produkt-card__badge {
    top: 188px;
  }
  .ls-intro .jobs-hero-text h2 {
    font-size: clamp(32px, 9vw, 52px);
  }

  /* Marquee: noch kleiner auf Mobile */
  .ls-marquee__logo img {
    max-height: 72px;
    max-width: 208px;
  }
  .ls-marquee__inner {
    gap: 24px;
  }
  .ls-marquee__track::before,
  .ls-marquee__track::after {
    width: 30px;
  }
}

/* ==========================================================================
   ── GLOBAL UNIFORM HERO HEADER (Unified Design-DNA) ──
   ========================================================================== */
.global-page-hero {
    position: relative !important;
    min-height: 580px !important;
    display: flex !important;
    align-items: center !important;
    background: #161922 !important; /* var(--dark) */
    padding: 120px 0 80px !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Das tiefe, bläuliche Farb-Overlay der Vorlage */
.global-page-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 22, 38, 0.65) !important;
    z-index: 1 !important;
}

/* Das verdunkelte Hintergrundbild */
.global-page-hero__bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.3 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.global-page-hero__content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 700px !important;
    text-align: left !important;
}

/* Breadcrumb-Styling */
.global-page-hero__content .page-hero__breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.global-page-hero__content .page-hero__breadcrumb a {
    color: rgba(255,255,255,0.6) !important;
    transition: color 0.2s;
}
.global-page-hero__content .page-hero__breadcrumb a:hover { 
    color: #ffde12 !important; 
}

/* Die obere Kennzeichnungs-Pille */
.global-page-hero__badge {
    display: inline-block !important;
    background: rgba(212, 18, 28, 0.2) !important;
    border: 1px solid rgba(212, 18, 28, 0.5) !important;
    color: #ff6b6b !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
}

/* Gelber Pillen-Modus */
.global-page-hero__badge--yellow {
    background: rgba(255, 222, 18, 0.15) !important;
    border-color: rgba(255, 222, 18, 0.4) !important;
    color: #ffde12 !important;
}

/* Die charakteristische, fette Headline mit gelbem linken OVB-Balken */
.global-page-hero h1 {
    font-family: 'Roboto', 'Inter', Arial, sans-serif !important;
    font-size: clamp(40px, 5.5vw, 76px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    border-left: 4px solid #ffde12 !important; 
    padding-left: 20px !important;
    color: #ffffff !important;
    text-align: left !important;
}

/* Erzwingt Zeilenumbrüche innerhalb der h1-Struktur */
.global-page-hero h1 span {
    display: block !important;
}

.global-page-hero h1 span.highlight {
    color: #ffde12 !important; /* Gelbe Textzeile */
}

/* Subtext */
.global-page-hero p {
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.75 !important;
    margin-bottom: 32px !important;
    max-width: 560px !important;
    text-align: left !important;
    font-weight: 400 !important;
}

/* Mobil-Optimierung */
@media (max-width: 768px) {
    .global-page-hero { padding: 100px 0 60px !important; min-height: 440px !important; }
    .global-page-hero h1 { padding-left: 15px !important; }
}

/* ==========================================================================
   ── EXTENSION: UNIFORM HERO HEADER STYLE (NATIVE LEISTUNGSSEITE) ──
   ========================================================================== */
.ls-page .ls-hero-clean {
    position: relative !important;
    min-height: 580px !important;
    display: flex !important;
    align-items: center !important;
    background: #161922 !important; /* var(--dark) */
    padding: 120px 0 80px !important;
    overflow: hidden !important;
    width: 100% !important;
}

/* Das dämpfende, edle Overlay der Portalwerbung-Vorlage */
.ls-page .ls-hero-clean__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 22, 38, 0.65) !important;
    z-index: 1 !important;
}

/* Hintergrund-Medien */
.ls-page .ls-hero-clean__bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.3 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.ls-page .ls-hero-clean__content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 700px !important;
    text-align: left !important;
}

/* Breadcrumbs über der Headline */
.ls-page .ls-hero-clean__content .page-hero__breadcrumb {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    color: rgba(255,255,255,0.6) !important;
    margin-bottom: 20px !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.ls-page .ls-hero-clean__content .page-hero__breadcrumb a {
    color: rgba(255,255,255,0.6) !important;
    text-decoration: none !important;
}
.ls-page .ls-hero-clean__content .page-hero__breadcrumb a:hover {
    color: var(--yellow, #FFDE12) !important;
}

/* Kennzeichnungspille */
.ls-page .ls-hero-clean__badge {
    display: inline-block !important;
    background: rgba(255, 222, 18, 0.15) !important;
    border: 1px solid rgba(255, 222, 18, 0.4) !important;
    color: var(--yellow, #FFDE12) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
}

/* Die charakteristische Headline mit linkem OVB-Balken */
.ls-page .ls-hero-clean h1 {
    font-family: 'Roboto', 'Inter', Arial, sans-serif !important;
    font-size: clamp(40px, 5.5vw, 76px) !important;
    font-weight: 800 !important;
    line-height: 1.05 !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    border-left: 4px solid var(--yellow, #FFDE12) !important;
    padding-left: 20px !important;
    color: #ffffff !important;
    text-align: left !important;
    background: transparent !important;
}

.ls-page .ls-hero-clean h1 .ls-hero-clean__h1-plain {
    display: block !important;
    color: #ffffff !important;
}

.ls-page .ls-hero-clean h1 .ls-hero-clean__h1-em {
    display: block !important;
    color: var(--yellow, #FFDE12) !important;
}

/* Beschreibungstext */
.ls-page .ls-hero-clean p {
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.75 !important;
    margin-bottom: 32px !important;
    max-width: 560px !important;
    text-align: left !important;
    font-weight: 400 !important;
}

/* Mobile Taktung */
@media (max-width: 768px) {
    .ls-page .ls-hero-clean { padding: 100px 0 60px !important; min-height: 440px !important; }
    .ls-page .ls-hero-clean h1 { padding-left: 15px !important; }
}

/* ════════════════════════════════════════════════════════════════
   OVB24 Theme — Uniform Hero Header & USP Bar Refinement
   CI: Rot #d4121c | Gelb #FFDE12 | Dunkel #161922
   ════════════════════════════════════════════════════════════════ */

/* ── 1. GEMEINSAME HERO STRUCT & OVERLAY (Für PW & Leistungsseiten) ── */
.pw-hero,
.ls-page .ls-hero-clean {
    position: relative !important;
    min-height: 580px !important;
    display: flex !important;
    align-items: center !important;
    background: #161922 !important; /* var(--dark) */
    padding: 120px 0 80px !important;
    overflow: hidden !important;
    width: 100% !important;
}

.pw-hero__overlay,
.ls-page .ls-hero-clean__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 22, 38, 0.65) !important;
    z-index: 1 !important;
}

.pw-hero__bg,
.ls-page .ls-hero-clean__bg {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
    opacity: 0.3 !important;
    z-index: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.pw-hero__content,
.ls-page .ls-hero-clean__content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 700px !important;
    text-align: left !important;
}

/* ── 2. DER KLEINE BADGE BUTTON (WEISS MIT TRANS-BORDER) ── */
.page-template-page-portalwerbung .pw-hero__badge,
.ls-page .ls-hero-clean__badge {
    display: inline-block !important;
    background: transparent !important;
    border: 1px solid rgba(254, 254, 254, 0.4) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
}

/* ── 3. HEADLINE TUNING (Exakter Ropa Sans Skalierungs-Modus) ── */
.pw-hero h1,
.ls-page .ls-hero-clean h1 {
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: clamp(40px, 6vw, 80px) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    border-left: 4px solid var(--yellow, #FFDE12) !important;
    padding-left: 20px !important;
    color: #ffffff !important;
    text-align: left !important;
    background: transparent !important;
}

.pw-hero__h1-plain,
.ls-page .ls-hero-clean__h1-plain {
    display: block !important;
    color: #ffffff !important;
}

.pw-hero__h1-em,
.ls-page .ls-hero-clean__h1-em {
    display: block !important;
    color: var(--yellow, #FFDE12) !important;
}

/* ── 4. DER GROSSE CTA BUTTON UNTEN (CLEAN WEISS – OHNE RAHMEN) ── */
.pw-hero .btn-primary,
.ls-page .ls-btn-accent {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    background: #ffffff !important;
    color: var(--dark, #161922) !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 50px !important;
    border: none !important; /* RAHMEN RADIKAL ENTFERNT */
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
}

.pw-hero .btn-primary:hover,
.ls-page .ls-btn-accent:hover {
    background: var(--yellow, #FFDE12) !important;
    color: var(--dark, #161922) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(255, 222, 18, 0.35) !important;
}

/* Sub-Beschreibung */
.pw-hero p,
.ls-page .ls-hero-clean p {
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 18px !important;
    color: rgba(255, 255, 255, 0.7) !important;
    line-height: 1.75 !important;
    margin-bottom: 32px !important;
    max-width: 560px !important;
    text-align: left !important;
    font-weight: 400 !important;
}

/* ==========================================================================
   ── 5. GLOBAL UNIFIED USP BAR (Helles Newsportale-Design für beide Seiten) ──
   ========================================================================== */
.pw-stats-bar,
.ls-page .ls-usp-bar {
    background: #f5f5f7 !important; /* var(--gray-light) */
    border-top: 3px solid var(--yellow, #FFDE12) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
}

.pw-stats-grid,
.ls-page .om-usp-bar__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
}

.pw-stat-item,
.ls-page .om-usp-bar__item {
    padding: 36px 20px !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    border-right: 1px solid rgba(22, 25, 34, 0.08) !important;
    transition: background 0.25s ease !important;
}

.pw-stat-item:last-child,
.ls-page .om-usp-bar__item:last-child {
    border-right: none !important;
}

.pw-stat-item:hover,
.ls-page .om-usp-bar__item:hover {
    background: rgba(22, 25, 34, 0.03) !important;
}

/* Vektor-Icons innerhalb der Leiste einheitlich skalieren */
.ls-page .om-usp-bar__item svg {
    width: 32px !important;
    height: 32px !important;
    color: var(--dark, #161922) !important;
    margin-bottom: 4px !important;
}

.pw-stat-value,
.ls-page .om-usp-bar__item strong {
    display: block !important;
    font-size: 36px !important; /* Einheitliche fette Ropa-Größe */
    font-weight: 400 !important;
    color: var(--dark, #161922) !important;
    line-height: 1 !important;
}

.pw-stat-label,
.ls-page .om-usp-bar__item span {
    display: block !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #626262 !important; /* var(--gray) */
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

@media (max-width: 1024px) {
    .pw-stats-grid, .ls-page .om-usp-bar__grid { grid-template-columns: repeat(2, 1fr) !important; }
    .pw-stat-item:nth-child(2), .ls-page .om-usp-bar__item:nth-child(2) { border-right: none !important; }
}

@media (max-width: 768px) {
    .pw-hero, .ls-page .ls-hero-clean { padding: 100px 0 60px !important; min-height: 440px !important; }
    .pw-hero h1, .ls-page .ls-hero-clean h1 { padding-left: 15px !important; }
}

/* ==========================================================================
   ── AUTOMATIC ROT-BRANDING FOR DIGITAL-AGENCY & ALL SUBPAGES ──
   Inklusive USP-Bar Angleichung und roter Top-Border
   ========================================================================== */

/* 1. Vertikaler Strich neben der Headline in ROT */
.ls-digital-agentur .ls-hero-clean h1,
.body-child-of-digital-agentur .ls-hero-clean h1 { 
    border-left: 4px solid #d4121c !important; /* Gelb wird zu OVB-Rot */
}

/* 2. Akzent-Text "DAS WIRKLICH WIRKT." (bzw. die zweite Zeile) in ROT */
.ls-digital-agentur .ls-hero-clean h1 .ls-hero-clean__h1-em,
.body-child-of-digital-agentur .ls-hero-clean h1 .ls-hero-clean__h1-em {
    color: #d4121c !important;
}

/* 3. Button-Hover auf Rot umstellen */
.ls-digital-agentur .ls-hero-clean .ls-btn-accent:hover,
.body-child-of-digital-agentur .ls-hero-clean .ls-btn-accent:hover {
    background: #d4121c !important;
    color: #ffffff !important;
    box-shadow: 0 8px 24px rgba(212, 18, 28, 0.35) !important; /* Roter Schatten */
}

/* 4. USP-Bar für die Agentur-Seiten: Grauer Background + ROTE Top-Border */
.ls-digital-agentur .ls-usp-bar,
.body-child-of-digital-agentur .ls-usp-bar {
    background: #f5f5f7 !important; /* Euer sauberes Hellgrau */
    border-top: 3px solid #d4121c !important; /* Rote Kante statt Gelb */
    border-bottom: 1px solid rgba(22, 25, 34, 0.05) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(22, 25, 34, 0.06) !important;
}

/* 5. Icons in der USP-Bar auf Rot umfärben */
.ls-digital-agentur .om-usp-bar__item svg,
.body-child-of-digital-agentur .om-usp-bar__item svg {
    color: #d4121c !important; /* Icons strahlen in OVB-Rot */
}

/* 6. Schrift-Tuning für die USP-Bar (36px, Regular, OVB-Dunkel) */
.ls-digital-agentur .om-usp-bar__grid .om-usp-bar__item strong,
.body-child-of-digital-agentur .om-usp-bar__grid .om-usp-bar__item strong {
    display: block !important;
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    color: #161922 !important;
    line-height: 1.0 !important;
    margin: 0 0 4px 0 !important;
}

.ls-digital-agentur .om-usp-bar__grid .om-usp-bar__item span,
.body-child-of-digital-agentur .om-usp-bar__grid .om-usp-bar__item span {
    display: block !important;
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #626262 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.3 !important;
    margin: 0 !important;
}

/* ==========================================================================
   ── CONTENT REBRANDING: RED DESIGN FOR DIGITAL-AGENCY & SUBPAGES ──
   Überschriften, Prozess-Schritte und Teaser-Elemente auf OVB-Rot
   ========================================================================== */

/* 1. INTRO-SEKTION: Roter Balken links & rote schräge h2-Schrift (em) */
.ls-digital-agentur .ls-intro .jobs-hero-text h2,
.body-child-of-digital-agentur .ls-intro .jobs-hero-text h2 {
    border-left-color: #d4121c !important;
}
.ls-digital-agentur .ls-intro .jobs-hero-text h2 em,
.body-child-of-digital-agentur .ls-intro .jobs-hero-text h2 em {
    color: #d4121c !important;
    font-style: italic;
}

/* 2. PRODUKTE/ANGEBOTE: Rote Akzent-Balken in den Produkt-Karten-Überschriften */
.ls-digital-agentur .ls-produkt-card h3,
.body-child-of-digital-agentur .ls-produkt-card h3 {
    border-left: 3px solid #d4121c !important;
}

/* Bestseller-Karte: Hintergrund-Tuning für die hervorgehobene Agentur-Karte */
.ls-digital-agentur .ls-produkt-card--highlight,
.body-child-of-digital-agentur .ls-produkt-card--highlight {
    border-color: #d4121c !important;
}
.ls-digital-agentur .ls-produkt-card--highlight .ls-produkt-card__badge,
.body-child-of-digital-agentur .ls-produkt-card--highlight .ls-produkt-card__badge {
    background: #d4121c !important;
    color: #ffffff !important;
}
.ls-digital-agentur .ls-produkt-card--highlight .btn,
.body-child-of-digital-agentur .ls-produkt-card--highlight .btn {
    background: #d4121c !important;
    color: #ffffff !important;
    border: none !important;
}
.ls-digital-agentur .ls-produkt-card--highlight .btn:hover,
.body-child-of-digital-agentur .ls-produkt-card--highlight .btn:hover {
    background: #161922 !important; /* var(--dark) */
    color: #ffffff !important;
}

/* 3. PROZESS-SEKTION: Helle Section-Labels (Kategorie-Pillen) auf OVB-Rot */
.ls-digital-agentur .section-header--light .section-label,
.body-child-of-digital-agentur .section-header--light .section-label,
.ls-digital-agentur .ls-prozess .section-header--light .section-label,
.body-child-of-digital-agentur .ls-prozess .section-header--light .section-label {
    color: #d4121c !important;
}

/* Große Prozess-Zahlen (01, 02, 03) & Kreis-Border in transparentem Rot */
.ls-digital-agentur .ls-step-num,
.body-child-of-digital-agentur .ls-step-num {
    color: rgba(212, 18, 28, 0.25) !important; /* Edles, transparentes Rot für die Riesen-Zahlen */
    border-color: rgba(212, 18, 28, 0.15) !important;
}

/* Prozess-Zwischenpfeile (→) in Rot */
.ls-digital-agentur .ls-prozess .om-prozess__arrow,
.body-child-of-digital-agentur .ls-prozess .om-prozess__arrow {
    font-size: 2.6rem !important;
    color: #d4121c !important;
}

/* 4. SEKTIONS-TEXTLINKS: Alle Verweise innerhalb der Texte auf Rot tunen */
.ls-digital-agentur .main-content a:not(.btn),
.body-child-of-digital-agentur .main-content a:not(.btn) {
    color: #d4121c !important;
    text-decoration: underline;
}
.ls-digital-agentur .main-content a:not(.btn):hover,
.body-child-of-digital-agentur .main-content a:not(.btn):hover {
    color: #161922 !important;
}

/* ── KORREKTUR: DIGITAL-AGENTUR CONTENT REBRANDING ── */

/* 1. PRODUKTE/ANGEBOTE: Absolut KEINE linke Border mehr für die H3-Überschriften */
.ls-digital-agentur .ls-produkt-card h3,
.body-child-of-digital-agentur .ls-produkt-card h3 {
    border-left: none !important;
    padding-left: 0 !important;
}

/* 2. PROZESS-SCHRITTE: Riesen-Zahlen und Kreis-Border in vollem, satten OVB-Rot */
.ls-digital-agentur .ls-step-num,
.body-child-of-digital-agentur .ls-step-num {
    color: #d4121c !important; /* Volles, knackiges OVB-Rot statt transparent */
    border-color: #d4121c !important;
    opacity: 1 !important;
}

/* ── FINALES PRODUKT-KARTEN BRANDING: AGENTUR & UNTERSEITEN ── */

/* 1. MOUSE HOVER: Die gelbe Border beim Drüberfahren wird knackig ROT */
.ls-digital-agentur .ls-produkt-card:hover,
.body-child-of-digital-agentur .ls-produkt-card:hover {
    border-color: #d4121c !important;
}

/* 2. ICONS INNERHALB DER KARTEN: Kontur-Farbe (Stroke) auf OVB-Rot */
.ls-digital-agentur .ls-produkt-card__icon svg,
.body-child-of-digital-agentur .ls-produkt-card__icon svg {
    stroke: #d4121c !important;
}

/* 3. ICON-HINTERGRUND-KASTEN: Soft abgetönter OVB-Rotton statt Gelb */
.ls-digital-agentur .ls-produkt-card__icon,
.body-child-of-digital-agentur .ls-produkt-card__icon {
    background: rgba(212, 18, 28, 0.08) !important; /* Edles, softes Agentur-Hellrot */
}

/* ==========================================================================
   ── FINAL AGENTUR SUBPAGES MATCH (Webdesign, Social Media, Google Ads) ──
   Brand-Umfärbung auf OVB-Rot (#d4121c) ohne Gelb-Reste
   ========================================================================== */

/* ── 1. HERO REBRANDING (Unterseiten mit leistung-hero-Struktur) ── */
.body-child-of-digital-agentur .leistung-hero {
    position: relative !important;
    min-height: 580px !important;
    display: flex !important;
    align-items: center !important;
    background: #161922 !important;
    padding: 120px 0 80px !important;
    overflow: hidden !important;
}

/* Das dämpfende Farb-Overlay der Vorlage */
.body-child-of-digital-agentur .leistung-hero__overlay {
    position: absolute !important;
    inset: 0 !important;
    background: rgba(18, 22, 38, 0.65) !important;
    z-index: 1 !important;
}

/* Fette Headline mit linkem OVB-Balken in ROT */
.body-child-of-digital-agentur .leistung-hero h1 {
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: clamp(40px, 6vw, 80px) !important;
    font-weight: 800 !important;
    line-height: 1.0 !important;
    margin-bottom: 24px !important;
    text-transform: uppercase !important;
    letter-spacing: -1px !important;
    border-left: 4px solid #d4121c !important; /* Balken in ROT */
    padding-left: 20px !important;
    color: #ffffff !important;
    background: transparent !important;
}

/* Die kleine obere Badge-Pille in Weiß mit Trans-Border */
.body-child-of-digital-agentur .leistung-hero .page-hero__badge {
    display: inline-block !important;
    background: transparent !important;
    border: 1px solid rgba(254, 254, 254, 0.4) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    padding: 6px 14px !important;
    border-radius: 20px !important;
    margin-bottom: 24px !important;
}

/* Der große CTA-Button im rahmenlosen Weiß-Konzept */
.body-child-of-digital-agentur .leistung-hero .btn-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px 32px !important;
    background: #ffffff !important;
    color: #161922 !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    border-radius: 50px !important;
    border: none !important; /* Rahmen restlos entfernt */
    outline: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-decoration: none !important;
    letter-spacing: 0.3px !important;
}

.body-child-of-digital-agentur .leistung-hero .btn-primary:hover {
    background: #d4121c !important; /* Hovert edel auf OVB-Rot */
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(212, 18, 28, 0.35) !important;
}

/* Die Feature-Häkchen-Liste im Hero rot einfärben */
.body-child-of-digital-agentur .leistung-hero__features li::before {
    color: #d4121c !important;
}

/* ── 2. NEWSPORTALE-LOOK FÜR DIE USP-BAR (Hellgrau + Rote Top-Border) ── */
.body-child-of-digital-agentur .om-usp-bar {
    background: #f5f5f7 !important; /* Perfektes Hellgrau */
    border-top: 3px solid #d4121c !important; /* Rote Oberkante */
    border-bottom: 1px solid rgba(22, 25, 34, 0.05) !important;
    position: relative !important;
    z-index: 2 !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(22, 25, 34, 0.06) !important;
}

.body-child-of-digital-agentur .om-usp-bar__grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
}

.body-child-of-digital-agentur .om-usp-bar__item {
    background: transparent !important;
    border-right: 1px solid rgba(22, 25, 34, 0.08) !important;
    padding: 36px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}

.body-child-of-digital-agentur .om-usp-bar__item:last-child {
    border-right: none !important;
}

/* Icons innerhalb der Leiste auf OVB-Rot umstellen und sauber skalieren */
.body-child-of-digital-agentur .om-usp-bar__item svg {
    color: #d4121c !important;
    width: 32px !important;
    height: 32px !important;
    display: block !important;
    margin: 0 auto 4px !important;
}

/* Große USP-Zahlen/Überschriften (36px, Regular, OVB-Dunkel) */
.body-child-of-digital-agentur .om-usp-bar__item strong {
    display: block !important;
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 36px !important;
    font-weight: 400 !important;
    color: #161922 !important;
    line-height: 1.1 !important;
    text-align: center !important;
}

/* Kleine Labels darunter */
.body-child-of-digital-agentur .om-usp-bar__item span {
    display: block !important;
    font-family: 'Ropa Sans', 'Inter', Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: #626262 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    line-height: 1.3 !important;
    text-align: center !important;
}

/* ── 3. INHALTS-BEREICH & ZWISCHENÜBERSCHRIFTEN ── */
.body-child-of-digital-agentur .leistung-content__main h2 {
    border-left: 4px solid #d4121c !important;
    padding-left: 20px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
}

/* ── 4. PREIS- / ANALYSE-KARTEN TUNING ── */
.body-child-of-digital-agentur .paket-card {
    border: 1.5px solid #ebebeb !important;
}
.body-child-of-digital-agentur .paket-card:hover {
    border-color: #d4121c !important;
}
.body-child-of-digital-agentur .paket-card--highlight {
    border-color: #d4121c !important;
}
.body-child-of-digital-agentur .paket-card--highlight .paket-card__badge {
    background: #d4121c !important;
    color: #ffffff !important;
}
.body-child-of-digital-agentur .paket-card--highlight .btn-primary {
    background: #d4121c !important;
    color: #ffffff !important;
    border: none !important;
}
.body-child-of-digital-agentur .paket-card--highlight .btn-primary:hover {
    background: #161922 !important;
    color: #ffffff !important;
}

@media (max-width: 1024px) {
    .body-child-of-digital-agentur .om-usp-bar__grid { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ════════════════════════════════════════════════════════════════
   DIGITAL-AGENTUR & SUBPAGES — HERO HEIGHT, BUTTONS & CARDS FINETUNING
   ════════════════════════════════════════════════════════════════ */

/* 1. HERO HEADER: Mindesthöhe für das Hintergrundbild auf 580px fixieren */
.body-child-of-digital-agentur .leistung-hero {
    min-height: 580px !important;
}

/* 2. SECONDARY BUTTON IM HERO ("Mehr erfahren"): Rahmen & Schrift in OVB-Rot */
.body-child-of-digital-agentur .leistung-hero .btn.btn-outline,
.body-child-of-digital-agentur .leistung-hero .btn-outline {
    background: transparent !important;
    color: #d4121c !important;
    border: 2px solid #d4121c !important;
    transition: all 0.3s ease !important;
}
.body-child-of-digital-agentur .leistung-hero .btn.btn-outline:hover,
.body-child-of-digital-agentur .leistung-hero .btn-outline:hover {
    background: #d4121c !important;
    color: #ffffff !important;
}

/* 3. SIDEBAR CTA BUTTON ("Termin buchen"): Hintergrund OVB-Rot, Text Dunkelgrau */
.body-child-of-digital-agentur .leistung-sidebar .btn.btn-primary,
.body-child-of-digital-agentur .leistung-sidebar .btn-primary {
    background: #d4121c !important;
    color: #161922 !important; /* var(--dark) für maximalen Kontrast */
    border-color: #d4121c !important;
    font-weight: 700 !important;
}
.body-child-of-digital-agentur .leistung-sidebar .btn.btn-primary:hover,
.body-child-of-digital-agentur .leistung-sidebar .btn-primary:hover {
    background: #161922 !important;
    color: #ffffff !important;
    border-color: #161922 !important;
}

/* 4. PAKET-KARTEN HIGHLIGHT: Gelblichen Verlauf restlos durch soften OVB-Rot-Verlauf ersetzen */
.body-child-of-digital-agentur .paket-card--highlight {
    border: 2px solid #d4121c !important;
    background: linear-gradient(180deg, #fff5f5 0%, #ffffff 40%) !important; /* Eleganter, ganz sanfter Rot-Schimmer */
}

/* 5. PAKET-KARTEN FEATURES: Die Häkchen (✔) knallig ROT färben */
.body-child-of-digital-agentur .paket-card__features li::before {
    color: #d4121c !important;
}

/* ════════════════════════════════════════════════════════════════
   DIGITAL-AGENTUR & SUBPAGES — COMPACT HERO, BUTTONS & HOVER FIXES
   ════════════════════════════════════════════════════════════════ */

/* 1. HERO COMPACTNESS FIX: Kürzeres Padding & Höhen-Begrenzung für den knackigen Portalwerbung-Look */
.body-child-of-digital-agentur .leistung-hero {
    min-height: 580px !important;
    height: 580px !important; /* Zwingt den Riesen-Header auf die exakte Vorlagen-Höhe */
    padding: 120px 0 80px !important; /* Kompakte Abstände oben/unten */
}

/* 2. HERO OUTLINE BUTTON ("Mehr erfahren"): Normal = Weiß | Hover = Rot */
.body-child-of-digital-agentur .leistung-hero .btn.btn-outline,
.body-child-of-digital-agentur .leistung-hero .btn-outline {
    background: transparent !important;
    color: #ffffff !important; /* Schrift im normalen Zustand weiß */
    border: 2px solid #ffffff !important; /* Rand im normalen Zustand weiß */
    transition: all 0.3s ease !important;
}
.body-child-of-digital-agentur .leistung-hero .btn.btn-outline:hover,
.body-child-of-digital-agentur .leistung-hero .btn-outline:hover {
    background: #d4121c !important;
    color: #ffffff !important;
    border-color: #d4121c !important;
}

/* 3. SIDEBAR BUTTON ("Termin buchen"): Normal = Weißer Rand & Schrift | Hover = Rot */
.body-child-of-digital-agentur .leistung-sidebar .btn.btn-primary,
.body-child-of-digital-agentur .leistung-sidebar .btn-primary {
    background: transparent !important; /* Hintergrund transparent für Outline-Look */
    color: #ffffff !important; /* Schrift im normalen Zustand weiß */
    border: 2px solid #ffffff !important; /* Rand im normalen Zustand weiß */
    font-weight: 700 !important;
    transition: all 0.3s ease !important;
}
.body-child-of-digital-agentur .leistung-sidebar .btn.btn-primary:hover,
.body-child-of-digital-agentur .leistung-sidebar .btn-primary:hover {
    background: #d4121c !important;
    color: #ffffff !important;
    border-color: #d4121c !important;
}

/* 4. PAKET-KARTEN OUTLINE BUTTONS: Normal = Dunkelgrau mit rotem Rand | Hover = Rot */
.body-child-of-digital-agentur .paket-card .btn.btn-outline {
    background: transparent !important;
    color: #161922 !important; /* var(--dark) */
    border: 2px solid #d4121c !important; /* Roter Rand statt Gelb */
    transition: all 0.3s ease !important;
}
.body-child-of-digital-agentur .paket-card .btn.btn-outline:hover {
    background: #d4121c !important;
    color: #ffffff !important;
    border-color: #d4121c !important;
}

/* 5. SIDEBAR CONTACT-ITEMS: Padding-Left Fix */
.body-child-of-digital-agentur .leistung-sidebar__contact-item {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-size: 0.875rem !important;
    color: #444 !important;
    padding: 8px 0 8px 20px !important; /* Dein padding-left: 20px sauber integriert */
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    border-left: 3px solid transparent !important; /* Bereitet den Hover-Effekt vor */
}

/* 6. SIDEBAR CONTACT-ITEMS HOVER: Gelben Rahmen/Effekt restlos durch OVB-Rot ersetzen */
.body-child-of-digital-agentur .leistung-sidebar__contact-item:hover {
    color: #d4121c !important;
    border-left-color: #d4121c !important; /* Eleganter roter Indikator links beim Drüberfahren */
    background: rgba(212, 18, 28, 0.04) !important; /* Softes rotes Highlight im Hintergrund */
}

/* ════════════════════════════════════════════════════════════════
   DIGITAL-AGENTUR & SUBPAGES — FAQ REBRANDING & HERO RESTORE
   ════════════════════════════════════════════════════════════════ */

/* 1. HERO HEIGHT RESTORE: Feste Höhe raus, min-height bleibt flexibel */
.body-child-of-digital-agentur .leistung-hero {
    height: auto !important; /* Zwangshöhe entfernt, überlassen wir dem Content */
    min-height: 580px !important;
}

/* 2. FAQ HOVER EFFECT: Beim Drüberhovern über die Frage wird der Rahmen ROT statt gelb */
.body-child-of-digital-agentur .faq-item__question:hover {
    color: #d4121c !important;
}

.body-child-of-digital-agentur .faq-item:hover {
    border-color: #d4121c !important; /* Roter Rahmen beim Hovern der Box */
}

/* 3. FAQ OPEN STATE: Wenn ein Element geöffnet ist, Akzente auf Rot setzen */
.body-child-of-digital-agentur .faq-item.is-open {
    border-color: #d4121c !important; /* Roter Box-Rahmen im geöffneten Zustand */
}

.body-child-of-digital-agentur .faq-item.is-open .faq-item__question {
    color: #d4121c !important; /* Frage-Text wird rot bei Öffnung */
}

/* 4. FAQ ARROW ICON: Der kleine Pfeil (SVG) rechts bekommt beim Hovern & Öffnen OVB-Rot */
.body-child-of-digital-agentur .faq-item__icon {
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.body-child-of-digital-agentur .faq-item__question:hover .faq-item__icon,
.body-child-of-digital-agentur .faq-item.is-open .faq-item__icon {
    color: #d4121c !important; /* Pfeil leuchtet rot */
}

/* ==========================================================================
   ── DIGITAL-AGENTUR: CARD BUTTONS FINETUNING ("Mehr erfahren") ──
   ========================================================================== */

/* Normalzustand: Rote Border mit schwarzer Schrift */
.ls-digital-agentur .ls-produkt-card .btn.ls-btn-accent--outline,
.ls-digital-agentur .ls-produkt-card .ls-btn-accent--outline {
    background: transparent !important;
    border: 2px solid #d4121c !important; /* Knalliges OVB-Rot */
    color: #161922 !important;            /* Edles Schwarz/Dunkelgrau */
    font-weight: 700 !important;
    border-radius: 50px !important;       /* Schön abgerundet wie die anderen CTAs */
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Hover-Zustand: Volles OVB-Rot mit weißer Schrift */
.ls-digital-agentur .ls-produkt-card .btn.ls-btn-accent--outline:hover,
.ls-digital-agentur .ls-produkt-card .ls-btn-accent--outline:hover {
    background: #d4121c !important;       /* Vollflächig Rot */
    border-color: #d4121c !important;
    color: #ffffff !important;            /* Weiße Schrift */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(212, 18, 28, 0.25) !important; /* Roter Premium-Glüheffekt */
}

/* ==========================================================================
   ── OVB24 INTERAKTIVE FORM-CTA SEKTION (Desktop 50/50 Grid Split) ──
   ========================================================================== */
.ovb-form-cta-section {
    background: #161922 !important;
    padding: 100px 0 !important; /* Etwas mehr Luft nach oben und unten */
    color: #ffffff !important;
}

.ovb-form-cta-container {
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 20px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 80px !important; /* Mehr Abstand zwischen Textspalte und Formular */
    align-items: center !important;
}

.ovb-form-cta-content h2 {
    font-family: 'Ropa Sans', sans-serif !important;
    font-size: clamp(36px, 4.5vw, 54px) !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    line-height: 1.1 !important;
    border-left: 4px solid #d4121c !important;
    padding-left: 20px !important;
    margin-bottom: 24px !important;
}

.ovb-form-cta-descr { 
    font-size: 16px !important; 
    line-height: 1.6 !important; 
    color: #cccccc !important; 
    margin-bottom: 40px !important; 
}

.ovb-form-cta-img-wrap img { 
    max-width: 100% !important; 
    height: auto !important; 
    border-radius: 12px !important; 
    box-shadow: 0 15px 40px rgba(0,0,0,0.4) !important; 
}

/* --- Rechte Spalte: Formular-Kiste --- */
.ovb-form-cta-form-wrap { 
    background: #ffffff !important; 
    padding: 50px 40px !important; /* Mehr Innenabstand oben/unten */
    border-radius: 16px !important; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25) !important; 
}

/* CF7 generiert automatisch störende Absätze – diese bändigen wir hier */
.ovb-form-cta-form-wrap form p {
    margin: 0 !important;
    padding: 0 !important;
}
.ovb-form-cta-form-wrap form br {
    display: none !important; /* Löscht die harten CF7-Zeilenumbrüche */
}

/* Das eigentliche Grid für die Felder */
.ovb-cf7-grid { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    row-gap: 28px !important;  /* Deutlich mehr Abstand zwischen den Zeilen */
    column-gap: 24px !important; /* Abstand zwischen den Spalten */
}

.ovb-cf7-field { 
    display: flex !important; 
    flex-direction: column !important; 
    gap: 8px !important; /* Abstand zwischen Label und Inputfeld erhöht */
}

.ovb-cf7-field.full-width, 
.ovb-cf7-submit { 
    grid-column: span 2 !important; 
}

/* Beschriftungen (Labels) */
.ovb-cf7-field label { 
    font-size: 13px !important; 
    font-weight: 700 !important; 
    color: #161922 !important; 
    text-transform: uppercase !important; 
    letter-spacing: 0.8px !important;
}

/* Eingabefelder (Inputs & Textarea) */
.ovb-cf7-field input[type="text"], 
.ovb-cf7-field input[type="email"], 
.ovb-cf7-field input[type="tel"], 
.ovb-cf7-field textarea { 
    width: 100% !important; 
    padding: 14px 18px !important; /* Luftigere Felder */
    background: #f5f5f7 !important; 
    border: 1px solid #e5e7eb !important; 
    color: #161922 !important; 
    font-size: 15px !important; 
    border-radius: 8px !important; 
    transition: all 0.25s ease !important;
    box-sizing: border-box !important;
}

/* Fokus-Effekt bei Klick ins Feld */
.ovb-cf7-field input:focus, 
.ovb-cf7-field textarea:focus { 
    background: #ffffff !important; 
    border-color: #d4121c !important; 
    outline: none !important; 
    box-shadow: 0 0 0 4px rgba(212, 18, 28, 0.1) !important; 
}

.ovb-cf7-field textarea { 
    height: 130px !important; /* Box für die Nachricht etwas großzügiger */
    resize: vertical !important; 
}

/* Senden-Button */
.ovb-form-cta-form-wrap .btn-ovb-submit { 
    width: 100% !important; 
    padding: 18px !important; /* Mächtigerer, modernerer Button */
    background: #d4121c !important; 
    color: #ffffff !important; 
    font-size: 16px !important; 
    font-weight: 700 !important; 
    border: none !important; 
    border-radius: 50px !important; 
    cursor: pointer !important; 
    text-transform: uppercase !important; 
    letter-spacing: 1px !important; 
    transition: all 0.3s ease !important; 
    margin-top: 10px !important; /* Abstand nach oben zum letzten Feld */
}

.btn-ovb-submit:hover { 
    background: #161922 !important; 
    transform: translateY(-2px) !important; 
    box-shadow: 0 8px 24px rgba(22, 25, 34, 0.2) !important; 
}

/* Fehlermeldungen und Validierungshinweise */
.wpcf7-not-valid-tip { 
    color: #d4121c !important; 
    font-size: 12px !important; 
    font-weight: 600 !important;
    margin-top: 6px !important; 
}
.wpcf7-response-output { 
    border: 2px solid #d4121c !important; 
    border-radius: 8px !important; 
    background: #fff5f5 !important; 
    color: #161922 !important; 
    font-weight: 600 !important; 
    margin: 20px 0 0 0 !important;
    padding: 12px 16px !important;
}

/* Lade-Spinner zentrieren falls aktiv */
.wpcf7-spinner {
    margin: 10px auto 0 auto !important;
    display: block !important;
}

/* ==========================================================================
   ── RESPONSIVE MOBILE FIXES (Perfekter Umbruch für Smartphones) ──
   ========================================================================== */

/* Ab Tablets und kleiner (z.B. iPad-Porträtmodus) */
@media (max-width: 991px) { 
    .ovb-form-cta-container { 
        grid-template-columns: 1fr !important; 
        gap: 40px !important; 
    } 
    .ovb-form-cta-form-wrap { 
        padding: 35px 20px !important; /* Etwas kompakterer Innenabstand auf kleineren Screens */
    } 
}

/* Für Smartphones (Hier brechen wir das 2-Spalten-Grid komplett auf) */
@media (max-width: 650px) { 
    .ovb-cf7-grid { 
        grid-template-columns: 1fr !important; /* Zwingt alle Felder in eine einzige Spalte */
        row-gap: 20px !important;               /* Angenehmer vertikaler Abstand zwischen den Feldern */
    } 
    
    .ovb-cf7-field, 
    .ovb-cf7-field.full-width { 
        grid-column: span 1 !important;        /* Setzt die Spaltenüberspannung sauber zurück */
    }
    
    /* Verhindert, dass lange Labels auf Smartphones eingequetscht werden */
    .ovb-cf7-field label {
        font-size: 12px !important;
        white-space: normal !important;
    }

    /* Macht den Senden-Button auf Smartphones knackig und griffig */
    .ovb-form-cta-form-wrap .btn-ovb-submit {
        padding: 15px !important;
        font-size: 15px !important;
    }
}

/* ==========================================================================
   ── INLINE GRID OVERRIDE: PERFECT MOBILE COMPLIANCE ──
   ========================================================================== */

/* Desktop-Verhalten: Schicke 2-spaltige Zeilen */
.ovb-form-row {
    display: flex !important;
    gap: 24px !important;
    margin-bottom: 24px !important;
    width: 100% !important;
}

.ovb-form-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 !important;
    width: 50% !important;
}

.ovb-form-group.full-width {
    width: 100% !important;
}

/* Mobil-Verhalten: Rigoroser Umbruch auf Smartphones */
@media (max-width: 650px) {
    .ovb-form-row {
        flex-direction: column !important; /* Zwingt die Felder untereinander */
        gap: 20px !important;
        margin-bottom: 20px !important;
    }

    .ovb-form-group {
        width: 100% !important; /* Volle Breite für jedes Feld auf dem Handy */
    }
    
    .ovb-form-cta-form-wrap {
        padding: 30px 20px !important; /* Macht die Kiste auf Handys kompakter */
    }
}


/* ==========================================================================
   ── UNIVERSAL FORM RESPONSIVE OVERRIDE (Webanalyse & All Subpages) ──
   ========================================================================== */

/* Globale Bereinigung für Contact Form 7 Absätze innerhalb des neuen Markups */
.ovb-form-cta-section .ovb-form-group p,
.ovb-form-cta-section .ovb-form-submit p {
    margin: 0 !important;
    padding: 0 !important;
}

.ovb-form-cta-section .ovb-form-group br {
    display: none !important;
}

/* Desktop-Sicherung: Garantiert, dass die Reihen nebeneinander stehen */
@media (min-width: 992px) {
    .ovb-form-cta-section .ovb-form-row {
        display: flex !important;
        gap: 24px !important;
        margin-bottom: 24px !important;
        width: 100% !important;
    }

    .ovb-form-cta-section .ovb-form-group {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        flex: 1 !important;
    }
}

/* Universeller Mobil-Umbruch unterhalb von 768px (Smartphones & Tablets) */
@media (max-width: 768px) {
    .ovb-form-cta-section .ovb-form-row {
        display: flex !important;
        flex-direction: column !important; /* Erzwingt das Untereinanderstehen */
        gap: 20px !important;
        margin-bottom: 0 !important;
    }

    .ovb-form-cta-section .ovb-form-group {
        width: 100% !important;
        margin-bottom: 20px !important;
    }
    
    .ovb-form-cta-section .ovb-form-group.full-width {
        margin-bottom: 20px !important;
    }

    .ovb-form-cta-section .ovb-form-cta-form-wrap {
        padding: 30px 20px !important;
    }
}