/* /closia/: Vorschau auf Closia AI und Closia Voice (Entwurf 12.10.2026). */

/* Kopf: Status statt Bereichskachel, beide Gesichter auf einer Glasplatte. */
.cl-status { gap: 10px; padding: 7px 14px 7px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); font-size: 14px; }
.cl-punkt { width: 8px; height: 8px; border-radius: 50%; background: #c0a5fb; box-shadow: 0 0 0 4px rgba(192, 165, 251, .25); animation: cl-puls 2.4s ease-in-out infinite; }
@keyframes cl-puls { 50% { box-shadow: 0 0 0 8px rgba(192, 165, 251, 0); } }

.cl-medien { display: grid; place-items: center; min-height: 460px; }
/* Beide Gesichter frei auf dem Kopf, ohne Platte: Closia AI vorn, Voice dahinter versetzt. */
.cl-frei { position: relative; width: min(560px, 100%); aspect-ratio: 560 / 420; }
.cl-licht { position: absolute; inset: 6% 4% 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(192, 165, 251, .55), rgba(124, 58, 237, .18) 55%, transparent 75%); filter: blur(8px); }
.cl-frei img { position: absolute; height: auto; filter: drop-shadow(0 28px 34px rgba(10, 4, 30, .55)) drop-shadow(0 0 30px rgba(192, 165, 251, .25)); animation: cl-schweben 6s ease-in-out infinite; }
.cl-frei-voice { width: 56%; right: 0; top: 0; opacity: .96; animation-delay: -3s !important; }
.cl-frei-ai { width: 66%; left: 0; bottom: 0; z-index: 1; }
@keyframes cl-schweben { 50% { transform: translateY(-8px); } }

/* Zwei Aufgaben: zwei grosse Karten, nicht drei. */
.cl-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.cl-karte {
  display: flex; flex-direction: column; gap: 10px; padding: 30px 32px 28px; border-radius: 20px;
  background: #fff; border: 1px solid rgba(23, 16, 43, .08); color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(23, 16, 43, .04), 0 24px 48px -32px rgba(76, 29, 149, .28);
}
.cl-karte-box { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 8px; border-radius: 16px; background: color-mix(in srgb, #6c2bf2 9%, #fff); box-shadow: inset 0 0 0 1px rgba(108, 43, 242, .12); }
.cl-karte-box img { width: 44px; height: auto; filter: drop-shadow(0 6px 8px rgba(76, 29, 149, .25)); }
.cl-karte h3 { margin: 0; font-family: Outfit, Manrope, sans-serif; font-size: 26px; font-weight: 600; letter-spacing: -.025em; }
.cl-karte p { margin: 0; max-width: 40ch; color: var(--ink-2, #4b4b57); line-height: 1.6; }
.cl-karte .pfeil-link { margin-top: 8px; }
.cl-hinweis { margin: 22px 0 0; font-size: 13.5px; color: var(--ink-3, #6b6b74); }

/* Gebaute Karten mit Closia. */
.cl-avatar { width: 34px; height: auto; flex: none; }
.cl-vorschlag { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: color-mix(in srgb, #6c2bf2 8%, #fff); font-size: 13.5px; line-height: 1.5; color: #17102b; }
.cl-vorschlag small { display: block; margin-bottom: 2px; font-size: 11.5px; font-weight: 600; color: #6c2bf2; }
.cl-zitat { margin: 10px 0 6px; padding: 10px 14px; border-left: 3px solid #c0a5fb; border-radius: 0 10px 10px 0; background: rgba(108, 43, 242, .05); font-size: 13.5px; line-height: 1.5; color: #2b2540; }
.cl-welle { display: flex; align-items: center; justify-content: center; gap: 5px; height: 38px; margin: 8px 0 6px; border-radius: 12px; background: #17102b; }
.cl-welle i { display: block; width: 4px; height: 8px; border-radius: 2px; background: #c0a5fb; animation: cl-welle 1.2s ease-in-out infinite; }
.cl-welle i:nth-child(2n) { animation-delay: -.3s; } .cl-welle i:nth-child(3n) { animation-delay: -.6s; } .cl-welle i:nth-child(5n) { animation-delay: -.9s; }
@keyframes cl-welle { 50% { height: 22px; } }

@media (max-width: 860px) {
  .cl-medien { min-height: 0; padding: 8px 0 20px; }
  .cl-karten { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .cl-karte { padding: 24px 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .cl-punkt, .cl-frei img, .cl-welle i { animation: none; }
  .cl-welle i { height: 14px; }
}