/* Grafik "PDF wird zum Online-Formular" (AiFormGraphic.razor) und das neue Demos-Menü. */

.aig {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Lichtstrahl, der über das Papier fährt */
.aig-beam {
  animation: aig-scan 6s ease-in-out infinite;
  filter: drop-shadow(0 0 5px rgba(34, 195, 242, .8));
}

@keyframes aig-scan {
  0% { transform: translateY(0); opacity: 0; }
  8% { opacity: 1; }
  55% { transform: translateY(150px); opacity: 1; }
  62%, 100% { transform: translateY(150px); opacity: 0; }
}

.aig-hit { animation: aig-hit 6s ease-in-out infinite; }
.aig-hit-2 { animation-delay: .35s; }

@keyframes aig-hit {
  0%, 18% { opacity: 0; }
  30%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

.aig-flow { animation: aig-flow 1.2s linear infinite; }

@keyframes aig-flow {
  to { stroke-dashoffset: -20; }
}

.aig-spark { transform-box: fill-box; transform-origin: center; animation: aig-spark 3s ease-in-out infinite; }

@keyframes aig-spark {
  0%, 100% { transform: translate(165px, 112px) scale(.85) rotate(0); }
  50% { transform: translate(165px, 112px) scale(1.15) rotate(20deg); }
}

/* Formularfelder erscheinen nacheinander */
.aig-field, .aig-btn { animation: aig-field 6s ease-in-out infinite; }
.aig-f2 { animation-delay: .15s; }
.aig-f3 { animation-delay: .3s; }
.aig-f4 { animation-delay: .45s; }
.aig-btn { animation-delay: .6s; }

@keyframes aig-field {
  0%, 30% { opacity: .15; }
  45%, 90% { opacity: 1; }
  100% { opacity: .15; }
}

@media (prefers-reduced-motion: reduce) {
  .aig-beam, .aig-hit, .aig-flow, .aig-spark, .aig-field, .aig-btn { animation: none !important; }
  .aig-beam { opacity: 0; }
  .aig-spark { transform: translate(165px, 112px); }
}

/* ===== Demos-Menü ===== */
.demo-menu {
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 1.1rem;
  box-shadow: 0 24px 60px rgba(40, 50, 120, .22);
}

@media (min-width: 992px) {
  /* Das Menü hängt mittig unter dem Menüpunkt und läuft auch auf schmaleren Bildschirmen nicht über den Rand. */
  .navbar-expand-lg .dropdown-menu.demo-menu {
    --demo-w: min(47rem, calc(100vw - 2rem));
    left: 50%;
    right: auto;
    width: var(--demo-w);
    min-width: 0;
    margin-left: calc(var(--demo-w) / -2);
  }
}

.demo-menu-grid {
  display: grid;
  grid-template-columns: 17.5rem minmax(0, 1fr);
}

.demo-promo {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.25rem 1.15rem 1.15rem;
  color: #fff;
  text-decoration: none;
  background:
    radial-gradient(70% 60% at 100% 0%, rgba(255, 107, 214, .5), transparent 60%),
    radial-gradient(60% 50% at 0% 100%, rgba(34, 195, 242, .45), transparent 65%),
    linear-gradient(145deg, #3d2fe0 0%, #6d5dfc 55%, #3aa5f0 100%);
}

.demo-promo:hover { color: #fff; }

.demo-promo .aig { margin: .25rem 0 .1rem; }

.demo-promo-kicker {
  align-self: flex-start;
  padding: .12rem .6rem;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #4a3400;
  background: linear-gradient(120deg, #ffd45a, #ffb800);
  border-radius: 999px;
}

.demo-promo h4 {
  margin: 0;
  font-size: 1.08rem;
  line-height: 1.25;
  color: #fff;
}

.demo-promo p {
  margin: 0;
  font-size: .85rem;
  line-height: 1.4;
  color: rgba(255, 255, 255, .9);
}

.demo-promo-cta {
  align-self: flex-start;
  margin-top: .25rem;
  padding: .45rem 1rem;
  font-size: .88rem;
  font-weight: 700;
  color: #3a2bd0;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 8px 20px rgba(20, 20, 80, .3);
  transition: transform .2s;
}

.demo-promo:hover .demo-promo-cta { transform: translateX(3px); }

.demo-lists {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .25rem 1rem;
  padding: 1.15rem 1.1rem 1.1rem;
}

.demo-group h5 {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0 0 .1rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--bs-secondary-color, #6c757d);
}

.demo-group .demo-sub {
  margin: 0 0 .6rem;
  font-size: .8rem;
  color: var(--bs-secondary-color, #6c757d);
}

.demo-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .5rem .55rem;
  color: var(--bs-body-color);
  text-decoration: none;
  border-radius: .8rem;
  transition: background-color .2s;
}

.demo-item:hover { background: rgba(109, 93, 252, .09); color: var(--bs-body-color); }

.demo-item-icon {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  font-size: 1.15rem;
  color: #6d5dfc;
  background: rgba(109, 93, 252, .1);
  border-radius: .65rem;
  transition: background .2s, color .2s;
}

.demo-item:hover .demo-item-icon {
  color: #fff;
  background: linear-gradient(135deg, #6d5dfc, #22c3f2);
}

.demo-item-text { font-weight: 600; font-size: .95rem; }

.demo-lists-foot {
  grid-column: 1 / -1;
  margin: .5rem .55rem 0;
  padding-top: .7rem;
  font-size: .8rem;
  color: var(--bs-secondary-color, #6c757d);
  border-top: 1px solid var(--bs-border-color, #e2e6f2);
}

@media (max-width: 991.98px) {
  .demo-menu-grid { grid-template-columns: minmax(0, 1fr); }
  .demo-promo .aig { display: none; }
  .demo-lists { grid-template-columns: minmax(0, 1fr); }
}

/* ===== Hero-Button "Formular mit KI" auf der Startseite ===== */
/* Outline-Variante im Blau des Primär-Buttons daneben (#1b6ec2). */
.hero-ai-btn {
  color: #1b6ec2;
  background: transparent;
  border-color: #1b6ec2;
  transition: color .2s, background-color .2s, border-color .2s;
}

.hero-ai-btn:hover,
.hero-ai-btn:focus-visible,
.hero-ai-btn:active {
  color: #fff;
  background: #1b6ec2;
  border-color: #1861ac;
}