/*   HERO SECTION  *****************/
/*   HIRING CARDS  *****************/
/*   HOW IT WORKS  *****************/
/*   RECRUITING TRENDS CIRCLES  ****/
/*   GROWTH CONNECTIONG PEOPLE  ****/
/*   TRUST SECTION  ****************/
/*   FOOTER  ***********************/
/*   MOBILE-NAV  *******************/
/*   NAVIGATION  *******************/

/**************************/
/* LARGE SCREEN */
/**************************/

@media (min-width: 99em) and (max-width: 250em) {
  .heading-secondary {
    color: yellow;
  }

  /*   HERO SECTION  *****************/

  .section-hero {
    min-height: 1180px;
  }

  .btn,
  .btn:link,
  .btn:visited {
    padding: 2rem 3.8rem;
    font-size: 2.2rem;
  }

  .hero-text-box {
    margin-top: 3rem;
  }

  .heading-primary {
    margin-bottom: 6rem;
  }

  .hero {
    gap: 0rem;
  }

  .hero-image {
    margin-top: -1.8rem; /* leicht hochziehen */
  }

  .image-wrapper {
    max-width: 130rem; /* nicht einschränken */
    text-align: center;
  }
  /*   HIRING CARDS  *****************/
  .card-container {
    gap: 2rem;
    padding: 0 5rem;
    margin-bottom: 2rem;
  }

  .card {
    flex: 1 1 360px;
    max-width: 435px;
  }

  /*   HOW IT WORKS  *****************/

  /*   GROWTH CONNECTIONG PEOPLE  ****/
  .section-growth {
    max-height: 800px;
  }
  /*   TRUST SECTION  ****************/
  .grid--4-cols {
    grid-template-columns: repeat(4, 1fr);
    gap: 3em;
  }
  /*   FOOTER  ***********************/
  /*   MOBILE-NAV  *******************/
  /*   NAVIGATION  *******************/
}

/**************************/
/* LAPTOP Green */
/**************************/

@media (max-width: 98em) {
  /*  .circle {
    display: none;
  } */

  /*   HERO SECTION  *****************/

  /*   HIRING CARDS  *****************/
  .card-container {
    margin: 0 3em 0 3em;
    margin-bottom: 2rem;
  }

  /*   HOW IT WORKS  *****************/
  /*   GROWTH CONNECTIONG PEOPLE  ****/
  .section-growth {
    max-height: 700px;
  }

  /*   TRUST SECTION  ****************/
  .feature-title {
    font-size: 1.6rem;
  }

  .feature-text {
    font-size: 1.6rem;
  }

  /*   FOOTER  ***********************/
  /*   MOBILE-NAV  *******************/
  /*   NAVIGATION  *******************/
}

/**************************/
/* TABLETS RED  */
/**************************/

@media (max-width: 71em) {
  /* Basis-Font-Scaling */
  :root {
    font-size: 70%;
  }

  .heading-secondary {
    color: red;
  }

  .container {
    padding: 0 4rem;
  }

  /*   HERO SECTION  *****************/
  .heading-primary {
    font-size: 8em;
  }
  /*   HIRING CARDS  *****************/
  /*   HOW IT WORKS  *****************/
  .grid:not(:last-child) {
    margin-bottom: 6rem;
  }
  .step-2 .step-img-box.orangen {
    margin-top: 2rem;
  }

  .step-number {
    margin-top: 4.8rem;
  }

  .delivered-techs {
    margin-left: 4rem;
  }
  /*   TRENDS RECRUITING CIRCLES ************/
  .awards-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem; /* Abstand zwischen Kreisen */
    padding: 0rem; /* Abstand zum Rand */
  }

  /*   GROWTH CONNECTIONG PEOPLE  ****/
  .section-growth {
    max-height: 600px;
  }
  /*   TRUST SECTION  ****************/
  .consultation-2 {
    margin-top: -4rem;
  }
  /*   FOOTER  ***********************/

  .grid--footer {
    grid-template-columns: repeat(6, 1fr);
  }

  .logo-col,
  .address-col {
    grid-column: span 3;
  }

  .address-col {
    grid-column: 5;
  }
  /*   MOBILE-NAV  *******************/
  /*   NAVIGATION  *******************/
  .main-nav-list {
    gap: 0.5rem;
  }

  .nav-col {
    grid-row: 1;
    grid-column: span 2;
  }
}

/**************************/
/* SMALL SCREEN Orange */
/* (max-width: 880px) */
/**************************/

@media (max-width: 55em) {
  :root {
    font-size: 90%;
  }

  .heading-secondary {
    color: orange;
  }

  /*   HERO SECTION  *****************/
  .btn.btn--outline {
    margin-bottom: 11rem;
    padding: 1.2rem 1.8rem;
  }

  .heading-primary {
    font-size: 6.8rem;
  }

  /*   HIRING CARDS  *****************/

  .card-container {
    flex-direction: column; /* Stapelt die Karten untereinander */
    align-items: center; /* Zentriert sie optional horizontal */
  }

  .card {
    flex: 1 1 100%; /* nimmt volle Breite des Containers */
    max-width: 430px; /* oder auf 100% setzen, wenn gewünscht */
  }

  .video-container {
    /* Container nimmt jetzt fast die volle Breite ein */
    width: 160%;
    max-width: 1200px; /* Optional: eine Obergrenze */
    margin: 0 auto; /* Zentriert den Container */
    margin-left: -18%;
  }

  .card-1,
  .card-2,
  .card-3 {
    min-height: 570px;
    max-height: 570px;
    overflow: hidden;
  }

  .person-3 {
    margin-top: -30%;
  }

  .person-1 {
    margin-top: -7%;
  }
  /*   HOW IT WORKS  *****************/

  /* Grid auf eine Spalte umlenken und Items mittig platzieren */
  .grid--2-cols {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .section-how .grid--2-cols {
    /* pro Schritt-Container */
    display: flex;
    flex-direction: column-reverse;
    align-items: center; /* horizontale Zentrierung */
    gap: 1rem; /* Abstand Bild ↔ Text */
  }

  .how-it-works {
    margin-bottom: 1em;
  }
  .step-number {
    font-size: 600%;
  }

  .heading-tertiary {
    font-size: 300%;
    font-weight: 400;
    margin-bottom: 0.2em;
  }

  .step-img-box {
    margin-bottom: 4em;
  }

  /* Speziell Step 2 als Flex-Container in eine Spalte umwandeln */
  .step-2 {
    display: flex;
    flex-direction: column;
    align-items: center; /* horizontales Zentrieren der Kinder */
    text-align: left; /* Text in der Box mittig ausrichten */
  }

  .step-2 .step-img-box {
    order: 2;
    margin: 0 auto; /* abs.zentrieren, falls nötig */
  }

  .step-img-box {
    transform: translateY(2.4rem);
  }

  .step-text-box {
    text-align: left;
  }

  /* Abstand zwischen Text- und Bild-Box */
  .step-2 .step-text-box-orange,
  .step-2 .step-img-box {
    margin-bottom: 2rem;
  }

  .delivered-techs {
    display: flex;
    align-items: center;
    justify-content: center; /* <— von flex-start auf center */
    gap: 1.6rem;
    margin-top: 14rem;
    margin-bottom: 8rem;
    width: 100%;
  }

  /*   RECRUITING TRENDS CIRCLES  ****/
  /*   GROWTH CONNECTIONG PEOPLE  ****/
  .section-growth {
    max-height: 700px;
  }

  .subheading-team {
    font-size: 2.2rem;
    letter-spacing: 0px;
  }

  .subheading-team-2 {
    font-size: 3.2rem;
    letter-spacing: 0px;
  }

  .heading-h3-team {
    font-size: 1.7rem;
    letter-spacing: 0px;
  }
  /*   TRUST SECTION  ****************/
  .grid--4-cols {
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
  }

  .consultation-2 {
    margin-top: -3rem;
  }
  /*   FOOTER  ***********************/
  /*   MOBILE-NAV  *******************/

  .btn-mobile-nav {
    display: block;
    z-index: 9999;
  }

  .main-nav {
    z-index: 9999;
    background-color: rgba(255, 255, 255, 0.951);
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    transform: translateX(100%);

    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s ease-in;

    /*     1. step to hide the element
 */
    opacity: 0;

    /*     2. make it unacessible to mous and keyboard
 */

    pointer-events: none;

    /*     3. hide it from screen readers
 */
    visibility: hidden;
  }

  .nav-open .main-nav {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
    transform: translateX(0);
  }

  .nav-open .icon-mobile-nav[name="close-outline"] {
    display: block;
  }

  .nav-open .icon-mobile-nav[name="menu-outline"] {
    display: none;
  }

  .main-nav-list {
    flex-direction: column;
    gap: 4.8rem;
  }

  .main-nav-link:link,
  .main-nav-link:visited {
    font-size: 3rem;
  }
  /*   NAVIGATION  *******************/

  .nav-col {
    grid-row: 1;
    grid-column: span 2;
  }
}

/**************************/
/* VERY SMALL SCREEN Violet*/
/**************************/

/* Mobile  */
@media (max-width: 34em) {
  .heading-secondary {
    color: violet;
  }

  /*   HERO SECTION  *****************/

  .btn.btn--outline {
    margin-bottom: 18rem;
    padding: 1.2rem 2rem;
    font-size: 1.6rem;
  }

  .custom-arrow {
    display: none;
  }

  .heading-primary {
    font-size: 4.8rem;
  }
  /*   HIRING CARDS  *****************/

  .video-container {
    /* Container nimmt jetzt fast die volle Breite ein */
    width: 160%;
    max-width: 1200px; /* Optional: eine Obergrenze */
    margin: 0 auto; /* Zentriert den Container */
    margin-left: -20%;
    margin-top: -5%;
  }

  .card-1,
  .card-2,
  .card-3 {
    min-height: 500px;
    max-height: 500px;
    overflow: hidden;
    margin-bottom: 1.5em;
  }

  .person-3 {
    margin-top: -30%;
  }

  .person-1 {
    margin-top: -7%;
  }

  /*   HOW IT WORKS  *****************/
  /*   RECRUITING TRENDS CIRCLES  ****/

  .awards-grid {
    display: flex;
    flex-wrap: wrap; /* Umbruch erlauben */
    justify-content: space-between; /* Verteilt den Platz */
    gap: 0.5rem; /* Abstand zwischen den Kreisen */
    padding: 0.5rem;
  }

  .award-circle {
    /* Jeweils genau die Hälfte minus den Abstand */
    flex: 0 0 calc(50% - 0.25rem);
    aspect-ratio: 1; /* Kreis bleibt quadratisch */
    width: auto; /* Höhe wird durch aspect-ratio gesteuert */
    height: auto;
    margin-bottom: 1.8rem;
  }

  .award-circle:last-child {
    display: none;
    margin: 0 auto; /* horizontal zentrieren */
    /* Basis beibehalten, damit er nicht größer wird */
    /* flex: 0 0 calc(50% - 0.25rem); */
  }

  /*   GROWTH CONNECTIONG PEOPLE  ****/
  /*   TRUST SECTION  ****************/
  .grid--4-cols {
    grid-template-columns: repeat(1, 1fr);
    gap: 3em;
  }
}

/*   FOOTER  ***********************/
/*   MOBILE-NAV  *******************/
/*   NAVIGATION  *******************/

/* Mobile  */
@media (max-width: 29em) {
  .heading-secondary {
    color: blue;
  }

  /*   HERO SECTION  *****************/
  .btn.btn--outline {
    margin-bottom: 20rem;
    padding: 1rem 1.6rem;
  }

  .heading-primary {
    font-size: 4.2rem;
  }
  /*   HIRING CARDS  *****************/

  /* 1) Karte nicht mehr künstlich hochziehen */
  .card,
  .card-1,
  .card-2,
  .card-3 {
    min-height: 0;
    max-height: none;
  }

  /* 2) Bild nimmt 40% der neuen Kartenhöhe ein */
  .card-img {
    height: 350px;
    object-fit: cover;
    transform: translateY(1rem);
  }

  /* 3) Wave unten flacher machen */
  .card-wave {
    height: 120px; /* statt 300px */
  }
  .card-wave svg {
    top: -30px; /* Wave leicht nach oben schieben */
    height: 160px; /* proportional zur container-Höhe */
  }

  /* 4) Textbereich komprimieren */
  .card-text {
    padding: 1.5rem 1rem; /* weniger Innenabstand */
    height: auto; /* passt sich dem übrigen Raum an */
  }

  /* Container etwas breiter ziehen und zentrieren */
  .video-container {
    width: 100%; /* 90 % der Elternelement-Breite */
    height: 355px;
    max-width: 800px; /* aber nie breiter als 800px */
    margin: 0 auto; /* horizontal zentrieren */
    transform: translateX(-3rem);
    transform: translateY(-3rem);
  }

  /* 2a) Kajak‐Bild in Karte 1 etwas weiter nach unten schieben */
  .card-1 .card-img {
    /* evtl. statt 1rem hier 2rem oder px-Wert ausprobieren */
    transform: translateY(2rem);
  }

  /* Karte 1: Bild größer machen */
  .card-1 .card-img {
    /* Erhöhe die feste Höhe */
    height: 370px; /* statt 300px */
    object-fit: cover; /* damit’s nicht verzerrt */
    object-position: center; /* Bildzentrum bleibt mittig */
    /* Optional: leicht nach unten verschieben */
    transform: translateY(-4rem) scale(1.1);

    transform-origin: top center;
  }

  /* Karte 3: Container-Höhe vergrößern */
  .card-3 .img-container {
    height: 350px; /* statt 82% nun eine feste Höhe */
  }

  /* 2b) Letztes Bild in Karte 3 etwas höher machen */
  .card-3 .card-img {
    /* Erhöhe die feste Höhe */
    height: 300px; /* statt 300px */
    object-fit: cover; /* damit’s nicht verzerrt */
    object-position: center; /* Bildzentrum bleibt mittig */
    /* Optional: leicht nach unten verschieben */
    transform: translateY(-4rem) scale(1.1);
    transform-origin: top center;
  }

  .card-3-text {
    margin-top: 2rem; /* rutscht 4rem tiefer */
  }

  /*   HOW IT WORKS  *****************/
  .section-how {
    height: 40%;
    padding: 0;
  }

  .step-img-box {
    transform: scale(0.7); /* 80% der normalen Größe */
    transform-origin: center center; /* Skalierung vom Mittelpunkt aus */
  }

  .step-number {
    margin-top: 0rem;
  }
  .delivered-techs {
    margin: 6rem auto; /* block zentrieren */
    display: block;
    text-align: left; /* Inhalt linksbündig */
    width: fit-content; /* oder eine feste Breite, z. B. 200px */
  }
  /*   RECRUITING TRENDS CIRCLES  ****/
  .awards-section {
    display: none;
  }
  /*   GROWTH CONNECTIONG PEOPLE  ****/
  .section-growth {
    display: none;
  }

  .section-connecting-people {
    display: none;
  }

  /*   TRUST SECTION  ****************/
  /*   FOOTER  ***********************/

  /* --- NEU für den Footer --- */
  .footer .grid--footer {
    display: grid; /* sicherstellen, dass noch Grid gilt */
    grid-template-columns: 1fr; /* eine Spalte */
    row-gap: 5rem; /* Abstand zwischen den Reihen */
    justify-items: center; /* Zentrierung horizontal */
    text-align: center; /* Text zentriert */
  }
  .footer .grid--footer > * {
    grid-column: 1 / -1 !important; /* jede Zelle über volle Breite */
    grid-row: auto !important; /* jeweils eigene Zeile */
    margin-bottom: 2rem;
  }
  /* Falls du nur die Nav-Cols resetten willst: */
  .footer .nav-col {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }

  .footer-heading {
    margin-bottom: 2rem;
  }
}