/* ============================================================================================
   Kontor am Tresen — die Anordnung des Startbildschirms.
   Nur Anordnung. Alle Bauteile stehen in parts.css, alle Werte in tokens.css.

   DAS RANDVOLLE BILD, GELOEST UEBER DIE SEITEN
   Das freigegebene Beweisbild presst 846 px Inhalt auf 844 px Hoehe, weil es alles auf EINE
   Seite legt. Springboard hat Seiten zum Wischen; das ist die vorgesehene Loesung, und sie
   kuerzt nichts weg.

     Kopfzeile   steht FEST ueber allen Seiten. §5.17 sagt: "Er steht ganz oben auf Start,
                 ueber allem anderen." Ein erklaerender Satz, der beim Blaettern wegrutscht,
                 waere nicht mehr "ueber allem".
     Seiten      wischen waagrecht, jede scrollt fuer sich senkrecht (touch-action: pan-y).
     Fussraum    Seitenpunkte, Suche und Dock stehen FEST unter den Seiten. Das Dock
                 wechselt nie den Inhalt — auch nicht beim Blaettern (§5.5).

   Rechnung bei 390 x 844, safe-area 0:
     8 oben + Kopfzeile 73 + Seiten 573 + Fussraum 190 = 844.
   ============================================================================================ */

.k-start {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: calc(8px + env(safe-area-inset-top)) var(--pad) 0;
  overflow: hidden;
}

.k-start-kopf {
  flex: 0 0 auto;
}

/* ---- Die Seiten ---------------------------------------------------------------------------- */

.k-seiten {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  /* §5.6: Wischen waagrecht wechselt die Seite; senkrecht scrollt die Seite. */
  touch-action: pan-y;
}

.k-band {
  display: flex;
  height: 100%;
  transition: transform var(--t-seite) var(--spring);
  will-change: transform;
}

/* HEISST .k-startseite, NICHT .k-seite. Die Konsolidierung hat .k-seite fuer die Huelle
   aller elf Nicht-Start-Ansichten eingefuehrt; start.css wird nach parts.css geladen und
   hat deren Regel damit ueberall ueberschrieben: height 100% statt 100dvh, padding-bottom
   8px statt 64px. Folge, im Browser gemessen: die Huelle war 1473 px statt 844 hoch, das
   Blatt scrollte gar nicht, und der Inhalt lief unter der Leiste durch. Kein Pruefstand
   konnte das sehen - erst ein Bild. Das hier sind Start-eigene Wischseiten, ein anderes
   Ding als die Huelle, also ein eigener Name. */
.k-startseite {
  flex: 0 0 100%;
  height: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  /* Damit die letzte Kachelreihe nicht am Fussraum klebt. */
  padding-bottom: 8px;
}

/* Der erste Kapitelabstand faellt weg — der Titelstrich der Kopfzeile steht schon darueber. */
.k-startseite > .k-kapitel:first-child {
  margin-top: 8px;
}

/* ---- Der feste Fussraum -------------------------------------------------------------------- */

.k-start-fuss {
  flex: 0 0 auto;
  padding-bottom: calc(4px + env(safe-area-inset-bottom));
}

/* §4.4: >= 12 px zwischen Bedienelementen mit Rahmen. Die Suchpille hat einen.
   HIER STEHT DAZU NICHTS MEHR. Auf dem Tresen steht die Pille mittig — das sagt die
   Flaeche, nicht das Bauteil. Seit die Lieferantenliste dieselbe Zeile braucht, steht sie
   als `.k-suchzeile` in parts.css, mit denselben Werten (§11.2). Zwei Fassungen derselben
   drei Zeilen waeren eine zu viel. */

/* Bei nur einer Seite steht die Punktreihe nicht da — dann fehlt hier auch der Abstand,
   und der Fussraum rueckt um 44 px nach unten. Das ist gewollt: eine Rolle mit wenigen
   Zielen bekommt mehr Platz fuer ihre Kacheln, nicht eine leere Zeile. */

/* ---- Zustaende der ganzen Seite ------------------------------------------------------------ */

/* Laedt, Fehler, gar keine Kachel: der Rahmen bleibt stehen (Kopfzeile, Fussraum),
   in der Seitenmitte steht ein Satz. */
.k-start-satz {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
}

/* Der Rechner: eine Spalte, zentriert, Hoechstbreite 430 px (§7.8). Die Hoehe bleibt die
   Fensterhoehe, damit das Dock unten sitzt wie am Telefon. Kein :hover-Verhalten.
   Links und rechts der Spalte schiene sonst die Flaeche der ALTEN Oberflaeche durch —
   public/app.css faerbt den <body> mit ihrem eigenen --paper und zwei Verlaeufen. Ein
   fester Grund in der neuen Papierfarbe deckt das ab. Er liegt hinter allem (z-index -1)
   und faellt weg, sobald die alte Oberflaeche verschwindet. */
.k-start::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
}