/* ============================================================
   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{ columns: 2; }
}

/* ---------- 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{
    /* Wischgalerie statt Wasserfall. columns muss dafuer ausdruecklich
       zurueckgesetzt werden, sonst kaempfen beide Layouts gegeneinander. */
    columns: auto;
    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(--gruen-hell);
  }
  .vollmenue-mail{
    margin-top: 28px;
    font-size: 14px;
    letter-spacing: .04em;
    color: var(--dim);
    text-decoration: none;
    border-bottom: 1px solid var(--gruen);
    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(--gruen); 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); }
}

/* ============================================================
   Das Werk am Telefon

   Kein Überfahren möglich, deshalb wird jede Zeile zu einer
   eigenen Karte mit Bild darüber. Was in der Bildmitte steht,
   spielt (siehe werk.js). So bleibt der Gedanke erhalten, ohne
   dass man mit dem Finger etwas treffen müsste.
   ============================================================ */
@media (max-width: 860px){

  /* Am Telefon gibt es kein Überfahren, also auch keinen Grund
     für eine Filmebene im Hintergrund. Ein erster Versuch liess
     sie oben kleben, dann lief die Liste darüber hinweg und die
     Schrift lag auf dem Bild. Unruhig und schlecht lesbar.

     Jetzt bekommt jede Zeile ihr eigenes Bild. Man sieht zu
     jedem Projekt sofort etwas, ohne irgendwo hinfahren zu
     müssen, und es werden gar keine Videos geladen: auf dem
     Telefon spart das jedes Mal mehrere Megabyte. */
  .werk-buehne{ display: none; }
  .werk{ padding-top: clamp(46px, 8vh, 80px); }

  .werk-vorschau{
    display: block;
    grid-area: bild;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: 16px;
    filter: brightness(.9);
    transition: filter .4s ease;
  }
  .werk-zeile.aktiv .werk-vorschau{ filter: none; }

  .werk-zeile{
    grid-template-columns: 1fr;
    grid-template-areas:
      "bild"
      "nr"
      "titel"
      "kunde"
      "art";
    padding-block: 26px;
    /* Randlos, das wirkt am Telefon deutlich grosszuegiger */
    margin-inline: calc(var(--rand) * -1);
    padding-inline: var(--rand);
  }
  .werk-nr{ margin-bottom: 8px; }
  .werk-titel{ font-size: clamp(26px, 8vw, 40px); }
  .werk-art{
    text-align: left;
    margin-top: 10px;
    white-space: normal;
  }
  /* Am Telefon nichts abdunkeln: hier soll alles lesbar bleiben,
     der Wechsel ergibt ohne Zeigegerät keinen Sinn. */
  .werk.zeigt .werk-zeile{ opacity: 1; }
  .werk-zeile.aktiv .werk-titel,
  .werk-zeile.aktiv .werk-kunde{ transform: none; }

  .bogen-raster{ grid-template-columns: repeat(4, 1fr); gap: 2px; }

  .kanal-raster{ grid-template-columns: 1fr; gap: 30px; }
}

@media (max-width: 640px){

  .kunden-band{ animation-duration: 40s; }
  .kunden-eintrag{ font-size: 19px; padding-inline: 18px; gap: 8px; }
  .kunden-eintrag b{ font-size: 9px; }

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

  .sprungziel{ top: -62px; }
}