/* Grundlagen: Schrift, Farben, Maße, Reset, Typografie, Nativ-Gefühl.
   Werte 1:1 aus DM-App/design/richtung-a-hell.html und design/assets/geraet.css. */

@font-face { font-family: "Inter"; src: url("../assets/schriften/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }

:root {
  /* Marke */
  --navy: #1C244B; --navy-tief: #141A38; --navy-hell: #334A6E;
  --taupe: #9E8B77; --taupe-tief: #8A7867; --taupe-hell: #C8B6A2; --taupe-bg: #F3EDE6;
  --sand: #DAD3CB; --sand-hell: #E7E2DE; --grau: #F1F0F0; --papier: #FBF9F9; --creme: #FCFAF5;
  /* Fläche und Text */
  --grund: #F6F3EE; --linie: #ECE7E1; --linie-hell: #F2EEE9; --spur: #F0EBE5;
  --text: var(--navy); --text2: #676C84; --text3: #9C9FAF; --chev: #C3C0C6;
  /* Signal */
  --gruen: #3E7A5C; --gruen-bg: #E7F0EA; --rot: #B4513A; --rot-bg: #F8E8E2; --amber: #A8722B; --amber-bg: #F6EDDC;
  --navy-bg: #EEF0F5;
  /* Schatten */
  --schatten: 0 1px 2px rgba(28,36,75,.04), 0 10px 30px -10px rgba(28,36,75,.10);
  --schatten-knopf: 0 1px 1px rgba(20,26,56,.2), 0 8px 18px -6px rgba(28,36,75,.45);
  /* Bewegung */
  --ios: cubic-bezier(.32,.72,0,1);
  --ios-aus: cubic-bezier(.25,.1,.25,1);
  /* Maße. --sat/--sab: Safe Areas (im Browser simuliert über .web-sim). --sat schließt die Hinweisleiste ein
     (--hinweis-h, Betrieb ohne onOffice, shell/hinweisleiste.js), damit sie nichts verdeckt; --sat-roh ist die Safe Area allein. */
  --sat-roh: env(safe-area-inset-top, 0px);
  --hinweis-h: 0px;
  --sat: calc(var(--sat-roh) + var(--hinweis-h));
  --sab: env(safe-area-inset-bottom, 0px);
  --leiste-h: 44px;
  --tab-h: 50px;
  --schrift: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
}
/* Browser-Vorschau ohne echte Safe Areas: wie iPhone mit Dynamic Island (Design: Statusleiste 54 px, Home-Balken 34 px) */
html.web-sim { --sat-roh: 54px; --sab: 34px; }
html.mit-hinweisleiste { --hinweis-h: 28px; }
@media (max-width: 600px) { html.mit-hinweisleiste.hinweis-zusatz { --hinweis-h: 42px; } }

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

html, body {
  height: 100%; overflow: hidden; overscroll-behavior: none;
  background: var(--grund); color: var(--navy);
  font-family: var(--schrift); font-size: 15px; line-height: 1.35;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body { position: fixed; inset: 0; }

img, svg, video { display: block; max-width: 100%; }
img { -webkit-user-drag: none; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; -webkit-appearance: none; appearance: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select {
  font: inherit; color: inherit; font-size: 16px; /* 16 px: iOS zoomt sonst beim Fokus */
  -webkit-user-select: text; user-select: text; -webkit-touch-callout: default;
  border: 0; background: none; outline: none; -webkit-appearance: none; appearance: none;
}
/* Haken: Der Reset oben nimmt Checkboxen das ganze Aussehen (in iOS unsichtbar), deshalb hier eigener Rahmen und Haken */
input[type=checkbox] {
  flex: none; width: 22px; height: 22px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--taupe-hell); border-radius: 6px; background: #fff center / 14px 14px no-repeat;
  -webkit-user-select: none; user-select: none; transition: background-color .15s, border-color .15s;
}
input[type=checkbox]:checked {
  border-color: var(--navy); background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
input[type=checkbox]:focus-visible { box-shadow: 0 0 0 3px rgba(158,139,119,.25); }
[contenteditable] { -webkit-user-select: text; user-select: text; }
ul, ol { list-style: none; }
em { font-style: normal; }
[hidden] { display: none !important; }

/* Typografie (aus dem Design) */
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.ic { display: block; flex: none; }
.kicker { font: 600 12px/16px var(--schrift); letter-spacing: .07em; text-transform: uppercase; color: var(--taupe-tief); }
.lt { font: 700 34px/40px var(--schrift); letter-spacing: -.028em; margin-top: 2px; color: var(--navy); }
.h2 { font: 700 26px/31px var(--schrift); letter-spacing: -.025em; color: var(--navy); }
.h3 { font: 700 20px/25px var(--schrift); letter-spacing: -.02em; color: var(--navy); }
.t1 { font: 600 15px/20px var(--schrift); letter-spacing: -.01em; color: var(--navy); }
.t2 { font: 400 13px/18px var(--schrift); color: var(--text2); }
.t3 { font: 500 12px/16px var(--schrift); color: var(--text3); }
.mini { font: 500 12px/16px var(--schrift); color: var(--text3); }
.fliess { font: 400 15px/22px var(--schrift); color: var(--text2); }
.einzeilig { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pad { padding: 0 16px; }