/* ============================================================
   mf-tool — design.css  (Paket 196: EIN Designsystem)

   Wird als LETZTES Stylesheet geladen (system/kopf.php, mobil/,
   Anmeldung, Messe, TV) und legt über alle Werkzeuge dieselbe
   Gestaltung — ohne dass jedes Modul einzeln umgebaut werden muss:

   1. Eine Schrift: Inter. Die schmale Überschriftenschrift (Barlow
      Condensed) und die Schreibmaschinenschrift (IBM Plex Mono) für
      Beschriftungen entfallen; Zahlen stehen trotzdem bündig
      (tabellarische Ziffern).
   2. Beschriftungen in normaler Schreibweise statt GESPERRTER
      GROSSBUCHSTABEN — besser lesbar, ruhiger.
   3. Lesbarer Kontrast: Neben- und Hilfetexte mindestens 4,5 : 1.
   4. Knöpfe: ein ruhiger grauer Standard, Orange nur für die
      Hauptaktion; Rückmeldung schon beim Drücken.
   5. Dunkelmodus nach Systemeinstellung (oder fest in den
      Einstellungen gewählt), Druck immer hell.
   6. Weniger Bewegung, wenn das Gerät es wünscht.
   ============================================================ */

/* ---------- 1–3: Schrift, Schreibweise, Ziffern ---------- */
html body, html body :is(input, select, textarea, button, table, th, td, label, span, div, p, a, b, strong, h1, h2, h3, h4, h5, h6, li, small, code, pre, kbd){
  font-family: var(--text, 'Inter', system-ui, -apple-system, sans-serif) !important;
}
html body *{
  text-transform: none !important;
  letter-spacing: normal !important;
}
html body :is(h1, h2){ letter-spacing: -0.02em !important; }
html body :is(h3, h4){ letter-spacing: -0.01em !important; }
html body :is(td, th, input, .mono, [class*="betrag"], [class*="summe"], [class*="zahl"], [class*="eur"], [class*="num"]){
  font-variant-numeric: tabular-nums;
}
html body{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
/* Etiketten der Formulare und Tabellenköpfe: normale Schreibweise,
   gut lesbare Größe, Sekundärfarbe */
html body :is(.etikett, .kap, .es-kap, .mp-kap, .bh-lbl, .kk-label, .kt-label, .vk-kap, th){
  font-weight: 600;
}

/* ---------- 4: Knöpfe ---------- */
html body :is(.kk-btn, .kt-btn, .es-btn, .bh-knopf, .vk-knopf, .pl-knopf, .ak-knopf, .zt-knopf, .kal-knopf, .ag-knopf, .ms-knopf){
  border-radius: 10px !important;
  font-weight: 600 !important;
}
html body :is(.kk-btn, .kt-btn, .es-btn, .bh-knopf).ghost,
html body :is(.kk-btn, .kt-btn).tiny{
  border-color: transparent !important;
  background: var(--flaeche-knopf) !important;
  color: var(--tinte) !important;
}
html body :is(.kk-btn, .kt-btn, .es-btn, .bh-knopf).ghost:hover,
html body :is(.kk-btn, .kt-btn).tiny:hover{ background: var(--flaeche-knopf-hov) !important; }
/* Rückmeldung beim Drücken — für ALLE Knöpfe, auch in der App */
html body :is(button, [role="button"], .kachel, a.kk-btn, a.sich-knopf):not(:disabled):active{
  transform: scale(.97);
  transition: transform 80ms ease-out;
}
html body :is(button, [role="button"]){ -webkit-tap-highlight-color: transparent; }
:focus-visible{ outline: none; box-shadow: var(--fokus); border-radius: 6px; }

/* Links und orangefarbener Text: dunkleres Orange für genug Kontrast */
html body a:not([class]){ color: var(--signal-text); }

/* ---------- 5: Dunkelmodus ---------- */
/* Hell: Nebentext kräftiger (4,5 : 1), auch in der App */
html:root{ --gedaempft:#66717C; --mute:#66717C; }
:root{
  --flaeche-knopf: #EEEFF2;
  --flaeche-knopf-hov: #E3E5E9;
  --signal-text: #C2510A;
}
@media (prefers-color-scheme: dark){
  html:not([data-thema="hell"]){ color-scheme: dark; }
}
html[data-thema="dunkel"]{ color-scheme: dark; }

/* Die Werte stehen in token.css (Kern) und gelten über die Aliasse für
   alle Module. Für den Dunkelmodus werden nur die Kernwerte getauscht. */
@media screen and (prefers-color-scheme: dark){
  html:not([data-thema="hell"]){
    --grund:#000000; --flaeche:#1C1C1E; --karte:#1C1C1E; --linie:#2C2C2E; --linie2:#3A3A3C;
    --tinte:#F5F5F7; --stahl:#C7C7CC; --gedaempft:#98989F;
    --signal:#FF7A1A; --signal-hov:#FF8C3A; --signal-bg:#3A2412; --signal-text:#FF9A4D;
    --gut:#32D74B; --gut-bg:#16301C; --warn:#FFD60A; --warn-bg:#3A3210; --fehler:#FF453A; --fehler-bg:#3B1614;
    --nav-grund:#0B0B0C; --nav-text:#A1A1A6; --nav-leise:#636366;
    --flaeche-knopf:#2C2C2E; --flaeche-knopf-hov:#3A3A3C;
    --schatten-ruhe: 0 0 0 1px rgba(255,255,255,.06);
    --schatten-schwebt: 0 12px 40px rgba(0,0,0,.6);
    /* mobile App */
    --paper:#000000; --card:#1C1C1E; --ink:#F5F5F7; --steel:#C7C7CC; --mute:#98989F;
    --line:#2C2C2E; --line2:#3A3A3C; --accent:#FF7A1A;
  }
}
@media screen{ html[data-thema="dunkel"]{
  --grund:#000000; --flaeche:#1C1C1E; --karte:#1C1C1E; --linie:#2C2C2E; --linie2:#3A3A3C;
  --tinte:#F5F5F7; --stahl:#C7C7CC; --gedaempft:#98989F;
  --signal:#FF7A1A; --signal-hov:#FF8C3A; --signal-bg:#3A2412; --signal-text:#FF9A4D;
  --gut:#32D74B; --gut-bg:#16301C; --warn:#FFD60A; --warn-bg:#3A3210; --fehler:#FF453A; --fehler-bg:#3B1614;
  --nav-grund:#0B0B0C; --nav-text:#A1A1A6; --nav-leise:#636366;
  --flaeche-knopf:#2C2C2E; --flaeche-knopf-hov:#3A3A3C;
  --schatten-ruhe: 0 0 0 1px rgba(255,255,255,.06);
  --schatten-schwebt: 0 12px 40px rgba(0,0,0,.6);
  --paper:#000000; --card:#1C1C1E; --ink:#F5F5F7; --steel:#C7C7CC; --mute:#98989F;
  --line:#2C2C2E; --line2:#3A3A3C; --accent:#FF7A1A;
} }

/* ---------- 6: weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html body *, html body *::before, html body *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Druck: immer hell, wie bisher ---------- */
@media print{
  html{ color-scheme: light !important; }
}

/* Paket 196: dunkles Signet (Anmeldung, Seiten mit hellem Grund) im
   Dunkelmodus hell zeigen */
@media screen and (prefers-color-scheme: dark){
  html:not([data-thema="hell"]) img.signet{ filter: invert(1) hue-rotate(180deg); }
}
@media screen{ html[data-thema="dunkel"] img.signet{ filter: invert(1) hue-rotate(180deg); } }