/* ==========================================================================
   Velevetgala – Landingpage (1:1 nach Figma "Homava website design", 1600px)
   ========================================================================== */

:root {
  --font-heading: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-footer-title: "Urbanist", "Hanken Grotesk", Arial, sans-serif;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-page: #f9f9f9;
  --color-muted: #444748;
  --color-brand: #815b3d;
  --color-cream: #fdf6ee;
  --color-rose: #eae5e7;

  /* Figma-Verlauf "G1": #845832 → #a97a56 (52 %) → #845832.
     Figma rechnet t = 0.7697·x/W + 0.3169·y/H − 0.0714 in der Box des Elements;
     die statischen Werte gelten für die Design-Größen, das Skript am Seitenende
     setzt --grad exakt pro Element (beliebige Größe). */
  --grad-btn: linear-gradient(147.75deg, #845832 11.4px, #a97a56 94.7px, #845832 171.6px);
  --grad-circle: linear-gradient(112.38deg, #845832 5.5px, #a97a56 45.5px, #845832 82.4px);
  --grad-card: linear-gradient(123.98deg, #845832 32.6px, #a97a56 270.1px, #845832 489.4px);
  --grad-row: linear-gradient(155.51deg, #845832 19.1px, #a97a56 158.0px, #845832 286.2px);

  --content-max: 1320px;
  --pad-x: max(140px, calc((100% - var(--content-max)) / 2));
  --nav-pad-x: max(120px, calc((100% - 1360px) / 2));
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

body {
  margin: 0;
  background: var(--color-page);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 26px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
.icon { display: block; flex: none; }

/* Typografie ------------------------------------------------------------ */
h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 48px;
  line-height: 58px;
  letter-spacing: -0.4px;
}
h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 24px;
  line-height: 29px;
}
.text-muted { color: var(--color-muted); }

.stack { display: flex; flex-direction: column; }
.stack--16 { gap: 16px; }
.stack--8 { gap: 8px; }

/* Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 9999px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--color-white);
  white-space: nowrap;
  transition: transform .2s ease, filter .2s ease;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn--dark {
  background: var(--color-black);
  padding: 14px 24px;
  line-height: 17px;
}
.btn--brand {
  background: var(--grad, var(--grad-btn));
  padding: 22px 32px;
  gap: 10px;
  line-height: 16px;
}

/* Verlaufs-Rahmen (1px, 30 % Deckkraft) -------------------------------- */
.gborder { position: relative; }
.gborder::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--grad, var(--grad-card));
  opacity: 0.3;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
          mask-composite: exclude;
  pointer-events: none;
}

/* Navigation ------------------------------------------------------------ */
.nav {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  padding: 12px var(--nav-pad-x);
  background: var(--color-page);
}
.nav__left, .nav__links, .nav__right { flex: 1 1 0; min-width: 0; display: flex; align-items: center; }
.nav__links { justify-content: center; gap: 24px; }
.nav__links a {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: var(--color-muted);
  white-space: nowrap;
  transition: color .2s ease;
}
.nav__links a:hover { color: var(--color-black); }
.nav__right { justify-content: flex-end; }

.logo { display: inline-flex; align-items: center; gap: 10.2857px; color: var(--color-black); }
.logo__text {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px;
  line-height: 36px;
  letter-spacing: -1.5429px;
}
.logo--sm { gap: 8px; }
.logo--sm .logo__text { font-size: 28px; line-height: 28px; letter-spacing: -1.2px; }

.nav__toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  border: 0;
  background: transparent;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}
.nav__toggle span { display: block; height: 2px; background: var(--color-black); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }

/* Hero ------------------------------------------------------------------ */
.hero {
  display: flex;
  align-items: center;
  min-height: 750px;
  padding: 150px var(--pad-x);
  background-color: #1a1a1a;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.40) 100%),
    url("assets/hero-bg.webp");
  background-repeat: no-repeat;
  background-size: 100% 100%, cover;
  background-position: 0 0, center;
  color: var(--color-white);
}
.hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 549px; max-width: 100%; }
.hero__content > .stack { align-self: stretch; }
.hero__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 64px;
  line-height: 64px;
  letter-spacing: -1.6px;
}
.hero__text { color: var(--color-white); }

/* Einführung ------------------------------------------------------------ */
.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  padding: 96px var(--pad-x);
  background: var(--color-white);
}
.intro__media {
  position: relative;
  flex: none;
  width: 648px;
  height: 500px;
  border-radius: 24px;
  background: var(--color-rose);
  overflow: hidden;
}
.intro__media img {
  position: absolute;
  left: 38px;
  top: 17px;
  width: 572px;
  height: 466px;
  object-fit: cover;
}
.intro__content { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.intro__content > .stack { align-self: stretch; }

/* Kernkompetenzen (Bento-Grid) ------------------------------------------ */
.services {
  display: flex;
  flex-direction: column;
  gap: 40px;
  padding: 100px var(--pad-x);
  background: var(--color-cream);
}
.services__head { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.pill {
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid var(--color-brand);
  border-radius: 9999px;
  background: var(--color-white);
  color: var(--color-brand);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 12px;
  line-height: 14px;
  text-transform: uppercase;
}

.bento { display: flex; gap: 24px; min-height: 518px; }
.bento__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 24px; }
.card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 25px; /* 24px + 1px Rahmen (bordersTakeSpace in Figma) */
  border-radius: 16px;
  background: var(--color-white);
  min-height: 235px;
}
.card--tall { justify-content: flex-end; min-height: 259px; padding: 24px; }
.card__icon {
  display: flex;
  width: 64px;
  height: 64px;
  padding: 16px;
  border-radius: 50%;
  background: var(--grad, var(--grad-circle));
  box-shadow: inset 0 0 0 1px #cdcdcd;
}
.bento__image {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  border-radius: 16px;
  background: #858585;
  overflow: hidden;
}
.bento__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Bild ist bereits auf den Figma-Ausschnitt (424×518 @2x) zugeschnitten */
}

/* Partnerschaften ------------------------------------------------------- */
.partners { padding: 100px var(--pad-x); background: var(--color-white); }
.partners__inner { display: flex; justify-content: space-between; gap: 60px; }
.partners__intro { display: flex; flex-direction: column; gap: 22.795px; width: 581px; max-width: 100%; }
.partners__list { display: flex; flex-direction: column; gap: 16px; width: 496px; max-width: 100%; flex: none; }
.prow {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 17px;
  border-radius: 16px;
}
.prow::before { background: var(--grad, var(--grad-row)); }
.prow__text { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }

/* Kontakt-CTA ----------------------------------------------------------- */
.cta {
  padding: 96px var(--pad-x);
  background-color: #111;
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), url("assets/cta-bg.webp");
  background-size: cover;
  background-position: center 50%;
  background-repeat: no-repeat;
  color: var(--color-white);
  text-align: center;
}
.cta__inner { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.cta__inner .stack { width: 100%; }
.cta__text {
  font-size: 18px;
  line-height: 29px;
  letter-spacing: 0.18px;
}

/* Footer ---------------------------------------------------------------- */
.footer {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 100px var(--pad-x) 40px;
  background: var(--color-page);
}
.footer__top { display: flex; justify-content: space-between; gap: 60px; }
.footer__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; width: 360px; max-width: 100%; }
.footer__brand > p { align-self: stretch; }
.footer__desc { opacity: 0.8; }
.footer__cols { display: flex; justify-content: space-between; gap: 40px; width: 828px; max-width: 100%; }
.footer__col { display: flex; flex-direction: column; gap: 32px; }
.footer__col--links, .footer__col--partner { width: auto; flex: none; }
.footer__list li { white-space: nowrap; }
.footer__col--service { width: auto; flex: none; }
.contact-list li > a, .contact-list li > span { white-space: nowrap; }
.footer__col h3 {
  font-family: var(--font-footer-title);
  font-weight: 700;
  font-size: 20px;
  line-height: 20px;
}
.footer__list { display: flex; flex-direction: column; gap: 16px; opacity: 0.8; }
.footer__list a:hover, .contact-list a:hover { text-decoration: underline; }
.contact-list { display: flex; flex-direction: column; gap: 20px; }
.contact-list li { display: flex; align-items: center; gap: 20px; min-height: 26px; }
.contact-list li > a, .contact-list li > span { opacity: 0.8; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 29px; /* + 1px Linie = 30px wie in Figma (Innenkontur nimmt keinen Platz ein) */
  border-top: 1px solid rgba(0, 0, 0, 0.2);
}
.footer__copy { line-height: 19px; }
.social { display: flex; align-items: center; gap: 24px; }
.social a { display: block; transition: opacity .2s ease; }
.social a:hover { opacity: 0.7; }

/* Responsive ------------------------------------------------------------ */
@media (max-width: 1200px) {
  .intro { flex-direction: column; align-items: stretch; }
  .intro__media { width: 100%; height: auto; aspect-ratio: 648 / 500; }
  .intro__media img { left: 5.9%; top: 3.4%; width: 88.3%; height: 93.2%; }
  .bento { flex-direction: column; min-height: 0; }
  .bento__image { min-height: 360px; }
  .partners__inner { flex-direction: column; }
  .partners__intro, .partners__list { width: 100%; }
  .footer__top { flex-direction: column; }
  .footer__cols { width: 100%; }
}

@media (max-width: 900px) {
  :root { --pad-x: 24px; --nav-pad-x: 24px; }
  .nav { flex-wrap: wrap; }
  .nav__left, .nav__right { flex: 1 1 auto; }
  .nav__right { gap: 12px; }
  .nav__toggle { display: flex; }
  .nav__links {
    display: none;
    order: 1;
    flex: 1 1 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0 8px;
  }
  .nav-open .nav__links { display: flex; }
  .nav-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-open .nav__toggle span:nth-child(2) { opacity: 0; }
  .nav-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .hero { min-height: 0; padding-top: 96px; padding-bottom: 96px; }
  .hero__title { font-size: 44px; line-height: 46px; letter-spacing: -1px; }
  h2 { font-size: 36px; line-height: 44px; }
  .intro, .services, .partners, .cta { padding-top: 64px; padding-bottom: 64px; }
  .footer { padding-top: 64px; }
  .footer__cols { flex-wrap: wrap; }
  .footer__col { width: 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
  .btn--dark { display: none; }
  .hero__title { font-size: 36px; line-height: 40px; }
  .btn--brand { width: 100%; padding-left: 20px; padding-right: 20px; }
  .card--tall, .card { min-height: 0; }
}