/* ============================================================
   cd_cta — Handlungsband
   ============================================================
   Drei Fassungen einer Bahn: heller Grund, dunkler Grund und das
   Aktionsband auf Rot mit weisser Kontaktkarte. Grundflaeche und
   Kontrastumkehr kommen aus komponenten.css (.cd-auf-dunkel und
   .cd-auf-rot) — hier steht nur, was das Band ausmacht.

   Regeln dieser Datei:
   - Farben, Abstaende und Radien ausschliesslich als Token.
   - Kein !important.
   - Im Raster minmax(0, 1fr) statt 1fr — sonst sprengt eine lange
     Telefonnummer die Spalte.
   ============================================================ */

.cd-cta--hell {
  background: var(--cd-weiss);
  border-block-start: 1px solid var(--cd-linie-2);
}

.cd-cta__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: var(--cd-a8);
  align-items: center;
}

/* Ohne Knopf und ohne Karte faellt die zweite Spalte weg — eine
   leere Haelfte wuerde den Text unnoetig eng stellen. */
.cd-cta--ohneSeite .cd-cta__raster {
  grid-template-columns: minmax(0, 1fr);
}

.cd-cta__text { min-inline-size: 0; }

.cd-cta__seite {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cd-a4);
}

/* Optionale Illustration oberhalb der Handlung. Sie bleibt ein
   austauschbares FAL-Bild und traegt keine Aussage, die nicht schon
   im Text steht. Dadurch darf sie fuer Hilfsmittel stumm bleiben. */
.cd-cta__bild {
  inline-size: min(100%, 430px);
  margin: 0 auto var(--cd-a2);
}
.cd-cta__bild img {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* ------------------------------------------------------------
   Text
   ------------------------------------------------------------ */
.cd-cta__kicker { margin-block-end: var(--cd-a4); }

/* Auf rotem Grund traegt das Markenrot des Kickers nicht mehr —
   dort ein gedaempftes Weiss.

   80 % WAREN ZU WENIG. Nachgerechnet gegen --cd-rot #C41118:
     80 %  ->  #F3CFD1  4,26:1   faellt durch 1.4.3
     88 %  ->  #F8E3E4  4,94:1   traegt
   Der Kicker laeuft mit 11,5 px, da gelten 4,5:1 — die Absicht
   „gedaempft" war richtig, der Wert war es nicht. 88 % ist
   ausserdem derselbe Wert wie beim Beitext dieser Bahn; zwei
   verschiedene Weisstoene nebeneinander waeren ohnehin unruhig. */
.cd-cta.cd-auf-rot .cd-kicker {
  color: color-mix(in srgb, var(--cd-weiss) 88%, transparent);
}

.cd-cta__unterzeile {
  margin-block-start: var(--cd-a3);
  font-size: var(--cd-gr-gross);
  color: var(--cd-text-2);
}

.cd-cta__beitext {
  margin-block-start: var(--cd-a4);
  font-size: var(--cd-gr-gross);
  line-height: var(--cd-zeile-text);
  color: var(--cd-text-2);
  max-inline-size: 58ch;
}
.cd-cta__beitext > * + * { margin-block-start: var(--cd-a4); }

.cd-cta.cd-auf-dunkel .cd-cta__beitext,
.cd-cta.cd-auf-dunkel .cd-cta__unterzeile { color: var(--cd-text-auf-dunkel); }

.cd-cta.cd-auf-rot .cd-cta__beitext,
.cd-cta.cd-auf-rot .cd-cta__unterzeile {
  color: color-mix(in srgb, var(--cd-weiss) 88%, transparent);
}

/* Ein Link im Beitext muss auch auf farbigem Grund als Link
   erkennbar bleiben — Farbe allein traegt nicht (WCAG 1.4.1). */
.cd-cta.cd-auf-rot .cd-cta__beitext a,
.cd-cta.cd-auf-dunkel .cd-cta__beitext a {
  color: var(--cd-weiss);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* ------------------------------------------------------------
   Knopfstapel (helle und dunkle Fassung)
   ------------------------------------------------------------
   Untereinander statt nebeneinander: die Wege sind nicht
   gleichrangig, der oberste ist der kuerzeste.
   ------------------------------------------------------------ */
.cd-cta__knoepfe {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--cd-a3);
}
.cd-cta__knopf { justify-content: space-between; }

/* Steht die Nummer schlicht daneben, laufen die beiden Knoepfe
   nebeneinander statt untereinander: sie sind dann nicht mehr
   gleichrangig, und zwei volle Breiten untereinander behaupteten
   genau das. */
.cd-cta__knoepfe--reihe {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.cd-cta__knoepfe--reihe .cd-cta__knopf { justify-content: center; }
.cd-cta__anrufSchlicht {
  display: inline-flex;
  align-items: center;
  gap: var(--cd-a2);
}
.cd-cta__anrufSchlicht .cd-symbol {
  inline-size: 16px;
  block-size: 16px;
}

/* Die grosse Knopfform steht in komponenten.css — sie gilt auch
   fuer das Abschlussband der Projektseiten. Hier stehen nur noch
   die Fuellungen dieser Fassung. */

/* Die Nummer ist gefuellt, wenn sie fuehrt — im Backend ist das die
   Einstellung „grosser Knopf". Steht sie schlicht daneben, traegt
   sie im Markup die Umriss-Klasse und kommt hier gar nicht vor. */
.cd-cta__telefonknopf {
  background: var(--cd-rot);
  border: 1px solid var(--cd-rot);
  color: var(--cd-weiss);
  transition: background var(--cd-zeit) ease, color var(--cd-zeit) ease,
              border-color var(--cd-zeit) ease;
}
.cd-cta__telefonknopf:hover {
  background: var(--cd-rot-tief);
  border-color: var(--cd-rot-tief);
  color: var(--cd-weiss);
}

/* Auf dunklem und auf rotem Grund kehrt sich der Knopf um: weisse
   Flaeche mit dunkler Schrift. Rot auf Rot waere unsichtbar, Rot
   auf Anthrazit zu schwach. */
.cd-cta.cd-auf-dunkel .cd-cta__telefonknopf,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf {
  background: var(--cd-weiss);
  color: var(--cd-tinte);
}
.cd-cta.cd-auf-dunkel .cd-cta__telefonknopf:hover,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf:hover {
  background: var(--cd-flaeche-2);
  color: var(--cd-tinte);
}
.cd-cta.cd-auf-dunkel .cd-cta__telefonknopf .cd-symbol,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf .cd-symbol { color: var(--cd-rot); }

/* Die Umriss-Fassung holt ihre Randfarbe fuer dunklen Grund aus
   komponenten.css — fuer roten Grund gibt es sie dort nicht. */
.cd-cta.cd-auf-rot .cd-knopf--linie {
  border-color: color-mix(in srgb, var(--cd-weiss) 45%, transparent);
  color: var(--cd-weiss);
}
.cd-cta.cd-auf-rot .cd-knopf--linie:hover {
  border-color: var(--cd-weiss);
  background: color-mix(in srgb, var(--cd-weiss) 12%, transparent);
  color: var(--cd-weiss);
}

@media (prefers-reduced-motion: reduce) {
  .cd-cta__telefonknopf:hover { transform: none; }
}

/* ------------------------------------------------------------
   Aktionsband
   ------------------------------------------------------------
   Rotes Abschlussband nach „Startseite Marketing v3 dunkel":
   links Kicker, Schlagzeile und ein Satz, rechts zwei grosse
   Knoepfe und die Zusicherung darunter.

   Die frueher hier stehende weisse Kontaktkarte stammte aus v12
   und ist abgeloest. Ihre Bausteine (Pulspunkt, Fussleiste)
   werden von keiner anderen Bahn benutzt und sind mit ihr
   entfallen.
   ------------------------------------------------------------ */
.cd-cta--aktion {
  position: relative;
  overflow: hidden;
}

/* Ein weiches Dunkel oben rechts nimmt der grossen roten Flaeche
   die Plakathaftigkeit. Zier ohne Aussage — deshalb aus dem
   Zugaenglichkeitsbaum heraus und hinter dem Inhalt. */
.cd-cta--aktion::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 54% 70% at 88% 20%, rgba(13, 26, 33, .30), transparent 64%);
  pointer-events: none;
}
.cd-cta--aktion > .cd-cta__raster { position: relative; }

/* Die Schlagzeile des Abschlussbands steht groesser als die der
   uebrigen Bahnen — sie ist der letzte Anstoss der Seite. */
.cd-cta--aktion .cd-cta__titel {
  font-size: clamp(32px, 1.8rem + 1.9vw, 52px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.032em;
  max-inline-size: 640px;
}
.cd-cta--aktion .cd-cta__beitext,
.cd-cta--aktion .cd-cta__unterzeile {
  font-size: 18px;
  line-height: 1.6;
  max-inline-size: 520px;
}

/* Die Form kommt aus der gemeinsamen Regel weiter oben. Hier steht
   nur noch, was diese Fassung anders macht: die Fuellung. Gefuellt
   fuehrt, umrandet begleitet. */
.cd-cta--aktion .cd-cta__knoepfe { gap: 14px; }

.cd-cta--aktion .cd-cta__hauptknopf,
.cd-cta.cd-auf-rot .cd-cta__hauptknopf {
  background: var(--cd-weiss);
  border: 1px solid var(--cd-weiss);
  color: var(--cd-tinte);
}
.cd-cta--aktion .cd-cta__hauptknopf:hover,
.cd-cta.cd-auf-rot .cd-cta__hauptknopf:hover {
  background: var(--cd-tinte);
  border-color: var(--cd-tinte);
  color: var(--cd-weiss);
}

.cd-cta--aktion .cd-cta__telefonknopf,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--cd-weiss) 55%, transparent);
  color: var(--cd-weiss);
  transform: none;
}
.cd-cta--aktion .cd-cta__telefonknopf:hover,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf:hover {
  background: var(--cd-tinte);
  border-color: var(--cd-tinte);
  color: var(--cd-weiss);
  transform: none;
}
.cd-cta--aktion .cd-cta__telefonknopf .cd-symbol,
.cd-cta.cd-auf-rot .cd-cta__telefonknopf .cd-symbol { color: currentColor; }

.cd-cta__knopfbild {
  flex: 0 0 auto;
  inline-size: 17px;
  block-size: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
}

/* Auf Weiss braucht der Fokusring eine dunkle Fassung — der rote
   Ring des Grundstils verschwindet auf rotem Grund. */
.cd-cta--aktion :focus-visible {
  outline: 3px solid var(--cd-weiss);
  outline-offset: 3px;
}
.cd-cta--aktion .cd-cta__hauptknopf:focus-visible {
  outline-color: var(--cd-tinte);
}

/* ------------------------------------------------------------
   Kleinzeile
   ------------------------------------------------------------ */
.cd-cta__kleinzeile {
  font-family: var(--cd-schrift-mono);
  font-size: var(--cd-gr-mikro);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.7;
  /* Linksbuendig, weil die Knoepfe darueber linksbuendig stehen.
     Rechtsbuendig endete die Zeile dort, wo der Umbruch sie enden
     laesst — gemessen 52 px neben der Knopfkante und 34 px neben
     der Spaltenkante. Das trifft keine Kante und sieht deshalb
     nach Zufall aus. */
  text-align: start;
  color: var(--cd-text-3);
}
.cd-cta.cd-auf-dunkel .cd-cta__kleinzeile { color: var(--cd-text-auf-dunkel-2); }
.cd-cta.cd-auf-rot .cd-cta__kleinzeile {
  /* 70 % Weiss auf #C41118 ergibt 3,55:1 bei 11 px — zu wenig fuer
     1.4.3. Volles Weiss bringt 6,12:1. Dass die Zeile leiser wirkt
     als die Ueberschrift, tragen Groesse und Laufweite bereits;
     dafuer muss die Farbe nicht auch noch verduennt werden. */
  color: var(--cd-weiss);
}

/* Die Zusicherung gehoert zu den Knoepfen und rueckt deshalb dicht
   an sie heran. Die Ausrichtung kommt aus der Grundregel. */
.cd-cta__kleinzeile { margin-block-start: 8px; }

/* ------------------------------------------------------------
   Notebook-Luecke: 1101 bis 1419 px
   ------------------------------------------------------------ */
@media (max-width: 1419px) {
  .cd-cta__raster { gap: var(--cd-a7); }
}

/* ------------------------------------------------------------
   Unter 900 px einspaltig
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  .cd-cta__raster {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cd-a6);
    align-items: start;
  }
}

/* ------------------------------------------------------------
   Mobilstufe
   ------------------------------------------------------------ */
@media (max-width: 600px) {
  .cd-cta--aktion .cd-cta__beitext,
  .cd-cta--aktion .cd-cta__unterzeile { font-size: 16px; }
}