/* =====================================================================
   Anpassungen für schmale Geräte.

   Auf dem Handy soll der Kopfbereich anders gelesen werden als am
   Schreibtisch: erst der Honig über die volle Breite, darunter der Bär,
   und dann erst der Text.

   Der Design-Export arbeitet mit Inline-Stilen und ohne Klassen. Die
   Elemente werden deshalb über ihre Stil-Angabe angesprochen. Das ist
   nicht schön, aber ehrlich – und es steht in einer eigenen Datei, damit
   ein neuer Export sie nicht mitreißt. Ändern sich die Werte im Export,
   greifen diese Regeln nicht mehr; welche zwei es sind, steht in
   design/README-export.md.

   `!important` ist nötig, wo der Export den Wert inline setzt: eine
   Inline-Angabe schlägt jede Regel aus einer Datei.
   ===================================================================== */

@media (max-width: 640px) {

  /* --- 1. Der Honig tropft über die ganze Breite ---------------------
     Vorgabe im Export: `min(880px, 62vw)`, rechtsbündig unter der
     Navigationsleiste. Auf dem Handy wirkt das wie ein Rest in der Ecke;
     über die volle Breite wird daraus die Kante, die es sein soll. */
  svg[style*="62vw"] {
    /* Nicht einfach 100 %: die Honigform sitzt im rechten Teil des
       Zeichenbereichs (ab Nutzereinheit 203 von 800). Bei voller
       SVG-Breite begänne der Streifen erst bei einem Viertel der Seite.
       Ausgemessen: die Form ist 603 von 800 Einheiten breit, also
       800/603 = 132,7 % breit machen und um 203/603 = 33,7 % nach links
       schieben. Dann liegt ihre linke Kante genau am Bildschirmrand. */
    width: 132.7% !important;
    left: -33.7% !important;
    right: auto !important;
  }

  /* --- 2. Erst der Bär, dann der Text --------------------------------
     Das Raster fällt auf dem Handy auf eine Spalte zusammen; dort stand
     bisher der Text oben und das Bild darunter. Umgedreht kommt zuerst
     das Bild, wie gewünscht. */
  div[style*="minmax(min(100%, 320px), 1fr)"] > div:nth-child(1) { order: 2; }
  div[style*="minmax(min(100%, 320px), 1fr)"] > div:nth-child(2) {
    order: 1;
    /* Der Honigstreifen hängt bis rund 60 px in den Kopfbereich hinein.
       Ohne diesen Abstand begänne der Bär darunter statt darunter –
       ausgemessen: Honig endet bei 377 px, Bär begann bei 318 px. */
    margin-top: 64px;
  }

  /* --- 3. Die Tür oben in die erste Zeile ----------------------------
     Die Leiste bricht auf dem Handy um. Ohne diese Regel landete die Tür
     in einer dritten Zeile ganz für sich. Bekommt die Linkgruppe eine
     spätere Reihenfolge, rückt die Tür neben das Logo – und die Leiste
     wird dabei eine Zeile kürzer (gemessen: 230 auf 174 px). */
  div[style*="position: sticky"] > div:nth-child(2) { order: 1; }
}