/* ---------- Startseite: Hero mit Effekten ---------- */
.sl-home-hero { position: relative; overflow: hidden; isolation: isolate; padding: 12em 0 8em; }
.sl-home-hero-inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 2em; max-width: 64em; margin: 0 auto; text-align: center; }

/* Licht folgt der Maus */
.sl-hero-spot { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; transition: opacity .8s var(--ease-io);
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 40%), #7970f238, transparent 60%); }
.sl-home-hero.is-hover .sl-hero-spot { opacity: 1; }

/* Hinweis auf den neuesten Beitrag */
.sl-hero-badge { display: inline-flex; align-items: center; gap: .75em; max-width: 100%; padding: .4em .9em .4em .4em; border-radius: 100em; text-decoration: none; color: #fff;
  background: #ffffff0f; border: 1px solid #ffffff21; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-size: .95em; letter-spacing: .02em;
  transition: background-color .35s var(--ease-io), border-color .35s var(--ease-io); }
.sl-hero-badge:hover { background: #ffffff1a; border-color: #8d85f480; }
.sl-hero-new { display: inline-flex; align-items: center; gap: .45em; padding: .3em .75em; border-radius: 100em; background: linear-gradient(265deg, #8d85f4, #6a60f1); font-weight: 500; font-size: .9em; flex: none; }
.sl-hero-pulse { position: relative; width: .5em; height: .5em; border-radius: 50%; background: #fff; }
.sl-hero-pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff; animation: sl-pulse 1.8s var(--ease-out) infinite; }
@keyframes sl-pulse { from { transform: scale(1); opacity: .7; } to { transform: scale(3); opacity: 0; } }
.sl-hero-latest { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; color: #ffffffd9; }
.sl-hero-badge svg { width: 1em; height: 1em; flex: none; transition: transform .45s var(--ease-out); }
.sl-hero-badge:hover svg { transform: translateX(3px); }

/* Überschrift mit schimmerndem Akzent */
.sl-home-title { font-size: 5.5em; line-height: 1.08; }
.sl-shimmer { background-image: linear-gradient(100deg, #5044ee 0%, #7970f2 25%, #c9c5fb 45%, #7970f2 60%, #5044ee 100%) !important;
  background-size: 220% 100% !important; animation: sl-shimmer 7s ease-in-out infinite; }
@keyframes sl-shimmer { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0% 0; } }
.sl-home-sub { max-width: 40em; color: #ffffffcc; font-size: 1.35em; line-height: 1.55; }
.sl-home-chips .sl-chips { margin-top: .5em; }

/* Schwebende Themen-Icons */
.sl-hero-orbit { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.sl-orb { position: absolute; width: 5.5em; height: 5.5em; border-radius: 1.5em; display: flex; align-items: center; justify-content: center; pointer-events: auto;
  background: linear-gradient(160deg, #ffffff17, #ffffff05); border: 1px solid #ffffff1c; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 24px 50px -24px #000, inset 0 1px 0 #ffffff1f; transform: translate3d(var(--px, 0), var(--py, 0), 0); transition: transform .9s var(--ease-out); }
.sl-orb img { width: 72%; height: 72%; object-fit: contain; animation: sl-bob 7s ease-in-out infinite; animation-delay: var(--bd, 0s); transition: transform .5s var(--ease-out); }
.sl-orb:hover img { transform: scale(1.12); }
@keyframes sl-bob { 0%, 100% { translate: 0 0; rotate: -4deg; } 50% { translate: 0 -12px; rotate: 4deg; } }
.sl-orb-1 { top: 22%; left: 7%; --bd: -1s; }
.sl-orb-2 { top: 62%; left: 12%; width: 4.5em; height: 4.5em; --bd: -3s; }
.sl-orb-3 { top: 80%; left: 28%; width: 4em; height: 4em; --bd: -5s; opacity: .8; }
.sl-orb-4 { top: 20%; right: 8%; --bd: -2s; }
.sl-orb-5 { top: 58%; right: 12%; width: 4.75em; height: 4.75em; --bd: -4s; }
.sl-orb-6 { top: 82%; right: 27%; width: 4em; height: 4em; --bd: -6s; opacity: .8; }

/* Scroll-Hinweis */
.sl-scroll-hint { margin-top: 1.5em; width: 1.6em; height: 2.6em; border-radius: 1em; border: 2px solid #ffffff4d; display: flex; justify-content: center; padding-top: .45em; transition: border-color .35s; }
.sl-scroll-hint span { width: 3px; height: .55em; border-radius: 3px; background: #fff; animation: sl-wheel 1.8s var(--ease-out) infinite; }
.sl-scroll-hint:hover { border-color: #fff; }
@keyframes sl-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(.8em); opacity: 0; } 100% { opacity: 0; } }

/* Einblenden beim Laden */
html.sl-js [data-hero-in] { opacity: 0; transform: translate3d(0, 1.5em, 0); filter: blur(6px); transition: opacity 1.2s var(--ease-out), transform 1.2s var(--ease-out), filter 1.2s var(--ease-out); transition-delay: var(--hd, 0ms); }
html.sl-js .sl-home-hero.is-ready [data-hero-in] { opacity: 1; transform: none; filter: none; }
html.sl-js .sl-orb { opacity: 0; scale: .6; transition: transform .9s var(--ease-out), opacity 1s var(--ease-out), scale 1.2s var(--ease-out); transition-delay: 0s, var(--od, 0ms), var(--od, 0ms); }
html.sl-js .sl-home-hero.is-ready .sl-orb { opacity: 1; scale: 1; }
html.sl-js .sl-home-hero.is-ready .sl-orb-3, html.sl-js .sl-home-hero.is-ready .sl-orb-6 { opacity: .8; }

/* Karten neigen sich zur Maus, mit Lichtreflex */
.sl-tilt { transform-style: preserve-3d; transition: transform .6s var(--ease-out); will-change: transform; }
.sl-tilt .sl-glare { position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .5s;
  background: radial-gradient(400px circle at var(--gx, 50%) var(--gy, 50%), #ffffff2e, transparent 55%); }
.sl-tilt:hover .sl-glare { opacity: 1; }
.blog-img img, .image-wrapper.is-blog img { transition: transform 1s var(--ease-out); }
.blog-card:hover .blog-img img, .blog-content-main-wrapper:hover .image-wrapper.is-blog img { transform: scale(1.05); }
.blog-card .heading-style-h3 { transition: color .35s var(--ease-io); }
.blog-card:hover .heading-style-h3.is-center-align { color: #6a60f1; }

@media (prefers-reduced-motion: reduce) {
  .sl-shimmer, .sl-orb img, .sl-hero-pulse::after, .sl-scroll-hint span { animation: none; }
  html.sl-js [data-hero-in], html.sl-js .sl-orb { opacity: 1; transform: none; filter: none; scale: 1; transition: none; }
}
@media screen and (max-width: 991px) {
  .sl-home-hero { padding: 10em 0 6em; }
  .sl-home-title { font-size: 4em; }
  .sl-orb { width: 4em; height: 4em; border-radius: 1.1em; }
  .sl-orb-1 { top: 14%; left: 4%; } .sl-orb-4 { top: 14%; right: 4%; }
  .sl-orb-2, .sl-orb-5 { top: auto; bottom: 6%; } .sl-orb-3, .sl-orb-6 { display: none; }
}
@media screen and (max-width: 767px) {
  .sl-home-hero { padding: 8em 0 4em; }
  .sl-home-title { font-size: 2.6em; }
  .sl-home-sub { font-size: 1.1em; }
  .sl-hero-orbit { display: none; }
  .sl-hero-badge { font-size: .85em; }
  .sl-scroll-hint { display: none; }
  .sl-home-chips .sl-chips { gap: .5em; }
  .sl-home-chips .sl-chip { font-size: .8em; padding: .45em .9em .45em .45em; }
  .sl-home-hero-inner { gap: 1.5em; }
}