/* ============================================================
   SAM 2 – globale Styles
   Übernommen 1:1 aus dem <style>-Block der Vorlage.
   Layout/Optik der einzelnen Sektionen steckt als Inline-Style
   direkt in den Views (wie im Original), damit das Design exakt bleibt.
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: #fff; }
input, select, textarea, button { font-family: inherit; }

/* --- Keyframes --- */
@keyframes sam-pulse { 0% { box-shadow: 0 0 0 0 rgba(37,211,102,.55); } 70% { box-shadow: 0 0 0 16px rgba(37,211,102,0); } 100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); } }
@keyframes sam-bob   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(8px); } }
@keyframes sam-marq  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes sam-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sam-lbfade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sam-lbpop  { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } }

/* --- Hover / Interaktion --- */
[data-card] { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
[data-card]:hover { transform: translateY(-6px); box-shadow: 0 28px 46px -26px rgba(16,58,94,.45); }
[data-link] { transition: color .2s ease; }
[data-link]:hover { color: #2E97CF; }
[data-btn] { transition: transform .2s ease, box-shadow .25s ease, background .2s ease, color .2s ease; }
[data-btn]:hover { transform: translateY(-2px); }

/* --- Marken-Laufband --- */
.sam-marq-track { display: flex; width: max-content; animation: sam-marq 38s linear infinite; }
.sam-marq-wrap:hover .sam-marq-track { animation-play-state: paused; }

/* --- Header / Navigation --- */
[data-mobile-burger] { display: none; }
@media (max-width: 1080px) { [data-util-hide] { display: none !important; } }

/* Standort-Auswahl (Utility-Strip) auf Mobile horizontal scrollbar statt umbrechen */
@media (max-width: 600px) {
  [data-util-standorte] {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  [data-util-standorte]::-webkit-scrollbar { display: none; }
}

[data-leis] { position: relative; }
[data-leis-menu] { opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease, visibility .2s ease; pointer-events: none; }
[data-leis]:hover [data-leis-menu] { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
[data-leisrow]:hover { background: #F2F8FC !important; }

/* --- Galerie-Kachel Hover --- */
[data-galtile] [data-galover] { opacity: 0; transition: opacity .25s ease; }
[data-galtile]:hover [data-galover] { opacity: 1; }
[data-galtile] { transition: transform .3s ease, box-shadow .3s ease; }
[data-galtile]:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(16,58,94,.5); }
[data-galtile]:hover img { transform: scale(1.06); }
[data-lbside]:hover [data-lbarrow] { background: rgba(255,255,255,.28); }

/* --- Responsive --- */
@media (max-width: 920px) {
  [data-desktop-nav]   { display: none !important; }
  [data-mobile-burger] { display: flex !important; }
  [data-hero-grid]     { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-ach-grid]      { grid-template-columns: 1fr !important; padding: 40px 28px !important; }
  [data-ueber-grid]    { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-dekra-grid]    { grid-template-columns: 1fr !important; text-align: center; justify-items: center; gap: 22px !important; }
  [data-anfahrt-grid]  { grid-template-columns: 1fr !important; }
  [data-det-grid]      { grid-template-columns: 1fr !important; gap: 36px !important; }
  [data-why-grid]      { grid-template-columns: 1fr !important; gap: 30px !important; padding: 40px 28px !important; }
  [data-rel-grid]      { grid-template-columns: 1fr !important; }
  [data-footer-grid]   { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}
@media (max-width: 560px) {
  [data-hero-grid] > div:last-child { display: none; }
  [data-footer-grid]   { grid-template-columns: 1fr !important; gap: 28px !important; }
  /* "Mehr entdecken" zuverlässig zentrieren (statt transform-Zentrierung) */
  [data-hero-scroll] {
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
    width: fit-content;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* --- Mobile-Menü (per JS umgeschaltet) --- */
[data-mobile-menu] { display: none; }
[data-mobile-menu].is-open { display: flex; }

/* --- FAQ (per JS umgeschaltet) --- */
[data-faq-answer] { display: none; }
[data-faq-item].is-open [data-faq-answer] { display: block; }

/* --- WhatsApp-Chat (per JS umgeschaltet) --- */
[data-chat-panel] { display: none; }
[data-chat-panel].is-open { display: block; }

/* --- Anruf-Modal (per JS umgeschaltet) --- */
[data-call-modal] { display: none; }
[data-call-modal].is-open { display: flex; }
body.sam-no-scroll { overflow: hidden; }