/* Gemeinsame Gestaltung der Vorschau: neutral, ruhig, eine Akzentfarbe. Wird von allen Seiten geladen. */
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&display=swap");

:root {
  --grund: #f5f5f2;
  --karte: #ffffff;
  --tinte: #14161a;
  --text: #3b4047;
  --leise: #6c727a;
  --hauch: #9aa0a7;
  --linie: rgba(20, 22, 26, .08);
  --linie-stark: rgba(20, 22, 26, .14);
  --flaeche: #f0f0ec;
  --akzent: #2f5bea;
  --akzent-weich: #eaf0ff;
  --gut: #1d8a5f;
  --gut-weich: #e6f4ee;
  --warn: #b45309;
  --warn-weich: #fdf1e3;
  --schatten: 0 1px 2px rgba(20, 22, 26, .04), 0 8px 24px rgba(20, 22, 26, .06);
  --schatten-hoch: 0 2px 6px rgba(20, 22, 26, .06), 0 24px 60px rgba(20, 22, 26, .14);
  --r-s: 10px;
  --r-m: 16px;
  --r-l: 22px;
  --schrift: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--grund); color: var(--text); font: 400 15px/1.55 var(--schrift); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4 { color: var(--tinte); margin: 0; font-weight: 600; letter-spacing: -.015em; }
p { margin: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.zahl { font-variant-numeric: tabular-nums; }

/* Muster-Hinweis ganz oben */
.musterband { background: var(--tinte); color: #e9eaec; font-size: 13px; text-align: center; padding: 8px 16px; }
.musterband b { color: #fff; font-weight: 600; }

/* Logo-Platzhalter: hier kommt später das Kundenlogo hin */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: var(--tinte); text-decoration: none; }
.logo .marke { width: 30px; height: 30px; border-radius: 9px; border: 1.5px dashed var(--linie-stark); display: grid; place-items: center; font-size: 10px; color: var(--hauch); font-weight: 500; background: var(--karte); }
.logo small { display: block; font-size: 12px; font-weight: 400; color: var(--leise); line-height: 1.2; }

.karte { background: var(--karte); border-radius: var(--r-l); box-shadow: var(--schatten); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 99px; background: var(--karte); box-shadow: inset 0 0 0 1px var(--linie); font-size: 13px; color: var(--text); white-space: nowrap; }
.chip.akzent { background: var(--akzent-weich); box-shadow: none; color: var(--akzent); }
.chip.gut { background: var(--gut-weich); box-shadow: none; color: var(--gut); }
.chip.warn { background: var(--warn-weich); box-shadow: none; color: var(--warn); }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; text-decoration: none; padding: 11px 18px; border-radius: 12px; font-weight: 500; font-size: 14.5px; background: var(--tinte); color: #fff; transition: transform .15s ease, background .15s ease; }
.knopf:hover { transform: translateY(-1px); }
.knopf.hell { background: var(--karte); color: var(--tinte); box-shadow: inset 0 0 0 1px var(--linie-stark); }
.knopf.akzent { background: var(--akzent); }
.knopf:focus-visible, .schalter:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.fuss { text-align: center; color: var(--hauch); font-size: 13px; padding: 40px 16px 48px; }
.fuss a { color: var(--leise); }

/* Ein-/Aus-Schalter */
.schalter { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #d5d7da; border: 0; cursor: pointer; flex: none; transition: background .2s; padding: 0; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.schalter[aria-checked="true"] { background: var(--gut); }
.schalter[aria-checked="true"]::after { transform: translateX(18px); }

@media (max-width: 640px) {
  body { font-size: 14.5px; }
}