/* ==========================================================================
   PEJANO BAUUNTERNEHMUNG GMBH – Responsive
   responsive.css – Alle Breakpoints zentral
   Version: 2.1 | April 2026
   ========================================================================== */

/* ==========================================================================
   0. CONTAINER-PADDING – Mobile Override
   ========================================================================== */

@media (max-width: 768px) {
  :root {
    --container-padding: 24px;
  }
}

/* ==========================================================================
   1. NAVIGATION – Responsive
   ========================================================================== */

@media (max-width: 1024px) {
  .nav__inner {
    padding: 0 24px;
  }
}

@media (max-width: 768px) {
  /* Mobile: Overlay slided von rechts statt Fullscreen-Fade */
  .nav-overlay {
    opacity: 1;
    visibility: hidden;
    transform: translateX(100%);
    transition: transform 0.5s var(--ease-expo),
                visibility 0s 0.5s;
  }

  .nav-overlay.is-open {
    transform: translateX(0);
    visibility: visible;
    transition: transform 0.5s var(--ease-expo),
                visibility 0s 0s;
  }

  /* Overlay scrollbar auf Mobile */
  .nav-overlay__content {
    flex-direction: column;
    padding: 120px 24px 40px;
    gap: 40px;
    justify-content: flex-start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .nav-overlay__links a {
    font-size: clamp(32px, 8vw, 48px);
  }

  .nav-overlay__meta {
    min-width: unset;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* Touch-Target: min 44px für CTA im Overlay */
  .nav-overlay__cta {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Touch-Target: Kontakt-Links */
  .nav-overlay__contact a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

@media (max-width: 640px) {
  .nav__inner {
    padding: 0 24px;
  }

  .nav-overlay__content {
    padding: 100px 24px 32px;
  }

  .nav-overlay__links a {
    font-size: clamp(28px, 9vw, 40px);
  }
}

/* ==========================================================================
   2. FOOTER – Responsive
   ========================================================================== */

/* Tablet: 2 Spalten, Brand volle Breite */
@media (max-width: 1024px) {
  .footer-a {
    padding: 56px var(--container-padding);
  }

  .footer-a__grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }

  .footer-a__brand {
    grid-column: 1 / -1;
    margin-bottom: 8px;
  }

  .footer-a__brand-text {
    max-width: 100%;
  }
}

/* Mobile L: Leistungen ausblenden (zu viele Links), 2 Spalten für Rest */
@media (max-width: 768px) {
  .footer-a {
    padding: 48px 24px;
  }

  .footer-a__grid {
    grid-template-columns: 1fr 1fr;
    gap: 32px;
  }

  /* Leistungen-Spalte ausblenden — 8 Links sind auf Mobile zu viel */
  .footer-a__grid > div:nth-child(2) {
    display: none;
  }

  .footer-a__brand {
    grid-column: 1 / -1;
  }

  .footer-a__brand img {
    height: 28px;
  }

  .footer-a__social {
    margin-top: 16px;
  }
}

/* Mobile: 1 Spalte, alles untereinander */
@media (max-width: 640px) {
  .footer-a {
    padding: 40px 24px;
  }

  .footer-a__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .footer-a__brand {
    grid-column: auto;
    text-align: center;
  }

  .footer-a__brand img {
    margin-inline: auto;
    margin-bottom: 16px;
  }

  .footer-a__brand-text {
    max-width: 100%;
    text-align: center;
  }

  .footer-a__social {
    justify-content: center;
  }

  .footer-a__col-title {
    margin-bottom: 16px;
  }

  .footer-a__links {
    gap: 12px;
  }

  .footer-a__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .footer-a__bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 16px;
    padding-top: 24px;
  }

  .footer-a__legal {
    gap: 16px;
    flex-wrap: wrap;
    justify-content: center;
  }

  .footer-a__legal a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Mobile S: noch kompakter */
@media (max-width: 375px) {
  .footer-a {
    padding: 32px 16px;
  }

  .footer-a__bottom {
    font-size: 10px;
  }

  .footer-a__legal {
    gap: 12px;
  }
}

/* ==========================================================================
   3. STARTSEITE (index) – Responsive
   ========================================================================== */

@media (max-width: 1440px) {
  .hero-home-a__content,
  .logos-bar__inner,
  .about-a__inner,
  .services-c__inner,
  .projects-a__inner,
  .numbers-c__inner,
  .statement-c__inner,
  .cta-c__inner {
    padding-inline: 40px;
  }
}

@media (max-width: 1024px) {
  .hero-home-a__content { padding: 0 40px; }
  .hero-home-a__bottom { flex-direction: column; align-items: flex-start; gap: 40px; }
  .hero-home-a__stats { gap: 32px; }
  .about-a__inner { grid-template-columns: 1fr; gap: 40px; }
  .services-c__header { padding-right: 0; }
  .projects-a__grid { grid-template-columns: 1fr 1fr; }
  .numbers-c__inner { grid-template-columns: 1fr; gap: 40px; }
  .numbers-c__grid { grid-template-columns: repeat(2, 1fr); }
  .cta-c__inner { grid-template-columns: 1fr; gap: 60px; }

  /* Statement: Padding für schmalere Viewports */
  .statement-c__inner { padding-inline: 40px; }
}

@media (max-width: 768px) {
  /* --- HERO --- */
  .hero-home-a__headline { font-size: 48px; letter-spacing: -1.5px; }
  .hero-home-a__content { padding: 0 24px; }
  .hero-home-a__stats { flex-direction: column; gap: 24px; }
  .hero-home-a__stat { text-align: left; }
  .hero-home-a { padding-bottom: 60px; }

  /* --- LOGOS-BAR: 3 pro Reihe --- */
  .logos-bar__track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    justify-items: center;
  }
  .logos-bar__item {
    min-width: unset;
    width: 100%;
  }

  /* --- MARQUEE --- */
  .marquee-c__item { font-size: 32px; gap: 32px; padding: 0 32px; }

  /* --- SERVICES CARDS --- */
  .services-c__card { flex: 0 0 300px; width: 300px; }

  /* --- REFERENZEN SHOWCASE --- */
  .proj-showcase { height: 80vh; }
  .proj-content {
    padding-right: var(--container-padding);
    bottom: clamp(4rem, 6vw, 5rem);
  }
  .proj-vignette {
    background: linear-gradient(to right,
      rgba(10,10,10,0.95) 0%, rgba(10,10,10,0.85) 30%,
      rgba(10,10,10,0.6) 55%, rgba(10,10,10,0.2) 80%);
  }
  .proj-name { font-size: clamp(28px, 6vw, 40px); }
  .proj-desc { font-size: 14px; max-width: 32ch; }
  /* Next-Bar: Touch-Target min 44px */
  .proj-next-bar__inner { padding-block: 14px; min-height: 44px; }

  /* --- NUMBERS --- */
  .numbers-c__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }

  /* --- STATEMENT --- */
  .statement-c__inner { padding-inline: 24px; }
  .statement-c__text { font-size: 26px; }

  /* --- CTA FORM --- */
  .cta-c__form-row { grid-template-columns: 1fr; }

  /* --- PROJECTS GRID (falls vorhanden) --- */
  .projects-a__grid { grid-template-columns: 1fr; }

  /* --- IMGBREAK --- */
  .imgbreak-a { height: 50vh; }
}

@media (max-width: 640px) {
  /* --- HERO --- */
  .hero-home-a__headline { font-size: 44px; letter-spacing: -1px; }
  .hero-home-a__content { padding: 0 24px; }
  .hero-home-a__stat-num { font-size: 36px; }
  .hero-home-a__desc { font-size: 14px; }

  /* --- LOGOS-BAR: 3 pro Reihe bleibt, Bilder etwas kleiner --- */
  .logos-bar__track {
    gap: 12px;
  }
  .logos-bar__item img {
    width: 80px;
    height: 32px;
  }

  /* --- MARQUEE --- */
  .marquee-c__item { font-size: 28px; gap: 32px; padding: 0 32px; }

  /* --- ABOUT --- */
  .about-a__features { grid-template-columns: 1fr; }

  /* --- SERVICES CARDS --- */
  .services-c__card { flex: 0 0 280px; width: 280px; }

  /* --- REFERENZEN SHOWCASE --- */
  .proj-showcase { height: 75vh; min-height: 480px; }
  .proj-content { bottom: clamp(3.5rem, 5vw, 4rem); }
  .proj-name { font-size: clamp(24px, 7vw, 36px); }
  .proj-desc { font-size: 13px; max-width: 28ch; line-height: 1.6; }
  .proj-link { font-size: 13px; min-height: 44px; display: inline-flex; align-items: center; }

  /* --- NUMBERS: bleibt 2x2 --- */
  .numbers-c__grid { grid-template-columns: 1fr 1fr; }
  .numbers-c__val { font-size: 36px; }

  /* --- STATEMENT --- */
  .statement-c__inner { padding-inline: 24px; flex-direction: column; gap: 24px; }
  .statement-c__accent { width: 40px; height: 3px; }
  .statement-c__text { font-size: 22px; }

  /* --- IMGBREAK --- */
  .imgbreak-a { height: 40vh; }
  .imgbreak-a__overlay { padding: 24px; }
}

@media (max-width: 375px) {
  /* --- HERO: Kleinster Breakpoint --- */
  .hero-home-a__headline {
    font-size: 36px;
    letter-spacing: -0.5px;
  }
  .hero-home-a__headline .sub {
    font-size: 8px;
    letter-spacing: 3px;
    margin-top: 24px;
  }
  .hero-home-a__stat-num { font-size: 32px; }
  .hero-home-a__desc { font-size: 13px; line-height: 1.8; }
  .hero-home-a { padding-bottom: 48px; min-height: 100svh; }

  /* --- LOGOS-BAR: 2 pro Reihe auf ganz kleinen Screens --- */
  .logos-bar__track {
    grid-template-columns: repeat(2, 1fr);
  }
  .logos-bar { padding: 32px 0; }
  .logos-bar__label { margin-bottom: 24px; }

  /* --- MARQUEE --- */
  .marquee-c__item { font-size: 22px; gap: 24px; padding: 0 24px; }

  /* --- SERVICES CARDS --- */
  .services-c__card { flex: 0 0 260px; width: 260px; }
  .services-c__card-img { height: 180px; }
  .services-c__card-title { font-size: 18px; }
  .services-c__card-desc { font-size: 14px; }

  /* --- REFERENZEN SHOWCASE --- */
  .proj-showcase { height: 70vh; min-height: 440px; }
  .proj-name { font-size: 24px; }
  .proj-desc { font-size: 13px; max-width: 100%; }
  .proj-tag { font-size: 8px; letter-spacing: 3px; }
  .proj-vignette {
    background: linear-gradient(to right,
      rgba(10,10,10,0.97) 0%, rgba(10,10,10,0.9) 35%,
      rgba(10,10,10,0.7) 60%, rgba(10,10,10,0.3) 85%);
  }

  /* --- NUMBERS: 1 Spalte auf 375px --- */
  .numbers-c__grid { grid-template-columns: 1fr; gap: 24px; }
  .numbers-c__item { text-align: left; }
  .numbers-c__val { font-size: 32px; }

  /* --- CTA FORM: Padding reduzieren --- */
  .cta-c__field { padding: 14px 16px; font-size: 14px; }
  .cta-c__textarea { padding: 14px 16px; font-size: 14px; min-height: 120px; }
  .cta-c__checkbox { font-size: 12px; }

  /* --- STATEMENT --- */
  .statement-c__text { font-size: 20px; }

  /* --- BUTTONS auf Mobile: volle Breite --- */
  .btn { width: 100%; justify-content: center; padding: 16px 24px; }
}

/* ==========================================================================
   4. COOKIE BANNER – Responsive
   ========================================================================== */

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px;
    bottom: 12px;
    width: calc(100% - 24px);
    padding: 20px 24px;
  }

  .cookie-banner__actions {
    flex-direction: column;
  }

  .cookie-banner__btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }
}

/* ==========================================================================
   5. OVERFLOW-SCHUTZ – Keine horizontale Scrollbar
   ========================================================================== */

@media (max-width: 768px) {
  html {
    overflow-x: hidden;
  }

  /* Marquee darf nicht zum Body-Overflow beitragen */
  .marquee-c {
    max-width: 100vw;
  }
}

/* ==========================================================================
   6. PRINT STYLES
   ========================================================================== */

@media print {
  .nav,
  .nav-overlay,
  .cookie-banner,
  .scroll-progress {
    display: none !important;
  }

  body {
    background: white;
    color: black;
  }
}