/* ──────────────────────────────────────────────────────────────────────────
 * cta.css — das CTA-System (Feedback Lisa 14.08., Punkt 2)
 *
 * Vorher: acht CTA-Ausprägungen mit fünf verschiedenen Hover-Mechaniken,
 * dazu ein weißer Button im Kontaktband, den cd-skin.css wieder auf Blau
 * überschrieben hat („blau auf blau"). Diese Datei ist ab jetzt die einzige
 * Stelle, an der CTA-Optik entschieden wird — deshalb lädt sie als letzte,
 * nach cd-skin.css.
 *
 * Drei Rollen, mehr nicht:
 *   btn--primary     gefüllte Fläche, höchstens eine pro Abschnitt
 *   btn--secondary   Rahmen ohne Füllung, ordnet sich unter
 *   *__cta (Text)    Textlink mit Dreieck, ohne Kasten
 *
 * Dunkle Flächen ändern nicht die Rolle, nur ihr Farbschema: btn--invert
 * dreht Fläche und Schrift, damit auf Blau kein vierter Button-Typ entsteht.
 *
 * Ein Hover-Prinzip: Fläche und Schrift tauschen die Rollen. Rahmen-Buttons
 * füllen sich, gefüllte werden zum Rahmen. Das ist das Verhalten der
 * Live-Seite (`.button:hover { color:#fff; background-color:#005EA8 }`, auf
 * dunklen Flächen umgekehrt) und kommt mit den zwei Marken-Blautönen aus.
 * Jeder Wechsel liegt bei 8,6:1 — eine Abtönung innerhalb des Blaus käme auf
 * 1,26:1 und wäre praktisch unsichtbar, was Lisas Kritik am alten Hover war.
 *
 * Maße und Gewicht ebenfalls von der Live-Seite: 3px Rahmen, font-weight 700.
 * Der 3px-Rahmen braucht eine kräftige Schrift als Gegengewicht, sonst wirkt
 * der Button unentschlossen — und die Hero-Headline steht bewusst auf 400,
 * der Akzent gehört an die Handlung.
 *
 * Abweichung von der Live-Seite, bewusst: dort ist jeder Button ein
 * Outline-Button. Der gefüllte Primärbutton ist unsere Antwort auf „CTA
 * auffälliger" (Feedback 08.07.).
 *
 * Das Markendreieck kennzeichnet jeden visuell als CTA gestalteten Link,
 * auch den in der Dauerleiste. Kein Dreieck an Inline-Links, Kontaktwegen
 * (Telefon) und Bedienelementen (Slider-Pfeile).
 *
 * Beim Bau der Magazin-Mockups wird diese Datei mitgezogen, damit die Linie
 * dort dieselbe ist.
 * ────────────────────────────────────────────────────────────────────────── */

/* ── Gemeinsame Grundform ─────────────────────────────────────────────────── */

.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	border-style: solid;
	border-width: 0.1875rem;        /* 3px — wie Live-Seite */
	border-radius: 0;               /* scharfe Ecken, Marken-Stil */
	font-weight: 700;               /* wie Live-Seite */
	padding: 0.75rem 1.5rem;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

/* ── Rolle 1: Primär — gefüllt ────────────────────────────────────────────── */

.btn--primary {
	background: var(--c-primary);
	color: var(--c-white);
	border-color: var(--c-primary);
}

/* Invertiert: die Füllung weicht, Rahmen und Schrift bleiben in --c-primary.
   transparent statt weiß, damit der Button auch auf den grauen Abschnitten
   (#f1f1f1) sitzt, ohne einen weißen Fleck zu setzen.

   Der Sprung beträgt 8,6:1 — genauso viel wie beim Sekundärbutton in die
   andere Richtung. Die Abtönung auf --c-secondary käme dagegen nur auf 1,26:1
   und wäre im Vorbeigehen nicht zu sehen.

   Nebeneffekt, bewusst in Kauf genommen: Im Hero sehen der gehoverte
   Primär- und der ruhende Sekundärbutton gleich aus. Das betrifft nur den
   Moment der Berührung — die Hierarchie wirkt davor, bei der Entscheidung,
   wohin der Nutzer zeigt. */
.btn--primary:hover {
	background: transparent;
	color: var(--c-primary);
	border-color: var(--c-primary);
}

/* Auf dunkler Fläche: gleiche Rolle, invertiertes Farbschema. */
.btn--primary.btn--invert {
	background: var(--c-white);
	color: var(--c-primary);
	border-color: var(--c-white);
}

.btn--primary.btn--invert:hover {
	background: transparent;
	color: var(--c-white);
	border-color: var(--c-white);
}

/* ── Rolle 2: Sekundär — Rahmen ohne Füllung ──────────────────────────────── */

.btn--secondary {
	background: transparent;
	color: var(--c-primary);
	border-color: var(--c-primary);
}

/* Genau der Hover der Live-Seite: die Fläche füllt sich in --c-primary, die
   Schrift kippt auf Weiß. */
.btn--secondary:hover {
	background: var(--c-primary);
	color: var(--c-white);
	border-color: var(--c-primary);
}

.btn--secondary.btn--invert {
	background: transparent;
	color: var(--c-white);
	border-color: var(--c-white);
}

.btn--secondary.btn--invert:hover {
	background: var(--c-white);
	color: var(--c-primary);
	border-color: var(--c-white);
}

/* ── Markendreieck ────────────────────────────────────────────────────────── */

/* Größe in em, damit das Dreieck der jeweiligen Schriftgröße folgt — im
   Textlink der Karte kleiner als im Hero-Button, aber dieselbe Form. */
.btn::after,
.crosssell-card__cta::after {
	content: "";
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.3em 0 0.3em 0.42em;
	border-color: transparent transparent transparent currentColor;
}

/* ── Rolle 3: Tertiär — Textlink ohne Kasten ──────────────────────────────── */

/* Ohne Fläche gibt es nichts zu invertieren, deshalb hier die Unterstreichung
   als Zustandssignal. */
.crosssell-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--c-primary);
	text-decoration: none;
}

.crosssell-card:hover .crosssell-card__cta,
.crosssell-card__cta:hover {
	text-decoration: underline;
}

/* ── Ausnahmen, die bewusst kein CTA sind ─────────────────────────────────── */

/* Kontaktweg, kein Navigationsschritt: keine Fläche, kein Dreieck. */
.pd-subnav__tel::after,
.sticky-cta__tel::after {
	content: none;
}

/* ── Warum hier kein Mint steht ───────────────────────────────────────────────
 * Mint ist die Servicefarbe, nicht die Aktionsfarbe. Auf waldner.de liegt
 * #02E8C2 auf keinem einzigen Button; die Live-Regel für `.button` ist blau.
 * Ein Mint-CTA nähme dem Primär-Button außerdem Gewicht: Weiß auf Blau liegt
 * bei 6,7:1, Dunkelblau auf Mint nur bei 5,31:1 — und neben dem 3px-Rahmen des
 * Sekundär-Buttons wirkt die pastellige Fläche leichter als die Nebenrolle.
 * Wo Mint hingehört, steht in tokens.css; die Rollen liegen bei den
 * jeweiligen Komponenten (Tabs, Subnav, Chips, TOC, Kontakt, FAQ, Downloads). */