/* ============================================================
   Akquise.de Design Library — Komponenten
   Alle Maße em-basiert: font-size der Komponente skaliert alles.
   Referenzgrößen = exakte Figma-Werte (Preheadline 14px,
   Button 16.8px). Benötigt tokens.css + fonts.css.
   ============================================================ */

/* ---------------------------------------------------------
   1. KERBEN-KARTE (Signature-Shape)
   Nutzung: <div class="akq-card akq-card--dark" data-akq-card>
   js/akq-shape.js setzt den clip-path automatisch.
   --------------------------------------------------------- */
.akq-card {
  position: relative;
  overflow: hidden;
}
.akq-card--dark {
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0) 55%),
    var(--akq-green-deep);
  color: #fff;
  /* Inset-Emboss für Tiefe (Original-Figma-Werte, skaliert) */
  box-shadow:
    inset 0 2px 4px rgba(255, 255, 255, 0.08),
    inset 6px 8px 24px rgba(0, 0, 0, 0.22),
    inset -2px -2px 6px rgba(0, 0, 0, 0.18);
}
.akq-card--light {
  background: linear-gradient(158deg, #ffffff 0%, #efeeea 62%, #e6e4de 100%);
  color: var(--akq-green-deep);
  /* Mehrschichtiger Inset-Shadow → Karte wirkt tiefer/dimensional (Figma) */
  box-shadow:
    inset 0 2px 2px rgba(255, 255, 255, 0.9),
    inset 2px 3px 4px rgba(255, 255, 255, 0.55),
    inset -2px -3px 8px rgba(0, 0, 0, 0.045),
    inset 7px 9px 22px rgba(0, 0, 0, 0.05);
}
.akq-card--grey {
  background: var(--akq-grey);
  color: var(--akq-green-deep);
}

/* ---------------------------------------------------------
   2. PREHEADLINE (Badge mit Ticket-Endkappen + Spark-Icons)
   Referenz: Figma 4418:35 — Höhe 30.5px bei font-size 14px.
   Struktur: [spark] [text] [spark] auf einem SVG-Silhouetten-BG.
   Die Fläche (Union aus Kappen + Rechteck) + Inset-Emboss werden
   von js/akq-shape.js als EIN durchgehendes SVG erzeugt (Original
   filter0_ii) — so folgt der Schatten der Außenkontur und bricht
   NICHT an den Nähten zwischen den Teilstücken (keine Streifen).
   Farben über --ph-bg / --ph-ink steuerbar.
   --------------------------------------------------------- */
.akq-preheadline {
  --ph-bg: var(--akq-offwhite);
  --ph-ink: var(--akq-green-deep);
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 0.429em;              /* 6 / 14 */
  height: 2.179em;           /* 30.5 / 14 */
  padding: 0 1.25em;         /* Platz für Ticket-Kappe (0.817em) + Text */
  font-family: var(--akq-font-sans);
  font-weight: 400;
  font-size: 14px; /* skalieren: font-size ändern, alles zieht mit */
  line-height: 1;
  color: var(--ph-ink);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}
/* Silhouetten-SVG (von akq-shape.js injiziert) — hinter Text/Sparks */
.akq-preheadline__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}
.akq-preheadline__spark {
  display: block;
  width: 0.432em;            /* 6.043 / 14 */
  height: 0.857em;           /* 11.99 / 14 */
  fill: var(--ph-ink);
  flex: none;
}
.akq-preheadline__spark--left {
  transform: scaleX(-1);
}
.akq-preheadline__text {
  letter-spacing: -0.03em;   /* -0.42px / 14px */
  white-space: nowrap;
  transform: translateY(-0.03em);
}
/* Dunkle Variante (auf High-Stakes-Green-Flächen) */
.akq-preheadline--dark {
  --ph-bg: rgba(255, 255, 255, 0.12);
  --ph-ink: #ffffff;
  filter: none;
}

/* ---------------------------------------------------------
   3. BUTTON / CTA (Grün-Gradient + Ticket-Pfeil)
   Referenz: Figma 4420:704 — Höhe 39.2px bei font-size 16.8px.
   Text-Muster: Everett + <em> in IBM Plex Serif Italic.
   --------------------------------------------------------- */
.akq-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.952em;                       /* 16 / 16.8 */
  height: 2.333em;                    /* 39.2 / 16.8 */
  padding: 0 0.381em 0 1.143em;       /* 6.4 | 19.2 */
  border: 0.4px solid rgba(255, 255, 255, 0);
  border-radius: 0.476em;             /* 8 / 16.8 */
  background-image:
    linear-gradient(90deg, rgba(32, 172, 88, 0) 0%, rgb(32, 172, 88) 50%, rgba(32, 172, 88, 0) 100%),
    linear-gradient(90deg, rgb(23, 123, 63) 10.194%, rgb(32, 172, 88) 50%, rgb(23, 123, 63) 90.794%);
  box-shadow: var(--akq-inset-btn);
  font-family: var(--akq-font-sans);
  font-weight: 400;
  font-size: 16.8px; /* skalieren: font-size ändern */
  line-height: 1.143;
  letter-spacing: -0.04em;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: filter 0.18s ease, transform 0.18s ease;
}
.akq-btn:hover {
  filter: brightness(1.07);
  transform: translateY(-1px);
}
.akq-btn:active {
  transform: translateY(0);
  filter: brightness(0.98);
}
.akq-btn em,
.akq-serif {
  font-family: var(--akq-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.06em;
}
.akq-btn__arrow {
  position: relative;
  width: 2.643em;   /* 44.4 / 16.8 */
  height: 1.714em;  /* 28.8 / 16.8 */
  flex: none;
}
.akq-btn__arrow svg {
  position: absolute;
  left: -27.03%;
  top: -41.67%;
  width: 172.07%;
  height: 211.11%;
  max-width: none;
}

/* ---------------------------------------------------------
   4. HEADLINE-MIX (Everett + IBM Plex Serif Italic Akzent)
   Muster: "Dein Spielplan zum Erfolg: <em>Die AKQ-Methode©</em>"
   --------------------------------------------------------- */
.akq-headline {
  font-family: var(--akq-font-sans);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.12;
  color: var(--akq-green-deep);
  margin: 0;
}
.akq-headline em {
  font-family: var(--akq-font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.045em;
}
/* Grüne Serif-Highlight-Akzente (Figma 4143:1770): radialer Grün-Verlauf
   als Fill (heller Kern → dunkle Ränder) + weiß/leuchtgrüner Glow-Schatten.
   Gibt Tiefe & Leuchten statt flachem Grün. Auf jedes <em>/<span> in Headlines
   anwendbar. Dunkle-Flächen-Overrides stehen in sections.css. */
.akq-accent {
  background: radial-gradient(
    125% 155% at 32% 20%,
    #00c34e 0%,
    #10b752 24%,
    #20ab57 48%,
    #10793a 74%,
    #08602b 87%,
    #00471c 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0.023em 0.023em 0.047em rgba(255, 255, 255, 0.1),
    -0.012em -0.012em 0.047em rgba(0, 255, 102, 0.25);
}
.akq-headline--onDark {
  color: #fff;
}
.akq-headline--onDark em {
  color: #fff; /* Akzent optional: var(--akq-emerald) */
}
.akq-subline {
  font-family: var(--akq-font-sans);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.4;
  color: inherit;
  opacity: 0.85;
  margin: 0;
}

/* ---------------------------------------------------------
   5. BADGE-PILL (Deck-Stil: „• LEVEL UP YOUR MIND 2026 •")
   --------------------------------------------------------- */
.akq-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1.3em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--akq-font-sans);
  font-weight: 400;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--akq-emerald);
  white-space: nowrap;
}

/* ---------------------------------------------------------
   6. FOOTER-MUSTER (Styleguide: Folio links, Marke rechts)
   --------------------------------------------------------- */
.akq-footer {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-family: var(--akq-font-sans);
  font-size: 1rem;
  color: var(--akq-green-deep);
}
.akq-footer--onDark {
  color: #fff;
}
.akq-folio {
  font-family: var(--akq-font-serif);
  font-style: italic;
  color: var(--akq-emerald);
}
.akq-footer__brand em {
  font-family: var(--akq-font-serif);
  font-style: italic;
  letter-spacing: -0.02em;
}