/* CTA-Bausteine: App-Karte und Desktop-QR-Karte (handlers/cta.py).
   Design "Ruhe": Tokens aus style.css (:root). Inline-Karte weiß auf Sand
   ohne Rahmen mit Salbei-Pillen; End-Karte als ruhige Salbei-Fläche mit
   weißen Pillen wie die CTA-Sektion. Plattform über
   html[data-platform="ios|android|desktop"], gesetzt in base.html. */

.app-card {
  display: flex;
  gap: 1.5rem;
  align-items: stretch;
  margin: 2.5rem 0;
  padding: 1.5rem 1.75rem;
  background: var(--color-card);
  border-radius: var(--radius-lg);
  color: var(--color-text);
  text-align: left;
}
.app-card--end {
  background: var(--color-primary);
  color: var(--color-white);
}
.app-card-main {
  flex: 1 1 auto;
  min-width: 0;
}
.app-card-head {
  display: flex;
  gap: 0.875rem;
  align-items: center;
}
.app-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 13px;
  flex: 0 0 auto;
}
.app-card p {
  margin: 0;
}
.app-card-name {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.app-card-tagline,
.app-card-note {
  font-size: 14px;
  color: var(--color-text-muted);
}
.app-card-rating {
  font-size: 14px;
  margin-top: 0.125rem !important;
}
.app-card-stars {
  color: var(--color-clay);
}
.app-card--end .app-card-tagline,
.app-card--end .app-card-note,
.app-card--end .app-card-rating {
  color: rgba(255, 255, 255, 0.82);
}
.app-card--end .app-card-stars {
  color: var(--color-white);
}
.app-card-benefit {
  margin-top: 1rem !important;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.45;
}
.app-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}
.app-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.6rem 1.35rem 0.6rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--color-white);
  font-weight: 600;
  line-height: 1.15;
  text-decoration: none;
  transition: filter 0.2s ease;
}
.app-card-btn:hover,
.app-card-btn:focus-visible {
  color: var(--color-white);
  filter: brightness(0.93);
}
.app-card-btn i {
  font-size: 1.35rem;
}
.app-card-btn small {
  display: block;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}
.app-card--end .app-card-btn {
  background: var(--color-white);
  color: var(--color-primary-deep);
}
.app-card--end .app-card-btn:hover,
.app-card--end .app-card-btn:focus-visible {
  color: var(--color-primary-deep);
  filter: brightness(0.96);
}
.app-card-note {
  margin-top: 0.625rem !important;
  font-size: 13px;
}

/* In einer CTA-Sektion (Salbei-Fläche mit eigener Überschrift) */
.cta-section .app-card {
  margin: 0 auto;
  max-width: 640px;
}

/* Nur den passenden Store zeigen. Ohne JS bleiben beide sichtbar. */
html[data-platform="ios"] .app-card-btn--google,
html[data-platform="android"] .app-card-btn--apple {
  display: none;
}

/* QR-Code nur auf dem Desktop */
.app-card-qr,
.qr-card {
  display: none;
}
@media (min-width: 992px) {
  html[data-platform="desktop"] .app-card-qr {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    padding: 0.75rem;
    background: var(--color-white);
    border-radius: var(--radius-md);
    box-shadow: inset 0 0 0 1px var(--color-border);
    color: var(--color-text);
    text-decoration: none;
    text-align: center;
    max-width: 176px;
  }
  html[data-platform="desktop"] .app-card--end .app-card-qr {
    box-shadow: none;
  }
  html[data-platform="desktop"] .app-card-qr svg {
    width: 128px;
    height: 128px;
  }
  .app-card-qr-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.25;
  }
  html[data-platform="desktop"] .qr-card {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    margin-top: 1.5rem;
    padding: 0.75rem 1.25rem 0.75rem 0.75rem;
    background: var(--color-card);
    border-radius: var(--radius-lg);
    color: var(--color-text);
    text-decoration: none;
    max-width: 380px;
  }
  html[data-platform="desktop"] .qr-card:hover {
    box-shadow: var(--shadow-soft);
  }
  html[data-platform="desktop"] .qr-card svg {
    width: 112px;
    height: 112px;
    flex: 0 0 auto;
  }
  .qr-card-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: 14px;
    line-height: 1.35;
    text-align: left;
    color: var(--color-text-muted);
  }
  .qr-card-text strong {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text);
  }
}

@media (max-width: 575.98px) {
  .app-card {
    padding: 1.25rem;
  }
  .app-card-btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Unter einem Rechner-Ergebnis (templates/tools/_app_cta.html) */
.app-result-cta .app-card {
  margin: 0;
  animation: app-card-in 0.4s ease both;
}
@keyframes app-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .app-result-cta .app-card { animation: none; }
}

/* Helle Karte in dunklen Sektionen (z. B. .cta-section p = weiß): Textfarben
   der Karte fest setzen, sonst erben Name, Nutzen und Bewertung Weiß. */
.app-card:not(.app-card--end) p,
.app-card:not(.app-card--end) .app-card-rating {
  color: var(--color-text);
}
.app-card:not(.app-card--end) .app-card-tagline,
.app-card:not(.app-card--end) .app-card-note {
  color: var(--color-text-muted);
}
.app-card:not(.app-card--end) .app-card-stars {
  color: var(--color-clay);
}