/* /Layout/MainLayout.razor.rz.scp.css */
/* **Die klebende Kopfleiste.**

   `position: sticky` und nicht `fixed`: Sticky bleibt im Fluss, der Inhalt
   darunter braucht deshalb keinen ausgleichenden Abstand, den jemand pflegen
   muesste.

   Das Polster oben nimmt `env(safe-area-inset-top)` mit. Ohne
   `viewport-fit=cover` in der `index.html` liefert iOS dort konstant `0px`;
   mit ihm zeichnet die installierte PWA bis unter die Dynamic Island, und
   ohne diese Zeile laege die Leiste darunter. Die beiden gehoeren zusammen. */
.kopfleiste[b-4m2y28ypww] {
    position: sticky;
    top: 0;
    z-index: 30;
    /* Eigene Marken und nicht `--farbe-primaer`: Die dreht im Dunkelmodus um
       (dunkle Schrift wird helle Schrift), die Leiste soll aber in beiden
       Faellen ein dunkler Balken mit heller Schrift bleiben. Siehe `app.css`. */
    background-color: var(--farbe-leiste);
    color: var(--farbe-leiste-text);
    padding-top: env(safe-area-inset-top, 0px);
}

/* Der Inhalt der Leiste laeuft auf derselben Breite wie die Seite darunter,
   sonst steht der Ruckweg am Bildschirmrand und der Titel in der Mitte.

   `max()` statt eines festen Werts an den Seiten: Im Querformat schiebt iOS
   die Ecken herein, und ein Knopf im abgerundeten Bereich ist nicht zu
   treffen. */
.kopfleiste-innen[b-4m2y28ypww] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 40rem;
    min-height: 56px;
    margin: 0 auto;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
}

.inhalt[b-4m2y28ypww] {
    max-width: 40rem;
    margin: 0 auto;
    /* Unten Platz fuer den Home-Indicator, seitlich fuer die Ecken im
       Querformat — dieselbe Ueberlegung wie an der Leiste.

       **Die Kurzform laeuft oben, rechts, unten, links.** Hier standen `-left`
       und `-right` vertauscht: Im Querformat setzt iOS nur auf der Kerbenseite
       einen Wert, das Polster landete also auf der falschen Kante — Inhalt
       unter der Kerbe, Leerraum gegenueber. Faellt erst mit `viewport-fit=cover`
       auf, und das kam in diesem Durchgang dazu (Befund des Code-Reviews,
       vierte Runde). Einzeln geschrieben, damit die Reihenfolge nicht wieder
       zaehlbar sein muss. */
    padding-top: 1.5rem;
    padding-right: max(1rem, env(safe-area-inset-right, 0px));
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 1.5rem);
    padding-left: max(1rem, env(safe-area-inset-left, 0px));
}