@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ─── Scrollbar ─────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ─── Navbar ─────────────────────────────────────── */
#navbar {
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

#navbar.scrolled {
  background-color: rgba(20, 28, 31, 0.97); /* orange-800 */
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08), 0 4px 24px rgba(0,0,0,0.16);
}

/* ─── Animations ─────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
  animation: fadeUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.pulse-dot {
  animation: pulse-dot 2s ease-in-out infinite;
}

/* ─── Feature card hover ─────────────────────────── */
.feature-card {
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.feature-card:hover {
  box-shadow: 0 6px 24px -4px rgba(194, 65, 12, 0.12);
  border-color: #fed7aa; /* orange-200 */
}

/* ─── Über-uns Dropdown ─────────────────────────── */
#ueber-uns-menu {
  z-index: 200;
}

#navbar > div,
#navbar > div > div {
  overflow: visible;
}

/* ─── Details / FAQ ──────────────────────────────── */
details summary::-webkit-details-marker { display: none; }

/* ─── Table scroll on mobile ─────────────────────── */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ─── Hero scroll indicator ─────────────────────── */
@keyframes nudge-down {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  60%       { transform: translateX(-50%) translateY(7px); }
}
.scroll-nudge { animation: nudge-down 2.2s ease-in-out infinite; }