:root {
  /* Entflechtete Abstände */
  --section-pad: clamp(2rem, 8vw, 4rem);     /* Abstand zwischen Sektionen */
  --inner-gap: clamp(1rem, 3vw, 2rem);       /* Titel ↔ Text innerhalb einer Sektion */
  --logo-gap: clamp(2rem, 7vw, 6rem);        /* Abstand zwischen Logo-Blöcken */

  --logo-h: clamp(34px, 3.2vw, 46px);
  --logo-maxw: 420px;
}

/* =============================================== */
/* ABOUT SECTIONS */
/* =============================================== */

.intro,
.about_section {
  padding-block: var(--section-pad);
}

/* ======================================= */
/* Erfahrung Block */
/* ======================================= */

.intro_cv{
  margin-top: 3rem; /* Abstand zum Text oben */
}

.intro_subtitle {
  margin: 0rem;
}

.cv_items{
  margin-top: 0rem;
}

.cv_item + .cv_item{
  margin-top: 2rem; /* Abstand zwischen Jobs */
}

/* Jahr = gleiche Logik wie "mehr Infos" */
.cv_year{
  font-weight: 700;
 
}

/* Text darunter */
.cv_item p{
  margin: 0;
  max-width: 45ch;
}
.link {
text-decoration: underline;
  text-underline-offset: 4px;
  }

/* =============================================== */
/* LAYOUT GRID */
/* =============================================== */


.intro_inner,
.about_inner {
  max-width: var(--container);
  margin: 0 auto;
  padding-inline: var(--page-padding);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;

  /* WICHTIG: nicht mehr "gap" für alles */
  column-gap: var(--section-pad);
  row-gap: var(--inner-gap);

  align-items: start;
}


/* =============================================== */
/* TYPOGRAPHY */
/* =============================================== */


.intro_title,
.about_title {
  margin: 0;
}

.intro_text,
.about_text,
.about_inner > p {
  grid-column: 2;
  margin: 0;
  max-width: 55ch;
}

.intro_text p,
.about_text p {
  margin: 0;
}

.intro_text p + p,
.about_text p + p {
  margin-top: 1rem;
}



/* ================================
   MOBILE
   ================================ */

@media (max-width: 900px){

  .contact_box{
    grid-column: 1;
    margin-top: 1rem;
    max-width: none;
  }

}


/* =============================================== */
/* LOGOS */
/* =============================================== */


.about_logos {
  grid-column: 2 / 4;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--logo-gap);
  row-gap: 2rem;
  align-items: start;
}



.logo_card {
  display: grid;
  gap: 0.8rem;
  align-content: start;
  justify-items: start;
  text-decoration: none;
  color: inherit;
}

.logo_card img {
  height: var(--logo-h);
  width: auto;
  max-width: min(100%, var(--logo-maxw));
  display: block;
}

.logo_desc {
  margin: 0;
  font-size: var(--s);
  line-height: 1.4;
  max-width: 32ch;
}


/* =============================================== */
/* RESPONSIVE */
/* =============================================== */

/* ================================================= */
/* =================== BREAKPOINTS ================= */
/* ================================================= */
/* ---------- TABLET (≤900px) ---------- */
@media (max-width: 900px) {
  .intro_inner,
  .about_inner {
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: var(--inner-gap);
  }

  .intro_text,
  .about_text,
  .about_inner > p {
    grid-column: 1;
    max-width: none;
  }

  .about_logos{
    margin-top: clamp(1.4rem, 5vw, 2.6rem);
  }

  /* Logos: GARANTIERT nebeneinander */
  .about_logos {
    grid-column: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--logo-gap);
    row-gap: 1.5rem;
  }

  /* optional: verhindert zu breite Logos auf sehr kleinen Screens */
  .logo_card img {
    max-width: 100%;
  }
}