/* =========================================================================
   A/B-Test – Station Gelsenkirchen (B-Seite)
   -------------------------------------------------------------------------
   Enthält NUR die Änderungen für die beiden CTA-Buttons.
   Arndt-CI-Farben:
     Magenta (Primär) ..... #E81F76
     Anthrazit (Sekundär) . #4A4A49
     Weiß ................. #FFFFFF

   ANWENDUNG
   Bestehende Klassen der Buttons NICHT entfernen, neue Klasse ergänzen:

     Oberer Button (unter der H1):
       <a class="button-m buttonbg-g ab-cta-big" href="...">…</a>

     Unterer Button – EINE der beiden Farb-Varianten wählen:
       Variante A (Anthrazit):   class="button-m buttonbg-g ab-cta-altcolor"
       Variante B (Weiß/Pink):   class="button-m buttonbg-g ab-cta-white"

   Diese Datei nach dem Haupt-Stylesheet der Seite einbinden.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1) OBERER BUTTON  –  Breite an der Linie unter der Überschrift orientiert
      Klasse: .ab-cta-big
      Die graue Linie (.slant1) ist auf dem Desktop ca. 415 px breit.
      Der Button wird auf dieselbe Breite begrenzt (auf Mobil volle Spalte)
      und nur moderat größer (etwas höher, etwas größere Schrift).
   ------------------------------------------------------------------------- */
.button-m.ab-cta-big {
    display: inline-block !important;
    width: min(415px, 100%) !important;   /* = Breite der Linie unter der H1 */
    text-align: center !important;
    box-sizing: border-box !important;

    font-size: 1.25rem !important;        /* dezent größer als Standard (1.1rem) */
    padding: 1.1em 1.5rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.02em !important;
    font-weight: 700 !important;
}


/* -------------------------------------------------------------------------
   2a) UNTERER BUTTON – Variante A: Anthrazit
       Klasse: .ab-cta-altcolor
       Ruhe: Anthrazit (#4A4A49) · Hover: Magenta-Slide (#E81F76)
   ------------------------------------------------------------------------- */
.button-m.ab-cta-altcolor {
    background-color: #4A4A49 !important;
    background: #4A4A49 !important;
    color: #ffffff !important;
}
.buttonbg-g.ab-cta-altcolor::after {
    background-color: #E81F76 !important;   /* !important: Basis-::after ist ebenfalls !important */
}
.button-m.ab-cta-altcolor:hover,
.button-m.ab-cta-altcolor:focus {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;
}


/* -------------------------------------------------------------------------
   2b) UNTERER BUTTON – Variante B: Weiß mit pinker Schrift
       Klasse: .ab-cta-white
       Ruhe: weißer Button, Magenta-Schrift, Magenta-Rahmen (2px).
       Hover: Magenta-Slide füllt den Button, Schrift wird weiß.
       (Rahmen via inset-Boxshadow -> kein Verrutschen des Layouts.)
   ------------------------------------------------------------------------- */
.button-m.ab-cta-white {
    background-color: #ffffff !important;
    background: #ffffff !important;
    color: #E81F76 !important;
    box-shadow: inset 0 0 0 2px #E81F76 !important;   /* Magenta-Rahmen */
}
.buttonbg-g.ab-cta-white::after {
    background-color: #E81F76 !important;   /* Slide-Füllung Magenta */
}
.button-m.ab-cta-white:hover,
.button-m.ab-cta-white:focus {
    background-color: transparent !important;
    background: transparent !important;
    color: #ffffff !important;              /* weiße Schrift auf Magenta */
}