/* ============================================================================
 * knopf.css · 29.08.2026 · Ein Knopf fuer die ganze Website
 *
 * WARUM: Toms Befund, mehrfach an diesem Tag: "der Button ist ganz gelb, keine
 * Schrift drin, erst wenn ich drüber gehe, kommt die Schrift." Und: "prüfe
 * jeden Button und mache alles gleich."
 *
 * Gemessen wurden ZWEI Ursachen:
 *
 * 1. Farbe aus einer Variable ohne Rueckfallwert. Viele Knoepfe setzten
 *    color: var(--navy-deep) oder aehnlich. Ist die Variable auf einer Seite
 *    nicht definiert, ist die Deklaration ungueltig, und der Text ERBT die
 *    Farbe. Auf goldenem Grund ist das goldene Schrift auf Gold, also nichts.
 *    Deshalb stehen hier feste Hex-Werte und keine Variablen.
 *
 * 2. Elf verschiedene Knopfklassen mit zwoelf Erscheinungsformen: Hoehen von
 *    44 bis 86 px, Radien 6/10/11/12/999, vier verschiedene Schwarztoene, und
 *    drei davon waren gar nicht gefuellt, sondern nur umrandet, mit Text in
 *    der Rahmenfarbe.
 *
 * !important steht hier bewusst: es geht um wenige Eigenschaften, deren
 * richtiger Wert feststeht, sie muessen elf aeltere Regeln schlagen, und der
 * Fehler war fuer Tom auf der fertigen Seite sichtbar.
 * ========================================================================== */

a.knopf-voll, a.knopf.knopf-voll,
button.knopf-voll, button.knopf.knopf-voll, input.knopf-voll,
a.kopf-knopf, .kopf .kopf-knopf,
a.bg-knopf, a.bg-knopf-voll, a.bg-einmal-knopf,
a.hb-knopf, a.ab-knopf, button.ab-knopf,
a.rd-knopf, button.rd-knopf,
a.ak-weiter, button.ak-weiter,
button.senden, input.senden,
a.btn-buy {
  background: #C9A84C !important;
  color: #0A0A0F !important;          /* fest, nie eine Variable */
  border: 1px solid #C9A84C !important;
  border-radius: 12px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-align: center !important;
  line-height: 1.25 !important;
}

/* 29.08.2026, KORREKTUR nach Toms Befund "auf der Telefonansicht überlappt der
   Button jetzt".
   Hier stand display: inline-flex !important. Das war falsch, und zwar aus
   einem Grund, den man leicht uebersieht: .kopf-knopf ist auf schmalen
   Bildschirmen ABSICHTLICH versteckt und wird erst ab einer bestimmten Breite
   auf inline-flex gesetzt (stil.css:1126). Mein !important hat dieses
   Versteck aufgehoben und den Knopf mitten in die Kopfzeile gedraengt.
   Merksatz: display mit !important zu erzwingen hebt jedes display:none auf,
   auch das gewollte. Farbe darf man erzwingen, Sichtbarkeit nicht.
   Die Ausrichtung im Knopf uebernimmt jetzt text-align, das kostet nichts und
   kann nichts sichtbar machen, was verborgen sein soll. */

/* Beim Darueberfahren wird der Grund heller. Die Schrift bleibt, wie sie ist:
   sie darf nie erst beim Hover erscheinen, genau das war der Fehler. */
a.knopf-voll:hover, a.knopf.knopf-voll:hover,
button.knopf-voll:hover, button.knopf.knopf-voll:hover,
a.kopf-knopf:hover, .kopf .kopf-knopf:hover,
a.bg-knopf:hover, a.bg-knopf-voll:hover, a.bg-einmal-knopf:hover,
a.hb-knopf:hover, a.ab-knopf:hover, button.ab-knopf:hover,
a.rd-knopf:hover, button.rd-knopf:hover,
a.ak-weiter:hover, button.ak-weiter:hover,
button.senden:hover, input.senden:hover,
a.btn-buy:hover {
  background: #E8D5A3 !important;
  color: #0A0A0F !important;
  border-color: #E8D5A3 !important;
}

/* Der Kopfknopf ist schmaler als die Knoepfe im Text, das ist Absicht. */
a.kopf-knopf, .kopf .kopf-knopf { border-radius: 999px !important; }

/* Eine zweite Zeile im Knopf (etwa "ab 333 € im Monat") bleibt kleiner und
   leiser, erbt aber dieselbe dunkle Farbe. */
a.bg-knopf-voll span, a.knopf-voll span { color: #0A0A0F !important; opacity: .8; font-weight: 500; }