@font-face{
  font-family:'Inter';
  src:url('../fonts/inter/Inter-Variable.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* =========================
   Grundlayout: Section + Gutter + Mobile Abstände
   ========================= */

.sppb-section{
  padding-top:80px;
  padding-bottom:80px;
}

@media (max-width: 991px){
  .sppb-section{ padding-top:60px; padding-bottom:60px; }
}
@media (max-width: 767px){
  .sppb-section{ padding-top:40px; padding-bottom:40px; }
}

/* Row gap (mobile) */
@media (max-width: 991px){
  .sppb-row{ row-gap:25px; }
}
@media (max-width: 767px){
  .sppb-row{ row-gap:28px; }
}

/* Column Gutter */
.sppb-row{
  margin-left:-15px;
  margin-right:-15px;
}
.sppb-column{
  padding-left:0px;
  padding-right:0px;
}

/* Wenn Spalten untereinander: etwas Luft */
@media (max-width: 767px){
  .sppb-column{ margin-bottom:25px; }
  .sppb-column:last-child{ margin-bottom:0; }
}

/* =========================
   Buttons (CI)
   ========================= */

.sppb-btn,
.btn{
  border-radius:4px !important;
  letter-spacing:.3px;
}

.sppb-btn-primary,
.btn-primary{
  background:#F2B705;
  color:#1A1A1A;
  padding:12px 26px;
  font-weight:600;
  border:0;
  transition:all .22s ease;
}

.sppb-btn-primary:hover,
.btn-primary:hover{
  background:#1A1A1A;
  color:#F2B705;
}

.sppb-btn-info,
.btn-info{
  background:transparent;
  color:#F2B705;
  border:2px solid #F2B705;
  padding:10px 24px;
  border-radius:4px;
  font-weight:600;
  transition:all .22s ease;
}

.sppb-btn-info:hover,
.btn-info:hover{
  background:#F2B705;
  color:#1A1A1A;
  border-color:#F2B705;
}

/* =========================
   HERO
   ========================= */

.sppb-section.hero{
  min-height:85vh !important;
  position:relative !important;
  display:flex;
  align-items:center;
}

.sppb-section.hero > .sppb-row-container,
.sppb-section.hero > .sppb-container{
  width:100% !important;
}

@media (max-width: 767px){
  .sppb-section.hero{ min-height:75vh !important; }
}

/* Overlay */
.sppb-section.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(26,26,26,.48);
  z-index:0;
}

/* Content über Overlay */
.sppb-section.hero .sppb-row-container,
.sppb-section.hero .sppb-container,
.sppb-section.hero .sppb-row,
.sppb-section.hero .sppb-column,
.sppb-section.hero .sppb-column-addons{
  position:relative;
  z-index:1;
}

/* Header Höhe mobil (falls Helix runterdrückt: ggf. zusätzlich line-height/padding im Template) */
@media (max-width: 991px){
  #sp-header{ height:80px !important; padding-top:15px; }
}
@media (max-width: 575px){
  #sp-header{ height:80px !important; }
}

/* =========================
   Werte-Liste neben Familienfoto
   ========================= */

.values-list{
  border-left:4px solid #F2B705;
  padding-left:18px;
  margin-bottom:18px;
}
.values-list span{
  display:block;
  font-weight:700;
  font-size:20px;
  margin-bottom:8px;
}

/* =========================
   Leistungskacheln (Image Layouts)
   ========================= */

.sppb-addon-image-layouts{
  background:#fff;
  border:1px solid rgba(0,0,0,.06);
  border-radius:10px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  overflow:hidden;
  will-change:transform, box-shadow;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),
             box-shadow .45s cubic-bezier(.2,.8,.2,1),
             border-color .45s cubic-bezier(.2,.8,.2,1);
}
.sppb-addon-image-layouts:hover{
  transform:translateY(-8px);
  border-color:rgba(0,0,0,.10);
  box-shadow:0 18px 42px rgba(0,0,0,.10);
}

/* =========================
   Firmenprofil: Facts + Accordion (SAUBER, ohne gelben Rahmen außen)
   ========================= */

:root{
  --okb-yellow:#F2B705;
  --okb-text:#2a2a2a;
  --okb-line:rgba(0,0,0,.08);
  --okb-card:rgba(255,255,255,.96);
}

/* Hintergrund leicht dunkler, damit Cards abheben */
.sppb-section.firmenprofil{
  background:#f2f2f2;
}

/* =========================================
   FIRMENPROFIL – FACTS sauber korrigiert
   Gelber Akzent NUR innerhalb .facts
   ========================================= */

/* Container */
.firmenprofil .facts{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:16px;
  margin:0 0 18px 0;
}

/* Einzelne Fact-Karten */
.firmenprofil .facts > .fact{
  background:var(--okb-card);
  border:1px solid var(--okb-line);
  border-radius:12px;
  padding:16px 18px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  position:relative;
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  overflow:hidden;
}

/* Gelber Balken – jetzt NUR bei echten Fact-Karten */
.firmenprofil .facts > .fact::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:4px;
  background:var(--okb-yellow);
}

/* Hover */
.firmenprofil .facts > .fact:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}

/* Text */
.firmenprofil .facts > .fact .k{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(0,0,0,.55);
  margin-bottom:6px;
}

.firmenprofil .facts > .fact .v{
  font-size:18px;
  font-weight:700;
  color:var(--okb-text);
  line-height:1.2;
}

/* Responsive */
@media (max-width: 991px){
  .firmenprofil .facts{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width: 575px){
  .firmenprofil .facts{
    grid-template-columns:1fr;
  }
}

/* Accordion – auf DEIN Markup (Button) abgestimmt */
.firmenprofil .sppb-panel-group{ margin-top:6px; }

/* Wichtig: KEIN Rahmen um äußere Wrapper, nur um Header/Body */
.firmenprofil .sppb-panel{
  background:transparent;
  border:0;
  box-shadow:none;
}

/* Der klickbare Header ist bei dir ein BUTTON */
.firmenprofil button.sppb-panel-heading{
  width:100%;
  background:var(--okb-card);
  border:1px solid var(--okb-line);
  border-radius:12px;
  padding:14px 16px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  position:relative;
}

/* gelber Akzent links im Accordion-Header */
.firmenprofil button.sppb-panel-heading::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  background:var(--okb-yellow);
  border-radius:12px 0 0 12px;
}

.firmenprofil button.sppb-panel-heading:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 28px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}


/* === ANSCHLUSS / ENDE Firmenprofil Accordion === */

.firmenprofil .sppb-panel-title{
  font-size:16px;
  font-weight:700;
  color:var(--okb-text);
  margin:0;
  line-height:1.25;
}

/* optional: kleines Icon rechts (Chevron) sauber ausrichten */
.firmenprofil button.sppb-panel-heading .sppb-panel-title i,
.firmenprofil button.sppb-panel-heading .sppb-panel-title svg{
  margin-left:12px;
  flex:0 0 auto;
  opacity:.75;
}

/* Panel Body */
.firmenprofil .sppb-panel-body{
  background:var(--okb-card);
  border:0px solid var(--okb-line);
  border-top:0;
  border-radius:0 0 12px 12px;
  padding:14px 16px 16px 16px;
  box-shadow:0 10px 22px rgba(0,0,0,.06);
  margin-top:-10px; /* schiebt Body optisch direkt unter den Header */
}

/* Abstand zwischen Accordion-Items */
.firmenprofil .sppb-panel + .sppb-panel{
  margin-top:12px;
}

/* Wenn ein Panel offen ist: Header unten ohne Rundung, Body oben ohne Rundung */
.firmenprofil .sppb-panel.active button.sppb-panel-heading,
.firmenprofil .sppb-panel .sppb-panel-collapse.show + * button.sppb-panel-heading{
  border-bottom-left-radius:0;
  border-bottom-right-radius:0;
}

/* (Fallback) Manche SP-Versionen setzen .active am Panel */
.firmenprofil .sppb-panel.active .sppb-panel-body{
  border-top-left-radius:0;
  border-top-right-radius:0;
}
/* =========================================
   FUHRPARK – technisch & kraftvoll
   ========================================= */

.firmenprofil .machine-list{
  list-style:none;
  margin:0;
  padding:18px 20px;
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px 34px;

  background:#ffffff;
  border:1px solid rgba(0,0,0,.12);
  border-radius:6px;               /* weniger rund */
}

/* Tablet */
@media (max-width: 991px){
  .firmenprofil .machine-list{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

/* Smartphone */
@media (max-width: 575px){
  .firmenprofil .machine-list{
    grid-template-columns:1fr;
  }
}

/* Listeneinträge */
.firmenprofil .machine-list li{
  position:relative;
  padding-left:26px;
  font-weight:600;
  letter-spacing:.2px;
  color:#1A1A1A;
  line-height:1.45;
}

/* Technischer Marker (kantiger Balken) */
.firmenprofil .machine-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.55em;
  width:14px;
  height:3px;
  background:var(--okb-yellow);
}
.firmenprofil .sppb-panel-body .sppb-section{
  padding-top:0 !important;
  padding-bottom:0 !important;
}
@media (min-width: 992px){
  .firmenprofil .machine-list{
    column-gap: 34px;
  }
  .firmenprofil .machine-list li{
    border-left: 0;
  }
  .firmenprofil .machine-list{
    background:
      linear-gradient(to right, transparent 33.33%, rgba(0,0,0,.06) 33.33%, rgba(0,0,0,.06) calc(33.33% + 1px), transparent calc(33.33% + 1px)),
      linear-gradient(to right, transparent 66.66%, rgba(0,0,0,.06) 66.66%, rgba(0,0,0,.06) calc(66.66% + 1px), transparent calc(66.66% + 1px)),
      #fff;
  }
}

/* =========================================
   FUHRPARK – Auflistung (Grid + Cards)
   ========================================= */

/* Wrapper: gib der Section oder Row am besten die Klasse "fuhrpark" */
.sppb-section.fuhrpark{
  background:#fff;
}

/* Grid für Fahrzeuge */
.fuhrpark .fleet-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

/* Card */
.fuhrpark .fleet-item{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),
             box-shadow .35s cubic-bezier(.2,.8,.2,1),
             border-color .35s cubic-bezier(.2,.8,.2,1);
}

.fuhrpark .fleet-item:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 42px rgba(0,0,0,.10);
  border-color:rgba(0,0,0,.12);
}

/* Bildbereich (funktioniert auch, wenn das Bild direkt im Addon steckt) */
.fuhrpark .fleet-media{
  position:relative;
  aspect-ratio: 16 / 10;
  overflow:hidden;
  background:#f3f3f3;
}
.fuhrpark .fleet-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .55s cubic-bezier(.2,.8,.2,1);
}
.fuhrpark .fleet-item:hover .fleet-media img{
  transform:scale(1.04);
}

/* Content */
.fuhrpark .fleet-body{
  padding:14px 16px 16px 16px;
}

.fuhrpark .fleet-title{
  font-size:16px;
  font-weight:800;
  color:#1A1A1A;
  margin:0 0 6px 0;
  line-height:1.25;
}

.fuhrpark .fleet-sub{
  font-size:13px;
  color:rgba(0,0,0,.62);
  margin:0 0 10px 0;
  line-height:1.4;
}

/* kleine Specs/Badges */
.fuhrpark .fleet-meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}
.fuhrpark .fleet-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(0,0,0,.10);
  color:#1A1A1A;
  background:rgba(242,183,5,.12);
}

/* Responsive */
@media (max-width: 991px){
  .fuhrpark .fleet-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px){
  .fuhrpark .fleet-grid{ grid-template-columns:1fr; gap:12px; }
  .fuhrpark .fleet-body{ padding:14px 14px 15px 14px; }
}
/* =========================================================
   AUSBILDUNG (DARK) – komplett neu & sauber
   Voraussetzung: SP Section hat CSS-Klasse "ausbildung-dark"
   ========================================================= */

/* Section-Hintergrund + Grundtypografie */
.sppb-section.ausbildung-dark{
  background: #1f1f1f;
  padding: 60px 0;
  color: rgba(255,255,255,.82);
}

/* Überschriften */
.sppb-section.ausbildung-dark h1,
.sppb-section.ausbildung-dark h2,
.sppb-section.ausbildung-dark h3{
  color: #fff;
}

/* Fließtext + Listen */
.sppb-section.ausbildung-dark p{
  color: rgba(255,255,255,.78);
  line-height: 1.65;
}

.sppb-section.ausbildung-dark ul{
  margin: 0 0 18px 0;
  padding-left: 18px;
  line-height: 1.6;
}

.sppb-section.ausbildung-dark li{
  color: rgba(255,255,255,.78);
  margin-bottom: 8px;
}

/* Eyebrow (AUSBILDUNG) – unterstützt beide möglichen Klassen */
.sppb-section.ausbildung-dark .ausbildung-teaser__eyebrow,
.sppb-section.ausbildung-dark .ausbildung-eyebrow,
.sppb-section.ausbildung-dark .okb-eyebrow{
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.65);
  margin: 0 0 10px 0;
  position: relative;
  padding-left: 14px;
}

.sppb-section.ausbildung-dark .ausbildung-teaser__eyebrow::before,
.sppb-section.ausbildung-dark .ausbildung-eyebrow::before,
.sppb-section.ausbildung-dark .okb-eyebrow::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:4px;
  height:14px;
  background:#F2B705;
  border-radius:2px;
}

/* Video/Media – passt für azubi-media oder SP Video Wrapper */
.sppb-section.ausbildung-dark .azubi-media,
.sppb-section.ausbildung-dark .ausbildung-video-card{
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
}

.sppb-section.ausbildung-dark .azubi-media{
  aspect-ratio: 4 / 5;
}

.sppb-section.ausbildung-dark .azubi-media video,
.sppb-section.ausbildung-dark .azubi-media img,
.sppb-section.ausbildung-dark .ausbildung-video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Fallback ohne aspect-ratio */
@supports not (aspect-ratio: 4 / 5){
  .sppb-section.ausbildung-dark .azubi-media{
    position: relative;
  }
  .sppb-section.ausbildung-dark .azubi-media::before{
    content:"";
    display:block;
    padding-top:125%;
  }
  .sppb-section.ausbildung-dark .azubi-media video,
  .sppb-section.ausbildung-dark .azubi-media img{
    position:absolute;
    inset:0;
  }
}

/* CTA-Buttons (für SP Buttons + ggf. eigene Klassen) */
.sppb-section.ausbildung-dark .ausbildung-teaser__cta{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

/* SP Buttons */
.sppb-section.ausbildung-dark .sppb-btn,
.sppb-section.ausbildung-dark .btn{
  border-radius: 10px;
  font-weight: 800;
}

/* Primary */
.sppb-section.ausbildung-dark .sppb-btn-primary,
.sppb-section.ausbildung-dark .btn-primary{
  background: #F2B705;
  border-color: #F2B705;
  color: #111;
}

.sppb-section.ausbildung-dark .sppb-btn-primary:hover,
.sppb-section.ausbildung-dark .btn-primary:hover{
  opacity: .9;
}

/* Outline */
.sppb-section.ausbildung-dark .sppb-btn-outline-primary,
.sppb-section.ausbildung-dark .btn-outline-primary{
  background: transparent;
  border-color: #F2B705;
  color: #F2B705;
  font-weight: 800;
}

.sppb-section.ausbildung-dark .sppb-btn-outline-primary:hover,
.sppb-section.ausbildung-dark .btn-outline-primary:hover{
  background: rgba(242,183,5,.12);
}

/* Falls CTA als normale Links (ohne Button-Klassen) eingebaut wurde */
.sppb-section.ausbildung-dark .ausbildung-teaser__cta a{
  display: inline-block;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 800;
  text-decoration: none;
  border: 2px solid transparent;
}

/* 1. Link gelb, 2. Link Outline (nur wenn es wirklich 2 sind) */
.sppb-section.ausbildung-dark .ausbildung-teaser__cta a:nth-child(1){
  background: #F2B705;
  border-color: #F2B705;
  color: #111;
}

.sppb-section.ausbildung-dark .ausbildung-teaser__cta a:nth-child(2){
  background: transparent;
  border-color: #F2B705;
  color: #F2B705;
}

/* Mini-Recruiting – ruhig, weiter unten, Link unter Text */
.sppb-section.ausbildung-dark .mini-recruit{
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid rgba(255,255,255,.14);
  background: transparent;
  border-radius: 0;
  display: block;
}

.sppb-section.ausbildung-dark .mini-recruit__text{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,.85);
  line-height: 1.45;
}

.sppb-section.ausbildung-dark .mini-recruit__cta{
  display: inline-block;
  font-weight: 900;
  color: #F2B705;
  text-decoration: none;
  transition: opacity .2s ease, transform .2s ease;
}

.sppb-section.ausbildung-dark .mini-recruit__cta:hover{
  opacity: .75;
  transform: translateX(3px);
}

/* Responsive: etwas mehr Luft bei kleineren Screens */
@media (max-width: 991px){
  .sppb-section.ausbildung-dark{
    padding: 44px 0;
  }
}
/* =========================================
   Ausbildung Buttons – Abstand mobil
   ========================================= */

@media (max-width: 991px){

  .sppb-section.ausbildung-dark .sppb-btn-primary,
  .sppb-section.ausbildung-dark .btn-primary,
  .sppb-section.ausbildung-dark .sppb-btn-info,
  .sppb-section.ausbildung-dark .btn-info{
    
    display: block;          /* untereinander */
    width: 100%;             /* optional: volle Breite */
    margin-bottom: 14px;     /* Abstand */
  }

  /* letzter Button kein zusätzlicher Abstand */
  .sppb-section.ausbildung-dark .sppb-btn-primary:last-child,
  .sppb-section.ausbildung-dark .btn-primary:last-child,
  .sppb-section.ausbildung-dark .sppb-btn-info:last-child,
  .sppb-section.ausbildung-dark .btn-info:last-child{
    margin-bottom: 0;
  }

}
/* =========================================================
   PARTNERBLOCK (SP Page Builder Section)
   Lösung A: Zentrierung über .okb-inner, ohne okb-container
   ========================================================= */

.sppb-section.partnerblock-section{
  background: #f4f4f4;
  padding: 40px 0;              /* optional, gibt Luft */
}

/* Innerer Wrapper zentriert den gesamten Inhalt */
.sppb-section.partnerblock-section .okb-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Head */
.sppb-section.partnerblock-section .okb-head{
  margin-bottom: 22px;
  max-width: 980px;
}

.sppb-section.partnerblock-section .okb-eyebrow{
  display:inline-block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(0,0,0,.55);
  position: relative;
  padding-left: 14px;
  margin-bottom: 10px;
}

.sppb-section.partnerblock-section .okb-eyebrow::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform: translateY(-50%);
  width:4px;
  height:12px;
  background: #F2B705;
  border-radius: 2px;
}

.sppb-section.partnerblock-section .okb-head h2{
  margin: 0 0 8px 0;
}

.sppb-section.partnerblock-section .okb-head p{
  margin: 0;
  max-width: 72ch;
  color: rgba(0,0,0,.72);
  line-height: 1.65;
}

/* Top grid (2 Cards) */
.sppb-section.partnerblock-section .okb-grid{
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.sppb-section.partnerblock-section .okb-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sppb-section.partnerblock-section .okb-card{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: stretch;
}

.sppb-section.partnerblock-section .okb-card__logo{
  flex: 0 0 92px;
  height: 92px;
  border-radius: 14px;
  background: rgba(0,0,0,.03);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding: 10px;
}

.sppb-section.partnerblock-section .okb-card__logo img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  filter: grayscale(0.2) saturate(0.9);
}

.sppb-section.partnerblock-section .okb-card__body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.sppb-section.partnerblock-section .okb-card__title{
  font-weight: 800;
  margin-bottom: 6px;
}

.sppb-section.partnerblock-section .okb-card__text{
  color: rgba(0,0,0,.70);
  line-height: 1.55;
}

.sppb-section.partnerblock-section .okb-card__link{
  display: inline-block;
  margin-top: 10px;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
  opacity: .9;
  transition: opacity .2s ease;
}

.sppb-section.partnerblock-section .okb-card__link:hover{
  opacity: .65;
}

/* Divider */
.sppb-section.partnerblock-section .okb-sep{
  border:0;
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 22px 0 18px 0;
}

/* Bottom subtitle */
.sppb-section.partnerblock-section .okb-subhead h3{
  margin: 0 0 6px 0;
  font-size: 18px;
}

.sppb-section.partnerblock-section .okb-subhead p{
  margin: 0;
  color: rgba(0,0,0,.70);
}

/* Logos grid */
.sppb-section.partnerblock-section .okb-logos{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-top: 14px;
}

.sppb-section.partnerblock-section .okb-logo{
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 18px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 120px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, filter .25s ease;
  filter: grayscale(1);
}

.sppb-section.partnerblock-section .okb-logo img{
  max-width: 100%;
  max-height: 56px;
  height: auto;
  display:block;
  filter: grayscale(1) contrast(1.05);
  opacity: .92;
}

.sppb-section.partnerblock-section .okb-logo:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.10);
  border-color: rgba(242,183,5,.35);
  filter: grayscale(0);
}

.sppb-section.partnerblock-section .okb-logo:hover img{
  filter: grayscale(0) contrast(1);
  opacity: 1;
}

/* Responsive */
@media (max-width: 991px){
  .sppb-section.partnerblock-section .okb-grid--2{
    grid-template-columns: 1fr;
  }
  .sppb-section.partnerblock-section .okb-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575px){
  .sppb-section.partnerblock-section .okb-logos{
    grid-template-columns: 1fr;
  }
  .sppb-section.partnerblock-section .okb-logo{
    min-height: 104px;
  }
}
/* --- FORCE GRID (nur in diesem Block) --- */
.okb-partner .okb-grid{
  display: grid !important;
  gap: 18px;
  margin-top: 20px;
}

.okb-partner .okb-grid.okb-grid--2{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

/* Cards */
.okb-partner .okb-card{
  display: flex;
  gap: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  padding: 16px;
}

/* Responsive: erst bei < 992px auf 1 Spalte */
@media (max-width: 991px){
  .okb-partner .okb-grid.okb-grid--2{
    grid-template-columns: 1fr !important;
  }
}
/* --- Dezente Partner-Logos --- */

.okb-partner .okb-logos{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;                 /* mehr Luft */
  margin-top: 24px;
  align-items: center;
}

.okb-partner .okb-logo{
  background: none;          /* kein Kasten */
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  cursor: default;
}

.okb-partner .okb-logo img{
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;

  filter: grayscale(1) contrast(1.05);
  opacity: .65;

  transition: opacity .3s ease, filter .3s ease;
}

/* dezente Aktivierung beim Hover */
.okb-partner .okb-logo:hover img{
  opacity: .9;
  filter: grayscale(0);
}

/* Responsive */
@media (max-width: 991px){
  .okb-partner .okb-logos{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px;
  }
}

@media (max-width: 575px){
  .okb-partner .okb-logos{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.footer-brand img{
  max-width: 250px;
  height: auto;
  margin-bottom: 20px;
}

.footer-slogan{
  font-size: 17px;
    font-weight: 700;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
  margin: 0;
}
/* Bottom2 – Kontakt einspaltig */
.footer-contact h4{
  margin: 0 0 18px 0;
        font-weight: 700;
}

.footer-contact__block{
  margin-bottom: 22px;
}

.footer-contact__label{
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin-bottom: 10px;
}

.footer-contact__block div{
  margin-bottom: 8px;
  color: rgba(255,255,255,.78);
}

.footer-contact a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  transition: color .2s ease;
}

.footer-contact a:hover{
  color: #F2B705;
}
/* ===== Bottom3 – Förderung ===== */

.footer-funding h4{
  margin: 0 0 16px 0;
}

.footer-funding__logo img{
  max-width: 260px;
  height: auto;
  margin-bottom: 16px;
}

/* Akkordeon */

.footer-funding__toggle{
  background: none;
  border: none;
  color: rgba(255,255,255,.85);
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: color .2s ease;
}

.footer-funding__toggle:hover{
  color: #F2B705;
}

.footer-funding__icon{
  font-weight: 900;
  transition: transform .2s ease;
}

.footer-funding__content{
  display: none;
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.6;
  color: rgba(255,255,255,.75);
}

/* Aktiv */
/* ===== Footer Akkordeon (robust) ===== */
#sp-bottom .footer-acc{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
}

#sp-bottom .footer-acc__toggle{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(255,255,255,.86);
  font-weight: 800;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
}

#sp-bottom .footer-acc__toggle:hover{
  color: #F2B705;
}

#sp-bottom .footer-acc__icon{
  margin-left: auto;
  font-weight: 900;
  color: #F2B705;
  transition: transform .2s ease;
}

#sp-bottom .footer-acc__panel{
  margin-top: 12px;
}

#sp-bottom .footer-acc__panel p{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,.75);
  line-height: 1.55;
  font-size: 14px;
}

#sp-bottom .footer-acc__panel p:last-child{
  margin-bottom: 0;
}

/* open state */
#sp-bottom .footer-acc.is-open .footer-acc__icon{
  transform: rotate(45deg);
}
/* ===== Bottom4 – Info ===== */
.footer-info h4{
  margin: 0 0 16px 0;
}

.footer-info__links{
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
}

.footer-info__links li{
  margin: 0 0 10px 0;
}

.footer-info__links a{
  color: rgba(255,255,255,.78);
  text-decoration: none;
  font-weight: 600;
}

.footer-info__links a:hover{
  color: #F2B705;
}

/* Social Row */
.footer-info__social{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

/* Social Buttons */
.footer-social{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(242,183,5,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform .18s ease, background .18s ease;
}

.footer-social:hover{
  transform: translateY(-2px);
  background: rgba(242,183,5,.28);
}

/* Platzhalter-Text im Icon (kann später SVG werden) */
.footer-social__icon{
  font-weight: 900;
  color: #F2B705;
  letter-spacing: -0.02em;
  font-size: 14px;
}

/* OM Logo klein */
.footer-om img{
  height: 32px;
  width: auto;
  display: block;
  opacity: .95;
}

.footer-om:hover img{
  opacity: 1;
}
/* ===== Footer Akzentlinien ===== */
#sp-bottom .footer-slogan,
#sp-bottom .footer-contact__block{
  position: relative;
  padding-left: 14px;
}

#sp-bottom .footer-slogan::before{
  content:"";
  position:absolute;
  left:0;
  top: .35em;
  width: 2px;
  height: 16px;
  border-radius: 2px;
  background:#F2B705;
  opacity: .95;
}
#sp-bottom .footer-contact__block::before{
  content:"";
  position:absolute;
  left:0;
  top: .35em;
  width: 2px;
  height: 12px;
  border-radius: 2px;
  background:#F2B705;
  opacity: .95;
}

/* Slogan etwas harmonischer */
#sp-bottom .footer-slogan{
  color: rgba(255,255,255,.78);
  line-height: 1.55;
}
.footer-social{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(242,183,5,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #F2B705;   /* SVG nutzt currentColor */
  transition: transform .18s ease, background .18s ease;
}
.footer-social:hover{
  transform: translateY(-2px);
  background: rgba(242,183,5,.28);
}
/* ===== Social Icons sichtbar machen (Helix-sicher) ===== */
.footer-info__social{
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 40px;
}

.footer-social{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(242,183,5,.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;

  /* wichtig: Icon-Farbe */
  color: #F2B705;

  transition: transform .18s ease, background .18s ease;
}

.footer-social:hover{
  transform: translateY(-2px);
  background: rgba(242,183,5,.28);
}

/* SVG sichtbar erzwingen */
.footer-social svg{
  width: 18px;
  height: 18px;
  display: block;
  fill: currentColor !important;
  opacity: 1 !important;
}

/* falls Helix/Template paths auf "fill:none" setzt */
.footer-social svg path{
  fill: currentColor !important;
  opacity: 1 !important;
}
.footer-social img{
  width: 18px;
  height: 18px;
  display:block;
  filter: none;
}
.sppb-gallery-item-title,
.sppb-gallery-item-text,
.sppb-gallery-overlay-text {
    display: none !important;
}
.speasyimagegallery-gallery-item:hover .speasyimagegallery-gallery-item-content {
	opacity: 1;
	display: none;
}

.speasyimagegallery-gallery-item,
.speasyimagegallery-gallery-item *,
.speasyimagegallery-gallery-item a,
.speasyimagegallery-gallery-item img,
.speasyimagegallery-gallery-item::before,
.speasyimagegallery-gallery-item::after {
    cursor: url('/images/kelle-plus.png') 8 8, pointer !important;
}
.speasyimagegallery-modal-wrapper,
.speasyimagegallery-modal-wrapper * {
    cursor: url('/images/kelle-minus.png') 8 8, zoom-out !important;
}
h1 {
    hyphens: auto;
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
}
:target {
    scroll-margin-top: 100px;
}
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a, .sp-megamenu-parent .sp-dropdown li.sp-menu-item span:not(.sp-menu-badge) {
	font-size: 14px;
	line-height: 1.3em;
	display: inline-block;
	padding: 8px 0;
	cursor: pointer;
}
html {
    scroll-behavior: smooth;
}
.sppb-addon-image-layout-content {
	background: #f1f1f1;
	padding: 40px 25px 35px !important;
	width: 100%;
}
.team-card {
    background: #ffffff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 10px 15px rgba(0,0,0,0.10) !important;
    transition: all 0.3s ease;
    height: 100%;
    margin-top: 50px;
}

.team-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 20px rgba(0,0,0,0.14) !important;
}

.team-card img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.team-card .team-card-content {
    padding: 22px 20px 20px;
}

.team-card-name {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #222;
}

.team-card-role {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px 0;
    color: #333;
}

.team-card-meta {
    font-size: 15px;
    color: #777;
    margin: 0;
}
.karriere-hero {
    position: relative;
    height: 520px;
    background: url('/images/karriere.jpg') center right / cover no-repeat;
    display: flex;
    align-items: center;
    padding: 0 8%;
    color: #fff;
}

/* Overlay für Lesbarkeit */
.karriere-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.35) 40%,
        rgba(0,0,0,0.05) 70%
    );
}

/* Content */
.karriere-hero-content {
    position: relative;
    max-width: 520px;
    z-index: 2;
}

.karriere-hero h1 {
    font-size: 42px;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 16px;
}

.karriere-hero p {
    font-size: 18px;
    line-height: 1.6;
    margin-bottom: 24px;
}

/* Button (dein Style bleibt erhalten) */
.karriere-hero .btn-primary {
    padding: 12px 26px;
    font-size: 16px;
}

/*  Mobile Optimierung */
@media (max-width: 768px) {

    .karriere-hero {
        height: 420px;
        padding: 0 20px;
        background-position: 65% center;
    }

    .karriere-hero h1 {
        font-size: 28px;
    }

    .karriere-hero p {
        font-size: 16px;
    }

    .karriere-hero-overlay {
        background: rgba(0,0,0,0.55);
    }
}
.karriere-intro {
    background: #fefefe;
    padding: 80px 0 40px;
}

.karriere-kicker {
    font-size: 15px;
    font-weight: 600;
    color: #d7a300;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.karriere-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0 0 20px 0;
}

.karriere-intro-text {
    max-width: 760px;
}

.karriere-intro-text p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 16px;
}

@media (max-width: 768px) {
    .karriere-intro {
        padding: 60px 0 30px;
    }

    .karriere-title {
        font-size: 30px;
    }

    .karriere-intro-text p {
        font-size: 16px;
    }
}
.job-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 20px 0 50px;
}

.job-card {
    background: #ffffff;
    border-radius: 12px;
    padding: 28px 24px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.job-card h3 {
    font-size: 24px;
    line-height: 1.3;
    margin: 0;
    color: #1f1f1f;
}

@media (max-width: 768px) {
    .job-cards {
        grid-template-columns: 1fr;
    }

    .job-card h3 {
        font-size: 20px;
    }
}
.job-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 10px 0 60px;
}

.job-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 28px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.job-box h3 {
    font-size: 24px;
    margin: 0 0 18px 0;
    color: #1f1f1f;
}

.job-box ul {
    margin: 0;
    padding-left: 20px;
}

.job-box li {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 10px;
}

@media (max-width: 768px) {
    .job-grid {
        grid-template-columns: 1fr;
    }

    .job-box h3 {
        font-size: 21px;
    }

    .job-box li {
        font-size: 16px;
    }
}
.karriere-cta {
    text-align: center;
    padding: 20px 0 80px;
}

.karriere-cta p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 14px;
}

.karriere-cta .btn-primary {
    margin-top: 10px;
    padding: 12px 26px;
}
.azubi-hero {
    position: relative;
    height: 75vh;
    min-height: 520px;
    display: flex;
    align-items: center;
    color: #fff;

    background-image: url('/images/azubi-hero.jpg'); /* dein Bild */
    background-size: cover;
    background-position: 75% center;
}

.azubi-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.65) 0%,
        rgba(0,0,0,0.35) 40%,
        rgba(0,0,0,0.05) 70%
    );
}

.azubi-hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.azubi-hero h1 {
    font-size: 52px;
    line-height: 1.1;
    margin-bottom: 20px;
}

.azubi-hero p {
    font-size: 20px;
    line-height: 1.6;
    margin-bottom: 30px;
}

@media (max-width: 768px) {
    .azubi-hero {
        height: 65vh;
        background-position: 70% center;
    }

    .azubi-hero h1 {
        font-size: 32px;
    }

    .azubi-hero p {
        font-size: 16px;
    }
}
.azubi-intro {
    padding: 80px 0 30px;
}

.azubi-kicker {
    font-size: 15px;
    font-weight: 600;
    color: #d7a300;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.azubi-title {
    font-size: 40px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0 0 20px 0;
}

.azubi-intro-text,
.azubi-video-section {
    max-width: 760px;
}

.azubi-intro-text p,
.azubi-video-text,
.azubi-box p,
.azubi-cta p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 16px;
}

.azubi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin: 30px 0 70px;
}

.azubi-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 30px 28px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
}

.azubi-box h3 {
    font-size: 24px;
    line-height: 1.3;
    margin: 0 0 18px 0;
    color: #1f1f1f;
}

.azubi-box ul {
    margin: 0 0 16px 0;
    padding-left: 20px;
}

.azubi-box li {
    font-size: 17px;
    line-height: 1.7;
    color: #444;
    margin-bottom: 8px;
}

.azubi-section-title {
    font-size: 32px;
    line-height: 1.2;
    font-weight: 700;
    color: #1f1f1f;
    margin: 0 0 16px 0;
}

.azubi-video-section {
    padding: 10px 0 25px;
}

.azubi-cta {
    text-align: center;
    padding: 30px 0 80px;
}

.azubi-cta .btn-primary {
    margin-top: 10px;
    padding: 12px 26px;
}

@media (max-width: 768px) {
    .azubi-intro {
        padding: 60px 0 20px;
    }

    .azubi-title {
        font-size: 30px;
    }

    .azubi-section-title {
        font-size: 24px;
    }

    .azubi-intro-text p,
    .azubi-video-text,
    .azubi-box p,
    .azubi-cta p,
    .azubi-box li {
        font-size: 16px;
    }

    .azubi-grid {
        grid-template-columns: 1fr;
    }
}
.azubi-video {
    margin: 60px 0 80px;
}

.azubi-video-head {
    max-width: 760px;
    margin-bottom: 25px;
}

.azubi-video-head h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #1f1f1f;
}

.azubi-video-head p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
}

.azubi-video-wrapper {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0,0,0,0.15);
}

/* echtes 16:9 Verhältnis */
.azubi-video-wrapper video {
    width: 100%;
    height: auto;
    display: block;
}

/* Mobile */
@media (max-width: 768px) {
    .azubi-video {
        margin: 40px 0 60px;
    }

    .azubi-video-head h2 {
        font-size: 26px;
    }

    .azubi-video-head p {
        font-size: 16px;
    }
}
.azubi-cta-final {
    text-align: center;
    padding: 80px 20px;
    background: #f5f5f5;
    border-radius: 12px;
    margin: 60px 0 0px;
}

.azubi-cta-final h2 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #1f1f1f;
}

.azubi-cta-final p {
    font-size: 18px;
    line-height: 1.7;
    color: #444;
    max-width: 700px;
    margin: 0 auto 30px;
}

.azubi-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.azubi-cta-final .btn {
    padding: 12px 26px;
    font-size: 16px;
}

/* Outline Button passend zum Stil */
.btn-outline {
    background: transparent;
    border: 2px solid #d7a300;
    color: #d7a300;
}

.btn-outline:hover {
    background: #d7a300;
    color: #fff;
}

/* Mobile */
@media (max-width: 768px) {
    .azubi-cta-final {
        padding: 60px 15px;
    }

    .azubi-cta-final h2 {
        font-size: 28px;
    }

    .azubi-cta-final p {
        font-size: 16px;
    }
}
.azubi-cta-final {
    background: linear-gradient(180deg, #f5f5f5 0%, #eeeeee 100%);
}
/* Passwort vergessen */
.login a[href*="remind"],
.login a[href*="reset"] {
    display: none !important;
}

/* Konto erstellen */
.login a[href*="registration"] {
    display: none !important;
}
.login-math-group {
    margin-top: 20px;
    margin-bottom: 20px;
}

.login-math-group label {
    display: block;
    margin-bottom: 10px;
    font-weight: 500;
        font-size: 16px;
    color: #1f1f1f;
}

.login-math-group input {
    width: 100%;
    max-width: 140px;
    height: 46px;
    padding: 10px 14px;
    border: 1px solid #ddd;
    background: #f3f5f7;
    color: #1f1f1f;
    border-radius: 0;
    box-sizing: border-box;
}

.login-math-group input:focus {
    outline: none;
    border-color: #d7a300;
    background: #fff;
}
.hero-title {
  font-size: 42px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 15px;
}

.hero-sub {
  color: #ddd;
  margin-bottom: 25px;
}

.btn-main {
  background: #f2b705;
  color: #000;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 600;
}
.intro-text {
  max-width: 800px;
  font-size: 18px;
  line-height: 1.6;
}
.checklist {
  padding-left: 0;
  list-style: none;
}

.checklist li {
  margin-bottom: 8px;
}
.hero-clp {
  min-height: 70vh;
  display: flex;
  align-items: center;
}
@media (max-width: 768px) {
  .hero-clp {
    min-height: 55vh;
  }
}
.sppb-column{
  padding-left:15px !important;
  padding-right:15px !important;
}