/* ==========================================================================
   Gemeinsame Basis für alle Beispiel-Homepages (Reset, Animationen, Helfer)
   Jede Seite bringt ihr eigenes Design mit – hier liegt nur, was alle teilen.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }

:root { --wrap: 1280px; --gutter: 24px; }
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; }

/* ------------------------------------------------ Einblenden beim Scrollen */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-40px); }
[data-reveal="right"] { transform: translateX(40px); }
[data-reveal="scale"] { transform: scale(0.92); }
[data-reveal="none"]  { transform: none; }
[data-reveal].is-in   { opacity: 1; transform: none; }

/* --------------------------------------- Gestaffelter Einstieg (Hero-Text) */
.stagger > * {
  animation: rise 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(var(--stagger-start, 0.1s) + var(--i, 0) * 110ms);
}
.stagger > :nth-child(1) { --i: 0; } .stagger > :nth-child(2) { --i: 1; } .stagger > :nth-child(3) { --i: 2; }
.stagger > :nth-child(4) { --i: 3; } .stagger > :nth-child(5) { --i: 4; } .stagger > :nth-child(6) { --i: 5; }
.stagger > :nth-child(7) { --i: 6; } .stagger > :nth-child(8) { --i: 7; }
@keyframes rise {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------- Bild-Animationen */
.kenburns { animation: kenburns 22s ease-out both; transform-origin: center; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }

.float      { animation: float 6s ease-in-out infinite; }
.float-slow { animation: float 9s ease-in-out infinite; }
.float-rev  { animation: float 7s ease-in-out infinite reverse; }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

.spin-slow { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pulse-ring::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid currentColor; opacity: 0; animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.8); opacity: 0.7; } 100% { transform: scale(1.35); opacity: 0; } }

/* ----------------------------------------------------------- Laufband */
.marquee { overflow: hidden; white-space: nowrap; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: inline-flex; align-items: center; gap: var(--marquee-gap, 48px); padding-right: var(--marquee-gap, 48px); animation: marquee var(--marquee-speed, 28s) linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ------------------------------------------------------ Fortschritt */
[data-bar] { position: relative; overflow: hidden; }
[data-bar] > i { display: block; height: 100%; width: 0; transition: width 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s; }
[data-bar].is-in > i { width: var(--w, 50%); }

/* ------------------------------------------------------- Akkordeon */
.acc-item { border-bottom: 1px solid var(--acc-line, rgba(0, 0, 0, 0.1)); }
.acc-btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; text-align: left; font-weight: 600; font-size: 1.05rem; }
.acc-btn::after { content: "+"; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 400; font-size: 1.3rem; background: var(--acc-dot, rgba(0, 0, 0, 0.06)); transition: transform 0.35s ease, background 0.35s ease; }
.acc-item.is-open .acc-btn::after { transform: rotate(45deg); }
.acc-panel { max-height: 0; overflow: hidden; transition: max-height 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.acc-panel > p { padding: 0 0 24px; max-width: 70ch; }

/* --------------------------------------------------------- Demo-Hinweis */
.demo-badge {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); z-index: 1000;
  padding: 10px 18px; border-radius: 999px; background: rgba(12, 16, 26, 0.9); color: #e9eef5;
  font: 600 13px/1.3 "Inter", "Segoe UI", system-ui, sans-serif; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  white-space: nowrap; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.demo-badge a { color: #7dbcff; }
@media (max-width: 720px) { .demo-badge { white-space: normal; text-align: center; width: calc(100% - 32px); } }

/* --------------------------------- Screenshot-Modus (?shot) & Barrierefreiheit */
html.shot-full { --hero-min: 0px; }   /* ?shot&full: Hero nicht auf Bildschirmhöhe strecken (für Gesamtansichten) */
html.shot [data-reveal] { opacity: 1; transform: none; transition: none; }
html.shot [data-bar] > i { width: var(--w, 50%); transition: none; }
html.shot .stagger > * { animation: none; }
html.shot .kenburns, html.shot .float, html.shot .float-slow, html.shot .float-rev, html.shot .spin-slow { animation: none; }
html.shot .demo-badge { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .stagger > *, .kenburns, .float, .float-slow, .float-rev, .spin-slow, .marquee-track, .pulse-ring::after { animation: none !important; }
}