/* ELEMENT4 · Ränder: nichts wird verdeckt
   ========================================
   Am Handy liegen Uhrzeit, Kamera und Home-Leiste ÜBER der Seite. Wer eine
   Leiste mit „top:0" festklebt, schiebt sie unter die Uhr; wer unten etwas
   festklebt, landet hinter der Home-Leiste. Im Querformat kommt die Kamera
   seitlich dazu.

   Alle Seiten haben „viewport-fit=cover" - das heisst, die Seite darf bis in
   die Ecken, MUSS aber selbst Abstand halten. Genau das passiert hier, an
   einer Stelle für alle Seiten.

   Die Werte stehen als Variablen, damit sie prüfbar sind: im Test lassen sie
   sich setzen, ohne dass ein echtes Gerät nötig wäre.                        */

:root{
  --e4-oben:   env(safe-area-inset-top,    0px);
  --e4-unten:  env(safe-area-inset-bottom, 0px);
  --e4-links:  env(safe-area-inset-left,   0px);
  --e4-rechts: env(safe-area-inset-right,  0px);
}

/* ---------- Oben ---------- */
/* Die Kopfzeile klebt auf jeder Seite mit top:0. Der farbige Balken darf
   ruhig bis unter die Uhr reichen - der INHALT muss darunter beginnen.
   „body header" ist spezifischer als das „header" in den Seiten und gewinnt
   darum, ohne dass irgendwo !important nötig wäre.                          */
body header{
  padding-top: calc(12px + var(--e4-oben));
  padding-left:  calc(16px + var(--e4-links));
  padding-right: calc(16px + var(--e4-rechts));
}
/* Die Tagesdoku hat eine höhere Kopfzeile mit eigenem Abstand. */
body.e4-tagesdoku header{ padding-top: calc(22px + var(--e4-oben)); }

/* Der Offline-Balken liegt ganz oben über allem. */
html #net-bar{ padding-top: calc(4px + var(--e4-oben)); }

/* Klebende Reiter und Balken sitzen UNTER der Kopfzeile, nicht am Bildrand -
   sie brauchen keinen eigenen Abstand nach oben. Steht aber keine Kopfzeile
   darüber (Vollbild, Vorschau), dann doch.                                   */
body.e4-ohne-kopf .admin-tabs,
body.e4-ohne-kopf .admin-groups,
body.e4-ohne-kopf .lesebalken{ top: var(--e4-oben); }

/* ---------- Unten ---------- */
/* Die Home-Leiste verdeckt die letzten rund 34 Pixel. Alles, was unten klebt
   oder als letztes kommt, hält Abstand.                                      */
body{ padding-bottom: var(--e4-unten); }

html .slide-nav,
html body.presenting .slide-nav{ padding-bottom: calc(10px + var(--e4-unten)); }

html #draft-status{ bottom: calc(12px + var(--e4-unten)); }

/* Schwebende Knöpfe (Chat, Glocke, Nach-oben) */
html #chat-fab,
html .e4-glocke-frei,
html .e4-hoch{ bottom: calc(18px + var(--e4-unten)); }

/* ---------- Seitlich (Querformat) ---------- */
@media (orientation:landscape){
  body main,
  body .wrap,
  body .inhalt{
    padding-left:  max(var(--e4-links),  0px);
    padding-right: max(var(--e4-rechts), 0px);
  }
}

/* ---------- Blätter von unten ---------- */
/* Die Sheets haben ihren Abstand meist schon; hier nur als Netz, falls eines
   vergessen wurde. Mehr als nötig schadet nicht - zu wenig schon.            */
html .e4-sheet{ padding-bottom: calc(16px + var(--e4-unten)); }

/* ---------- Grosse Bildschirme ---------- */
/* Am Rechner und am Tablet im Querformat gibt es keine Aussparungen. Dort
   sorgt nur die Lesebreite dafür, dass nichts am Rand klebt.                 */
@media (min-width:1000px){
  body header{ padding-left:max(16px, var(--e4-links)); padding-right:max(16px, var(--e4-rechts)); }
}

/* ---------- Drucken ---------- */
@media print{
  body{ padding-bottom:0; }
  body header{ padding-top:12px; }
}