/* =========================================================
   TABLET / MOBIL
   Unterhalb 1100px verlässt das Layout das starre 1920er-
   Raster.

   Was hier NICHT mehr steht: Schriftgrade. Die kommen aus den
   --fs-*-Tokens und skalieren über die ganze Breite selbst –
   eine Größe zu ändern heißt eine Zeile in tokens.css ändern,
   nicht zwei Stellen in zwei Dateien.

   Was hier steht, sind ausschließlich echte Layout-Wechsel:
   mehrspaltig → einspaltig, Kanten, Navigation, Bildhöhen.
   ========================================================= */
@media (max-width: 1100px) {
  /* Ein gemeinsamer Seitenrand für alle Bänder. Ersetzt die
     vier verschiedenen Kanten des Entwurfs, die auf schmalem
     Schirm keinen Sinn mehr ergeben. Die Navigation steht
     außerhalb von .page und braucht ihn deshalb selbst. */
  .page, .nav { --pad-x: 32px; }

  .band { padding-inline: var(--pad-x); }
  .band--banner, .band--hero { padding-inline: 0; }

  .nav__inner { padding: 28px var(--pad-x) 0; }
  .nav.is-stuck .nav__inner { padding: 14px var(--pad-x); }
  .nav__menu { display: none; }
  /* Logo bleibt in fester Größe – mit eingefrorenem --u geriete
     es sonst deutlich zu klein. Auch der geschrumpfte Zustand
     rechnet deshalb hier in px statt über --nav-s. */
  /* Kein Nachrücken auf Mobil: die Seitenlinie ist hier abgeschaltet,
     es gibt also keine Kante, auf der die Trennlinie fluchten müsste. */
  .nav__logo { height: 118px; margin-left: 0; }
  .nav__word { height: 84px; margin-left: 26px; }
  /* Hier trägt die Spine nicht (siehe .rule unten) – die Trennlinie
     im Logo ist deshalb dauerhaft sichtbar, nicht erst gescrollt. */
  .nav__sep  { margin-left: 3px; opacity: 1; }
  .nav.is-stuck .nav__logo { height: 60px; }
  .nav.is-stuck .nav__word { height: 43px; margin-left: 14px; }

  /* Die linke Linie trägt auf schmalen Viewports nicht mehr –
     sie würde quer durch den Inhalt laufen. */
  .rule { display: none; }

  .band--hero {
    height: auto;
    min-height: 78vh;
    /* flachere Dachkante, damit sie auf schmalem Schirm nicht kippt */
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 54px),
                       86% calc(100% - 22px), 74% calc(100% - 22px),
                       66% 100%, 0 100%);
  }
  .hero__body {
    position: relative;   /* nicht static – sonst liegt der Text hinter Bild und Verlauf */
    left: auto; bottom: auto;
    padding: 46vh var(--pad-x) 110px;
  }
  /* Auf schmalen Viewports liegt die Headline über hellem Bildbereich –
     der Verlauf muss hier deutlich kräftiger tragen. */
  .hero__veil {
    background:
      linear-gradient(to top,    rgb(var(--c-blue-rgb) / .78) 0%, rgb(var(--c-blue-rgb) / .42) 42%, rgb(var(--c-blue-rgb) / .06) 72%),
      linear-gradient(to bottom, rgb(var(--c-blue-rgb) / .45) 0%, rgb(var(--c-blue-rgb) / 0) 22%);
  }
  .hero__actions { flex-wrap: wrap; gap: 14px; }

  /* Touch-Ziele in fester Mindestgröße statt skaliert.
     Die Schrägkante braucht hier keine eigene Regel mehr – sie
     ergibt sich aus --btn-notch-*, siehe Kontur in components.css. */
  .btn { height: 54px; padding: 0 22px;
         --btn-notch-x: 36; --btn-notch-y: 22; }
  .card__btn { height: 48px; margin-top: 26px; }

  .band--intro { padding-block: 64px 78px; }
  .intro__inner { grid-template-columns: 1fr; row-gap: 30px; padding-right: 0; }
  /* Aus der senkrechten Trennlinie wird hier eine waagerechte über
     dem Text – das Element aus sections.css wird dafür umgelegt. */
  .intro__text::before {
    left: 0; right: 0; bottom: auto;
    width: auto; height: 1px;
  }
  .intro__text {
    padding: 26px 0 0;
    line-height: 1.75;   /* etwas luftiger als im Entwurfsraster */
  }
  /* Die harten Umbrüche stammen aus dem 1920er Entwurf */
  .intro__text br { display: none; }

  .band--focus { padding-block: 56px 72px; }
  .focus__grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 28px 24px;
    margin-top: 48px;
    margin-inline-start: 0;
  }
  /* Bild folgt jetzt der Spaltenbreite statt einer festen Höhe –
     Seitenverhältnis aus denselben Tokens wie das Desktop-Maß. */
  .card__media { height: auto; aspect-ratio: var(--card-w) / var(--card-img); }
  .card__body { padding: 22px 22px 26px; }
  a.card .card__body { padding-bottom: 52px; }
  .card--contact .card__body { padding-top: 28px; }
  .card__text { line-height: 1.7; margin-top: 14px; }
  /* Linie bündig am Kartenboden, Pfeil absolut unten rechts – hier in
     festen px, weil --u eingefroren und klein ist */
  .card__line { left: 0; right: 0; bottom: 0; }
  .card__arrow { right: 22px; bottom: 18px; font-size: 22px; }

  .band--exp { grid-template-columns: 1fr; row-gap: 40px; padding-block: 24px 80px; }
  .exp__media { margin-left: 0; height: 60vw; max-height: 520px; }
  .exp__edge  { display: none; }
  .exp__body  { padding-left: 0; margin-top: 0; }
  .exp__kicker { padding-left: 0; }

  .band--banner { grid-template-columns: 1fr; height: auto; }
  .banner__body { padding: 56px var(--pad-x); }
  .banner__media { height: 46vw; max-height: 380px; }

  .band--foot { padding-block: 56px 64px; }
  .foot__inner {
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 40px 30px;
  }
  .foot__hours { grid-template-columns: auto 1fr; column-gap: 14px; }
}