/* Veracis Assistent: gemeinsame Grundlage für Angebotsseite, Kunden-Oberfläche und Admin. */
@font-face { font-family: "Manrope"; src: url("/fonts/manrope.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
  --tinte: #111111; --grau: #6a6a66; --hell: #9a9a95; --linie: #e7e7e3; --flaeche: #f6f6f3; --weiss: #ffffff;
  --akzent: #1a3a5c; --gut: #1f7a4d; --warn: #a15c00; --schlecht: #b3261e; --marker: #fff3bf;
  --radius: 14px; --schatten: 0 1px 2px rgba(17,17,17,.04), 0 8px 24px rgba(17,17,17,.06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--tinte); background: var(--weiss); font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
h1, h2, h3, p { margin: 0; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--tinte); background: var(--tinte); color: #fff; border-radius: 999px; padding: 10px 18px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap; transition: transform .08s ease, opacity .15s ease; }
.knopf:hover { opacity: .88; }
.knopf:active { transform: scale(.98); }
.knopf[disabled] { opacity: .45; cursor: default; }
.knopf.hell { background: #fff; color: var(--tinte); border-color: var(--linie); }
.knopf.hell:hover { border-color: var(--tinte); opacity: 1; }
.knopf.klein { padding: 6px 12px; font-size: 13px; }
.knopf.rot { background: #fff; color: var(--schlecht); border-color: #f0c9c6; }
.feld { display: block; }
.feld > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; }
.feld input, .feld select, .feld textarea, .eingabe { width: 100%; border: 1px solid var(--linie); border-radius: 10px; padding: 10px 12px; background: #fff; outline: none; transition: border-color .15s; }
.feld textarea { min-height: 120px; resize: vertical; line-height: 1.45; }
.feld input:focus, .feld select:focus, .feld textarea:focus, .eingabe:focus { border-color: var(--tinte); }
.karte { border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; }
.marke { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600; background: var(--flaeche); color: var(--grau); white-space: nowrap; }
.marke.gut { background: #e7f4ec; color: var(--gut); }
.marke.warn { background: #fdf1dc; color: var(--warn); }
.marke.schlecht { background: #fbe9e7; color: var(--schlecht); }
.marke.dunkel { background: var(--tinte); color: #fff; }
.zahl { font-variant-numeric: tabular-nums; }
.leise { color: var(--grau); }
.meldung { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinte); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; z-index: 90; box-shadow: var(--schatten); max-width: calc(100vw - 32px); }
.meldung.fehler { background: var(--schlecht); }
dialog { border: 0; border-radius: 18px; padding: 0; box-shadow: 0 24px 80px rgba(0,0,0,.25); max-width: calc(100vw - 24px); color: var(--tinte); }
dialog::backdrop { background: rgba(17,17,17,.45); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }