/* ==========================================================================
   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 ---------------------- */
/* --- bis 1000px: Navigation wird zum Panel -------------------------------
   Eigener Umbruch, frueher als die uebrigen 860px: Seit die sechs Menue-
   punkte in Versalien und gesperrt gesetzt sind (27.08.2026), braucht die
   Leiste rund 700px. Zusammen mit dem 208px-Logo und dem Abstand passt das
   erst ab etwa 1060px Fensterbreite. Gemessen bei 900px: Leiste 703px,
   verfuegbar 645px - "Kontakt" fiel komplett aus dem Bild.
   Der Bereich war uebrigens schon vorher zu eng (670px noetig), nur faellt
   es mit Versalien deutlicher auf. Bei exakt 1000px blieben nur 3px
   Reserve - zu knapp, deshalb 1060px. */
@media (max-width: 1060px) {
  .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; }

  /* Kontakt-Schaltflaeche im aufgeklappten Menue ---------------------------
     .nav__cta bringt aus components.css einen umlaufenden 2px-Rahmen mit.
     Die .nav__link-Regeln direkt darueber setzen hier aber border-bottom auf
     0 und border-left auf 3px transparent - stehen blieben nur die obere und
     die rechte Kante. Das sah aus wie ein halb gezeichneter Rahmen und wurde
     am 27.08.2026 zu Recht als Fehler gemeldet.

     Statt den Rahmen zu reparieren wird der Punkt hier vollflaechig: als
     einzige Handlungsaufforderung im Menue darf er sich deutlich absetzen,
     und ohne Rahmen kann auch keine Kante mehr fehlen. Schwarz mit weisser
     Schrift entspricht dem Zustand, den die Schaltflaeche auf dem Desktop
     beim Ueberfahren annimmt - also kein neues Gestaltungsmittel. Gruen mit
     weisser Schrift waere nicht moeglich: --accent ist ein helles Gruen,
     weisse Schrift darauf erreicht nur rund 1,6:1 Kontrast und waere
     praktisch unlesbar. Gruen bleibt deshalb - wie ueberall sonst auf der
     Seite - mit dunkler Schrift dem Hover- und Aktiv-Zustand vorbehalten. */
  .nav__list li:last-child { border-top: 0; }
  .nav__cta {
    border: 0;
    background: var(--ink);
    color: var(--paper);
    text-align: center;
    padding: var(--s-3) var(--s-2);
    margin-top: var(--s-3);
  }
  .nav__cta:hover,
  .nav__cta:focus-visible,
  .nav__cta[aria-current="true"] {
    background: var(--accent);
    color: var(--accent-ink);
    border-color: transparent;
  }
}

@media (max-width: 860px) {
  .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) {
  /* Schriftzug im Kopf: war mit 168px auf dem Handy nur rund 14px hoch und
     wirkte dadurch verloren (Anmerkung des Auftraggebers vom 27.08.2026).
     Jetzt 210px, also ein Viertel groesser - Desktop bleibt bei 208px
     unveraendert. Die min()-Klammer haelt ihn auf sehr schmalen Geraeten
     (ab 320px) im Rahmen, damit zwischen Logo und Menuetaste genug Platz
     bleibt: 320px Breite minus 40px Rand minus 48px Taste laesst rund 230px,
     58vw ergibt dort 185px. */
  .brand__logo { width: min(210px, 58vw); }
  .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: 112px; }
  .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: 100px; }
  .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; }
  /* Die aeussere linke Linie bei :first-child (components.css) ist nur fuer
     die horizontale 3-Spalten-Reihe gedacht (Wunsch 27.08.2026: Linien
     links vom ersten, rechts vom letzten Feld). Im mobilen Einspalten-Stapel
     gibt es kein "aussen links" mehr - ohne diesen Reset blieb die Linie nur
     bei Feld 1 stehen, waehrend 2 und 3 keine hatten (gemeldet 29.08.2026,
     Screenshot). Eigene Regel noetig, nicht nur .einstieg{padding-inline:0}
     weiter oben: :first-child hat durch die zusaetzliche Klasse hoehere
     Spezifitaet und gewinnt sonst trotz spaeterer Ladereihenfolge. */
  .einstiege__reihe .einstieg:first-child { border-left: 0; padding-left: 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) {
  /* Nur ein etwaiges Signet direkt in .hero__mitte faellt weg. Das Signet in
     der Signaturzeile bleibt seit dem 27.08.2026 stehen: Es ist dort mit
     26px Teil der Linie und kostet keine nennenswerte Bauhoehe mehr - der
     urspruengliche Grund fuer das Ausblenden entfaellt damit. */
  .hero__mitte > .hero__signet { display: none; }
  .hero__mitte { padding-block: var(--s-3); }
  .hero__zitat figcaption { margin-top: clamp(var(--s-3), 3svh, var(--s-4)); }
  .hero__signatur { 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); }
  /* Kein flex-direction:row mehr: Die Signaturzeile enthaelt jetzt Linie und
     Signet und muss ueber der Namenszeile stehen, nicht daneben. Gespart
     wird stattdessen ueber die Abstaende. */
  .hero__zitat figcaption { margin-top: clamp(var(--s-2), 2.5svh, var(--s-3)); }
  .hero__signatur { margin-bottom: var(--s-2); width: min(240px, 60%); }
  .einstieg { padding-block: var(--s-3); }
}

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