/*
  CTA-Section: vollbreite, farbig abgesetzte Handlungsaufforderung. Die drei
  Hintergrund-Varianten nutzen ausschliesslich markenneutrale Tokens
  (--color-brand-*, --color-secondary-*, --farbe-glanz-a/-b), kein neuer
  Farbwert. --farbe-akzent und --farbe-auf-akzent werden lokal umgekehrt
  (hell auf Flaeche statt Flaeche-Farbe auf Flaeche), damit ein eingebetteter
  Button (variante=primary) automatisch hell auf der farbigen Flaeche sitzt --
  button.css muss dafuer nichts von cta-section wissen, gleiches
  Umkehr-Prinzip wie [data-akzent] in den Marken-Dateien.

  Architektur-Fix (Guido/Achilles, 2026-08-27): "gradient" nutzte bis hierhin
  --color-bi/--color-si direkt -- Produkt-Vertikalen-Tokens (todayislife-
  spezifisch), die eine markenneutrale Bibliothek wie design/ nicht referenzieren
  darf, und die eine zweite Marke (Guardlane) gar nicht definiert. Eine
  einzelne ungueltige color-mix()-Variable macht die GESAMTE background-
  Deklaration ungueltig -- sichtbare Folge war "weisse Schrift auf weissem
  Grund" bei jeder Marke ohne --color-bi/--color-si. Fix: --farbe-glanz-a/-b
  (jede Marke definiert sie, siehe marke-*.css) statt der harten Vertikalen-
  Tokens -- fuer todayislife 1:1 auf die alten Werte gemappt (keine optische
  Aenderung), fuer Guardlane mit eigenen, auf der Marke basierenden Toenen.
*/@layer komponenten{.cta-section{--farbe-akzent:var(--color-white);--farbe-auf-akzent:var(--color-brand-700);container-type:inline-size;position:relative;overflow:hidden;padding-block:var(--space-16);color:var(--color-white);text-align:center}.cta-section[data-variante="primary"]{background:var(--color-brand-700)}.cta-section[data-variante="secondary"]{background:var(--color-secondary-600)}.cta-section[data-variante="gradient"]{background:radial-gradient(110% 120% at 8% 18%, color-mix(in oklch, var(--farbe-glanz-a) 28%, transparent), transparent 54%),radial-gradient(100% 100% at 88% 82%, color-mix(in oklch, var(--farbe-glanz-b) 24%, transparent), transparent 58%),linear-gradient(132deg, var(--color-brand-500), var(--color-brand-700) 46%, var(--color-secondary-500))}/* Dekorative, weiche Lichtflecken -- rein optisch, keine Information. */.cta-section::before,.cta-section::after{content:'';position:absolute;width:22rem;height:22rem;border-radius:var(--radius-full);background:color-mix(in oklch, white 12%, transparent);filter:blur(60px);pointer-events:none}.cta-section::before{top:-8rem;right:-6rem}.cta-section::after{bottom:-8rem;left:-6rem}.cta-section__inhalt{position:relative;z-index:1;max-width:44rem;margin-inline:auto;padding-inline:var(--space-6)}.cta-section__titel{font-family:var(--font-display);font-optical-sizing:auto;font-size:var(--text-3xl);font-weight:var(--weight-bold);line-height:var(--leading-tight);color:var(--color-white);margin:0}.cta-section__beschreibung{margin-block-start:var(--space-4);font-size:var(--text-lg);line-height:var(--leading-relaxed);color:color-mix(in oklch, var(--color-white) 88%, transparent);/* Zentrierter Fliesstext nur bis 3 Zeilen (Briefing Langtext 2026-10-13):
       begrenzte Breite + ausgewogener Umbruch; laengere Texte und alle Texte auf
       schmalem Container wechseln auf linksbuendig (siehe unten). */max-width:52ch;margin-inline:auto;text-wrap:balance}.cta-section__aktion{margin-block-start:var(--space-8);display:flex;justify-content:center}@container (min-width: 40rem){.cta-section__titel{font-size:var(--text-4xl)}}/* Schmal (< 40rem): Titel, Text und Button-Zeile gemeinsam linksbuendig, damit nichts
     halb zentriert wirkt. Lange Texte (render/site-lib.js setzt data-text="lang") ebenso. */@container (max-width: 39.99rem){.cta-section__inhalt{text-align:start}.cta-section__beschreibung{margin-inline:0;text-wrap:pretty}.cta-section__aktion{justify-content:flex-start}}.cta-section[data-text="lang"] .cta-section__inhalt{text-align:start}.cta-section[data-text="lang"] .cta-section__beschreibung{margin-inline:0;text-wrap:pretty;max-width:60ch}.cta-section[data-text="lang"] .cta-section__aktion{justify-content:flex-start}}