/* Gemeinsame Hülle für Dashboard, Essen und Training.

   Eine Quelle für Farben, Formen und die Navigation zwischen den vier
   Bereichen. Auf schmalen Geräten sitzt die Navigation als Leiste am unteren
   Rand in Daumenreichweite, ab 768 px wandert sie in die Kopfzeile.

   Die Farbwerte sind gegenüber dem ursprünglichen BIOSORA-Satz nachgezogen:
   der alte Sekundärton kam auf Weiß nur auf 3,0:1, die Beschriftungen auf
   2,2:1. Alles was Text ist, liegt jetzt über 4,5:1, alles was Grafik ist
   über 3:1. */

:root {
  --bg: #f7f4ee;
  --surface: #fffdf8;
  --surface-2: #fbfaf8;
  --line: #eceae6;
  --line-strong: #dfdbd5;

  --text: #1a1918;
  --text-2: #6a655d;

  --accent: #a7472c;
  --accent-graphic: #f2542d;
  --accent-soft: #f8eade;
  --accent-hover: #903d25;
  --ok-soft: #edf1e5;
  --warning-soft: #fff3dc;

  --ok: #1e7f4a;
  --ok-graphic: #2a9d63;
  --warn: #c7362a;
  --warn-graphic: #db4436;
  --info: #2a66c4;
  --info-graphic: #3b82e8;

  --r-card: 18px;
  --r-field: 12px;
  --shadow: 0 10px 30px rgba(25, 24, 23, 0.05);
  --shadow-nav: 0 -6px 24px rgba(25, 24, 23, 0.07);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --nav-h: 60px;
  --nav-h-top: 61px;

  --font:
    -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
}

/* Browser-Oberflächen, die sonst mit Systemvorgaben ausgeliefert würden. */
::selection {
  background: var(--accent-soft);
  color: var(--text);
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
html {
  scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 3px solid var(--bg);
}
::-webkit-scrollbar-track {
  background: transparent;
}

/* ---------- Navigationsleiste ---------- */

.shellnav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: flex;
  background: rgba(255, 253, 248, 0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--line);
  box-shadow: var(--shadow-nav);
  padding-bottom: var(--safe-bottom);
}

.shellnav a {
  position: relative;
  flex: 1;
  min-height: var(--nav-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  text-decoration: none;
  color: var(--text-2);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.18s ease,
    background 0.18s ease;
}

.shellnav a svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

.shellnav a[aria-current="page"] {
  color: var(--accent);
}
.shellnav a[aria-current="page"] svg {
  transform: translateY(-1px) scale(1.06);
}
.shellnav a:active svg {
  transform: scale(0.92);
}

/* Der aktive Bereich bekommt zusätzlich eine Markierung an der Kante, damit
   der Zustand nicht allein an der Farbe hängt. */
.shellnav a[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0;
  width: 34px;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--accent);
}

/* Platz, damit die Leiste nichts überdeckt. */
body.shellnav-room {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom));
}

/* Über einem Vollbild-Dialog hat die Leiste nichts zu suchen: sie würde den
   Bestätigen-Knopf verdecken und einen Bereichswechsel mitten in der Eingabe
   anbieten. Browser ohne :has() behalten die Leiste - dort sorgt das
   Polster am Dialog dafür, dass der Knopf trotzdem erreichbar bleibt. */
body:has(.fullscreen-modal.active) .shellnav {
  display: none;
}
body:has(.fullscreen-modal.active) .fullscreen-modal {
  padding-bottom: calc(var(--safe-bottom) + 16px);
}

@media (min-width: 768px) {
  .fullscreen-modal {
    padding-bottom: calc(var(--safe-bottom) + 16px);
  }

  /* Ab hier sitzt die Leiste oben. Sie bleibt fixiert statt sticky, damit sie
     auch in der Trainingsansicht trägt, deren Body eine feste Höhe hat und
     nicht scrollt. */
  .shellnav {
    top: 0;
    bottom: auto;
    justify-content: center;
    gap: 6px;
    padding: calc(10px + var(--safe-top)) 16px 10px;
    border-top: 0;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 6px 24px rgba(25, 24, 23, 0.05);
  }
  .shellnav a {
    flex: 0 0 auto;
    flex-direction: row;
    gap: 9px;
    min-height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 14px;
  }
  .shellnav a svg {
    width: 19px;
    height: 19px;
  }
  .shellnav a:hover {
    color: var(--text);
    background: var(--bg);
  }
  /* Der Akzentton kommt auf dem weichen Akzenthintergrund nur auf 4,43:1.
     Der dunklere Bruderton hält dort 5,85:1 und bleibt dieselbe Farbe. */
  .shellnav a[aria-current="page"] {
    color: #a5361a;
    background: var(--accent-soft);
  }
  .shellnav a[aria-current="page"]::before {
    display: none;
  }
  body.shellnav-room {
    padding-bottom: 0;
    padding-top: calc(var(--nav-h-top) + var(--safe-top));
  }
}

@media (prefers-reduced-motion: reduce) {
  .shellnav a,
  .shellnav a svg {
    transition: none;
  }
}

/* ---------- Pausentimer ---------- */
.pausentimer {
  position: fixed;
  inset: auto 0 calc(var(--nav-h) + var(--safe-bottom));
  z-index: 250;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 74px;
  padding: 10px max(16px, calc((100vw - 1040px) / 2));
  background: var(--surface);
  border-top: 1px solid var(--line-strong);
  box-shadow: 0 -4px 22px #292a2410;
  font-family: var(--font);
  color: var(--text);
}
.pausentimer[hidden] {
  display: none;
}
.pausentimer-info {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}
.pausentimer-titel {
  color: var(--text-2);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.pausentimer-kontext {
  color: var(--text-2);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.pausentimer .pausentimer-kontext {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pausentimer-zeit {
  font-size: 29px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--text);
}
.pausentimer-knoepfe {
  display: flex;
  gap: 8px;
  align-items: center;
}
.pausentimer-knopf {
  min-width: 44px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.pausentimer-knopf[hidden] {
  display: none;
}
.pausentimer-knopf:hover {
  background: var(--bg);
}
.pausentimer-knopf svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}
.pausentimer-knopf[data-aktion^="plus"] {
  color: var(--accent);
  border-color: var(--line-strong);
  background: var(--accent-soft);
}
.pausentimer.gehalten .pausentimer-zeit {
  color: var(--text-2);
}
.pausentimer.fertig {
  background: var(--ok-soft);
  border-color: #c5cfb7;
}
.pausentimer.fertig .pausentimer-titel {
  color: var(--ok);
}
body.pause-laeuft.shellnav-room {
  padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 90px);
}
body.pause-laeuft .fab-btn {
  bottom: 104px;
}
body:has(.fullscreen-modal.active) .pausentimer {
  bottom: var(--safe-bottom);
}
body.pause-laeuft:has(.fullscreen-modal.active) .fullscreen-modal {
  padding-bottom: calc(var(--safe-bottom) + 100px);
}

/* showModal legt diese Anzeige über sämtliche normalen App-Ebenen und über
   einen zuvor geöffneten Eingabedialog. Dessen Formular bleibt bestehen. */
dialog.pausentimer-gross {
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(24px + var(--safe-top)) 24px calc(24px + var(--safe-bottom));
  border: 0;
  border-radius: 0;
  overflow: auto;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
}
dialog.pausentimer-gross:not([open]) {
  display: none;
}
dialog.pausentimer-gross[open] {
  display: flex;
  align-items: center;
  justify-content: center;
}
dialog.pausentimer-gross::backdrop {
  background: var(--bg);
}
.pausentimer-gross-inhalt {
  position: relative;
  width: 100%;
  max-width: 1000px;
  text-align: center;
}
.pausentimer-gross .pausentimer-titel {
  font-size: 14px;
  color: var(--text-2);
  margin: 0 0 4vh;
}
.pausentimer-gross .pausentimer-zeit {
  font-size: clamp(100px, 30vw, 280px);
  letter-spacing: -0.065em;
  margin: 0;
  font-weight: 650;
  line-height: 1;
}
.pausentimer-gross .pausentimer-kontext {
  font-size: clamp(17px, 3vw, 24px);
  max-width: 650px;
  margin: 4vh auto;
  line-height: 1.4;
}
.pausentimer-gross .pausentimer-knoepfe {
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}
.pausentimer-gross .pausentimer-knopf {
  min-height: 52px;
  min-width: 100px;
  padding: 12px 20px;
  font-size: 16px;
}
.pausentimer-gross .pausentimer-knopf[data-aktion^="plus"] {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}
.pausentimer-schnellwahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 30px;
  color: var(--text-2);
  font-size: 12px;
}
.pausentimer-schnellwahl .pausentimer-knopf {
  font-size: 12px;
  min-height: 44px;
  min-width: 60px;
  background: transparent;
  padding: 8px;
  border-color: transparent;
}
.pausentimer-satz {
  display: block;
  width: min(100%, 340px);
  min-height: 60px;
  margin: 0 auto 4vh;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent, #fff);
  font-family: var(--font);
  font-size: 18px;
  font-weight: 650;
  cursor: pointer;
}
.pausentimer-satz[hidden] {
  display: none;
}
/* Nachlauf: zehn Sekunden nach Ablauf grün, die Zeit zählt hoch. Die Schrift
   nimmt die Hintergrundfarbe, das kontrastiert in Hell und Dunkel. */
dialog.pausentimer-gross.nachlauf,
dialog.pausentimer-gross.nachlauf::backdrop {
  background: var(--ok);
}
dialog.pausentimer-gross.nachlauf {
  color: var(--bg);
}
dialog.pausentimer-gross.nachlauf .pausentimer-titel,
dialog.pausentimer-gross.nachlauf .pausentimer-zeit,
dialog.pausentimer-gross.nachlauf .pausentimer-kontext,
dialog.pausentimer-gross.nachlauf .pausentimer-schnellwahl {
  color: inherit;
}
dialog.pausentimer-gross.nachlauf .pausentimer-knopf {
  background: transparent;
  border-color: currentColor;
  color: inherit;
}
dialog.pausentimer-gross.nachlauf .pausentimer-satz {
  background: var(--bg);
  color: var(--ok);
}
body.training-aktiv .shellnav a[href="/training"] svg {
  color: var(--accent);
}
body.training-aktiv .shellnav a[href="/training"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: calc(50% - 16px);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
}
@media (max-width: 600px) {
  .pausentimer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 12px;
    padding: 10px 12px;
  }
  .pausentimer-zeit {
    font-size: 25px;
  }
  .pausentimer-knoepfe {
    gap: 5px;
  }
  .pausentimer .pausentimer-knoepfe {
    grid-column: 1 / -1;
    justify-content: flex-end;
  }
  .pausentimer .pausentimer-kontext {
    max-width: 100%;
  }
  .pausentimer .pausentimer-knopf {
    padding: 8px;
    font-size: 12px;
  }
  body.pause-laeuft.shellnav-room {
    padding-bottom: calc(var(--nav-h) + var(--safe-bottom) + 120px);
  }
  body.pause-laeuft .fab-btn {
    bottom: 130px;
  }
  .pausentimer-gross {
    padding-left: 16px;
    padding-right: 16px;
  }
  .pausentimer-gross .pausentimer-knopf {
    min-width: 90px;
    padding: 11px 15px;
  }
}
@media (max-width: 370px) {
  .pausentimer-knoepfe {
    gap: 4px;
  }
  .pausentimer .pausentimer-knopf {
    font-size: 12px;
  }
}
@media (min-width: 768px) {
  .pausentimer {
    bottom: var(--safe-bottom);
  }
  body.pause-laeuft.shellnav-room {
    padding-bottom: 88px;
  }
}