/* ============================================================
   EB Startseiten-Redesign (Claude Design) — nur Front-Page.
   Quelle: design project 82723a04 / Startseite.dc.html.
   Keyframes, Hover, Responsive. Verhalten: assets/eb-home.js.
   ============================================================ */

html:has(.ebh-root) { scroll-behavior: smooth; scroll-padding-top: 96px; }
.ebh-root { background: #f7f6f2; color: #12141c; }
.ebh-root ::selection { background: #2338e8; color: #fff; }
.ebh-root a { text-decoration: none; }
.ebh-root *,
.ebh-root *::before,
.ebh-root *::after { box-sizing: border-box; }

@keyframes eb-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes eb-dash    { to { stroke-dashoffset: -22; } }
@keyframes eb-pulse   { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
@keyframes eb-blink   { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }

/* Hover-Zustaende (Claude-Design 'style-hover' wird von eb-home.js angewandt;
   diese Regeln sind der CSS-Fallback fuer Karten/Buttons ohne JS). */
@media (hover: hover) and (pointer: fine) {
  .ebh-root a[href]:hover { color: inherit; }
}

/* ---------- Responsive (Design hat keine Breakpoints) ---------- */
@media (max-width: 980px) {
  .ebh-hero  { grid-template-columns: 1fr !important; gap: 40px !important; padding-top: 112px !important; }
  .ebh-bento { grid-template-columns: 1fr !important; }
  .ebh-2col  { grid-template-columns: 1fr !important; gap: 32px !important; }
  .ebh-cards { grid-template-columns: 1fr !important; }
}
@media (max-width: 560px) {
  .ebh-root h1 { font-size: clamp(34px, 11vw, 46px) !important; }
  .ebh-root h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  .ebh-hero  { padding-top: 100px !important; }
}

/* ---------- Reduced Motion: alles im Endzustand, Loops aus ---------- */
@media (prefers-reduced-motion: reduce) {
  .ebh-root [data-loop] { animation: none !important; }
  .ebh-root [data-hero],
  .ebh-root [data-reveal] { opacity: 1 !important; transform: none !important; }
  .ebh-root [data-pop] { opacity: 1 !important; transform: scale(1) !important; }
  .ebh-root [data-bar] { transform: scaleY(1) !important; }
}