/* ---------- Base (Source Serif 4 everywhere) ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
html:focus-within { scroll-behavior: smooth; }

/* Utility classes based on your template */
/* <weight>: 200–900 */
.source-serif-4-body {
  font-family: "Lato";
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
.source-serif-4-heading {
  font-family: "Lato";
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.source-serif-4-strong {
  font-family: "Lato";
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

body {
  margin: 0;
  line-height: 1.55;
  color: #000;
  background: #ffffff;
  /* Increase base text size */
  font-size: clamp(1.0625rem, 0.7vw + 0.95rem, 1.25rem); /* ≈17–20px */
}
img { max-width: 100%; display: block; height: auto; }

/* Containers */
.container { width: min(100% - 2rem, 850px); margin-inline: auto; }
.container--wide { width: min(100% - 2rem, 1100px); }

/* Spacing */
section, .textbox, .image-box { margin-block: 1.5rem; }
@media (min-width: 768px) { section, .textbox, .image-box { margin-block: 1.75rem; } }

/* ---------- TYPE SCALE (increased) ---------- */
p, li { font-size: 1em; line-height: 1.6; }
strong, b { font-weight: 600; }

/* Headings */
h1.hero__title {
  margin: 0;
  letter-spacing: 0.2px;
  /* Larger H1 */
  font-size: clamp(2rem, 2.2vw + 1.2rem, 3.2rem);
}
h2, h3 { /* general subheadings */
  margin-top: 0;
  letter-spacing: 0.15px;
  font-size: clamp(1.35rem, 1.2vw + 0.8rem, 2rem);
}

/* ---------- SIMPLE HEADER (no triangle) ---------- */
.hero { padding: clamp(1.5rem, 3.5vw, 3rem) 0 clamp(1.25rem, 3vw, 2rem); }
.hero__inner { display: flex; flex-direction: column; gap: 1.1rem; }
.hero__title { color: #000; max-width: min(100%, 1100px); }
.portrait { width: clamp(160px, 24vw, 250px); aspect-ratio: 1/1; border-radius: 50%; overflow: hidden;margin-inline: auto; }
.portrait img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Text boxes & lists ---------- */
.textbox { background: #ffffff; padding: 1.35rem 1.25rem; border-radius: 12px; }
ul { list-style: disc; padding-left: 1.25rem; }
.textbox ul li { margin-bottom: 0.6rem; }

/* Intro transparent (per your earlier request) */
.intro { background: transparent; border-radius: 0; }

/* ---------- Columns ---------- */
.columns { display: grid; gap: 1.25rem; }
.columns--balanced { align-items: stretch; }
@media (min-width: 900px) { .columns { grid-template-columns: 1fr 1fr; } }

.highlight-fullbleed {
  position: relative;
  background: #0c338c;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-radius: 12px;  /* Abgerundete Ecken */
}

@media (max-width: 899px) {
  .highlight-fullbleed {
    margin-left: 1rem;
    margin-right: 1rem;
  }
}

.highlight-content {
  color: #fff;
  background: transparent;
padding: 1.35rem 1.25rem;   
border-radius: 12px;
}

/* Footer */
.site-footer { padding: 3rem 0 2rem; color: #000; font-size: 0.95rem; }
.site-footer .container { text-align: center; }

/* Main content spacing */
.site-content { padding-block: 0.75rem 2.25rem; }
@media (min-width: 900px) { .site-content { padding-block: 1.25rem 3.25rem; } }

/* ---------- LOGO GRID ---------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);  /* 6 Spalten für präzise Positionierung */
  gap: 2rem 1.5rem;
  margin-top: 2rem;
  align-items: center;
  justify-items: center;
}

.logo-item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

/* Erste Zeile: Logo 1, 2, 3 über jeweils 2 Spalten */
.logo-item:nth-child(1) {
  grid-column: 1 / 3;
}

.logo-item:nth-child(2) {
  grid-column: 3 / 5;
}

.logo-item:nth-child(3) {
  grid-column: 5 / 7;
}

/* Zweite Zeile: Logo 4 und 5 in den Lücken (umgekehrtes Dreieck) */
.logo-item:nth-child(4) {
  grid-column: 2 / 4;
}

.logo-item:nth-child(5) {
  grid-column: 4 / 6;
}

.logo-item img {
  max-width: 100%;
  height: auto;
  max-height: 60px;
  width: auto;
  object-fit: contain;
  transition: all 0.3s ease;
}

.logo-item img:hover {
  filter: grayscale(0%);
  opacity: 1;
}

/* Desktop: 5 Logos in einer Zeile, zentriert */
@media (min-width: 900px) {
  .logo-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Reset der Mobile-Positionierung */
  .logo-item:nth-child(1),
  .logo-item:nth-child(2),
  .logo-item:nth-child(3),
  .logo-item:nth-child(4),
  .logo-item:nth-child(5) {
    grid-column: auto;
  }
  
  .logo-item img {
    max-height: 50px;
  }
}