/* Weser Theme – Buttons */

/* ══ HOVER = INVERTIEREN ═════════════════════════════════════════════════
   Kundenfeedback 01 vom 2026-09-09: „Aktuell werden die Buttons nur
   geringfuegig abgedunkelt, dadurch leidet die Lesbarkeit." Vom User am
   selben Tag auf ALLE Knoepfe der Seite ausgeweitet, ausdruecklich als
   Frage der Barrierefreiheit.

   Regel: Beim Ueberfahren TAUSCHEN Flaeche und Schrift die Farbe. Das ist
   nicht nur deutlicher als ein dunklerer Ton – der Kontrast bleibt dabei
   auch garantiert erhalten, weil dasselbe Farbpaar nur die Rollen wechselt.
   Ein abgedunkelter Ton dagegen verschiebt das Verhaeltnis und kann unter
   die WCAG-Grenze rutschen.

   Ausgenommen bleibt `.btn-outline-light`: Der Knopf invertiert bereits
   (durchsichtig mit weisser Schrift wird weiss mit dunkler Schrift).
   ════════════════════════════════════════════════════════════════════════ */
.btn-primary,
.btn.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark);
    font-weight: var(--fw-normal);
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-primary);
    transform: translateY(-1px);
}

.btn-outline-light {
    border-color: var(--color-white);
    color: var(--color-white);
    font-weight: var(--fw-normal);
    padding: 12px 28px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), color var(--transition);
}

.btn-outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
}

/* Gefüllter Button mit Akzentschrift – Weserwaben: blau mit grüner Schrift, wie
   im Produktselektor. Lag bis Theme 1.7.0 in single-inspiration.css; global,
   weil Sprint-2-Blöcke ihn nutzen.
   Seit 1.31.0 über Farbwelt-Tokens: auf den DE-RYCK-Seiten rot mit weißer
   Schrift, auf den Pool-Seiten hellblau mit dunkelblauer. */
.btn-blue {
    background-color: var(--color-cta);
    border-color: var(--color-cta);
    color: var(--color-cta-text-accent);
    font-weight: var(--fw-normal);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), transform var(--transition);
}
/* Hover: Flaeche und Schrift TAUSCHEN statt nur abdunkeln – Kundenfeedback 01
   vom 2026-09-09, invertieren vom User gewaehlt. Ueber die Farbwelt-Tokens
   bleibt das auf allen Welten stimmig: Weserwaben blau/gruen wird gruen/blau,
   DE RYCK rot/weiss wird weiss/rot. */
.btn-blue:hover,
.btn-blue:focus {
    background-color: var(--color-cta-text-accent);
    border-color: var(--color-cta-text-accent);
    color: var(--color-cta);
    transform: translateY(-1px);
}

/* DE RYCK: Beim Invertieren wird die Fläche WEISS – ohne Rahmen stand die
   rote Schrift dann frei auf der weißen Karte, der Knopf war als Knopf kaum
   noch zu erkennen. Kundenfeedback 2026-10-01: rote Kontur beim Überfahren.
   1 px wie alle anderen Kontur-Knöpfe der Seite (.btn-outline-light) – der
   vorhandene Rahmen bleibt einfach rot statt weiß zu werden. */
body.scheme-deryck .btn-blue:hover,
body.scheme-deryck .btn-blue:focus {
    border-color: var(--color-cta);
}

/* ══ GEDRÜCKT = WIE HOVER (2.21.0) ═══════════════════════════════════════
   Bootstrap färbt Knöpfe beim Klicken (:active) über eigene Variablen um –
   die Hover-Regeln hier überschreiben das nicht. Folge bis 2.21.0: grüne
   Knöpfe wurden beim Klicken Bootstrap-Blau (#0a58ca) mit weißer Schrift,
   blaue und weiße durchsichtig mit SCHWARZER Schrift (Chris 19.10.,
   Halbbild-Teaser). Hier bekommt jede Knopfart für den gedrückten Zustand
   dieselben Farben wie beim Überfahren. Geprüft per erzwungenem
   hover+active auf allen 63 Seiten. */
.btn-primary {
    --bs-btn-active-color:        var(--color-primary);
    --bs-btn-active-bg:           var(--color-dark);
    --bs-btn-active-border-color: var(--color-dark);
}

.btn-blue {
    --bs-btn-active-color:        var(--color-cta);
    --bs-btn-active-bg:           var(--color-cta-text-accent);
    --bs-btn-active-border-color: var(--color-cta-text-accent);
}

body.scheme-deryck .btn-blue {
    --bs-btn-active-border-color: var(--color-cta);
}

.btn-white {
    --bs-btn-active-color:        var(--color-white);
    --bs-btn-active-bg:           var(--color-dark);
    --bs-btn-active-border-color: var(--color-dark);
}

/* Händlersuche im Kopf: ruht blau, wird beim Überfahren grün (header.css). */
.btn-nav-cta.btn-primary {
    --bs-btn-active-color:        var(--color-dark);
    --bs-btn-active-bg:           var(--color-primary);
    --bs-btn-active-border-color: var(--color-primary);
}

/* Halbbild-Teaser hell/weiß: eigene Knopffarben (split-teaser.css). */
.block-split-teaser--light .split-teaser-btn,
.block-split-teaser--white .split-teaser-btn {
    --bs-btn-active-color:        var(--color-cta);
    --bs-btn-active-bg:           var(--color-cta-text);
    --bs-btn-active-border-color: var(--color-cta);
}

/* Knöpfe auf blauem Grund: Rahmen auch gedrückt in Ruhefarbe (s. u.). */
.form-section-form .wf-submit,
.cta-box .btn-primary,
.site-offcanvas .btn-primary,
.footer-newsletter-btn.btn-primary {
    --bs-btn-active-border-color: var(--color-primary);
}

.block-split-teaser:not(.block-split-teaser--light):not(.block-split-teaser--white) .btn-white {
    --bs-btn-active-border-color: var(--color-white);
}

/* ══ KNÖPFE AUF BLAUEM GRUND (2.21.0) ══════════════════════════════════
   Beim Invertieren wird die Fläche blau – genau wie der Grund. Ohne Rahmen
   verschwand der Knopf beim Überfahren und Klicken (Chris 19.10.,
   Musterformular). Wie bei DE RYCK oben und beim hellen Halbbild-Teaser
   behält der Rahmen deshalb seine Ruhefarbe.

   Gefunden per Prüfung aller 63 Seiten (Hover erzwungen, Fläche und Rahmen
   gegen den Hintergrund gemessen): Formular-Absenden (Kontakt, Planung,
   Musterbestellung), Kontaktbox (Blog, Karriere), Halbbild-Teaser blau
   (FAQ, Händlersuche, Karriere, Manufaktur, Weserwaben), Händlersuche im
   mobilen Menü. Nachgetragen 29.10. (Chris): Newsletter-Knopf im Fuß. */
.form-section-form .wf-submit:hover,
.form-section-form .wf-submit:focus,
.cta-box .btn-primary:hover,
.cta-box .btn-primary:focus,
.site-offcanvas .btn-primary:hover,
.site-offcanvas .btn-primary:focus,
.footer-newsletter-btn.btn-primary:hover,
.footer-newsletter-btn.btn-primary:focus {
    border-color: var(--color-primary);
}

.block-split-teaser:not(.block-split-teaser--light):not(.block-split-teaser--white) .btn-white:hover,
.block-split-teaser:not(.block-split-teaser--light):not(.block-split-teaser--white) .btn-white:focus {
    border-color: var(--color-white);
}

/* Weißer Button mit dunkelblauer Schrift – für Buttons auf blauem Grund
   (Halbbild-Teaser). */
.btn-white {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-dark);
    font-weight: var(--fw-normal);
    padding: 10px 22px;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition), transform var(--transition);
}
.btn-white:hover,
.btn-white:focus {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
    transform: translateY(-1px);
}