/* ═══════════════════════════════════════════════════════════════════
   Pojana v2 — Kontakt
   docs/design-spec.md Abschnitt 8.4 · Schritt 7 der Baureihenfolge

   Eine Seite, ein Abschnitt: der zweigeteilte Anfragebereich, diesmal
   nicht als Schluss einer langen Seite, sondern als ganzer Einstieg.
   Links der Anfragesatz mit Chips und Formular, rechts auf --ink die
   Telefonnummer in --sun.

   Alles Sichtbare ist Baustein: .anfrage, .blatt, .satz, .chips, .feld,
   .ruf, Kopf, Knopf, Daumenleiste und Fuß stehen in css/komponenten.css.
   Kein Rufblock am Seitenende wie auf den anderen Unterseiten — diese
   Seite ist der Kontakt und würde sich selbst wiederholen.

   Übrig bleibt, was allein diese Seite hat: dass der Bereich den
   Bildschirm füllt, unter dem absolut liegenden Kopf beginnt und am
   Handy zwei echte Flächen statt einer Trennlinie zeigt.

   Keine Bewegung in dieser Datei. Der Bewegungsmoment der Seite ist der
   Marker, der über die gewählte Satzstelle streicht — der steht bei
   seinem Baustein (komponenten.css, 5.6) und läuft ohne JavaScript.
   ═══════════════════════════════════════════════════════════════════ */

.anfrage--seite {
  /* Nichts steht darüber, also trennt hier auch keine Linie. */
  border-top: 0;
  /* Voller Bildschirm beim Einstieg (Spec 8). Die Daumenleiste liegt
     fest darüber und gehört nicht dazu — sonst verschwindet die
     Unterkante hinter ihr. Ab 62 rem ist --daumen-h null. */
  min-height: calc(100svh - var(--daumen-h));
}

/* Die H1 steht in einer Spalte, nicht über die ganze Breite: bei der
   voreingestellten Unterseitengröße (bis 6,5 rem) läuft „was zu tun ist."
   am Desktop aus dem Blatt heraus. */
.anfrage--seite .blatt__h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); }

@media (max-width: 61.99rem) {
  /* Gestapelt bekommt jede Hälfte ihre eigene Fläche und ihren eigenen
     Rand — auf dem Handy ist die Nummer die erste Handlung und keine
     Fußnote unter dem Formular. Der Randabstand wandert dafür von der
     Fläche in die beiden Hälften; ein Verrücken per negativer Marge
     bräuchte es dann nicht. */
  .anfrage--seite { padding: 0; gap: 0; }
  .anfrage--seite .blatt {
    /* oben Platz für den Kopf, der absolut darüber liegt */
    padding: 7rem var(--pad) var(--luft);
  }
  .anfrage--seite .ruf {
    padding: var(--luft) var(--pad);
    background: var(--ink);
  }
}

@media (min-width: 62rem) {
  /* Beide Hälften laufen über die volle Bildschirmhöhe (align-items:
     stretch steht am Baustein), also reicht die Höhe an der Fläche. */
  .anfrage--seite { min-height: 100svh; }
  .anfrage--seite .blatt,
  .anfrage--seite .ruf { padding-top: 8rem; }

  /* Das Formular ist zwei Bildschirme lang, die Nummer steht daneben.
     Mittig in dieser Spalte (so liegt der Baustein auf der Startseite)
     landete sie unterhalb der ersten Bildschirmhöhe — ausgerechnet auf
     der Kontaktseite. Sie beginnt deshalb oben und bleibt beim Scrollen
     stehen: die Nummer ist auf dieser Seite nie weiter weg als einen
     Blick nach rechts.

     position: sticky ist keine Bewegung, die zurückgenommen werden
     müsste — es wird nichts animiert, der Block steht einfach still. */
  .anfrage--seite .ruf { justify-content: flex-start; }
  .anfrage--seite .ruf__innen {
    position: sticky;
    top: clamp(2rem, 9vh, 5.5rem);
  }
}