/*
 * ECX Knoepfe
 *
 * Standen bis zuletzt in 40-pages/hero.css. Die wird nur auf der Startseite
 * geladen - auf der Events-Seite blieben die Knoepfe dadurch ohne Polsterung
 * und ohne Pillenform. Deshalb hier als Komponente, die ueberall laedt.
 *
 * Der Zweitknopf steht in seiner hellen Fassung: dunkle Schrift auf hellem
 * Grund. Das ist der haeufigere Fall - Terminliste, Formate, Mediathek,
 * Events-Hero. Die weisse Fassung fuer die dunklen Hero-Slides steht in
 * hero.css und ueberschreibt von dort.
 *
 * @package ec-campus-child-theme
 */

.ecx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Touch-Ziel: 44px Mindesthoehe nach den Responsive-Regeln. */
  min-height: 44px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  font-weight: 600;
  font-size: var(--t-sm);
  text-decoration: none;
  white-space: nowrap;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.ecx-btn:active { transform: scale(.97); }

.ecx-btn--klein { padding: 10px 16px; font-size: var(--t-xs); min-height: 44px; }

.ecx-btn--primar { background: var(--ec-red); color: #fff; }
/* Die Schrift wird hier ausdruecklich wiederholt. Ohne sie zieht das
   fremde a:hover (0,1,1) sie auf #222 - siehe 10-base.css. */
.ecx-btn--primar:hover { background: var(--ec-red-600); color: #fff; }

.ecx-btn--sekundar {
  background: transparent;
  color: var(--ec-blue);
  border: 1.5px solid var(--ec-blue);
}
.ecx-btn--sekundar:hover { background: var(--ec-blue); color: #fff; }

/*
 * ZWEITKNOPF AUF DUNKLEM GRUND
 *
 * .ecx-btn--sekundar ist dunkelblau auf hell - auf --ec-blue also
 * blau auf blau und praktisch unsichtbar. Genau das war der Knopf
 * "Anhoeren" in der Formate-Sektion.
 *
 * Dieselben Werte benutzt der Hero fuer seine dunklen Slides
 * (css/40-pages/hero.css). Dort haengen sie an der Slide-Klasse, weil
 * die Slides ihre Knoepfe aus der Konfiguration bekommen und keine
 * eigene Klasse mitgeben koennen. Wer die Klasse setzen kann, nimmt
 * diese hier.
 */
.ecx-btn--sekundar-hell {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.28);
}
/* Schrift und Grund fuer :hover wiederholen - sonst gewinnt das
   fremde a:hover auf 0,1,1, siehe docs/DECISIONS.md Punkt 18. */
.ecx-btn--sekundar-hell:hover,
.ecx-btn--sekundar-hell:focus { background: rgba(255,255,255,.22); color: #fff; }

/*
 * ABSENDEKNOEPFE SIND <input type="submit">
 *
 * Der Altbestand adressiert die ueber
 *
 *   input[type="submit"]        { background: var(--secondary-color) }   0,1,1
 *   input[type="submit"]:hover  { background: var(--primary-color) }     0,2,1
 *
 * und schlaegt damit .ecx-btn--primar (0,1,0) und dessen :hover (0,2,0).
 * Gemessen am Themenvorschlag-Formular der Events-Seite: der Knopf kam
 * in rgb(255,6,89) statt --ec-red und wurde beim Ueberfahren dunkelblau.
 *
 * Das Elementkuerzel input hebt unsere Regeln auf 0,2,1 und 0,3,1.
 *
 * ABSICHTLICH NUR DIE FARBEN: Polster und Eckradius kommen weiter aus
 * dem Altbestand (8px 15px / 24px statt 12px 22px / Pille). Die Hoehe
 * des Formulars ist in der Runde davor bewusst zusammengezogen worden -
 * das ECX-Polster wuerde sie wieder aufblaehen. 44px Mindesthoehe sind
 * eingehalten.
 *
 * Nur unter .ecx, damit Formulare auf noch nicht umgebauten Seiten
 * unberuehrt bleiben.
 */
.ecx input.ecx-btn--primar { background: var(--ec-red); color: #fff; }
.ecx input.ecx-btn--primar:hover { background: var(--ec-red-600); color: #fff; }

/*
 * KNOEPFE NIE UEBER DIE GANZE BREITE, seit 06.10.2026.
 *
 * Hier stand bis dahin flex: 1 1 auto - jeder Knopf in einer
 * Flex-Zeile zog sich unter 640 auf die volle Breite. Die Grafikerin
 * will Inhaltsbreite, siehe docs/DECISIONS.md Punkt 35.
 *
 * Damit ein kurzer Knopf ("Details") auf Touch nicht zur Briefmarke
 * wird, gilt eine Mindestbreite. Lange Beschriftungen duerfen
 * umbrechen statt aus der Spalte zu laufen.
 */
@media (max-width: 640px) {
  .ecx-btn {
    justify-content: center;
    min-width: 140px;
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ecx-btn { transition-duration: 0s; }
}