/* ============================================================
   MOBIL
   Alles in dieser Datei steckt in einer einzigen Media Query.
   Nimmt man sie samt js/mobil.js heraus, ist die Seite exakt der
   Stand davor. Der grosse Schirm wird hier nicht angefasst.
   ============================================================ */

@media (max-width: 899px) {

  /* ---------- 1 Kern: Raster statt Bilderwand ----------
     Am grossen Schirm laufen die Formate auf drei Bahnen. Hier rasten
     sie beim Scrollen in ein Gitter ein, das den Schirm fuellt. Das
     Motiv liegt klein darueber, die Zeile wechselt wie oben auch. */
  .kern-buehne {
    display: block;
    position: relative;
    height: 100svh;
    padding-block: 0;
    overflow: hidden;
  }
  .kern-buehne .kern-satelliten {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    perspective: none;
    z-index: 1;
  }
  .kern-buehne .kern-satellit {
    position: absolute;
    left: 50%;
    top: 50%;
    aspect-ratio: auto;
    border-radius: 0;
    border: 0;
    box-shadow: none;
  }
  /* Die Namensschilder der Formate sind im Gitter nur Unruhe */
  .kern-buehne .kern-satellit::after { display: none; }

  .kern-buehne .kern-mitte {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    width: 100%;
    display: grid;
    justify-items: center;
    gap: 0.9rem;
    padding-inline: 1.1rem;
    pointer-events: none;
    order: initial;
  }
  .kern-buehne .kern-motiv {
    width: min(38vw, 190px);
    aspect-ratio: 4 / 5;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(5, 5, 6, 0.55);
  }
  /* Beide Zeilen wieder uebereinander, sonst gibt es keinen Wechsel */
  .kern-buehne .kern-text { display: grid; text-align: center; width: 100%; }
  .kern-buehne .kern-text .kt { grid-area: 1 / 1; display: block; text-align: center; margin-bottom: 0; }
  .kern-buehne .kern-text .kt.eins { font-size: clamp(1.4rem, 7.8vw, 2.4rem); }
  .kern-buehne .kern-text .kt.zwei { font-size: clamp(1.2rem, 6.8vw, 2.1rem); }
  /* Im Raster liegt hinter der Zeile eine geschlossene Flaeche, kein
     Motiv bleibt frei. Der Schleier muss deshalb kraeftiger sein als
     am grossen Schirm. */
  .kern-buehne .kern-text::before {
    inset: -190% -46% -240% -46%;
    background:
      radial-gradient(58% 36% at 50% 50%,
        rgba(5, 5, 6, 0.99) 0%,
        rgba(5, 5, 6, 0.96) 44%,
        rgba(5, 5, 6, 0.62) 70%,
        rgba(5, 5, 6, 0) 90%),
      radial-gradient(92% 62% at 50% 50%,
        rgba(5, 5, 6, 0.82) 0%,
        rgba(5, 5, 6, 0.38) 54%,
        rgba(5, 5, 6, 0) 82%);
  }

  /* ---------- 2 Werkproben: Nahflug im Hochformat ----------
     Die Kacheln nehmen fast die ganze Breite, der Takt ist laenger.
     Takt und Flugweite setzt js/mobil.js am Halter. */
  .flug { height: 100svh; }
  .flug-raum { perspective: 620px; }
  .flug-bild { width: 88vw; }

  /* ---------- 0 Hero: dreizeilig und gross ----------
     Am grossen Schirm zweizeilig und halb so gross, das steht in
     css/neu.css. Hier bleibt die grosse, dreizeilige Fassung. */
  .nur-schmal { display: block; }
  .hero-film .hero-headline { font-size: clamp(2.6rem, 9vw, 3.2rem); line-height: 0.92; }

  /* ---------- 3 Die lange Kopfzeile in gemischter Schreibung ----------
     Elf Zeilen Versalien sind auf 390 Punkten eine Mauer. */
  .kopfzeile.leitsatz { text-transform: none; letter-spacing: 0; }
  .leitsatz .ls { font-size: clamp(1.15rem, 5.4vw, 1.7rem); line-height: 1.2; max-width: none; }

  /* ---------- 4 Lesbare Schriftgroessen ----------
     Nichts unter zwoelf Pixel, das ist auf einem Telefon die Grenze. */
  .kicker { font-size: 0.78rem; }
  .h-marke { font-size: 0.75rem; }
  .d-teile span { font-size: 0.75rem; }
  .ms-slogan { font-size: 0.8rem; }
  .ms-art { font-size: 0.75rem; }
  .dienste-liste button span { font-size: 0.75rem; }
  /* Groesse steht in css/erklaer.css, dort stehen die Woerter senkrecht */
  .footer-zeilen > span { font-size: 0.82rem; }
  .schluss-leiste a { font-size: 0.82rem; }

  /* ---------- 5 Tippziele ----------
     Vierundvierzig Punkte im Quadrat, sonst trifft der Daumen daneben. */
  .fixnav-burger { min-width: 44px; min-height: 44px; }
  .fixnav-logo { min-height: 44px; display: inline-flex; align-items: center; }
  .schluss-recht a, .schluss-adresse a { display: inline-block; padding-block: 0.8rem; }
  .schluss-mail { padding-block: 0.6rem; }

  /* ---------- 6 Logoband: dichter laufen lassen ----------
     Am grossen Schirm stehen die Marken weit auseinander. Auf 390
     Punkten sind bei gleichem Abstand nur drei gleichzeitig zu sehen,
     und das liest sich wie eine Luecke statt wie eine Reihe. */
  .logoband { padding-block: clamp(1.6rem, 3.4vh, 2.4rem); }
  .logoband-reihe { gap: 2.2rem; padding-right: 2.2rem; animation-duration: 40s; }
  .logoband-reihe img { height: calc(30px * var(--lg, 1)); }
  .logoband-zeile { margin-bottom: 1.3rem; }
}