html, body { margin: 0; padding: 0; background: #eceae7; color: #211e1b; font-family: 'Jost', sans-serif; -webkit-font-smoothing: antialiased; }
a { color: #211e1b; text-decoration: none; transition: color .25s; }
a:hover { color: #a15e4d; }
::selection { background: #e3c3b8; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes blink { 0%, 100% { opacity: .8; } 50% { opacity: .2; } }
@keyframes draw { 0% { transform: scaleX(0); transform-origin: left; } 50% { transform: scaleX(1); transform-origin: left; } 50.1% { transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

input::placeholder { color: #8a7f73; }
input:focus { border-bottom-color: #a15e4d !important; box-shadow: 0 1px 0 0 rgba(161,94,77,.55); transition: border-color .3s, box-shadow .3s; }
input:hover { border-bottom-color: #6d675f; }

/* Fixed nav CTA pill + buttons: hover states (from design style-hover attributes) */
a.pill-cta:hover { background: #a15e4d !important; color: #efe9e2 !important; }
.btn-outline-dark { color: #211e1b; transition: background .25s, color .25s; }
.btn-outline-dark:hover { background: #211e1b; color: #efe9e2; }
.btn-light { transition: background .25s, color .25s; }
.btn-light:hover { background: #a15e4d !important; color: #efe9e2 !important; }
.btn-dark { transition: background .25s; }
.btn-dark:hover { background: #a15e4d !important; }
.model-opt { transition: border-color .25s; }
.model-opt:hover { border-color: #a15e4d !important; }
.model-opt.selected { border-color: #a15e4d !important; }
.form-back:hover { color: #efe9e2; }

/* Loader */
#loader.done { opacity: 0 !important; }

/* Mobile menu */
.mobile-menu { display: none; }
.mobile-menu.open { display: flex; }

/* Scroll sequence chapter layers + dots */
.seq-fade { opacity: 0; transition: opacity .6s; }
.seq-fade.on { opacity: 1; }
.seq-dot { opacity: .22; }
.seq-dot.on { opacity: 1; }

/* Etage tabs */
.etage-btn { background: transparent; color: #211e1b; transition: background .2s, color .2s; }
.etage-btn.active { background: #211e1b; color: #efe9e2; }

/* Garage explorer spots (generated by JS) */
.spot { aspect-ratio: 3/4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; font-family: inherit; transition: border-color .2s, background .2s; padding: 0; color: #211e1b; cursor: pointer; background: transparent; border: 1px solid #a39c92; }
.spot .nr { font-size: 11px; letter-spacing: .1em; }
.spot .dot { width: 5px; height: 5px; border-radius: 50%; background: #a15e4d; animation: pulse 2s infinite; }
.spot.taken { color: #8a827a; cursor: default; background: repeating-linear-gradient(135deg, #dcd7d0 0, #dcd7d0 5px, #d2ccc4 5px, #d2ccc4 10px); border: 1px solid transparent; }
.spot.taken .dot { display: none; }
.spot.selected { border: 1px solid #a15e4d; }
.spot.selected:not(.taken) { background: rgba(161,94,77,.1); }

@media (max-width: 760px) {
  [data-m="nav-links"] { display: none !important; }
  [data-m="nav-burger"] { display: flex !important; }
  [data-m="mobile-cta"] { display: block !important; }
  [data-m="stack"] { display: flex !important; flex-direction: column !important; gap: 44px !important; padding: 90px 6vw !important; }
  [data-m="cards-wrap"] { position: relative; }
  [data-m="cards-wrap"]::after { content: ""; position: absolute; top: 0; right: 0; bottom: 34px; width: 56px; background: linear-gradient(to right, rgba(33,30,27,0), #211e1b 85%); pointer-events: none; z-index: 2; }
  [data-m="cards"] { display: flex !important; overflow-x: auto !important; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 1px; }
  [data-m="cards"]::-webkit-scrollbar { display: none; }
  [data-m="cards"] > div, [data-m="cards"] > figure { flex: 0 0 82vw !important; scroll-snap-align: start; min-height: 200px !important; grid-column: auto !important; }
  [data-m="cards-progress"] { display: block !important; }
  [data-m="swipe-hint"] { display: inline-flex !important; }
  [data-m="card"] { left: 6vw !important; right: 6vw !important; max-width: none !important; padding: 24px 22px !important; }
  [data-m="hero-h1"] { font-size: 36px !important; }
  [data-m="btn"] { display: block !important; text-align: center !important; align-self: stretch !important; padding: 16px 28px !important; }
  [data-m="epochen"] { text-align: left !important; }
  [data-m="epochen"] h2, [data-m="epochen"] [data-m="epochen-label"] { text-align: left !important; }
  [data-m="pad"] { padding: 90px 6vw !important; }
  [data-m="spots"] { grid-template-columns: repeat(4,1fr) !important; }
}