/* ===== FONTS ===== */

@font-face {
  font-family: "ReadexPro";
  src: url("fonts/ReadexPro-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "ReadexPro";
  src: url("fonts/ReadexPro-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ===== ROOT ===== */

:root{
  --bg:#1B3023;
  --fg:rgba(255,255,255,.92);
  --glass:rgba(255,255,255,.035);
  --stroke:rgba(255,255,255,.085);
  --shadow:0 18px 58px rgba(0,0,0,.42);
  --side-space: 56px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;

  background:
    radial-gradient(900px 520px at 50% 14%, rgba(255,255,255,.07), transparent 62%),
    radial-gradient(720px 430px at 18% 74%, rgba(0,0,0,.26), transparent 60%),
    radial-gradient(720px 430px at 82% 74%, rgba(0,0,0,.20), transparent 60%),
    var(--bg);
}

/* ===== HERO ===== */

.hero{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding: 34px var(--side-space);
}

.hero__inner{
  width:100%;
  max-width:1400px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:34px;
}

/* ===== BRAND ===== */

.hero__brand{
  width:100%;
  display:flex;
  justify-content:center;
}

.hero__brand img{
  width:clamp(180px,13vw,240px);
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.34));
}

/* ===== LOGO CARD ===== */

.hero__projects{
  width:100%;
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025));
  border: 1px solid var(--stroke);
  border-radius: 22px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 26px var(--side-space);
}

.logo-row{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  gap: clamp(26px,2vw,40px);
}

.logo-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px;
  border-radius:12px;
  text-decoration:none;
  border:1px solid transparent;
  transition:.22s ease;
}

.logo{
  height: clamp(180px,12vw,240px);
  width:auto;
  opacity:.92;
  filter: drop-shadow(0 12px 22px rgba(0,0,0,.34));
  transition:.22s ease;
}

.logo-link:hover{
  transform:translateY(-2px);
  background:var(--glass);
  border-color:rgba(255,255,255,.10);
}

.logo-link:hover .logo{
  transform:scale(1.035);
  opacity:1;
}

/* Normalisierung */
.logo--bucket   { height: clamp(195px,13vw,260px); }
.logo--marketing{ height: clamp(180px,12vw,240px); }
.logo--opcs     { height: clamp(165px,11vw,215px); transform:translateY(6px); }
.logo--process  { height: clamp(180px,12vw,240px); }
.logo--circle   { height: clamp(180px,12vw,240px); }

/* ===== LEGAL TEXT (LIGHT) ===== */

.legal-note{
  margin-top:10px;
  max-width:980px;
  font-family:"ReadexPro", system-ui, sans-serif;
  font-weight:300;
  font-size:12px;
  line-height:1.65;
  letter-spacing:.015em;
  color:rgba(255,255,255,.46);
  text-align:center;
}

/* ===== PARTNER BLOCK ===== */

.partner-block{
  margin-top:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:26px;
  flex-wrap:wrap;
}

/* HIER Medium verwenden */
.partner-label{
  font-family:"ReadexPro", system-ui, sans-serif;
  font-weight:500;   /* Medium */
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:rgba(255,255,255,.65);
}

.partner-logo{
  height: clamp(48px, 3.8vw, 76px);   /* +15% größer als vorher */
  width: auto;
  object-fit: contain;

  opacity: .78;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.28));
  transition: opacity .22s ease, transform .22s ease;
}

.partner-logo:hover{
  opacity: .95;
  transform: translateY(-1px);
}

.partner-logo:hover{
  opacity:1;
  transform:translateY(-2px);
}

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

@media (max-width:1100px){

  :root{ --side-space:24px; }

  .logo-row{
    flex-wrap:wrap;
    gap:26px;
  }

  .logo{
    height:110px;
  }

  .logo--bucket{ height:120px; }
  .logo--marketing{ height:110px; }
  .logo--opcs{ height:98px; transform:translateY(3px); }
  .logo--process{ height:110px; }
  .logo--circle{ height:110px; }

  .legal-note{
    font-size:11px;
    line-height:1.7;
  }

  .partner-logo{
    height:48px;
  }

  .partner-label{
    font-size:14px;
  }
}