/* =========================================================================
   tillY — die Knöpfe, für BEIDE Anwendungen
   =========================================================================
   Angelegt am 07.08.2026. Bis dahin gab es zwei Sätze, die dasselbe meinten
   und verschieden aussahen:

       tillY           padding 13px 18px · 15 px · Gewicht 500 · Höhe ~46
       tillY Termine   padding 10px 18px · 13,5 px · Gewicht 600 · Höhe ~38

   Dazu vier weitere Größen an einzelnen Stellen (.wl-zeile button mit 6px,
   .filter-zeile button, .chip, .wechseln). Niemand hatte das entschieden;
   es war zweimal dieselbe Frage getrennt beantwortet worden.

   WARUM EINE EIGENE DATEI UND NICHT design-tokens.css
     Die Tokendatei trägt Werte, keine Bauteile — das steht in ihrem Kopf
     und in style.css ("Bauteile, zero tokens"). Ein Knopf ist ein Bauteil.
     Das Muster für geteilte Bauteile gibt es schon: tafel.css tragen beide
     Anwendungen gemeinsam, über einen absoluten Pfad. Genau so hier.

   WAS VEREINHEITLICHT WIRD UND WAS NICHT
     Gleich: Höhe, Innenabstand, Eckenradius, Schriftgröße, Schriftgewicht,
     Farben, Zustände. Das verlangt das Briefing, und das ist es, was man
     sieht, wenn zwei Knöpfe nebeneinander stehen.

     NICHT gleich: die Breite. Im Portal sind Knöpfe Formularknöpfe und
     gehen über die volle Breite; in Termine stehen sie in Werkzeugleisten
     nebeneinander. Das ist kein Stilunterschied, sondern Layout — wer das
     gleichmacht, zerlegt eine der beiden Oberflächen. Die Breite bleibt
     deshalb bei der aufrufenden Seite.

   DIE HÖHE IST 44 px, UND ZWAR ALS min-height
     Nicht als height: der Text darf umbrechen, ohne dass der Knopf
     abschneidet. 44 px ist die Fingergröße, die pruefe_ipad.py ohnehin
     verlangt — bis heute erreichten die Termine-Knöpfe sie nur über einen
     !important-Block unter (pointer: coarse), also nur am Touchgerät und
     nur, weil jemand daran gedacht hat. Jetzt gilt sie überall und
     unbedingt, und Knöpfe in derselben Reihe sind damit zwangsläufig
     gleich hoch — auch das eine Forderung des Briefings, hier erfüllt sich
     beiläufig.
   ========================================================================= */

/* ---- Primär: was etwas TUT ------------------------------------------
   Ink gefüllt, weiße Schrift. "Speichern", "Zuordnen", "Bestätigen".
   Nie in einer Funktionsfarbe: Farbe navigiert, sie fordert nicht auf.
   Der klassenlose <button> IST der Primärknopf — es gibt bewusst keine
   Klasse .primaer, denn dann müsste man sie an 228 Stellen nachtragen,
   ohne dass sich etwas ändert.                                          */
button,
.button-optik {
  /* Die 44 kommt seit dem 10.08.2026 aus einem Token, nicht mehr als Zahl.
     Der Wert ist derselbe -- geaendert hat sich, dass die AUSNAHMEN ihn jetzt
     ebenfalls aus dem Tokensatz nehmen (--knopf-hoehe-md, -sm) statt eigene
     Zahlen zu setzen. Das war der Punkt: die Basis hier war nie das Problem,
     die 23 Stellen daneben waren es. */
  min-height: var(--knopf-hoehe-lg);
  padding: 10px 18px;
  font-family: var(--font-text);
  font-size: var(--schrift-m);
  font-weight: 600;
  line-height: 1.3;
  color: var(--farbe-karte);
  background: var(--farbe-aktion);
  border: 1px solid transparent;   /* damit Primär und Sekundär gleich hoch sind */
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: background .15s ease, box-shadow .09s ease, transform .09s ease;
}
button:hover { background: var(--farbe-aktion-hover); }
button:disabled { opacity: .55; cursor: default; }

/* ---- Sekundär: Kontur ------------------------------------------------ */
button.sekundaer {
  background: var(--farbe-karte);
  color: var(--farbe-akzent);
  border-color: var(--farbe-flaeche-rand);
}
button.sekundaer:hover { background: var(--farbe-flaeche); }

/* ---- Gefahr: löschen, absagen, entfernen -----------------------------
   Til, 30.07.2026: "alles was löscht entfernt oder eliminiert auf rot".
   Zwei Abstufungen, und das ist Absicht: in der Liste zurückhaltend (roter
   Text), im Dialogfuß gefüllt — dort ist es die endgültige Handlung.     */
button.gefahr {
  background: var(--farbe-karte);
  color: var(--farbe-fehler);
  border-color: var(--farbe-flaeche-rand);
}
button.gefahr:hover {
  background: var(--farbe-fehler-sanft);
  border-color: var(--farbe-fehler);
}
.dialog-fuss button.gefahr,
.fenster-fuss button.gefahr,
.hilfe-karte button.gefahr {
  background: var(--farbe-fehler);
  color: var(--farbe-karte);
  border-color: var(--farbe-fehler);
}

/* =========================================================================
   DER DRUCKSCHATTEN
   =========================================================================
   Briefing 8: Klickbarkeit wird NICHT durch ein Öffnen-Pfeil-Symbol
   angezeigt, sondern durch ein kurzes, plastisches Feedback beim Drücken.

   DAS IST EIN WIDERSPRUCH ZUM SYSTEM, UND ER IST AUFGELÖST, NICHT ÜBERGANGEN
     Das Designsystem hat Schatten ausdrücklich abgeschafft: --schatten
     wurde am 06.08.2026 zu `0 0 0 1px` umdefiniert, also zu einer Linie,
     damit die 24 Aufrufstellen nicht angefasst werden mussten. "Was
     abgrenzt, ist eine Konturlinie."

     Das gilt weiter — für den RUHEZUSTAND. Im Ruhezustand ist hier nichts
     plastisch: keine Erhebung, kein Verlauf, kein Schlagschatten. Der
     Druckschatten ist ausschließlich ZUSTANDS-FEEDBACK und lebt 90 ms.
     Deshalb ein eigenes Token und nicht eine Aufweichung von --schatten:
     die beiden bedeuten Verschiedenes, und wer eines ändert, soll nicht
     versehentlich das andere mitnehmen.

   WARUM NACH INNEN UND NICHT NACH AUSSEN
     Ein Knopf, der beim Drücken größer wird, widerspricht dem, was die
     Hand tut. Gedrückt heißt: hinein. Also inset, plus 1 px Versatz nach
     unten — zusammen ergibt das den Eindruck, dass die Fläche nachgibt.  */
:root {
  --schatten-druck: inset 0 2px 4px rgba(26, 26, 24, .22),
                    inset 0 1px 0 rgba(26, 26, 24, .3);
}

button:active:not(:disabled),
.button-optik:active,
.hub-kachel:active,
.kachelnav a:active,
.arbeit-zeile:active,
[data-gedrueckt]:active {
  box-shadow: var(--schatten-druck);
  transform: translateY(1px);
}

/* Wer Bewegung abbestellt hat, bekommt trotzdem eine Rückmeldung -- nur
   ohne die Verschiebung. Ein Zustand, den man nicht sieht, ist keiner. */
@media (prefers-reduced-motion: reduce) {
  button, .button-optik, .hub-kachel, .kachelnav a { transition: none; }
  button:active:not(:disabled),
  .button-optik:active,
  .hub-kachel:active,
  .kachelnav a:active,
  .arbeit-zeile:active,
  [data-gedrueckt]:active { transform: none; }
}

/* ---- Klickbare Flächen, die keine Knöpfe sind ------------------------
   Kacheln und Karten. Im Ruhezustand bleiben sie optisch ruhig -- Kontur
   und, wo vorhanden, der farbige Randstrich. Kein Pfeil, kein Chevron:
   die Fläche IST die Einladung, und beim Drücken gibt sie nach.         */
.hub-kachel, .kachelnav a, .arbeit-zeile {
  transition: border-color .15s ease, background .15s ease,
              box-shadow .09s ease, transform .09s ease;
}
