/* =========================================
   Basis / Reset
   (Fonts werden im HTML geladen: Space Grotesk + Inter)
========================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }

:root{
  /* Farben */
  --svg-yellow:#ffd700;
  --svg-dark:#333333;
  --svg-gray:#f4f4f4;
  --svg-bg:#f9f9f9;
  --svg-text:#333333;
  --svg-muted:#666a73;

  /* Radii / Shadow */
  --radius-sm:.5rem;
  --radius-md:.75rem;
  --radius-lg:1rem;

  --shadow-1:0 4px 10px rgba(0,0,0,.1);
  --shadow-2:0 6px 15px rgba(0,0,0,.15);

  --focus-ring:0 0 0 3px rgba(255,215,0,.5);
}

body{
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  line-height: 1.6;
  background: var(--svg-bg);
  color: var(--svg-text);
}

h1,h2,h3,h4,.section-title{font-family:"Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;text-decoration:none;}
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible {outline:none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm);}
.sr-only{position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* =========================================
   Sections – Full width & ohne Gutter
========================================= */
section{padding:60px 0;}      /* kein seitlicher Gutter */
.section{
  width:100%;
  max-width:none;
  margin:0;
  text-align:center;
}
.section h2{font-size:2rem;margin-bottom:20px;color:var(--svg-yellow);}
.section p {font-size:1rem;margin-bottom:20px;color:var(--svg-text);}

/* =========================================
   Header & Navigation
========================================= */
.header{background:#fff;padding:15px 20px;display:flex;justify-content:center;box-shadow:0 1px 0 rgba(0,0,0,.06);}
.header-container{display:flex;justify-content:space-between;align-items:center;max-width:1200px;width:100%;}
.logo img{height:40px;}
.hamburger-menu{display:none;background:transparent;border:0;cursor:pointer;border-radius:8px;padding:6px;}

.header nav ul{list-style:none;display:flex;align-items:center;gap:16px;}
.header nav ul li a{font-weight:600;padding:6px 8px;border-radius:var(--radius-sm);transition:color .2s, background .2s;}
.header nav ul li a:hover,.header nav ul li a:focus-visible{color:var(--svg-dark);background:var(--svg-gray);}

.desktop-nav{display:flex;}
.mobile-nav{display:none;position:absolute;top:64px;left:0;width:100%;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.12);z-index:100;}
.mobile-nav ul{padding:16px;display:flex;flex-direction:column;gap:10px;}
.mobile-nav ul li a{display:block;padding:10px 12px;border-radius:var(--radius-sm);}

/* =========================================
   Buttons
========================================= */
.btn-primary{
  background:var(--svg-yellow);color:#000;border:2px solid #fff;
  padding:10px 16px;border-radius:10px;font-weight:700;
  display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;
  transition:transform .08s ease, background-color .2s; box-shadow: var(--shadow-1);
}
.btn-primary:hover{background:#e6be00;}
.btn-primary:active{transform:translateY(1px);}

.btn-ghost{
  background:transparent;color:var(--svg-yellow);border:1.5px solid var(--svg-yellow);
  padding:9px 14px;border-radius:10px;font-weight:600;display:inline-flex;gap:.5rem;align-items:center;cursor:pointer;
}
.btn-ghost:hover,.btn-ghost:focus-visible{background:rgba(255,215,0,.1);}

/* =========================================
   Hero
========================================= */
#hero{
  background:
    linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)),
    url("assets/images/Svenja_header_kl.jpg") no-repeat right center / cover;
  color:#fff; display:flex; align-items:center; justify-content:flex-end; padding:250px 20px; /* 20px ok im Hero */
}
#hero .hero-content{width:42%;max-width:640px;text-align:left;}
#hero h1{font-size:2.5rem;margin-bottom:20px;}
#hero h2{font-size:1.4rem;margin-bottom:18px;color:#fff;}
#hero .btn-primary{border:2px solid #fff;}

@media (max-width:1200px){ #hero{background-position:75% center;} }
@media (max-width:992px){
  #hero{background-position:70% center;padding:210px 20px;}
  #hero .hero-content{width:55%;margin-right:5%;}
}
@media (max-width:768px){
  #hero{background-position:65% center;padding:180px 20px;justify-content:center;}
  #hero .hero-content{width:90%;margin:0 auto;text-align:center;}
}
@media (max-width:480px){ #hero{background-position:60% center;padding:150px 16px;} }

/* =========================================
   Intro – Video Slider
========================================= */
.video-slider{position:relative;width:100%;margin:24px 0 0;overflow:hidden;outline:none;}
.video-slider:focus-visible{box-shadow:var(--focus-ring);border-radius:12px;}
.video-track{display:flex;transition:transform .4s ease;will-change:transform;touch-action:pan-y;user-select:none;-webkit-user-drag:none;}
.video-slide{flex:0 0 100%;padding:0;} /* edge-to-edge */
.video-slide video{width:100%;aspect-ratio:16/9;border-radius:12px;background:#000;box-shadow:var(--shadow-1);object-fit:cover;}

.video-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  height:48px;width:48px;border-radius:50%;border:none;background:rgba(0,0,0,.4);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background .2s, transform .15s;z-index:2;
}
.video-nav.prev{left:6px;} .video-nav.next{right:6px;}
.video-nav:hover{background:rgba(0,0,0,.55);} .video-nav:active{transform:translateY(-50%) scale(.98);}
.video-nav:disabled{opacity:.4;cursor:not-allowed;}
@media (prefers-reduced-motion:reduce){ .video-track{transition:none;} }

/* Portrait-Videos: kein schwarzer Rand */
.video-slide.portrait { aspect-ratio: 9 / 16; display:flex;align-items:center;justify-content:center; padding:0; }
.video-slide.portrait > video { width:100%!important; height:100%!important; object-fit:cover; border-radius:12px; box-shadow:var(--shadow-1); background:transparent; }

/* =========================================
   Werte
========================================= */
#werte{background:#595959;padding:60px 0;max-width:100%;text-align:center;}
.section-title{font-size:2rem;color:var(--svg-yellow);margin-bottom:10px;}
.section-subtitle{font-size:1rem;color:#fff!important;margin-bottom:40px;}

.werte-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:40px;max-width:1200px;margin:0 auto;}
.wert-item{background:#fff;border-radius:10px;box-shadow:var(--shadow-1);padding:20px;text-align:center;transition:transform .2s, box-shadow .2s;}
.wert-item:hover{transform:translateY(-3px);box-shadow:var(--shadow-2);}
.wert-icon{font-size:40px;color:var(--svg-yellow);}
.wert-content h3{font-size:1.5rem;color:var(--svg-text);margin-bottom:10px;}
.wert-content p{font-size:1rem;color:var(--svg-muted);line-height:1.6;}

/* =========================================
   Feedback (Azubi)
========================================= */
#feedback,#feedback-ausbilder{background:var(--svg-gray);padding:40px 0;text-align:center;}
#feedback h2,#feedback-ausbilder h2{font-size:2rem;color:var(--svg-yellow);margin-bottom:40px;}
.feedback-slider{display:flex;flex-wrap:wrap;gap:30px;justify-content:center;padding:20px;}
.feedback-item{flex:1 1 calc(33.33% - 30px);max-width:calc(33.33% - 30px);display:flex;flex-direction:row;align-items:center;text-align:left;}
.feedback-item img{max-width:150px;border-radius:10px;object-fit:cover;}
.speech-bubble{
  position:relative;padding:1.5rem;border:4px solid var(--svg-yellow);
  border-radius:20px;background:#fff;max-width:600px;width:100%;
  box-shadow:var(--shadow-1);text-align:left;margin-left:20px;
}
.speech-bubble:before{
  content:'';position:absolute;width:0;height:0;top:18px;left:-20px;
  border-width:10px 20px 10px 0;border-style:solid;border-color:transparent var(--svg-yellow) transparent transparent;
}
.speech-bubble:after{
  content:'';position:absolute;width:0;height:0;top:20px;left:-16px;
  border-width:8px 16px 8px 0;border-style:solid;border-color:transparent #fff transparent transparent;
}
.speech-bubble h3{font-size:1.2rem;color:var(--svg-yellow);margin-top:10px;}
.speech-bubble p{font-size:1rem;color:var(--svg-muted);line-height:1.6;margin-bottom:10px;}

/* =========================================
   Benefits
========================================= */
#benefits{background:var(--svg-yellow);color:#fff;padding:60px 0;text-align:center;}
#benefits h2{color:white;}
.benefits-container{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;}
.benefit-item{
  flex:1 1 calc(25% - 20px);max-width:calc(25% - 20px);
  background:#fff;color:var(--svg-text);padding:15px;border-radius:10px;
  box-shadow:var(--shadow-1);text-align:center;transition:transform .2s, box-shadow .2s;
}
.benefit-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.benefit-item img{width:50px;height:50px;margin:0 auto 10px;object-fit:contain;}
.benefit-item h3{font-size:1rem;color:var(--svg-yellow);margin-bottom:5px;}
.benefit-item p{font-size:.95rem;color:var(--svg-text);}

/* =========================================
   Ausbildungsinhalte (Blocks)
========================================= */
.ausbildung-container{display:flex;gap:20px;justify-content:center;flex-wrap:wrap;margin-top:20px;}
.ausbildung-block{
  flex:1 1 calc(33.33% - 20px);max-width:calc(33.33% - 20px);
  background:#fff;padding:20px;border-radius:10px;box-shadow:var(--shadow-1);text-align:left;
}
.ausbildung-block h3{font-size:1.5rem;color:var(--svg-yellow);margin-bottom:10px;}
.ausbildung-block ul{list-style:disc;margin-left:20px;padding-left:20px;}
.ausbildung-block ul li{
  margin-bottom:10px;line-height:1.6;color:var(--svg-text);font-size:1rem;
  opacity:0;transform:translateY(20px);transition:opacity 1.2s ease-out, transform 1.2s ease-out;
}
.ausbildung-block ul li.visible{opacity:1;transform:translateY(0);}

/* =========================================
   Recruiting-Prozess (gelber Block)
========================================= */
#recruiting{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:60px 0;background:var(--svg-yellow);max-width:100%;
}
#recruiting h2{font-size:2rem;color:#000;margin-bottom:40px;}
.recruiting-steps{display:flex;justify-content:space-between;flex-wrap:wrap;gap:30px;width:100%;max-width:1200px;}
.step{text-align:center;flex:1 1 calc(20% - 30px);margin:0 auto;}
.step-number{display:block;font-size:1rem;font-weight:bold;color:#000;margin-bottom:10px;}
.step .material-icons{font-size:48px;color:#000;margin-bottom:10px;}
.step p{font-size:1rem;color:#000;margin-top:5px;line-height:1.5;}

/* =========================================
   Kurzbewerbung – moderner Card-Stepper
========================================= */

#kurzbewerbung{
  background: var(--svg-bg);
}

#kurzbewerbung h2{
  margin-bottom: 6px;
}

#kurzbewerbung .section-subtitle{
  color: var(--svg-muted);
  max-width: 520px;
  margin: 4px auto 0;
}

/* Wrapper für die Cards */
#kurzbewerbung .questions{
  max-width: 760px;
  margin: 32px auto 0;
  text-align: left;
}

/* Einzelne Frage als „Card“ */
#kurzbewerbung .question{
  position: relative;
  background: #fff;
  border-radius: 24px;
  padding: 26px 26px 24px;
  margin: 0;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  border: 1px solid rgba(226,232,240,.9);
  overflow: hidden;
}

/* Schritt-Label oben rechts */
#kurzbewerbung .question::before{
  content: "Schritt " attr(data-step) " von 5";
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: .75rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--svg-muted);
}

/* Progress-Balken unten */
#kurzbewerbung .question::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: var(--step-progress, 20%);
  background: linear-gradient(90deg, var(--svg-yellow), #ffe87a);
}

/* Fortschritt pro Step */
#kurzbewerbung .question[data-step="1"]{ --step-progress: 20%; }
#kurzbewerbung .question[data-step="2"]{ --step-progress: 40%; }
#kurzbewerbung .question[data-step="3"]{ --step-progress: 60%; }
#kurzbewerbung .question[data-step="4"]{ --step-progress: 80%; }
#kurzbewerbung .question[data-step="5"]{ --step-progress: 100%; }

/* Fragetext */
#kurzbewerbung .question p{
  margin-bottom: 14px;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--svg-text);
}

#kurzbewerbung .question p strong{
  color: var(--svg-yellow);
  margin-right: 6px;
}

/* Textfeld-Row */
#kurzbewerbung .field-row{
  display: flex;
  gap: 10px;
  align-items: center;
}

#kurzbewerbung .field-row input[type="text"]{
  flex: 1;
}

/* Inputs allgemein */
#kurzbewerbung input[type="text"],
#kurzbewerbung input[type="email"],
#kurzbewerbung input[type="tel"]{
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1.5px solid #e2e8f0;
  background: #f9fafb;
  color: var(--svg-text);
}

#kurzbewerbung input::placeholder{
  color: #9aa1ac;
}

/* Buttons in den Fragen */
#kurzbewerbung .btn-group{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 10px;
}

#kurzbewerbung .cta-row{
  margin-top: 16px;
}

/* Radio-Grid -> moderne „Chips“ */
#kurzbewerbung .choice-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  border: 0;
  padding: 0;
  margin: 14px 0 4px;
}

#kurzbewerbung .choice{
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  user-select: none;
  background: #f9fafb;
  border: 1.5px solid #e2e8f0;
  transition:
    border-color .15s,
    box-shadow .15s,
    background-color .15s,
    transform .1s;
}

#kurzbewerbung .choice input{
  accent-color: var(--svg-yellow);
}

#kurzbewerbung .choice:hover{
  border-color: #cbd5e1;
  box-shadow: 0 0 0 3px rgba(226,232,240,.8);
  background: #fff;
}

/* aktiver/ausgewählter Chip */
#kurzbewerbung .choice input:checked + span{
  font-weight: 600;
  color: var(--svg-dark);
}

/* Kontaktblock ans Design angleichen */
#kurzbewerbung .contact-block{
  background: #fff;
  border-radius: 24px;
  border: 1px solid rgba(226,232,240,.9);
  padding: 22px 24px 24px;
  box-shadow: 0 18px 45px rgba(15,23,42,.08);
  margin-top: 24px;
}

#kurzbewerbung .contact-block h3{
  margin-bottom: 12px;
}

/* Grid für Kontaktdaten */
#kurzbewerbung .grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

#kurzbewerbung .grid-2 .full{
  grid-column: 1 / -1;
}

#kurzbewerbung .contact-block label span{
  display: block;
  font-weight: 600;
  margin-bottom: 6px;
}

#kurzbewerbung .form-hint{
  font-size: .9rem;
  color: var(--svg-muted);
  margin: 10px 0 14px;
}

/* Mobile Anpassungen */
@media (max-width: 768px){
  #kurzbewerbung .questions{
    margin-top: 24px;
    padding-inline: 16px;
  }

  #kurzbewerbung .question,
  #kurzbewerbung .contact-block{
    padding: 20px 18px 20px;
    border-radius: 18px;
    box-shadow: var(--shadow-1);
  }

  #kurzbewerbung .question::before{
    top: 12px;
    right: 18px;
  }

  #kurzbewerbung .grid-2{
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Geschäftsfelder (+ moved About)
========================================= */
#business-areas{background:var(--svg-gray);padding:60px 0;text-align:center;max-width:100%;}
#business-areas h2{font-size:2rem;color:var(--svg-yellow);margin-bottom:40px;}
.moved-about{background:#fff;border-radius:12px;box-shadow:var(--shadow-1);margin:0 auto 30px;padding:20px;text-align:left;max-width:1200px;}
.moved-about h2{color:var(--svg-yellow);margin-bottom:10px;}
.moved-about p{color:var(--svg-text);}

.business-container{
  display:grid;grid-template-columns:repeat(3,1fr);
  grid-template-rows:auto;gap:20px;justify-items:stretch;
}
.business-item{
  background:#fff;padding:15px;border-radius:10px;box-shadow:var(--shadow-1);
  text-align:center;transition:transform .2s, box-shadow .2s; width:100%;
  display:flex;flex-direction:column;align-items:center;
}
.business-item:hover{transform:translateY(-2px);box-shadow:var(--shadow-2);}
.business-item img{height:60px;margin:0 auto 10px;object-fit:contain;}
.business-item h3{font-size:1.2rem;color:var(--svg-text);margin-top:5px;}
.business-item p{font-size:.95rem;color:var(--svg-muted);line-height:1.5;margin-top:auto;}

/* Hauptkachel „Versicherungen“: Schrift vollständig weiß */
.business-item.main-business{
  grid-column:span 3;
  background:var(--svg-yellow);
  color:#fff;                 /* Basistexte weiß */
  width:100%;
}
.business-item.main-business img{
  height:80px;
  filter:brightness(0) invert(1);  /* Icon weiß */
}
.business-item.main-business h3,
.business-item.main-business p{
  color:#fff;                 /* Überschrift + Text weiß */
}

/* =========================================
   Bewerbung / CTA
========================================= */
#application{background:var(--svg-yellow);color:#000;padding:60px 0;margin:0;text-align:center;}
#application h2{color:white;margin-bottom:10px;}

/* =========================================
   Footer
========================================= */
footer{background:var(--svg-dark);color:#fff;text-align:center;padding:20px 0;font-size:.9rem;}
.footer-links{margin-top:10px;}
.footer-links a{
  color:var(--svg-yellow);text-decoration:none;margin:0 5px;font-weight:600;transition:color .2s, background .2s;
  padding:2px 4px;border-radius:var(--radius-sm);
}
.footer-links a:hover,.footer-links a:focus-visible{color:#fff;background:rgba(255,215,0,.15);}
.footer-links span{color:#fff;margin:0 5px;}

/* =========================================
   Material Icons
========================================= */
.material-icons{font-size:60px;color:var(--svg-yellow);margin-right:8px;}

/* =========================================
   Responsive
========================================= */
@media (max-width:1024px){
  .header-container{padding:0 10px;}
  .benefits-container{flex-wrap:wrap;}
  .benefit-item{flex:1 1 calc(33.33% - 20px);max-width:calc(33.33% - 20px);}
  .feedback-slider{gap:20px;}
  .recruiting-steps{gap:20px;flex-wrap:wrap;}
  .step{width:calc(50% - 20px);}
  .business-container{gap:20px;}
}
@media (max-width:860px){
  .desktop-nav{display:none;}
  .hamburger-menu{display:inline-flex;align-items:center;justify-content:center;}
  .mobile-nav.active{display:flex;}
}
@media (max-width:768px){
  body{overflow-x:hidden;}
  .werte-grid{grid-template-columns:1fr;}
  .wert-content p{font-size:.95rem;}

  .ausbildung-container{flex-direction:column;gap:15px;}
  .ausbildung-block{width:100%;max-width:100%;padding:15px;box-shadow:none;border:1px solid #ddd;}
  .ausbildung-block h3{text-align:center;font-size:1.2rem;margin-bottom:15px;}
  .ausbildung-block ul li{font-size:.95rem;line-height:1.5;}

  .benefit-item{flex:1 1 calc(100% - 10px);max-width:calc(100% - 10px);}

  .feedback-slider{flex-direction:column;gap:20px;align-items:center;}
  .feedback-item{flex:1 1 100%;max-width:100%;text-align:center;flex-direction:column;}
  .feedback-item img{max-width:120px;margin:0 auto 10px;}
  .speech-bubble{max-width:90%;margin:0 auto;padding:1rem;font-size:.9rem;line-height:1.4;}
  .speech-bubble:before,.speech-bubble:after{top:10px;left:-10px;border-width:8px 16px 8px 0;}

  .business-container{display:flex;flex-direction:column;gap:20px;align-items:center;}
  .business-item img{height:50px;}
  .business-item.main-business{padding:20px;}
  .business-item.main-business img{height:60px;}

  .grid-2{grid-template-columns:1fr;}
}
@media (max-width:480px){
  .benefit-item{flex:1 1 100%;}
}

/* =========================================
   Partner-Logos – einheitliche Größe & saubere Reihe
========================================= */
.partner-logos{
  display:flex; align-items:center; justify-content:center;
  gap:32px; flex-wrap:wrap; margin-top:24px;
}
.partner-logos img{
  max-height:64px; width:auto; max-width:220px; object-fit:contain; display:block;
}
@media (max-width:640px){
  .partner-logos{gap:20px;}
  .partner-logos img{max-height:48px; max-width:180px;}
}

/* --- Videos kompakt & 9:16 beibehalten --- */
#videos { 
  padding: 40px 0;                 /* etwas kompakter als 60px */
}

#videos h2 {
  margin-bottom: 10px;
}

/* Slider selbst schmal zentriert */
#videos .video-slider {
  width: min(90vw, 420px);         /* max. ~420px auf Desktop, mobil bis 90vw */
  max-width: 420px;
  margin: 12px auto 0;
}

/* keine Innenabstände, volle Kante im kleinen Rahmen */
#videos .video-slide { 
  padding: 0;
}

/* Portrait-Frames strikt im 9:16-Verhältnis, ohne Balken */
#videos .video-slide.portrait {
  aspect-ratio: 9 / 16;
  display: flex;
  align-items: center;
  justify-content: center;
}

#videos .video-slide.portrait > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;               /* füllt den Frame, kein Rand */
  border-radius: 16px;
  box-shadow: var(--shadow-1);
  background: transparent;
}

/* kleinere Pfeile, damit’s zum kompakten Frame passt */
#videos .video-nav {
  height: 36px; 
  width: 36px;
}
#videos .video-nav.prev { left: 4px; }
#videos .video-nav.next { right: 4px; }

@media (max-width: 400px){
  #videos .video-slider { width: 86vw; }  /* auf sehr kleinen Screens minimal schmaler */
}
section:last-of-type {
  padding-bottom: 0;
}
.video-nav-icons{
  font-size: 20px;
  margin-right: 0px;
}
/* =========================================
   Goethe-Zitat (Intro Callout)
========================================= */
.quote-callout{
  max-width: 720px;
  margin: 24px auto 0;
  padding: 16px 20px;
  border-radius: var(--radius-lg);
  border-left: 4px solid var(--svg-yellow);
  background: #fff;
  box-shadow: var(--shadow-1);
  text-align: left;
  font-size: .95rem;
  color: var(--svg-muted);
}

.quote-callout strong{
  display: block;
  font-family: "Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-weight: 600;
  color: var(--svg-text);
  margin-bottom: 4px;
}

.quote-callout small{
  display: block;
  margin-top: 4px;
  font-size: .85rem;
  color: var(--svg-muted);
}

@media (max-width: 768px){
  .quote-callout{
    margin-top: 16px;
    padding: 14px 16px;
  }
}
/* Social-Leiste unter den Videos – größer & invertiert */
#videos .social-bar{
  margin-top: 24px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--shadow-1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

#videos .social-label{
  font-size: 1rem;
  font-weight: 600;
  color: var(--svg-dark);
}

#videos .social-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: var(--svg-dark);          /* invertiert: dunkler Kreis */
  box-shadow: var(--shadow-2);
  transition: transform .15s ease,
              box-shadow .15s ease,
              background-color .2s ease,
              color .2s ease;
}

#videos .social-link i{
  font-size: 20px;
  color: #fff;                          /* Icon hell */
}

#videos .social-link:hover,
#videos .social-link:focus-visible{
  transform: translateY(-1px);
  box-shadow: var(--shadow-2);
  background: var(--svg-yellow);        /* Hover: SVG-Gelb */
}

#videos .social-link:hover i,
#videos .social-link:focus-visible i{
  color: #000;                          /* Icon wird schwarz auf Gelb */
}

/* auf sehr kleinen Screens Bar automatisch umbrechen */
@media (max-width: 480px){
  #videos .social-bar{
    padding-inline: 14px;
    gap: 12px;
  }
}

/* Recruiting-Prozess – gelber Abschnitt im SVG-Look */
#recruiting{
  background: var(--svg-yellow);
  color: #000;
  padding: 60px 0;
  text-align: center;
}
#recruiting h2{ color:#000; margin-bottom: 36px; }

/* Steps im Recruiting */
#recruiting .recruiting-steps{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;
  width:100%; max-width:1200px; margin:0 auto;
}
#recruiting .step{ text-align:center; flex:1 1 calc(20% - 30px); }
#recruiting .step-number{ display:block; font-weight:700; margin-bottom:6px; }
#recruiting .step .material-icons{ font-size:44px; color:#000; margin-bottom:6px; }
#recruiting .step p{ color:#000; line-height:1.45; }

/* Jana-Bubble im Recruiting */
#recruiting .feedback-slider{ display:flex; justify-content:center; }
#recruiting .feedback-item{
  display:flex; align-items:center; gap:16px;
  max-width: 860px; margin: 18px auto 0; text-align:left;
}
#recruiting .feedback-item img{
  width:200px; height:200px; object-fit:cover; border-radius:16px; box-shadow:var(--shadow-2);
}
#recruiting .speech-bubble{
  margin-left:0; background:#fff; border:0; border-radius:18px;
  padding:18px 22px; box-shadow:0 10px 24px rgba(0,0,0,.18);
}
#recruiting .speech-bubble:before{ display:none; }
#recruiting .speech-bubble:after{
  content:""; position:absolute; left:-12px; top:26px;
  border-width:10px 12px 10px 0; border-style:solid; border-color:transparent #fff transparent transparent;
}
#recruiting .speech-bubble p{ margin:0 0 6px; color:#2d3748; }
#recruiting .speech-bubble h3{ margin:0; color:var(--svg-yellow); font-weight:700; }

@media (max-width: 640px){
  #recruiting .feedback-item{ flex-direction:column; align-items:stretch; }
  #recruiting .feedback-item img{ align-self:center; width:96px; height:96px; }
  #recruiting .speech-bubble{ padding:16px 18px; }
  #recruiting .speech-bubble:after{
    left:28px; top:-10px; transform:rotate(90deg);
    border-width:12px 10px 0 10px; border-color:#fff transparent transparent transparent;
  }
}