/* KI-Anwendungen Abschnitt Styles */
:root {
  /* Override-able design tokens for this section */
  --ntx-bg: var(--bg-color, #0A1931);
  --ntx-card: var(--card-bg, #112240);
  --ntx-text: var(--text-color, #cbd5e1);
  --ntx-accent: var(--accent-color, #FFC947);
}

.ki-apps-section {
  background: var(--ntx-bg);
  padding: 100px 0;
  border-top: 1px solid #1e293b;
  border-bottom: 1px solid #1e293b;
}
.ki-apps__title {
  font-size: var(--unified-heading-size, 2.4rem);
  line-height: 1.25;
  text-align: center;
  margin: 0 0 55px;
}

.ki-apps__intro {
  max-width: 900px;
  margin: 0 auto 3rem;
  font-size: 1.05rem;
  line-height: 1.6;
  text-align: center;
  color: var(--ntx-text);
}

.ki-apps__grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .ki-apps__grid { grid-template-columns: repeat(2,1fr); }
}
@media (min-width: 1200px) {
  .ki-apps__grid { grid-template-columns: repeat(3,1fr); }
}

.ki-apps__card {
  background: var(--ntx-card);
  border: 1px solid #1e293b;
  padding: 1.5rem 1.5rem 1.75rem;
  border-radius: 14px;
  position: relative;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
  overflow: hidden;
  outline: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1), box-shadow .35s ease, translate .6s;
  will-change: transform, opacity;
}
.prefers-reduced-motion .ki-apps__card { transition: none; }
.ki-apps__card:focus-visible { box-shadow: 0 0 0 3px var(--ntx-accent); }
.ki-apps__card h3 { font-size: 1.15rem; margin: 0 0 .75rem; color: var(--ntx-accent); position: relative; }
.ki-apps__card h3::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg,var(--ntx-accent),transparent 70%);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease;
}
.prefers-reduced-motion .ki-apps__card h3::after { transition: none; }
.ki-apps__card p { font-size: .95rem; line-height: 1.55; }

/* Media placeholder */
.ki-apps__media { margin: -0.5rem -0.5rem 1rem; padding:0; }
.ki-apps__img { width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; border-radius:10px; background-color:#10233f; }
/* Fallback animation kept for cards without an image */
.ki-apps__img-ph { width: 100%; aspect-ratio: 16/9; border-radius: 10px; background:
  linear-gradient(135deg, rgba(24,90,219,0.25), rgba(255,201,71,0.18)),
  repeating-linear-gradient(60deg, rgba(255,255,255,0.05) 0 8px, transparent 8px 16px),
  #10233f; position: relative; overflow: hidden; }
.ki-apps__img-ph::after { content:""; position:absolute; inset:0; background: linear-gradient(120deg, transparent 0%, rgba(255,201,71,0.15) 40%, transparent 80%); transform: translateX(-100%); animation: phShine 4.5s linear infinite; mix-blend-mode: screen; }
@keyframes phShine { to { transform: translateX(100%); } }

.ki-apps__card.in-view { opacity: 1; transform: translateY(0); }
.ki-apps__card.in-view h3::after { transform: scaleX(1); }

/* Hover / focus microinteraction */
@media (hover: hover) {
  .ki-apps__card:hover { transform: translateY(-4px); box-shadow: 0 10px 28px -6px rgba(0,0,0,.45); }
  .ki-apps__card:hover h3::after { transform: scaleX(1); }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .ki-apps__card,
  .ki-apps__title { animation: none !important; transition: none !important; }
}