/* ==========================================================================
   Responsive — Mobile ist kein Nachtrag, sondern eigene Hierarchie
   Breakpoints: 1100 (Laptop), 860 (Tablet), 560 (Smartphone)
   ========================================================================== */

/* --- bis 1100px: Laptop ------------------------------------------------- */
@media (max-width: 1100px) {
  /* Der Hero wird weiter unten in diesem Bereich neu gesetzt — die alten
     Spaltenregeln sind mit dem zweispaltigen Raster hinfaellig geworden. */

  .col-4, .col-5, .col-6, .col-7, .col-8 { grid-column: span 12; }
  .offset-1, .offset-2 { grid-column-start: auto; }
  .col-push-1 { grid-column: span 12; }

  .work__item,
  .work__item:nth-child(4n + 1),
  .work__item:nth-child(4n + 2),
  .work__item:nth-child(4n + 3),
  .work__item:nth-child(4n + 4) { grid-column: span 6; }
}

/* --- bis 860px: Tablet — Navigation wird zum Panel ---------------------- */
@media (max-width: 860px) {
  .nav-toggle { display: grid; }

  .nav {
    position: fixed;
    inset: var(--header-h, 76px) 0 auto 0;
    background: var(--paper);
    border-bottom: var(--rule) solid var(--line);
    margin: 0;
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .nav[data-open] {
    max-height: calc(100dvh - var(--header-h, 76px));
    overflow-y: auto;
    visibility: visible;
    transition: max-height var(--dur) var(--ease), visibility 0s;
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; padding: var(--s-2) var(--gutter) var(--s-4); }
  .nav__list li + li { border-top: var(--rule) solid var(--line); }
  .nav__link {
    display: block;
    padding: var(--s-3) 0;
    font-size: var(--step-0);
    border-bottom: 0;
    border-left: 3px solid transparent;
    padding-left: var(--s-2);
  }
  .nav__link:hover,
  .nav__link[aria-current="true"] { border-left-color: var(--accent); border-bottom-color: transparent; }

  .teasers, .figures { grid-template-columns: 1fr; }
  .teaser, .figure { padding: var(--s-3) 0; }
  .teaser + .teaser, .figure + .figure { padding-left: 0; }

  /* Drei Spalten sind auf Tablet-Breite zu schmal fuer die Bildwirkung -
     zwei Spuren behalten den Bandcharakter, ohne winzig zu wirken. */
  .work--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .site-footer__cols { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* --- bis 560px: Smartphone --------------------------------------------- */
@media (max-width: 560px) {
  .brand__logo { width: 168px; }
  .hero__title { font-size: clamp(2.5rem, 13vw, 3.4rem); }
  .hero__roles { font-size: var(--step--1); }
  .hero__media img { aspect-ratio: 3 / 2; }

  /* 2 Spalten teilen 12 und 52 ebenfalls glatt (6 bzw. 26 Reihen) */
  .clients { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Datum über den Titel, statt Spalten auf 350px zu quetschen. Der
     Bild-Platzhalter ist reine Dekoration (aria-hidden) und entfällt hier. */
  .post__link { grid-template-columns: 1fr; gap: var(--s-1); }
  .post__excerpt, .post__more { grid-column: 1; }
  .post__bild { display: none; }

  .work__item,
  .work__item:nth-child(4n + 1),
  .work__item:nth-child(4n + 2),
  .work__item:nth-child(4n + 3),
  .work__item:nth-child(4n + 4) { grid-column: span 12; }

  .work--drei { grid-template-columns: 1fr; }

  .clients { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .site-footer__cols { grid-template-columns: 1fr; }
  .socket ul { margin-left: 0; }

  .accordion__item summary { font-size: var(--step-0); }
}

/* --- Druck -------------------------------------------------------------- */
@media print {
  .site-header, .nav-toggle, .btn, .site-footer { display: none !important; }
  body { color: #000; background: #fff; }
  a::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}


/* --- Creative Revision: Breakpoints der neuen Bausteine ------------------ */
@media (max-width: 1100px) {
  /* Hero einspaltig: Bild ZUERST, damit es im ersten Viewport steht */
  .hero__inner {
    grid-template-columns: 1fr;
    min-height: 0;
    padding-inline: var(--gutter);
  }
  .hero__media { order: -1; }
  /* Die feste Rahmenhöhe gilt nur im zweispaltigen Hero. Einspaltig bestimmt
     das Seitenverhältnis die Höhe — sonst steht unter dem Bild eine Lücke in
     Höhe der Differenz. */
  .hero__media picture { height: auto; min-height: 0; }
  .hero__media img { height: auto; aspect-ratio: 16 / 9; margin-top: 0; }
  .hero__text { max-width: none; align-self: start; }
  .hero__signet { left: auto; right: 0; top: calc(-1 * var(--s-5)); }

  .site-footer__cols { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
  .marquee__item { width: 92px; }
  .work__hinweis { margin-top: var(--s-5); }
}

@media (max-width: 560px) {
  .hero__media img { aspect-ratio: 4 / 3; }
  .hero__signet { width: 40px; }
  .marquee__item { width: 84px; }
  .site-footer__cols { grid-template-columns: 1fr; }
}

/* --- Hero nach dem ursprünglichen Entwurf ------------------------------- */
@media (max-width: 860px) {
  .einstiege__reihe { grid-template-columns: 1fr; }
  .einstieg { border-top: 0; border-bottom: var(--rule) solid var(--line); padding-inline: 0; }
  .einstieg + .einstieg { padding-left: 0; }
  .einstieg:hover, .einstieg:focus-visible { border-bottom-color: var(--accent); }
  .einstiege__reihe .einstieg:last-child { border-bottom: 0; }
  .vorstellung { max-width: none; }
}
@media (max-width: 560px) {
  .hero__bild { min-height: clamp(360px, 62svh, 520px); }
  .hero__zitat { max-width: none; padding-inline: var(--s-3); }
}

@media (max-width: 860px) {
  .einstieg { border-right: 0; border-bottom: var(--rule) solid var(--line); padding-right: 0; }
  .einstiege__reihe .einstieg:last-child { border-bottom: 0; }
  .einstieg__satz { max-width: none; }
}

/* --- Flache Fenster ------------------------------------------------------
   Bei 700–860px Fensterhöhe passte der Einstieg um 32 bis 96px nicht über die
   Falz. Weg fällt nur das Signet — es ist Dekoration und aria-hidden, es geht
   also nichts an Inhalt verloren. Die Erklärsätze der drei Einstiege bleiben
   ausdrücklich stehen.                                                      */
@media (max-height: 860px) {
  .hero__mitte .hero__signet { display: none; }
  .hero__mitte { padding-block: var(--s-3); }
  .hero__zitat figcaption { margin-top: var(--s-2); }
  .hero__zitat figcaption::before { margin-bottom: var(--s-2); }
}

/* Sehr flache Fenster (etwa 1440x700): Zitat und Signatur rücken enger
   zusammen, damit die drei Einstiege vollständig über der Falz bleiben. */
@media (max-height: 760px) {
  .hero__zitat p { font-size: min(clamp(1.6rem, 3.6vw, 3rem), 6.2svh); }
  .hero__zitat figcaption { margin-top: var(--s-2); flex-direction: row; gap: var(--s-2); }
  .hero__zitat figcaption::before { display: none; }
  .einstieg { padding-block: var(--s-3); }
}

@media (max-width: 860px) {
  .vorstellung__kopf { max-width: none; }
}