/* ==========================================================================
   Online-Ankauf - Gestaltungssystem

   Zwei Nutzungslagen, die sich widersprechen:
     Kunde  - Handy, unterwegs, einmalig, Vertrauensfrage. Grosse Flaechen,
              eine Entscheidung je Bildschirm, der Betrag immer sichtbar.
     Admin  - Schreibtisch, taeglich, Liste, Vergleich. Dichte Tabellen,
              viele Werte nebeneinander.
   Deshalb dieselben Bausteine, aber zwei Dichten: .seite fuer den Kunden,
   .werkbank fuer das Admin.

   Hell als Grundlage - anders als die internen Werkzeuge des Hauses. Ein
   Ankaufsformular, das dunkel aufgeht, wirkt auf einem fremden Telefon wie
   ein Fehler, nicht wie eine Gestaltungsentscheidung.
   ========================================================================== */

:root {
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 20px; --s6: 24px; --s7: 32px; --s8: 40px; --s9: 56px;

  --r-klein: 10px;
  --r: 14px;
  --r-gross: 20px;
  --r-pille: 999px;

  --schrift: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --schrift-zahl: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;

  --uebergang: 140ms cubic-bezier(0.2, 0, 0.2, 1);

  --grund: #f5f7fa;
  --flaeche: #ffffff;
  --flaeche-2: #f0f3f8;
  --flaeche-3: #e4e9f1;
  --rand: #dde3ec;
  --rand-stark: #c2cbd9;

  --text: #101520;
  --text-2: #4e5a6e;
  --text-3: #7b8698;

  --akzent: #1f5fd8;
  --akzent-dunkel: #1a4fb4;
  --akzent-schwach: #1f5fd814;
  --akzent-text: #1a4fb4;

  --gut: #12844d;
  --gut-schwach: #12844d14;
  --warn: #8a5d05;
  --warn-schwach: #f0b52926;
  --fehler: #c2352a;
  --fehler-schwach: #c2352a14;

  --schatten: 0 1px 2px rgba(16, 21, 32, 0.05), 0 8px 24px rgba(16, 21, 32, 0.06);
  --schatten-klein: 0 1px 2px rgba(16, 21, 32, 0.08);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #0d1017;
    --flaeche: #161a23;
    --flaeche-2: #1e232f;
    --flaeche-3: #272d3b;
    --rand: #2c3342;
    --rand-stark: #3d4557;

    --text: #edf0f6;
    --text-2: #a5aebf;
    --text-3: #6c7688;

    --akzent: #5b93ff;
    --akzent-dunkel: #7aa9ff;
    --akzent-schwach: #5b93ff20;
    --akzent-text: #93b8ff;

    --gut: #3ecf7e;
    --gut-schwach: #3ecf7e1c;
    --warn: #f5c454;
    --warn-schwach: #f5b5441c;
    --fehler: #ff7266;
    --fehler-schwach: #ff6b5e1c;

    --schatten: 0 1px 2px rgba(0, 0, 0, 0.45), 0 8px 24px rgba(0, 0, 0, 0.3);
    --schatten-klein: 0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--text);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { line-height: 1.25; margin: 0 0 var(--s3) 0; font-weight: 650; letter-spacing: -0.01em; }
h1 { font-size: 1.65rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 var(--s3) 0; }
a { color: var(--akzent-text); }

/* ---------------------------------------------------------------- */
/* Grundgerueste                                                     */
/* ---------------------------------------------------------------- */

.seite { max-width: 44rem; margin: 0 auto; padding: var(--s5) var(--s4) var(--s9); }
.werkbank { max-width: 84rem; margin: 0 auto; padding: var(--s5) var(--s4) var(--s9); }

.kopf {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s4) 0; margin-bottom: var(--s4);
  border-bottom: 1px solid var(--rand);
  flex-wrap: wrap;
}
.kopf .marke { font-weight: 700; letter-spacing: -0.02em; font-size: 1.05rem; }
.kopf .luecke { flex: 1; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--r);
  padding: var(--s5);
  box-shadow: var(--schatten-klein);
  margin-bottom: var(--s4);
}
.karte.schmal { padding: var(--s4); }

/* ---------------------------------------------------------------- */
/* Schrittanzeige                                                    */
/* ---------------------------------------------------------------- */

.schritte { display: flex; gap: var(--s2); margin-bottom: var(--s5); flex-wrap: wrap; }
.schritte li {
  list-style: none; font-size: 0.78rem; color: var(--text-3);
  display: flex; align-items: center; gap: var(--s2);
}
.schritte li::before {
  content: attr(data-nr);
  width: 22px; height: 22px; border-radius: var(--r-pille);
  background: var(--flaeche-3); color: var(--text-3);
  display: grid; place-items: center; font-weight: 650; font-size: 0.72rem;
  transition: var(--uebergang);
}
.schritte li[aria-current='step'] { color: var(--text); font-weight: 600; }
.schritte li[aria-current='step']::before { background: var(--akzent); color: #fff; }
.schritte li.erledigt::before { background: var(--gut); color: #fff; content: '\2713'; }
.schritte ul { display: contents; }

/* ---------------------------------------------------------------- */
/* Auswahlkacheln                                                    */
/* ---------------------------------------------------------------- */

.raster { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.raster.breit { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

.kachel {
  appearance: none; -webkit-appearance: none;
  display: block; width: 100%; text-align: left;
  background: var(--flaeche); border: 1.5px solid var(--rand);
  border-radius: var(--r-klein); padding: var(--s4);
  font: inherit; color: inherit; cursor: pointer;
  transition: var(--uebergang);
}
.kachel:hover { border-color: var(--rand-stark); transform: translateY(-1px); }
.kachel:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.kachel[aria-pressed='true'] { border-color: var(--akzent); background: var(--akzent-schwach); }
.kachel .titel { font-weight: 600; display: block; }
.kachel .unter { font-size: 0.84rem; color: var(--text-2); display: block; margin-top: 2px; }
.kachel .preis {
  display: block; margin-top: var(--s2);
  font-family: var(--schrift-zahl); font-weight: 650; color: var(--gut);
}

/* Zustandsauswahl: eine Spalte, weil der Text zaehlt, nicht das Raster. */
.zustandsliste { display: grid; gap: var(--s2); }
.zustandsliste .kachel { display: flex; align-items: flex-start; gap: var(--s4); }
.zustandsliste .kachel .beschreibung { flex: 1; }
.zustandsliste .kachel .betrag {
  font-family: var(--schrift-zahl); font-weight: 700; font-size: 1.1rem;
  white-space: nowrap; color: var(--akzent-text);
}

/* ---------------------------------------------------------------- */
/* Fragen                                                            */
/* ---------------------------------------------------------------- */

.frage { padding: var(--s4) 0; border-bottom: 1px solid var(--rand); }
.frage:last-child { border-bottom: 0; }
.frage .text { font-weight: 550; margin-bottom: var(--s1); }
.frage .hilfe { font-size: 0.85rem; color: var(--text-2); margin-bottom: var(--s3); }

.janein { display: flex; gap: var(--s2); }
.janein button {
  flex: 1; max-width: 8rem;
  appearance: none; font: inherit; font-weight: 600; cursor: pointer;
  padding: var(--s3) var(--s4); border-radius: var(--r-klein);
  border: 1.5px solid var(--rand); background: var(--flaeche); color: var(--text-2);
  transition: var(--uebergang);
}
.janein button:hover { border-color: var(--rand-stark); }
.janein button[aria-pressed='true'] { border-color: var(--akzent); background: var(--akzent); color: #fff; }

/* ---------------------------------------------------------------- */
/* Betrag                                                            */
/* ---------------------------------------------------------------- */

.betragskarte {
  background: linear-gradient(160deg, var(--akzent-schwach), transparent 70%);
  border: 1.5px solid var(--akzent);
  border-radius: var(--r);
  padding: var(--s6);
  text-align: center;
  margin-bottom: var(--s4);
}
.betragskarte .marke { font-size: 0.88rem; color: var(--text-2); }
.betragskarte .zahl {
  font-family: var(--schrift-zahl); font-weight: 700;
  font-size: clamp(2.4rem, 12vw, 3.4rem); line-height: 1.1;
  color: var(--akzent-text); margin: var(--s2) 0;
  letter-spacing: -0.02em;
}
.betragskarte .fussnote { font-size: 0.84rem; color: var(--text-2); margin: 0; }

/* ---------------------------------------------------------------- */
/* Formular                                                          */
/* ---------------------------------------------------------------- */

.feldreihe { display: grid; gap: var(--s3); grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .feldreihe { grid-template-columns: 1fr; } }

.feld { display: block; margin-bottom: var(--s3); }
.feld > span { display: block; font-size: 0.85rem; font-weight: 550; margin-bottom: var(--s1); color: var(--text-2); }
.feld .hinweis { font-weight: 400; color: var(--text-3); }

input[type='text'], input[type='email'], input[type='tel'], input[type='date'],
input[type='number'], input[type='password'], input[type='search'], select, textarea {
  width: 100%; font: inherit; color: var(--text);
  background: var(--flaeche); border: 1.5px solid var(--rand);
  border-radius: var(--r-klein); padding: var(--s3);
  transition: var(--uebergang);
}
textarea { min-height: 6rem; resize: vertical; font-family: inherit; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-schwach); }
input[aria-invalid='true'], select[aria-invalid='true'] { border-color: var(--fehler); }
input::placeholder, textarea::placeholder { color: var(--text-3); }

.feldfehler { color: var(--fehler); font-size: 0.82rem; margin-top: var(--s1); display: block; }

.haken { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) 0; cursor: pointer; }
.haken input { width: 20px; height: 20px; margin: 2px 0 0 0; flex: none; accent-color: var(--akzent); }
.haken span { font-size: 0.9rem; }

/* ---------------------------------------------------------------- */
/* Knoepfe                                                           */
/* ---------------------------------------------------------------- */

.knopf {
  appearance: none; font: inherit; font-weight: 600; cursor: pointer;
  padding: var(--s3) var(--s5); border-radius: var(--r-klein);
  border: 1.5px solid transparent; background: var(--akzent); color: #fff;
  transition: var(--uebergang); text-decoration: none; display: inline-block;
  text-align: center;
}
.knopf:hover { background: var(--akzent-dunkel); }
.knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.knopf:disabled { opacity: 0.45; cursor: not-allowed; }
.knopf.gross { width: 100%; padding: var(--s4); font-size: 1.02rem; }
.knopf.stumm { background: var(--flaeche); color: var(--text); border-color: var(--rand); }
.knopf.stumm:hover { background: var(--flaeche-2); }
.knopf.gefahr { background: var(--fehler); }
.knopf.klein { padding: var(--s2) var(--s3); font-size: 0.85rem; }

.knopfreihe { display: flex; gap: var(--s2); flex-wrap: wrap; margin-top: var(--s4); }

/* ---------------------------------------------------------------- */
/* Meldungen                                                         */
/* ---------------------------------------------------------------- */

.meldung {
  border-radius: var(--r-klein); padding: var(--s3) var(--s4);
  margin-bottom: var(--s4); font-size: 0.92rem;
  border: 1px solid transparent;
}
.meldung.info { background: var(--akzent-schwach); border-color: var(--akzent); color: var(--akzent-text); }
.meldung.gut { background: var(--gut-schwach); border-color: var(--gut); color: var(--gut); }
.meldung.warn { background: var(--warn-schwach); border-color: var(--warn); color: var(--warn); }
.meldung.fehler { background: var(--fehler-schwach); border-color: var(--fehler); color: var(--fehler); }
.meldung ul { margin: var(--s2) 0 0 0; padding-left: var(--s5); }

/* ---------------------------------------------------------------- */
/* Verlauf                                                           */
/* ---------------------------------------------------------------- */

.verlauf { list-style: none; margin: 0; padding: 0; }
.verlauf li {
  position: relative; padding: 0 0 var(--s4) var(--s6);
  border-left: 2px solid var(--rand); margin-left: 5px;
}
.verlauf li:last-child { border-left-color: transparent; padding-bottom: 0; }
.verlauf li::before {
  content: ''; position: absolute; left: -7px; top: 5px;
  width: 12px; height: 12px; border-radius: var(--r-pille);
  background: var(--rand-stark); border: 2px solid var(--grund);
}
.verlauf li.jetzt::before { background: var(--akzent); }
.verlauf .zeit { font-size: 0.78rem; color: var(--text-3); display: block; }

/* ---------------------------------------------------------------- */
/* Tabellen (Admin)                                                  */
/* ---------------------------------------------------------------- */

.tabellenrahmen { overflow-x: auto; border: 1px solid var(--rand); border-radius: var(--r); background: var(--flaeche); }
table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
th, td { padding: var(--s3); text-align: left; border-bottom: 1px solid var(--rand); white-space: nowrap; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-3); font-weight: 650; background: var(--flaeche-2); position: sticky; top: 0; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--flaeche-2); }
td.zahl, th.zahl { text-align: right; font-family: var(--schrift-zahl); }
td.frei { white-space: normal; }

.marke-status {
  display: inline-block; padding: 2px var(--s2); border-radius: var(--r-pille);
  font-size: 0.75rem; font-weight: 650; background: var(--flaeche-3); color: var(--text-2);
}
.marke-status.wartet { background: var(--warn-schwach); color: var(--warn); }
.marke-status.laeuft { background: var(--akzent-schwach); color: var(--akzent-text); }
.marke-status.fertig { background: var(--gut-schwach); color: var(--gut); }
.marke-status.aus { background: var(--fehler-schwach); color: var(--fehler); }

/* Kennzahlen */
.kennzahlen { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); margin-bottom: var(--s5); }
.kennzahl { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--r-klein); padding: var(--s4); }
.kennzahl .wert { font-family: var(--schrift-zahl); font-size: 1.6rem; font-weight: 700; line-height: 1.1; }
.kennzahl .name { font-size: 0.8rem; color: var(--text-2); margin-top: var(--s1); }
.kennzahl.achtung .wert { color: var(--warn); }
.kennzahl.gut .wert { color: var(--gut); }

/* Reiter */
.reiter { display: flex; gap: var(--s1); border-bottom: 1px solid var(--rand); margin-bottom: var(--s5); overflow-x: auto; }
.reiter button {
  appearance: none; font: inherit; font-weight: 550; cursor: pointer;
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: var(--s3) var(--s4); color: var(--text-2); white-space: nowrap;
}
.reiter button[aria-selected='true'] { color: var(--akzent-text); border-bottom-color: var(--akzent); }

/* ---------------------------------------------------------------- */
/* Kleinkram                                                         */
/* ---------------------------------------------------------------- */

.stumm { color: var(--text-2); }
.klein { font-size: 0.85rem; }
.zahlen { font-family: var(--schrift-zahl); }
.verstecken { display: none !important; }
.mittig { text-align: center; }
.trenner { height: 1px; background: var(--rand); border: 0; margin: var(--s5) 0; }

.laden { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--rand-stark); border-top-color: var(--akzent); border-radius: 50%; animation: dreh 700ms linear infinite; vertical-align: -3px; }
@keyframes dreh { to { transform: rotate(360deg); } }

.fuss { margin-top: var(--s9); padding-top: var(--s4); border-top: 1px solid var(--rand); font-size: 0.84rem; color: var(--text-3); }
.fuss a { color: var(--text-2); margin-right: var(--s4); }

dialog {
  border: 1px solid var(--rand); border-radius: var(--r); padding: var(--s5);
  background: var(--flaeche); color: var(--text); max-width: 34rem; width: calc(100% - 2rem);
  box-shadow: var(--schatten);
}
dialog::backdrop { background: rgba(8, 12, 20, 0.5); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}