/* SortWerk: gemeinsame Farben, Schrift und Grundelemente (Landingpage, Rechtsseiten, Dashboard) */
:root {
  --papier: #f4f3ee;
  --flaeche: #ffffff;
  --flaeche-2: #f9f8f5;
  --linie: #e2e0d8;
  --linie-stark: #cdcabf;
  --tinte: #16202a;
  --tinte-2: #4b5662;
  --tinte-3: #7b8591;
  --akzent: #0c7a62;
  --akzent-stark: #095e4c;
  --akzent-hell: #e2f1ec;
  --akzent-text: #ffffff;
  --warn: #8f5b00;
  --warn-hell: #fbf0da;
  --gefahr: #b42318;
  --gefahr-hell: #fdeceb;
  --info: #2b5797;
  --info-hell: #e8eef8;
  --radius: 10px;
  --radius-klein: 6px;
  --schatten: 0 1px 2px rgba(22, 32, 42, .06), 0 1px 1px rgba(22, 32, 42, .03);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", monospace;
  --luft: 16px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier: #11171d;
    --flaeche: #182029;
    --flaeche-2: #1c2530;
    --linie: #2a3542;
    --linie-stark: #3a4756;
    --tinte: #e8ecef;
    --tinte-2: #b3bcc5;
    --tinte-3: #87929e;
    --akzent: #34b493;
    --akzent-stark: #4cc7a6;
    --akzent-hell: #16342d;
    --akzent-text: #08221b;
    --warn: #e0a640;
    --warn-hell: #33280f;
    --gefahr: #f0786d;
    --gefahr-hell: #3a1d1b;
    --info: #8db3ea;
    --info-hell: #1b2a40;
    --schatten: 0 1px 2px rgba(0, 0, 0, .3);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 15px/1.55 var(--schrift);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.01em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .75em; }
a { color: var(--akzent-stark); text-underline-offset: 2px; }
@media (prefers-color-scheme: dark) { a { color: var(--akzent); } }
code, kbd { font-family: var(--mono); font-size: .9em; }
img, svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.marke { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 1.15rem; color: var(--tinte); text-decoration: none; letter-spacing: -.02em; }
.marke b { color: var(--akzent); font-weight: 800; }
.marke svg { width: 26px; height: 26px; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 38px; padding: 0 16px; border-radius: var(--radius-klein);
  border: 1px solid var(--linie-stark); background: var(--flaeche); color: var(--tinte);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap;
}
.knopf:hover { border-color: var(--tinte-3); }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-text); }
.knopf.primaer:hover { background: var(--akzent-stark); border-color: var(--akzent-stark); }
.knopf.gefahr { color: var(--gefahr); border-color: color-mix(in srgb, var(--gefahr) 45%, transparent); }
.knopf.gefahr:hover { background: var(--gefahr-hell); }
.knopf.leise { border-color: transparent; background: transparent; color: var(--tinte-2); padding: 0 10px; }
.knopf.leise:hover { background: var(--flaeche-2); color: var(--tinte); }
.knopf.klein { min-height: 30px; padding: 0 10px; font-size: .875rem; }
.knopf[disabled] { opacity: .5; cursor: not-allowed; }

.google-knopf { background: #fff; color: #1f1f1f; border: 1px solid #747775; min-height: 44px; padding: 0 18px; border-radius: 22px; font-weight: 500; }
.google-knopf:hover { background: #f8f9fa; border-color: #747775; }
.google-knopf svg { width: 18px; height: 18px; }