/* ==========================================================================
   special689.css – News „KundenApp jetzt bei Google Play“ (Artikel 689), Stand 10.11.2026
   Neue Datei – wird vom Template automatisch nur auf Artikel 689 geladen.
   Alle Regeln sind auf .tgka beschränkt.
   Farben kommen aus den Variablen der Website (--surface-*, --text-*, --border-*),
   damit der Beitrag im hellen und dunklen Modus automatisch passt.
   ========================================================================== */

.tgka {
  /* Lila-Töne: im hellen Modus dunkler (Kontrast), im dunklen heller */
  --tgka-accent: #5b3fc4;            /* Buttons, Schritt-Kreise */
  --tgka-accent-hover: #4a32a6;
  --tgka-accent-text: #5b3fc4;       /* Kicker, Links, Icons */
  --tgka-accent-soft: rgba(91, 63, 196, .10);
  --tgka-shadow: 0 1px 2px rgba(27, 25, 24, .04), 0 8px 24px rgba(27, 25, 24, .06);

  /* Hintergründe der Bänder (hell) */
  --tgka-bg-lila:  #f1ecfb;   /* hell-lila  */
  --tgka-bg-grau:  #ebe8e4;   /* hellgrau   */
  --tgka-bg-weiss: #faf9f7;   /* grauweiß   */
  --tgka-card:     #ffffff;
  --tgka-card-line: #e2ddd7;

  /* volle Fensterbreite wie auf der Agentur-Seite (special676: .ag-001) */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  color: var(--text-body, #2a2826);
  font-family: roboto, sans-serif;
  letter-spacing: .05em;
  line-height: 1.55;
}
.mainInner {
padding-top: 0px;
}
@media (prefers-color-scheme: dark) {
  .tgka {
    --tgka-accent-hover: #6c4fdc;
    --tgka-accent-text: #a48bff;
    --tgka-accent-soft: rgba(139, 99, 255, .16);
    --tgka-shadow: none;

    /* Hintergründe der Bänder (dunkel) */
    --tgka-bg-lila:  #1c1729;
    --tgka-bg-grau:  #1f1e1d;
    --tgka-bg-weiss: #161515;
    --tgka-card:     #282624;
    --tgka-card-line: #34312e;
  }
}

/* kein waagrechter Scrollbalken durch 100vw */
html, body { overflow-x: clip; }

.tgka * { box-sizing: border-box; }
.tgka .tgka-band { margin: 0; padding: 112px 0; }
/* Inhaltsrahmen wie auf der Agentur-Seite: max. 1440 px, 5 % Rand (mobil 20 px) */
.tgka .tgka-in { max-width: 1440px; margin: 0 auto; padding: 0 5%; }
.tgka .tgka-bg-lila  { background: var(--tgka-bg-lila); }
.tgka .tgka-bg-grau  { background: var(--tgka-bg-grau); }
.tgka .tgka-bg-weiss { background: var(--tgka-bg-weiss); }
.tgka .tgka-bg-purple {
  color: #efeaff;
  background:
    radial-gradient(ellipse at 85% 15%, rgba(155, 61, 255, .45), transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(91, 63, 196, .35), transparent 50%),
    linear-gradient(135deg, #24104d, #4a1f9e);
}
.tgka p { margin: 0 0 16px; }
.tgka strong { color: var(--text-strong, #1b1918); }
.tgka a:not(.tgka-btn) { color: var(--tgka-accent-text); }

/* Typografie ------------------------------------------------------------- */
.tgka .tgka-kicker {
  display: inline-block;
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tgka-accent-text);
}
.tgka h2 {
  margin: 0 0 20px;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
  color: var(--text-strong, #1b1918);
}
.tgka h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--text-strong, #1b1918);
}
.tgka .tgka-lead { font-size: 19px; line-height: 1.6; }

/* Zweispaltige Abschnitte --------------------------------------------------- */
.tgka .tgka-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px 96px;
  align-items: center;
}
.tgka .tgka-split.tgka-rev .tgka-media { order: -1; }
.tgka .tgka-media img { display: block; width: 100%; height: auto; border-radius: 18px; }
.tgka .tgka-media img.tgka-free { border-radius: 0; } /* transparente Bilder ohne Rahmen */

/* Buttons ---------------------------------------------------------------- */
.tgka .tgka-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tgka .tgka-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: var(--tgka-accent);
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: transform .15s, background .15s, border-color .15s;
}
.tgka .tgka-btn:hover { background: var(--tgka-accent-hover); transform: translateY(-1px); }
.tgka .tgka-btn.tgka-ghost {
  background: transparent;
  border: 1px solid var(--border-default, #bdb6ae);
  color: var(--text-strong, #1b1918);
}
.tgka .tgka-btn.tgka-ghost:hover { border-color: var(--tgka-accent-text); color: var(--tgka-accent-text); }
.tgka .tgka-btn.tgka-light { background: #fff; color: #2a1158; }
.tgka .tgka-btn.tgka-light:hover { background: #f1ecff; }
.tgka .tgka-btn svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

/* Funktions-Kacheln -------------------------------------------------------- */
.tgka .tgka-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.tgka .tgka-feat {
  padding: 26px;
  border-radius: 18px;
  background: var(--tgka-card);
  border: 1px solid var(--tgka-card-line);
  box-shadow: var(--tgka-shadow);
}
.tgka .tgka-feat p { margin: 0; font-size: 15px; color: var(--text-light, #5c5853); }
.tgka .tgka-ico {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 18px;
  border-radius: 12px;
  background: var(--tgka-accent-soft);
}
.tgka .tgka-ico svg {
  width: 24px; height: 24px;
  fill: none; stroke: var(--tgka-accent-text); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

/* Schritte ---------------------------------------------------------------- */
.tgka .tgka-steps { list-style: none; padding: 0; margin: 28px 0 0; counter-reset: tgka-step; }
.tgka .tgka-steps li { position: relative; padding: 0 0 26px 64px; counter-increment: tgka-step; }
.tgka .tgka-steps li::before {
  content: counter(tgka-step);
  position: absolute; left: 0; top: -4px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--tgka-accent);
  color: #fff;
  font-weight: 700; font-size: 18px; letter-spacing: 0;
}
.tgka .tgka-steps li:not(:last-child)::after {
  content: "";
  position: absolute; left: 21px; top: 46px; bottom: 4px;
  width: 2px;
  background: var(--border-light, #d9d3cc);
}
.tgka .tgka-steps p { margin: 0; color: var(--text-light, #5c5853); }

/* Download-Kasten (in beiden Modi lila) ------------------------------------ */
.tgka .tgka-cta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 40px;
  align-items: center;
}
.tgka .tgka-cta h2, .tgka .tgka-cta strong { color: #fff; }
.tgka .tgka-cta p { color: #e9e2ff; }
.tgka .tgka-cta .tgka-kicker { color: #d9ccff; }
.tgka .tgka-cta a:not(.tgka-btn) { color: #fff; }
.tgka .tgka-qr { width: 220px; height: 220px; padding: 20px; border-radius: 20px; background: #fff; box-shadow: 0 20px 40px rgba(10, 0, 30, .35); }
.tgka .tgka-qrsvg { display: block; width: 100%; height: 100%; }
.tgka .tgka-note {
  margin-top: 24px;
  padding: 4px 0 4px 16px;
  border-left: 3px solid #d9ccff;
  font-size: 14px;
}


/* Offizieller Google-Play-Badge ------------------------------------------- */
/* Die PNG-Datei enthält den vorgeschriebenen Freiraum (¼ der Badge-Höhe) bereits.
   Nicht verändern (Farbe, Proportionen), mindestens 28 px sichtbare Höhe. */
.tgka .tgka-play { display: inline-block; line-height: 0; transition: transform .15s; }
.tgka .tgka-play:hover { transform: translateY(-1px); }
.tgka .tgka-play img { display: block; width: auto; height: 76px; max-width: none; border-radius: 0; }
.tgka .tgka-btns { align-items: center; }
.tgka .tgka-legal { max-width: 1440px; margin: 0 auto; padding: 18px 5% 0; font-size: 12px; color: var(--text-light, #5c5853); }
@media (max-width: 860px) {
  .tgka .tgka-play img { height: 64px; }
  .tgka .tgka-cta .tgka-play { margin-left: auto; margin-right: auto; }
}

/* Responsiv --------------------------------------------------------------- */
@media (max-width: 1060px) and (min-width: 861px) {
  .tgka .tgka-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .tgka .tgka-band { padding: 72px 0; }
  .tgka .tgka-split { grid-template-columns: 1fr; gap: 32px; }
  .tgka .tgka-split.tgka-rev .tgka-media { order: 0; }
  .tgka .tgka-grid { grid-template-columns: 1fr; }
  .tgka .tgka-cta { grid-template-columns: 1fr; text-align: center; }
  .tgka .tgka-qr { width: 180px; height: 180px; margin: 0 auto; }
  .tgka .tgka-cta .tgka-btns { justify-content: center; }
  .tgka .tgka-note { text-align: left; }
}

/* Mobil wie Agentur-Seite: 20 px Rand */
@media (max-width: 767px) {
  .tgka .tgka-in { padding: 0 20px; }
  .tgka .tgka-legal { padding: 18px 20px 0; }
  .tgka .tgka-band { padding: 64px 0; }
}