/* ============================================================
   Handy und Tablet.
   Bewusst als eigene Datei, damit beim Bearbeiten nichts
   abgeschnitten werden kann. (Lehre aus dem Morthsgaudi-Projekt:
   dort ging zweimal ein Block hinter einer Medienabfrage verloren.)
   ============================================================ */

/* ---------- Tablet ---------- */
@media (max-width: 900px){

  .beitrag-kopf{
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: start;
  }

  .papier-raster,
  .kontakt-raster{
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .paar{ grid-template-columns: 1fr; }

  .strecke{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ---------- Handy ---------- */
@media (max-width: 640px){

  body{ font-size: 16px; }

  /* Kopfzeile: das Menü wandert in eine eigene Zeile und scrollt quer.
     Kein Hamburger, weil vier Punkte in eine Zeile passen. */
  .kopf-innen{ height: 54px; }
  .menue{
    gap: 18px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    mask-image: linear-gradient(to right, transparent, #000 12px,
                                #000 calc(100% - 18px), transparent);
  }
  .menue::-webkit-scrollbar{ display: none; }
  .menue a{ white-space: nowrap; font-size: 11px; }

  .aufmacher{ min-height: min(88svh, 720px); }
  .aufmacher-fuss{ gap: 8px 18px; font-size: 10.5px; }

  /* Der Tonschalter sitzt am Daumen, nicht in der Ecke */
  .tonschalter{
    right: auto;
    left: var(--rand);
    bottom: auto;
    top: calc(var(--rand) + 54px);
    height: 34px;
    padding: 0 13px;
  }

  .leitsatz-satz{ max-width: none; }

  /* Bühnen laufen randlos über die volle Breite, das wirkt am
     Telefon deutlich stärker als eingerückte Kästen.

     Bewusst über negative Ränder statt über 100vw plus Verschiebung:
     Der 100vw-Trick rechnet margin-left gegen die falsche Bezugsbreite
     und belegt ausserdem transform, das hier die Zoomstufe braucht. */
  .buehne{
    margin-inline: calc(var(--rand) * -1);
  }

  .strecke{
    display: flex;
    gap: 2px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: calc(var(--rand) * -1);
    padding-inline: 0;
  }
  .strecke::-webkit-scrollbar{ display: none; }
  .strecke{ flex-wrap: nowrap; }
  .strecke img{
    flex: 0 0 auto;
    height: 62vw;
    max-height: 340px;
    width: auto;
    max-width: none;
    scroll-snap-align: center;
  }
  /* Erstes und letztes Bild bekommen Luft, damit sie beim Einrasten
     nicht am Bildschirmrand kleben. */
  .strecke::before, .strecke::after{
    content: "";
    flex: 0 0 var(--rand);
  }

  .bildunterschrift{ padding-inline: 0; }

  .preis{
    grid-template-columns: 1fr;
    gap: 8px;
    padding-block: 20px;
  }
  .preis-ab{
    grid-row: auto;
    grid-column: 1;
    align-self: start;
    order: 3;
    text-align: left;
  }
  .preis-ab small{ text-align: left; }
  .preis-was{ order: 2; }

  .kanal{ padding: 14px 0; }

  .fuss{ flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* ---------- Sehr schmal ---------- */
@media (max-width: 380px){
  :root{ --rand: 16px; }
  .marke{ font-size: 13px; }
}

/* ============================================================
   Telefon: Menü und feste Leiste
   Vier Menüpunkte plus Wortmarke passen bei 390 px nicht in eine
   Zeile. Ein querscrollendes Band versteckt den letzten Punkt,
   deshalb hier ein Vollbildmenü. Zusätzlich unten eine feste
   Leiste, damit die Anfrage immer in Daumenreichweite liegt.
   ============================================================ */
@media (max-width: 640px){

  #arbeiten, #ton, #leistungen, #kontakt{ scroll-margin-top: 62px; }

  /* Das flache Menü verschwindet, der Knopf tritt an seine Stelle */
  .kopf .menue{ display: none; }

  .menue-knopf{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    height: 38px;
    padding: 0 4px;
    background: none;
    border: 0;
    color: var(--ink);
    font: inherit;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .menue-knopf-striche{ display: grid; gap: 5px; width: 20px; }
  .menue-knopf-striche i{
    height: 1.5px;
    background: currentColor;
    transition: transform .22s ease, opacity .22s ease;
  }
  .menue-knopf[aria-expanded="true"] .menue-knopf-striche i:first-child{ transform: translateY(3.25px) rotate(45deg); }
  .menue-knopf[aria-expanded="true"] .menue-knopf-striche i:last-child{ transform: translateY(-3.25px) rotate(-45deg); }

  .vollmenue{
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 55;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    padding: 90px var(--rand) calc(var(--rand) + 74px);
    background: var(--grund);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .24s ease, transform .24s ease;
  }
  .vollmenue[hidden]{ display: none; }
  .vollmenue.auf{ opacity: 1; transform: none; }

  .vollmenue nav{ display: grid; }
  .vollmenue nav a{
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--kante);
    font-family: var(--serif);
    font-size: 34px;
    line-height: 1.05;
    text-decoration: none;
    color: var(--ink);
  }
  .vollmenue nav a span{
    font-family: var(--schrift);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--rot-hell);
  }
  .vollmenue-mail{
    margin-top: 28px;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--dim);
    text-decoration: none;
    border-bottom: 1px solid var(--rot);
    padding-bottom: 4px;
    justify-self: start;
    align-self: start;
  }

  /* Feste Leiste unten */
  .fussleiste{
    display: grid;
    grid-template-columns: 1fr auto;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--grund) 92%, transparent);
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--kante);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .fussleiste a{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 0 20px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .fussleiste-mail{ background: var(--rot); color: #fff; }
  .fussleiste-preise{ color: var(--dim); border-left: 1px solid var(--kante); }

  /* Platz schaffen, damit die Leiste den Fuß nicht überdeckt */
  body{ padding-bottom: 52px; }

  /* Der Tonschalter darf der Leiste nicht in die Quere kommen */
  .tonschalter{ top: calc(62px + 14px); }
}

/* ============================================================
   Zeitleiste am Telefon
   Der Sog funktioniert dort genauso, aber Schrift und Leiste
   brauchen mehr Luft, und der Daumen muss die Marken treffen.
   ============================================================ */
@media (max-width: 640px){

  .zl-fest{ height: 100svh; }

  .zl-titel{ font-size: clamp(30px, 9.5vw, 46px); max-width: none; }
  .zl-zeile{ font-size: 15px; max-width: none; }
  .zl-kunde{ font-size: 10px; margin-bottom: 12px; }
  .zl-credits{ font-size: 10px; gap: 5px 14px; }
  .zl-kapitel{ bottom: 20px; }
  .zl-text{ padding-block: 20px; }

  /* Marken: Nummern reichen, die Namen brauchen zu viel Platz */
  .zl-marke em{ display: none; }
  .zl-marke{ min-height: 44px; padding-top: 12px; text-align: center; }
  .zl-marke b{ font-size: 11px; }
  .zl-welle{ height: 30px; }
  .zl-leiste{ padding-bottom: 62px; }

  /* Der Verlauf muss stärker sein, weil die Schrift größer ist */
  .zl-buehne::after{
    background:
      linear-gradient(to top, var(--tiefer) 12%, color-mix(in srgb, var(--tiefer) 84%, transparent) 52%, transparent 88%);
  }

  .kundenliste{ grid-template-columns: 1fr 1fr; }
  .kundenliste li{ padding: 16px 14px; font-size: 16px; }

  .team-raster{ grid-template-columns: 1fr 1fr; }
  .person--ohne{ min-height: 90px; }

  .sprungziel{ top: -62px; }
}