/* ═══ HANDY-FASSUNG (02.10.2026) ═══
   Alle Regeln hier greifen NUR auf schmalen Bildschirmen — die
   Desktop-Fassung bleibt unverändert. Eingebunden als letztes Stylesheet
   auf Startseite, Paketen, Impressum und Datenschutz, damit diese Regeln
   die seiteneigenen Stile überschreiben. */

/* ── Unterseiten (Pakete, Impressum, Datenschutz): Kopf als schmale Leiste ──
   Vorher: Logo + Zurück-Pfeil untereinander als Kasten oben links, der beim
   Scrollen über den Text rutschte. Jetzt: eine Zeile über die ganze Breite,
   Logo links, Zurück rechts, feine Linie darunter. */
@media (max-width: 900px) {
  .kopf {
    position: sticky; top: 0; width: 100%;
    flex-direction: row; justify-content: space-between; align-items: center; gap: 1rem;
    padding: 0.65rem var(--rand); border-bottom: 1px solid var(--dust);
  }
  .kopf__logo { width: 6.4rem; }
  .zurueck { width: 2.5rem; height: 2.5rem; font-size: 1rem; }
}

@media (max-width: 760px) {
  /* ── Rechtstexte: lange Überschriften trennen statt Schrägstrich allein ── */
  main.legal .legal__block h2 { font-size: 1.35rem; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }

  /* ── Startseite: Kontakt-Knopf schmal, damit das Logo frei bleibt.
     Beim Öffnen wird er so breit wie der Bildschirm (Telefon + Mail). ── */
  .kontakt {
    width: 8.4rem;
    transition: background-color 0.4s var(--ease), color 0.4s var(--ease), opacity 0.3s, width 0.55s var(--ease);
  }
  .kontakt.offen { width: calc(100vw - 2 * var(--rand)); }
  .kontakt__knopf { padding: 0.62rem 0.85rem; font-size: 0.88rem; }

  /* ── Startseite: kürzerer Scrollweg für den wachsenden Punkt — am Handy
     reichen gut zwei Bildschirmhöhen, sonst wischt man lange ins Leere
     (Wachstum selbst: Handy-Modus in shared/punkt.js) ── */
  .stage { height: 240vh; }
}

/* ═══ Runde 2 nach Screenshots vom iPhone (02.10.2026) ═══ */
@media (max-width: 760px) {
  /* Pakete: wischbar nebeneinander statt Textwand untereinander —
     jede Karte 84 % breit, die nächste lugt rechts hervor, rastet ein */
  .pakete {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 84%;
    max-width: none; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter));
    padding: 0.4rem var(--gutter) 1rem; gap: 0.8rem;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); scrollbar-width: none;
  }
  .pakete::-webkit-scrollbar { display: none; }
  .pakete > li { scroll-snap-align: start; }

  /* Pakete-Endbild: Nummer + Mail als ein Block unten links direkt über
     der Linie — zusammen mit dem Band eine Einheit statt verloren in der Mitte */
  .ende .antwort { align-self: end; justify-items: start; text-align: left; padding: 0 var(--rand) 1.6rem; gap: 0.9rem; }
  .ende-nr { font-size: 10.2vw; }
  .ende-mail { font-size: 4.9vw; }

  /* Team: Blau bis ganz unten (iPhone-Leiste ändert die Höhe) — die Fläche
     hinter dem Blau ist selbst blau, bis es zum Punkt zurückzoomt */
  .bp:not(.raus)::before { background: #071fa9; }
  /* Team: mehr Luft, größere Fotos */
  :root { --tt-bild: min(44vw, 30vh); }
  .tt { inset: 6.5rem var(--rand) 2rem; justify-content: flex-start; gap: 2rem; }
  .tt-bilder { gap: 0.75rem; }
  .tt-h { font-size: 12vw; }
}

/* ═══ Runde 3: Übergang zur Team-Seite am iPhone (02.10.2026) ═══
   Die Bühne hatte 100svh (kleinste Höhe, Adressleiste sichtbar). Fährt die
   Leiste weg, wird das Fenster höher → unten blieb ein weißer Streifen.
   100dvh folgt der aktuellen Höhe. (Dazu in punkt.js/Startseite: Puffer
   gegen Zurücksetzen, keine Wisch-Sperre, kein Stopper am Handy.) */
@media (max-width: 760px) {
  /* Runde 4: 100dvh änderte sich beim Ein-/Ausfahren der Adressleiste
     (Inhalt rutschte) und ließ unten trotzdem ~2 cm Weiß. Jetzt: Bühne so
     hoch wie der GANZE Bildschirm (100lvh, auch hinter den Leisten) — das
     Blau reicht bis ganz unten. Inhalte (Startseite, Team) enden dafür an
     der sichtbaren Unterkante, damit nichts hinter der Leiste verschwindet. */
  .stage__sticky { height: 100lvh; min-height: 0; }
  .stage__sticky .w { bottom: calc(100lvh - 100svh); }
  .tt { bottom: calc(2rem + 100lvh - 100svh); }
  /* Pakete-Teaser nur einblenden, nicht hochfahren — wirkte wie ein Sprung */
  .teaser [data-teaser] { transform: none; transition: opacity 0.6s var(--ease); }
  /* Rückweg: das Blau zoomt im selben Tempo wieder auf, wie es zum Punkt
     geschrumpft ist (vorher nur in eine Richtung animiert → sprang zurück) */
  .team__blau { transition: transform 0.72s cubic-bezier(0.7, 0, 0.2, 1); }
  .tt-h { transition: transform 0.72s cubic-bezier(0.7, 0, 0.2, 1), color 0.3s ease; }
}

/* ═══ Pakete am Handy: Kontaktfeld statt Punkt-Animation (02.10.2026) ═══
   Die Animation „Wir finden dein Paket" → schwarzes Endbild fällt am Handy
   weg (Skript in 09a-produkte.html startet dort nicht). Stattdessen direkt
   unter den Paketen ein ruhiges Kontaktfeld mit Anruf als Call-to-Action.
   Auf dem Desktop unsichtbar. */
.ruf-m, .fuss--m { display: none; }
@media (max-width: 760px) {
  .buehne, .fuss--ecken { display: none; }
  .ruf-m {
    display: block; margin: 3.5rem calc(50% - 50vw) 0; padding: 3.2rem var(--gutter) 2.8rem;
    background: #080f0f; color: #fff;
  }
  .ruf-m h2 { font-size: 15vw; font-weight: 250; letter-spacing: -0.06em; line-height: 0.9; }
  .ruf-m h2 .dot { display: inline-block; width: 0.15em; height: 0.15em; background: #071fa9; margin-left: 0.04em; }
  .ruf-m p { margin-top: 1.1rem; max-width: 26ch; font-size: 1rem; line-height: 1.5; color: rgba(255, 255, 255, 0.72); }
  .ruf-m__wege { margin-top: 2.4rem; display: grid; gap: 0.9rem; justify-items: start; }
  .ruf-m__nr, .ruf-m__mail {
    font-weight: 700; white-space: nowrap; letter-spacing: -0.04em; line-height: 1;
    background: linear-gradient(#fff, #fff) 0 100% / 100% 0.06em no-repeat; padding-bottom: 0.12em;
  }
  .ruf-m__nr { font-size: 9.3vw; font-variant-numeric: tabular-nums; }
  .ruf-m__mail { font-size: 4.9vw; letter-spacing: -0.03em; }
  .ruf-m :focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
  .fuss--m {
    display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem;
    margin: 2.6rem 0 0; padding-top: 1.2rem; border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 500; color: #fff;
  }
  .fuss--m span:last-child { display: flex; gap: 1.4rem; }
}