/* =========================================================
   Unternehmen (/unternehmen/) – Werte aus _original/css/post-669.css
   Wiederverwendet aus base.css: Hero, Panel, CTA-Box, Zeitstrahl, Kontakt-Boxen, Buttons
   Komponenten: components/tabs.css (Prozess-Tabs), components/carousel.css (Kundenstimmen)
   ========================================================= */

/* ---------- Hero (#ea803c8) ---------- */
.u-hero-inner { gap: 0; }
.u-hero-title { flex-shrink: 0; }
.u-hero-text {
  width: 669px;
  max-width: 100%;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-white);
}
.u-hero-btn { flex-shrink: 0; margin-top: 20px; }
.u-btn-outline {
  padding: 15px 30px;
  border: 2px solid var(--c-white);
  border-radius: 5px;
  background: transparent;
  color: var(--c-white);
  text-transform: uppercase;
}
.u-btn-outline:hover, .u-btn-outline:focus-visible {
  background: var(--c-secondary);
  border-color: var(--c-secondary);
  color: var(--c-white);
}

/* ---------- Intro: Bild + Text (#5eaff51) ---------- */
.u-intro { padding-block: 80px; }
.u-intro-panel {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 50px 30px;
}
.u-intro-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  min-width: 0;
}
.u-intro-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center center;
  border-radius: 10px;
}
.u-intro-text {
  width: 514px;
  max-width: 100%;
  margin-bottom: 40px;
  padding: 24px;
  font-family: var(--f-sys);   /* Original: Source Sans Pro (lädt nicht) */
  font-size: 24px;
  font-weight: 400;            /* Original 500 – der Ersatz-Font (Helvetica/Arial) zeigt dort Normalschnitt */
  line-height: 1.2;
  letter-spacing: 1px;
  color: #000;
}
.u-intro-text h2 { margin: .5rem 0 1rem; font-size: 2rem; font-weight: 500; line-height: 1.2; }
.u-intro-text p { margin-bottom: .9rem; }

/* ---------- Warum internationale Fachkräfte (#190a8d3) ---------- */
.u-why { padding: 0 15px 80px; background: var(--c-white); }
.u-why-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px 0;
}
.u-why-title {
  font-family: var(--f-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
  color: #000;
}
.u-why-sub {
  width: 65%;
  max-width: 100%;
  padding-top: 5px;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #000;
}
.u-why-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(1, 1fr);
  gap: 20px;
  width: 100%;
  padding-top: 20px;
}
.u-why-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  min-width: 0;
  padding: 30px;
  border-radius: 10px;
  background: var(--c-panel);
}
.u-why-box { text-align: start; }
.u-why-img { display: inline-block; width: 20%; margin: 0; }
.u-why-img img { border-radius: 10px; }
.u-why-card-title {
  margin: .5rem 0 5px;
  font-family: var(--f-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.u-why-card-text {
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}

/* ---------- Rekrutierungsprozess: Tabs (#87c127a) ---------- */
.u-steps { padding-block: 50px; }
.u-steps-panel {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 50px 20px;
}
.u-steps-title { width: 690px; max-width: 100%; align-self: center; }
.u-tabs {
  --tabs-gap: 20px;
  --tabs-title-gap: 10px;
  --tabs-justify: center;
  --tabs-title-font: var(--f-heading);
  --tabs-title-size: 30px;
  --tabs-title-weight: 700;
  --tabs-title-transform: capitalize;
  --tabs-title-lh: 1em;
  --tabs-title-padding: 15px 30px;
  --tabs-title-radius: 10px;
  --tabs-title-color: #000;
  --tabs-title-color-hover: var(--c-primary);
  --tabs-title-color-active: var(--c-primary);
  --tabs-title-bg: var(--c-white);
  --tabs-title-bg-hover: var(--c-white);
  --tabs-title-bg-active: var(--c-white);
}
.u-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
  width: 90%;
  min-width: 0;
}
.u-step-box {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  min-width: 0;
  text-align: start;
}
.u-step-img { display: inline-block; width: 75%; margin: 0 20px 0 0; }
.u-step-img img { border-radius: 10px; }
.u-step-content { width: 100%; }
.u-step-title {
  margin: .5rem 0 10px;
  font-family: var(--f-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.u-step-text {
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}

/* ---------- Karten-Raster: Warum mit Morecruit (#a583457) + Branchen (#804555f) ---------- */
.u-benefits { padding: 30px 15px 80px; }
.u-benefits-inner { display: flex; flex-direction: column; gap: 30px; }
.u-benefits-title {
  margin-bottom: 20px;
  font-family: var(--f-heading);
  font-size: 49px;
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
  color: #000;
}
.u-grid {
  display: grid;
  grid-template-rows: repeat(1, 1fr);
  gap: 30px;
  width: 100%;
}
.u-grid--2 { grid-template-columns: repeat(2, 1fr); }
.u-grid--3 { grid-template-columns: repeat(3, 1fr); }
.u-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  padding: 30px;
  border-radius: 10px;
  background: var(--c-panel);
}
.u-card--center { justify-content: center; }
.u-card-title {
  width: 362px;
  max-width: 100%;
  align-self: center;
  font-family: var(--f-heading);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2em;
  text-align: center;
  color: #000;
}
.u-card-text {
  width: 300px;
  max-width: 100%;
  align-self: center;
  font-family: var(--f-text);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #000;
}
.u-card-text p { margin-bottom: .9rem; }
/* Einzelwerte der Text-Widgets: Außenabstand des Widget-Containers ≙ Innenabstand; unten fällt er im
   Original mit dem p-Abstand (.9rem) zusammen → dort nur der p-Abstand */
.u-card-text--m10 { width: 305px; padding: 10px; }
.u-card-text--m5 { padding: 5px 5px 0; }
.u-card-text--m9 { padding: 9px 9px 0; }
.u-card-text--p17 { padding: 17px; }
.u-card-media { text-align: center; }
.u-card-media img { display: inline-block; vertical-align: middle; max-width: 100%; }
.u-card-icon { width: 20%; }
.u-card-photo { width: 50%; }

.u-branches { padding: 0 15px 80px; }
.u-branches-inner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
}
.u-branches-title {
  font-family: var(--f-heading);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.2em;
  color: #000;
}
.u-branches-sub {
  margin-top: -20px;
  font-family: var(--f-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}
.u-branches-btn { margin-top: 30px; text-align: center; }
.u-btn-red {
  padding: 15px 30px;
  border-radius: 5px;
  background: var(--c-secondary);
  color: var(--c-white);
  text-transform: uppercase;
}
.u-btn-red:hover, .u-btn-red:focus-visible { background: var(--c-primary); color: var(--c-white); }

/* ---------- Ablauf (#57aa75f) – Zeitstrahl aus base.css ---------- */
.u-process { padding-bottom: 80px; }
/* Tablet: Schritt 5 (#85541b7) hat keinen eigenen Abstand → Elementor-Standard 20px zwischen Nummer und Karte */
@media (min-width: 768px) and (max-width: 1024px) {
  .u-process .tl-item:nth-child(5) { gap: 20px; }
}

/* ---------- Kundenstimmen (#8724d49) ---------- */
.u-testimonials { padding: 70px 0; background: var(--c-white); }
.u-testimonials-inner { display: flex; flex-direction: column; gap: 10px; }
.u-testimonials-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
}
.u-testimonials-title {
  width: 738px;
  max-width: 100%;
  margin-bottom: calc(.5rem + 20px);
  font-family: var(--f-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1em;
  text-transform: capitalize;
  text-align: center;
  color: #000;
}
.u-carousel .carousel-btn--prev { left: 10px; }
.u-carousel .carousel-btn--next { right: 10px; }
.u-carousel {
  --carousel-per-view: 2;
  --carousel-gap: 10px;
  --carousel-width: 95%;
  --carousel-btn-size: 17px;
  --carousel-btn-color: var(--c-secondary);
}
.u-testi-slide { padding: 40px; border-radius: 3px; background: #f9f9f9; }
.u-testi { margin: 0; text-align: left; }
.u-testi-text {
  font-family: var(--f-text);
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #000;
}
.u-testi-footer { display: flex; align-items: center; justify-content: flex-start; margin-top: 25px; }
.u-testi-cite { display: flex; flex-direction: column; font-size: 14px; font-style: normal; line-height: 1.5; }
.u-testi-name {
  font-family: var(--f-text);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--c-secondary);
}
.u-testimonials-cta {
  font-family: var(--f-text);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  color: #000;
}

/* ---------- Kontakt & Beratung (#f037967) ---------- */
.u-contact-inner { display: flex; flex-direction: column; gap: 50px; }
.u-contact-title {
  font-family: var(--f-heading);
  font-size: 36px;
  font-weight: 600;
  line-height: 1.1em;
  text-transform: capitalize;
  text-align: center;
  color: var(--c-primary);
}
.u-contact-row { display: flex; flex-direction: row; gap: 40px; }
.u-contact .contact-box { width: 543px; max-width: 100%; }

/* =========================================================
   TABLET ≤ 1024px
   ========================================================= */
@media (max-width: 1024px) {
  .u-hero-text { line-height: 1.5; }

  .u-intro-text { width: 576px; align-self: center; }

  .u-why { padding: 50px 15px; }
  .u-why-sub { width: 644px; line-height: 1.5; }
  .u-why-img { width: 55%; }
  .u-why-card-title { font-size: 16px; line-height: 1.5; }
  .u-why-card-text { line-height: 1.5; }

  .u-tabs { --tabs-gap: 15px; --tabs-title-size: 24px; }
  .u-step-title { font-size: 16px; line-height: 1.5; }
  .u-step-text { line-height: 1.5; }

  .u-card-text { line-height: 1.5; }
  .u-grid--branch { gap: 20px; }
  .u-grid--3.u-grid--branch .u-card { padding: 15px; }
  .u-card-title--tablet-18 { font-size: 18px; }
  .u-branches-sub { font-size: 16px; line-height: 1.5; }

  .u-testimonials { padding: 50px 20px; }
  .u-testimonials-title { width: 100%; font-size: 25px; }
  .u-carousel { --carousel-per-view: 1; }
  .u-testi-text { font-size: 16px; line-height: 1.5; }
  .u-testi-name { font-size: 16px; line-height: 1.5; }
  .u-testimonials-cta { font-size: 16px; line-height: 1.5; }

  .u-contact-inner { gap: 20px; }
  .u-contact-title { font-size: 25px; }
  .u-contact .contact-text { line-height: 1.5; }
}

/* =========================================================
   MOBIL ≤ 767px
   ========================================================= */
@media (max-width: 767px) {
  .hero.u-hero::before { opacity: .7; }
  .u-hero-inner { gap: 20px; }
  .u-hero-title { text-align: start; }
  .u-hero-text { font-size: 14px; line-height: 1.4; }
  .u-hero-btn { width: 100%; }
  .u-btn-outline { display: flex; width: 100%; }

  .u-intro { padding-block: 50px; }
  .u-intro-panel { flex-wrap: wrap; padding: 0; }
  .u-intro-col { width: 100%; }
  .u-intro-img { height: 300px; }
  .u-intro-text { width: 400px; padding: 0; font-size: 16px; }
  .u-intro-text > :last-child { margin-bottom: 0; }   /* p-Abstand fällt im Original mit den 40px zusammen */

  .u-why-title { font-size: 26px; line-height: 1.1em; }
  .u-why-sub { width: 100%; line-height: 1.4; }
  .u-why-grid { grid-template-columns: repeat(1, 1fr); }
  .u-why-img { width: 20%; }
  .u-why-card-title, .u-why-card-text { line-height: 1.4; }

  .u-tabs { --tabs-title-size: 22px; --tabs-title-padding: 10px 20px; }
  .u-tabs .tabs-tab { flex-shrink: 0; }
  .u-step { flex-wrap: wrap; width: 100%; }
  .u-step-box { display: block; }
  .u-step-img { width: 100%; margin: 0; }   /* Elementor: „figure{margin:0}“ schlägt hier die 20px des Widgets */
  .u-step-title, .u-step-text { line-height: 1.4; }

  .u-benefits-title { font-size: 24px; line-height: 1.3; }
  .u-grid--2, .u-grid--3 { grid-template-columns: repeat(1, 1fr); }
  .u-card-title { font-size: 18px; line-height: 1.1em; }
  .u-card-text { line-height: 1.4; }
  .u-card-text--mobile-np p { margin-bottom: 0; }
  .u-card-icon { width: auto; height: 80px; }

  .u-cta .cta-box { padding: 15px; }
  .u-cta .cta-title { font-size: 20px; line-height: 1.1em; }

  .u-branches-title { font-size: 24px; line-height: 1.1em; text-align: center; }
  .u-branches-sub { line-height: 1.4; text-align: center; }
  .u-btn-red { display: flex; width: 100%; }

  .u-testimonials-title { font-size: 20px; }
  .u-testi-text, .u-testi-name { line-height: 1.4; }
  .u-testimonials-cta { font-size: 18px; line-height: 1.4; }

  .u-contact-title { font-size: 24px; }
  .u-contact-row { flex-wrap: wrap; }
  .u-contact .contact-text { line-height: 1.4; }
}