/* =========================================================
   Reset, base elements & app shell layout — Klar
   Design tokens live in tokens.css.
   ----------------------------------------------------------
   The reference shows a fixed 390 x 844 phone frame. That frame
   is a viewing device, not a layout: here the shell fills the
   window, honours the safe areas and survives the on-screen
   keyboard, short viewports and text zoom (UIUX.md, ABNAHME.md).
   ========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

/* ``hidden`` soll verstecken -- ausnahmslos, und ohne dass jede Komponente
   daran denken muss.

   Das ``[hidden] { display: none }``, auf das sich das Markup verlässt, ist
   eine Regel des **Browsers**. Autorenregeln schlagen sie, und zwar nicht
   wegen höherer Spezifität, sondern allein wegen ihrer Herkunft: eine einzige
   Zeile ``.container-select { display: flex }`` genügt, damit das ``hidden``
   auf demselben Element nichts mehr tut. Das Element steht dann sichtbar in
   der Seite, während Markup und Skript es für versteckt halten -- ein Fehler,
   der sich nicht als Fehler anfühlt, sondern als ein Block zu viel.

   Genau das ist in dieser Runde dreimal passiert: ein leerer Bildwähler und
   ein leerer getönter Kasten im Varianteneditor (die zusammen wie die
   beanstandeten „zwei Blöcke zu viel" aussahen), das Aktionsband im Tagebuch,
   der Scanner in der Zutatensuche. Jede Stelle wurde einzeln mit einer
   eigenen ``[hidden]``-Zeile geflickt, und die nächste fiel wieder hinein.

   ``!important`` ist hier kein Notnagel, sondern der Kern: die Regel steht
   weit oben in der Ladereihenfolge, und ``[hidden]`` hat dieselbe Spezifität
   wie eine Klasse. Ohne ``!important`` gewänne jede später geladene
   Komponentenregel wieder. Nichts in diesem Projekt zeigt ein Element per CSS
   wieder her, das ``hidden`` trägt -- geprüft, alle sieben vorhandenen
   ``[hidden]``-Regeln setzen ausschließlich ``display: none``. Wer etwas
   zeigen will, nimmt das Attribut weg. */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  /* ``font-synthesis: none`` steht so auch in der Referenz: ein fehlender
     Schnitt soll nicht gefälscht werden. Seit Manrope als Spanne geladen wird
     (``xcdns.html``), sind 650 und 750 echt vorhanden, also fällt nichts mehr
     darunter.

     Die beiden Glättungszeilen daneben sind entfallen. Die Referenz setzt
     keine, und ``-webkit-font-smoothing: antialiased`` macht auf Apple-Geräten
     jeden Strich dünner — zusammen mit einem fehlenden Schnitt war das der
     zweite Grund, aus dem Auszeichnungen nicht fett aussahen. Ein Unterschied,
     den man nur auf dem Gerät sieht, und der deshalb aus der Vorlage kommen
     muss statt aus einer Gewohnheit. */
  font-synthesis: none;
  min-height: 100svh;
  min-width: 280px;
  -webkit-tap-highlight-color: transparent;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-fast);
}
a:hover {
  color: var(--hero-ink);
}

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
  border: 0;
  background: transparent;
}

button:disabled {
  cursor: not-allowed;
}

a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* One visible focus style for the whole app. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 6px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-subtle);
}

::selection {
  background: var(--tint);
  color: var(--hero-ink);
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: var(--radius-pill);
}
::-webkit-scrollbar-track {
  background: transparent;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------- App shell ----------------
   Header sticks, content scrolls, navigation sits at the bottom.
   ``100dvh`` keeps the browser chrome from eating the last row. */

.app-shell {
  min-height: 100svh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.app-main {
  flex: 1 0 auto;
  width: 100%;
  padding-top: 22px;
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 24px);
  padding-left: max(var(--page-gutter), var(--safe-left));
  padding-right: max(var(--page-gutter), var(--safe-right));
}

/* Signed out there is no bottom navigation to clear. */
body.is-signed-out .app-main {
  padding-bottom: calc(var(--safe-bottom) + 28px);
}

.app-container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 21px;
  align-items: stretch;
  min-width: 0;
}

.app-container > * {
  min-width: 0;
}

.content-narrow {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ``.page-header*``, ``.app-back-button`` und ``.nutrition-flow__back`` sind
   entfallen: keine Vorlage, kein Skript und kein Test benutzt sie noch. Der
   Kopfbereich heißt überall ``.page-heading`` (klar.css), der Zurückweg
   ``.app-header__back`` (navbar.css). Eine Regel, die nichts mehr trifft,
   sieht bei der nächsten Messung aus wie eine zweite Wahrheit. */

/* A page that ends in a sticky action needs room for it. */
.app-main.has-action-dock {
  padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 24px);
}