/* Swisstoggel – dezente Übergänge und Effekte (nur CSS, kein JavaScript).
   Bei „Bewegung reduzieren“ schaltet site.css alle Animationen und Übergänge ab. */

/* Weicher Übergang beim Wechsel zwischen Seiten (Chrome, Edge, Safari) */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }
.site-header { view-transition-name: kopf; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* Einblenden beim Laden */
@keyframes st-auftauchen { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.knx-hero .copy > *, .page-hero > div:first-child > *, .intro > *, .legal .wrap > h1, .legal .wrap > p:first-of-type {
  animation: st-auftauchen .7s cubic-bezier(.2, .7, .2, 1) both;
}
.knx-hero .copy > :nth-child(2), .page-hero > div:first-child > :nth-child(2) { animation-delay: .08s; }
.knx-hero .copy > :nth-child(3), .page-hero > div:first-child > :nth-child(3) { animation-delay: .16s; }
.knx-hero .copy > :nth-child(4), .page-hero > div:first-child > :nth-child(4) { animation-delay: .24s; }
.page-hero > div:first-child > :nth-child(n+5) { animation-delay: .32s; }

/* Handys im Kopfbereich: leichtes Schweben, Lichtschein atmet */
@keyframes st-schweben { 0%, 100% { translate: 0 0; } 50% { translate: 0 -10px; } }
@keyframes st-atmen { 0%, 100% { opacity: .75; scale: 1; } 50% { opacity: 1; scale: 1.06; } }
@keyframes st-handy-rein { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
.knx-hero .art, .knx-hero-art { animation: st-handy-rein .9s .15s cubic-bezier(.2, .7, .2, 1) both; }
.knx-hero .phone.front, .knx-hero-art .phone.front { animation: st-schweben 7s 1s ease-in-out infinite; }
.knx-hero .phone.back, .knx-hero-art .phone.back { animation: st-schweben 8s 1.6s ease-in-out infinite; }
.knx-hero-art .glow { animation: st-atmen 6s ease-in-out infinite; }

/* Raster im Startseiten-Kopf wandert langsam */
@keyframes st-raster { to { background-position: 48px 48px, 48px 48px; } }
.knx-hero .grid-lines { animation: st-raster 12s linear infinite; }

/* Knöpfe, Store-Kacheln, Navigation */
.btn, .store, .site-nav a, .legal-nav a, .feature-groups .toc a { transition: background-color .2s, color .2s, border-color .2s, translate .2s, box-shadow .2s; }
.btn:hover, a.store:hover { translate: 0 -2px; box-shadow: 0 10px 24px rgba(0, 0, 0, .18); }
.btn:active, a.store:active { translate: 0 0; box-shadow: none; }
.theme-knx .btn-ink:hover, .knx-hero .btn:hover { box-shadow: 0 10px 28px rgba(94, 234, 212, .25); }

/* Karten heben sich beim Darüberfahren */
.highlights li, .plan, .features li, .bus-diagram, .factband div { transition: translate .25s, border-color .25s, box-shadow .25s, background-color .25s; }
.highlights li:hover, .plan:hover { translate: 0 -4px; border-color: var(--page-accent, var(--knx-mint)); box-shadow: 0 16px 36px rgba(0, 0, 0, .28); }
.features li:hover { translate: 4px 0; }

/* Bildschirmfotos: sanftes Anheben, Grundrisse leicht vergrössern */
.gallery .phone, .tablet, .product-row .media .phone { transition: translate .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.gallery figure:hover .phone, .tablet:hover, .product-row .media .phone:hover { translate: 0 -8px; box-shadow: 0 40px 80px rgba(0, 0, 0, .45); }
.plans figure { overflow: hidden; border-radius: var(--radius); }
.plans img { transition: scale .5s cubic-bezier(.2, .7, .2, 1); }
.plans figure:hover img { scale: 1.03; }

/* Häufige Fragen: Inhalt gleitet auf */
.faq details[open] p { animation: st-auftauchen .35s ease-out both; }
.faq summary::after { transition: rotate .25s; }

/* Beim Scrollen einblenden – nur wo der Browser scroll-gesteuerte Animationen kann */
@supports (animation-timeline: view()) {
  @keyframes st-einblenden { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
  .section-head, .highlights li, .gallery figure, .tablet-wrap, .plans figure, .feature-group, .plan,
  .product-row, .bus-diagram, .app-video, .faq details, .principles li, .try {
    animation: st-einblenden linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 70%;
  }
}

/* Formulare */
.formular input, .formular select, .formular textarea { transition: border-color .2s, box-shadow .2s; }
.formular input:hover, .formular select:hover, .formular textarea:hover { border-color: #8fa39e; }
.formular input:focus, .formular select:focus, .formular textarea:focus { box-shadow: 0 0 0 4px rgba(15, 118, 110, .12); }

/* Handy-Rahmen im Seitenverhältnis der Bildschirmfotos (1080 × 1920), damit nichts abgeschnitten
   wird; ohne aufgemalte Kamera-Insel, die sonst Text oben im Bild verdeckt */
.phone { aspect-ratio: 1080 / 1920; padding: 10px; border-radius: 36px; }
.phone::before { display: none; }
.phone img { object-fit: contain; object-position: center; border-radius: 27px; background: #fff; }