/* ==========================================================================
   BAUWAGEN Kasse — base.css
   Reset, Schriften, Grundtypografie, Safe-Area, Scrollverhalten.
   Kein box-shadow im gesamten Projekt (§1.1) — Tiefe kommt nur vom Tastenhub.
   ========================================================================== */

/* --- Schriften: selbst gehostet, CSP erlaubt nur 'self' -------------------- */
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

html,
body,
h1, h2, h3, h4, p,
figure, blockquote,
dl, dd, dt,
ul, ol, li {
  margin: 0;
  padding: 0;
}

ul, ol {
  list-style: none;
}

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

body {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;               /* gescrollt wird in den Screens, nicht am Body */
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: var(--fs-text);
  font-weight: 400;
  line-height: var(--lh-text);
  /* Atkinson liefert genau 400 und 700. Keine gefälschten Zwischengewichte. */
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

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

/* `fill` und `stroke` sind VERERBTE SVG-Eigenschaften, und eine CSS-Regel
   schlägt jedes Präsentationsattribut im Markup. Ein globales
   `stroke: currentColor` legt sich deshalb auch über SVGs, die gar keine
   Kontur wollen — beim QR-Code (viewBox in Modulen, `stroke-width` 1 =
   GENAU EIN MODUL) läuft er damit zu einem schwarzen Block zu und ist
   unscannbar. Also: hier nichts anschalten. Wer Kontur braucht, setzt sie an
   seiner Stelle (`.tableiste__marke svg` in components.css tut das).       */
svg {
  fill: none;
  stroke: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
  color: inherit;
  touch-action: manipulation;     /* kein 300-ms-Warten auf Doppeltap */
}

button::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input,
textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

[hidden] {
  display: none !important;
}

/* --- Grundtypografie ------------------------------------------------------ */
h1, h2, h3 {
  font-size: inherit;
  font-weight: inherit;
}

b, strong {
  font-weight: 700;
}

/* Zahlen und Beträge sind IMMER Mono, Text ist IMMER Atkinson (§1.7).
   Diese beiden Klassen sind die einzigen erlaubten Wege zu Mono.            */
.betrag {
  font-family: var(--font-num);
  font-size: var(--fs-gross);
  font-weight: 500;
  line-height: var(--lh-eng);
  white-space: nowrap;
}

.meta {
  font-family: var(--font-num);
  font-size: var(--fs-meta);
  font-weight: 400;
  line-height: var(--lh-eng);
  color: var(--ink-muted);
}

/* Hierarchie über Größe und Farbe, nie über opacity (§3). */
.gedaempft { color: var(--ink-muted); }
.ton-gruen { color: var(--gruen); }
.ton-rot   { color: var(--rot); }
.ton-signal{ color: var(--signal); }

/* --- Fokus ---------------------------------------------------------------- */
:focus {
  outline: none;
}

:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: -2px;
}

/* --- Scrollen ------------------------------------------------------------- */
.scrollt {
  overflow-y: auto;
  overscroll-behavior-y: contain;   /* Ziehen am Anfang gehört uns (§8.9) */
  -webkit-overflow-scrolling: touch;
}

.scrollt-quer {
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.scrollt-quer::-webkit-scrollbar {
  display: none;
}

/* --- Safe-Area (viewport-fit=cover) --------------------------------------- */
.rand-links  { padding-left:  max(var(--s16), env(safe-area-inset-left)); }
.rand-rechts { padding-right: max(var(--s16), env(safe-area-inset-right)); }

/* --- Nur für Screenreader ------------------------------------------------- */
.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- Auswahl -------------------------------------------------------------- */
::selection {
  background: var(--signal);
  color: var(--signal-ink);
}

/* Kein Textmarkieren auf Bedienflächen — sonst hängt bei nassen Fingern
   plötzlich die Lupe über der Zapftaste.                                    */
.taste,
.zeile,
.plaettchen,
.chip,
.tableiste,
.statusleiste,
.stornoleiste,
.zaehlwerk,
.strichliste {
  -webkit-user-select: none;
  user-select: none;
}