/* ==========================================================================
   pulb.werbung — Anpassungen
   Die Hero-Buehne folgt bis 760px exakt den vw-Massen der Referenz und
   wechselt darunter auf deren feste Pixelkomposition.
   ========================================================================== */

/* ==========================================================================
   Sehr breite Bildschirme — vw-Werte deckeln, damit nichts ausufert
   ========================================================================== */

@media (min-width: 1800px) {
  :root {
    --gutter: 56px;
  }
  .h1 { font-size: 140px; }
  .h2 { font-size:  94px; }
  .h3 { font-size:  61px; }
  .h4 { font-size:  38px; }
  .menu__link      { font-size: 162px; }
  .ghostline span  { font-size: 270px; }
}

/* ==========================================================================
   Laptop
   ========================================================================== */

@media (max-width: 1280px) {
  .claim { padding-block: 12vw 7vw; }
  .service { grid-template-columns: 6vw minmax(0, 1fr) minmax(0, 1fr); }
  .reels__row { grid-template-columns: repeat(5, 1fr); gap: 1.2vw; }
  /* Ab hier wird die Bilderwand zur Mehrspalten-Anordnung: die Spalten-
     Container treten per display:contents aus dem Layout, alle Kacheln
     fliessen frei um. Vorher wurden ganze Spalten ausgeblendet — dabei
     verschwanden Arbeiten, die niemand mehr zu sehen bekam. */
  .wall__grid {
    display: block;
    grid-template-columns: none;
    column-count: 4;
    column-gap: 1.6vw;
  }

  .wall__col { display: contents; }

  .wall__item {
    display: block;
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    margin-bottom: 1.6vw;
  }
}

/* ==========================================================================
   Tablet
   ========================================================================== */

@media (max-width: 1024px) {
  :root { --gutter: 4vw; }

  .h1 { font-size: 9.5vw; }
  .h2 { font-size: 7vw; }
  .h3 { font-size: 4.6vw; }
  .h4 { font-size: 3vw; }

  .claim {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .claim__rule { display: none; }
  .claim__right { justify-self: start; text-align: left; }
  .claim__text { margin-top: 8vw; max-width: 46ch; }
  .claim .h1 { font-size: 7.2vw; }

  .service {
    grid-template-columns: 7vw minmax(0, 1fr);
    row-gap: .8vw;
  }
  .service__desc { grid-column: 2; }

  .promise__grid { min-height: 0; }
  .promise__item--2 { margin-top: 8vw; }
  .promise__item--3 { margin-top: 16vw; }

  .flow { height: 62vh; }
  .reels__row { grid-template-columns: repeat(3, 1fr); gap: 2vw; }
  .reel:nth-child(4) { margin-top: 0; }
  .reel:nth-child(5) { margin-top: 3vw; }

  .wall__grid { column-count: 3; }

  .contact__grid { grid-template-columns: 1fr; gap: 8vw; }
  .contact__fact { grid-template-columns: 14vw minmax(0, 1fr); }

  .menu__link { font-size: 11vw; }
  .header__logo, .menu__logo { width: 88px; }
}

/* ==========================================================================
   Mobil — ab hier greift die Pixelkomposition der Referenz
   ========================================================================== */

@media (max-width: 760px) {
  :root {
    --gutter: 22px;
    --header-h: 56px;
  }

  .h1 { font-size: 13vw; }
  .h2 { font-size: 10vw; }
  .h3 { font-size: 7.4vw; }
  .h4 { font-size: 5.4vw; }

  .section { padding-block: 22vw; }

  /* --- Kopfzeile --------------------------------------------------------- */
  .header { padding: 18px var(--gutter); }
  .header__cta { display: none; }
  .burger__label { display: none; }
  .burger__lines { width: 34px; }
  .header__logo, .menu__logo { width: 58px; min-width: 0; }

  /* --- Hero -------------------------------------------------------------- */
  .hero__stage {
    width: 360px;
    height: 460px;
  }

  .hero__img--1 { width: 131px; height: 156px; top: 155px; left:   3px; }
  .hero__img--2 { width: 111px; height: 106px; top:   0;   left:  53px; }
  .hero__img--3 { width: 223px; height: 318px; top:  75px; left:  82px; }
  .hero__img--4 { width: 153px; height: 119px; top: 335px; left: 183px; }
  .hero__img--5 { display: none; }
  .hero__img--6 { width: 131px; height: 131px; top: 188px; left: 224px; }
  .hero__img--7 { width: 146px; height: 192px; top:  48px; left: 188px; }

  .hero__mark {
    top: 50%;
    width: 232px;
    height: 172px;
    margin-top: -86px;
  }
  .js .hero__mark-inner { transform: translateY(200px); }

  .hero__sub { bottom: 84px; }
  .hero__sub p { font-size: 14px; }
  .hero__scroll { display: none; }
  .hero-meta { padding-bottom: 22px; }

  /* --- Menue ------------------------------------------------------------- */
  .menu { padding: 18px var(--gutter) 32px; }
  .menu__link { font-size: 16vw; }
  .menu__nav { margin-bottom: 12vw; }
  .menu__meta { flex-direction: column; gap: 14px; padding-top: 22px; }

  /* --- Info -------------------------------------------------------------- */
  .claim { padding-block: 22vw 12vw; }
  .claim .h1 { font-size: 9.4vw; }
  .claim__right { margin-top: .28em; }
  .promise__grid { padding-inline: 0; }
  .ghostline span { font-size: 26vw; }

  .service {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 14px;
    padding-block: 22px;
  }
  .service:hover .service__title { transform: none; }
  .service__desc { margin-top: 8px; }

  .panel__body { max-width: none; }
  .panel__num  { margin-bottom: 18px; }
  .panel__sub  { max-width: 34ch; }

  .promise__grid { grid-template-columns: 1fr; gap: 32px; }
  .promise__item--1,
  .promise__item--2,
  .promise__item--3 { margin-top: 0; }
  .promise__body { padding: 22px; }

  /* --- Portfolio --------------------------------------------------------- */
  .cats { grid-template-columns: 1fr; }
  .cat {
    min-height: 108vw;
    padding: 22px var(--gutter) 32px;
  }
  .cat:nth-child(odd) { border-right: 0; }
  .cat__media { inset: 18% 8% 8%; }
  .cat__body  { inset: auto 8% 12%; }

  /* Bewegtbild wird auf Mobil zur seitlich scrollbaren Reihe */
  .flow { height: 56vh; min-height: 340px; }
  .reels { padding: 22vw 0 4vw; }
  .reels__head { padding: 0 var(--gutter) 22px; margin-bottom: 24px; }
  .reels__row {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 62vw;
    gap: 12px;
    padding-inline: var(--gutter);
    /* Ohne scroll-padding wuerde das Einrasten den seitlichen Abstand
       wegscrollen und die erste Kachel klebte am Bildschirmrand. */
    scroll-padding-inline: var(--gutter);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reels__row::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: start; }
  .reel:nth-child(n) { margin-top: 0; }
  .reel__cap { padding-top: 10px; }
  /* Auf Touch gibt es kein Ueberfahren — alle Filme bleiben voll sichtbar */
  .reels__row:hover .reel__video { opacity: 1; }

  .wall { padding: 22vw 0; }
  .wall__head { padding-bottom: 32px; }
  .wall__grid { column-count: 2; column-gap: 12px; }
  .wall__item { margin-bottom: 12px; }

  /* --- Kontakt ----------------------------------------------------------- */
  .contact { padding: 22vw 0 14vw; }
  .bigline {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 26px var(--gutter);
  }
  .bigline__text { font-size: 8.6vw; }
  .contact__grid { padding-top: 16vw; gap: 14vw; }
  .contact__fact { grid-template-columns: 1fr; gap: 4px; padding-bottom: 16px; }

  .form { gap: 26px; }
  .field__input { padding: 12px 0 10px; font-size: 16px; }  /* 16px verhindert iOS-Zoom */
  .field__label { top: 12px; font-size: 16px; }
  textarea.field__input { min-height: 120px; }

  /* --- Fusszeile --------------------------------------------------------- */
  .footer { padding: 18vw var(--gutter) 22px; }
  .footer__ghost { margin: 32px 0 18px; }
  .footer__bottom { flex-direction: column-reverse; align-items: flex-start; gap: 14px; }
}

@media (max-width: 400px) {
  .hero__stage { transform: scale(.86); }
}