/* Sekundär-CTA — globale Definition (eine Quelle, keine Kopien pro Seite).
 *
 * Verwendung: <a class="primary-button … is-sekundaer">  — gleiche Form, Höhe und
 * Icon-Mechanik wie der gefüllte Primär-Button, nur in blauer Outline-Optik.
 * Zusatzklasse "auf-blau", wenn der Button auf einer bg-light-blue-Fläche sitzt
 * (sonst wäre der Hover unsichtbar).
 *
 * NICHT auf dunklem Grund einsetzen: in der ki-cta-karte bleibt die Webflow-Variante
 * w-variant-1e5feee9-… (weißer Rand auf blauer Fläche) richtig — blauer Rand und
 * blaue Schrift wären dort unlesbar. Ebenso bleiben Mobil-Navigation und
 * Blog-Seitenspalte gefüllt: dort ist "Kostenfrei testen" der Primär-CTA.
 */
.primary-button.is-sekundaer {
  background-color: transparent;
  border: 1px solid var(--_colors---brand-colors--blue);
}

.primary-button.is-sekundaer .button-text {
  color: var(--_colors---brand-colors--blue);
}

/* Der Ring um das Pfeil-Icon ist im Basis-Button weiß — auf transparenter Fläche
   unsichtbar, deshalb hier ebenfalls blau. Breite explizit auf 1px: .button-icon
   deklariert 1.5px, Chrome rundet das auf 1px ab, andere Engines nicht zwingend —
   so ist der Ring garantiert genauso stark wie der Button-Rand. */
.primary-button.is-sekundaer .button-icon {
  border: 1px solid var(--_colors---brand-colors--blue);
}

.primary-button.is-sekundaer:hover {
  background-color: var(--_colors---background-colors--bg-light-blue);
}

.primary-button.is-sekundaer.auf-blau:hover {
  background-color: var(--_colors---base-colors--white);
}