/* Knöpfe aus dem Texteditor.
 *
 * Diese Datei wird zweimal geladen: im Frontend über die setup.typoscript und
 * im Editor über contentsCss der RTE-Voreinstellung. Dadurch sehen Redakteure
 * beim Schreiben genau das, was später auf der Seite steht.
 *
 * Die Textfarben sind nicht frei gewählt, sondern am Kontrast ausgerichtet:
 * Auf Orange steht dunkle Schrift (5,93:1), weiße käme nur auf 3,34:1 und
 * wäre damit unter der Lesbarkeitsgrenze.
 */

a.rte-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-family: var(--font-body, "Inter", system-ui, sans-serif);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.2;
  /* Die globale Regel a { text-decoration: none } gilt hier nicht mehr, seit
     Verweise im Fließtext unterstrichen werden – für Knöpfe nehmen wir sie
     ausdrücklich zurück. */
  text-decoration: none;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s;
}
a.rte-btn:hover,
a.rte-btn:focus-visible {
  text-decoration: none;
  transform: translateY(-1px);
}
a.rte-btn:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* Abstand, wenn mehrere Knöpfe nebeneinander im selben Absatz stehen. */
a.rte-btn + a.rte-btn { margin-left: 10px; }

a.rte-btn--rot {
  background-color: var(--btn-rot-bg, #CD1719);
  color: var(--btn-rot-fg, #ffffff);
}
a.rte-btn--rot:hover { background-color: var(--btn-rot-bg-hover, #8F1011); color: var(--btn-rot-fg-hover, #ffffff); }

a.rte-btn--blau {
  background-color: var(--btn-blau-bg, #092e6e);
  color: var(--btn-blau-fg, #ffffff);
}
a.rte-btn--blau:hover { background-color: var(--btn-blau-bg-hover, #061f4a); color: var(--btn-blau-fg-hover, #ffffff); }

a.rte-btn--orange {
  background-color: var(--btn-orange-bg, #fd4f00);
  color: var(--btn-orange-fg, #0A0A0A);
}
a.rte-btn--orange:hover { background-color: var(--btn-orange-bg-hover, #d84300); color: var(--btn-orange-fg-hover, #0A0A0A); }

/* Die Farbwerte stehen als Token in main.css (:root) und gelten dort genauso
 * für die CTA-Knöpfe (.btn-fw--*). Die festen Werte hier sind der Rückfall für
 * den Editor-Rahmen, in dem main.css nicht geladen ist.
 *
 * Weiß braucht eine Umrandung, sonst verschwindet der Knopf auf hellem Grund. */
a.rte-btn--weiss {
  background-color: var(--btn-weiss-bg, #ffffff);
  color: var(--btn-weiss-fg, #0A0A0A);
  border-color: var(--btn-weiss-rand, rgba(0, 0, 0, 0.18));
}
a.rte-btn--weiss:hover { background-color: var(--btn-weiss-bg-hover, #EBE6DF); color: var(--btn-weiss-fg-hover, #0A0A0A); border-color: rgba(0,0,0,0.3); }

a.rte-btn--dunkel {
  background-color: var(--btn-dunkel-bg, #0A0A0A);
  color: var(--btn-dunkel-fg, #F5F2EE);
}
a.rte-btn--dunkel:hover { background-color: var(--btn-dunkel-bg-hover, #CD1719); color: var(--btn-dunkel-fg-hover, #ffffff); }

@media (prefers-reduced-motion: reduce) {
  a.rte-btn, a.rte-btn:hover, a.rte-btn:focus-visible { transition: none; transform: none; }
}