/*
 * PixelHobel – gemeinsamer Knopf (.phx-button)
 *
 * Ein Maß, eine Farbe, ein Verhalten für alle Arbeitsoberflächen der Schule.
 * Die Höhe ist dieselbe wie bei den Feldern des Formular-Standards (50px),
 * damit Knopf und Eingabefeld nebeneinander auf einer Linie stehen.
 *
 * Varianten:
 *   --still    zurückhaltend (zweite Wahl neben der Hauptaktion)
 *   --warnung  für Schritte, die etwas löschen oder widerrufen
 *   --klein    für Knöpfe innerhalb einer Zeile oder Karte
 */
.phx-button {
  box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  height: 50px; padding: 0 1.1rem;
  border: 1px solid var(--ars-bordeaux, #94132f); border-radius: 6px;
  background: var(--ars-bordeaux, #94132f); color: #fff;
  font: inherit; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none;
  cursor: pointer;
}
.phx-button:hover, .phx-button:focus-visible { background: var(--ars-bordeaux-dark, #701025); color: #fff; }
.phx-button:focus-visible { outline: 3px solid var(--ars-orange, #e2892f); outline-offset: 2px; }

.phx-button--still {
  background: var(--ars-bg, #fff); color: var(--ars-text, #20252b); border-color: var(--ars-border, #d9dedf);
}
.phx-button--still:hover, .phx-button--still:focus-visible {
  background: var(--ars-bg-soft, #f1f6f5); color: var(--ars-text, #20252b);
}

.phx-button--warnung { background: var(--ars-rot, #b3261e); border-color: var(--ars-rot, #b3261e); }
.phx-button--warnung:hover, .phx-button--warnung:focus-visible {
  background: color-mix(in srgb, var(--ars-rot, #b3261e) 85%, #000); color: #fff;
}

.phx-button--klein { height: 38px; padding: 0 .75rem; font-size: .9rem; }

.phx-button[disabled], .phx-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

/* Im Dunkelmodus sind die Markenfarben aufgehellt – dort trägt weiße Schrift
   zu wenig Kontrast, deshalb dunkle Schrift auf der Fläche. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phx-button { color: #10161a; }
  :root:not([data-theme="light"]) .phx-button:hover,
  :root:not([data-theme="light"]) .phx-button:focus-visible { color: #10161a; }
  :root:not([data-theme="light"]) .phx-button--still { color: var(--ars-text, #e7eaed); }
  :root:not([data-theme="light"]) .phx-button--still:hover { color: var(--ars-text, #e7eaed); }
}
:root[data-theme="dark"] .phx-button { color: #10161a; }
:root[data-theme="dark"] .phx-button:hover,
:root[data-theme="dark"] .phx-button:focus-visible { color: #10161a; }
:root[data-theme="dark"] .phx-button--still { color: var(--ars-text, #e7eaed); }
:root[data-theme="dark"] .phx-button--still:hover { color: var(--ars-text, #e7eaed); }