/* atoms.css — Knopf, Pille, Feld, Punkt. Keine Abhängigkeiten untereinander. */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  padding: 11px 18px;
  border: 0; border-radius: var(--radius-md);
  font-size: 15px; font-weight: 500;
  background: var(--surface-sunken); color: var(--text-primary);
  transition: filter .15s ease, transform .1s ease;
}
.knopf:hover { filter: brightness(1.06); }
.knopf:active { transform: translateY(1px); }
.knopf:disabled { opacity: .5; cursor: default; transform: none; filter: none; }

/* Der Verlauf läuft INNERHALB einer Palette. Der Nordlicht-Verlauf über
   drei Farben ist Markenpräsenz und gehört aufs Logo, nicht auf Knöpfe. */
.knopf--haupt {
  background: linear-gradient(180deg, var(--sky-500), var(--sky-600));
  color: var(--text-on-brand);
  box-shadow: 0 4px 12px -4px rgba(14,165,233,.35);
}
.knopf--rand {
  background: var(--surface-card-raised);
  border: 1px solid var(--border-structural);
}
.knopf--still { background: transparent; color: var(--text-body); }
.knopf--gefahr { background: var(--fn-danger); color: #fff; }
.knopf--klein { padding: 6px 10px; font-size: 13px; border-radius: var(--radius-sm); }
.knopf--rund { padding: 8px; border-radius: 999px; width: 36px; height: 36px; }

/* Ein Knopf, der nur ein Icon trägt, ist quadratisch — sonst wandert
   seine Breite mit der Strichlänge des Icons und die Spalten der
   Prüfliste stehen krumm untereinander. */
.knopf--symbol { width: 34px; height: 34px; padding: 0; }

/* Hören ist der erste Griff und hebt sich deshalb ab: kräftigerer Rand,
   Markenfarbe im Icon. Ein voll eingefärbter Knopf wäre zu laut — er
   steht 358 Mal untereinander. */
.knopf--hoeren {
  background: var(--surface-card-raised); color: var(--sky-600);
  box-shadow: inset 0 0 0 1px var(--border-structural-strong);
}

/* Die drei Urteilszustände. Sie färben den Knopf selbst, nicht die
   Zeile: Wer prüft, sieht dann an der Spalte, was er gesagt hat, und
   die Liste bleibt ruhig. */
.knopf--gut {
  background: var(--fn-success-bg); color: var(--fn-success);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fn-success) 35%, transparent);
}
.knopf--beanstandet {
  background: var(--fn-error-bg); color: var(--fn-error);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fn-error) 35%, transparent);
}
.knopf--laeuft {
  background: linear-gradient(180deg, var(--sky-500), var(--sky-600));
  color: var(--text-on-brand);
  box-shadow: 0 4px 12px -4px rgba(14,165,233,.4);
}

.pille {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap;
}
.pille--neutral { background: var(--surface-sunken); color: var(--text-body); }
.pille--marke   { background: color-mix(in srgb, var(--sky-500) 14%, transparent);
                  color: var(--indigo-500); }
.pille--symbol  { padding: 4px 6px; }
.pille--gut     { background: var(--fn-success-bg); color: var(--fn-success); }
.pille--warn    { background: color-mix(in srgb, var(--fn-warning) 16%, transparent);
                  color: var(--fn-warning); }
.pille--coach   { background: var(--coach-bg); color: var(--coach-accent);
                  box-shadow: inset 0 0 0 1px var(--coach-ring); }

.punkt { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; }
.punkt--gut { background: var(--fn-success); }
.punkt--warn { background: var(--fn-warning); }
.punkt--offen { background: var(--pipe-offen); }
.punkt--lauf { background: var(--pipe-lauf); animation: pulsen 1.4s ease-in-out infinite; }
@keyframes pulsen { 50% { opacity: .35; } }

.feld {
  width: 100%; padding: 9px 12px;
  background: var(--surface-card-raised);
  border: 1px solid var(--border-structural);
  border-radius: var(--radius-sm);
  color: var(--text-primary);
}
.feld::placeholder { color: var(--text-faint); }

.augenbraue {
  font-size: 11px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-muted);
}

.laderad {
  width: 16px; height: 16px; border-radius: 999px;
  border: 2px solid var(--border-structural); border-top-color: var(--sky-500);
  animation: drehen .8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* Icons — strichgeführt, Farbe erbt. Keine Emojis: Die sähen auf jedem
   System anders aus und brächten eine fremde Farbwelt mit. */
.icon { width: 18px; height: 18px; flex: 0 0 auto; }
.icon--gross { width: 22px; height: 22px; }
.icon--klein { width: 15px; height: 15px; }

.marke { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.marke img { display: block; height: 22px; width: auto; }
.marke__zusatz {
  font-family: Fraunces, Georgia, serif;
  font-size: 15px; font-weight: 500; color: var(--text-muted);
  padding-left: 10px; border-left: 1px solid var(--border-structural);
}

/* Das Markenzeichen ist auf hellem Grund gezeichnet. Im Dunkelmodus
   bliebe der dunkle Wortteil unsichtbar — also dort aufhellen, statt
   eine zweite Datei zu pflegen. */
@media (prefers-color-scheme: dark) {
  .marke img { filter: invert(1) hue-rotate(180deg) brightness(1.15); }
}