html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body { font-family: 'Inter', ui-sans-serif, system-ui, sans-serif; }

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: #48527a;
  text-decoration: none;
  transition: color .15s ease;
}
.nav-link:hover { color: #004BFF; }

.mobil-link {
  padding: 0.7rem 0.5rem;
  font-size: 0.95rem;
  font-weight: 500;
  color: #1a2440;
  text-decoration: none;
  border-radius: 0.6rem;
}
.mobil-link:hover { background: #F3F7FF; }

/* Scroll-Reveal */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.reveal.sichtbar { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* Netzwerk-Visualisierung */
.netz-label {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  fill: #48527a;
}
.netz-label-haupt { font-size: 13px; fill: #071B46; font-weight: 700; }
.netz-linie {
  stroke-dasharray: 6 5;
  animation: netz-fliessen 3.5s linear infinite;
}
.netz-puls { animation: netz-puls 2.4s ease-out infinite; }
@keyframes netz-fliessen { to { stroke-dashoffset: -220; } }
@keyframes netz-puls {
  0% { r: 7; opacity: 0.4; }
  100% { r: 28; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .netz-linie { animation: none; }
  .netz-puls { animation: none; opacity: 0; }
}

/* Feature-Karten */
.feature-karte {
  border: 1px solid #eef1fa;
  border-radius: 1.25rem;
  padding: 2rem;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.feature-karte:hover {
  border-color: #cfdcff;
  transform: translateY(-3px);
  box-shadow: 0 20px 40px -24px rgba(0,75,255,0.18);
}
.feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.85rem;
  background: #F3F7FF;
  margin-bottom: 1.25rem;
}
.feature-titel { font-size: 1.05rem; font-weight: 700; color: #071B46; }
.feature-text { margin-top: 0.5rem; font-size: 0.9rem; color: #48527a; line-height: 1.55; }

/* Filter */
.filter-knopf {
  padding: 0.55rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 9999px;
  border: 1px solid #dbe6ff;
  background: white;
  color: #48527a;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.filter-knopf:hover { border-color: #004BFF; color: #004BFF; }
.filter-aktiv { background: #004BFF; border-color: #004BFF; color: white; }
.filter-aktiv:hover { color: white; }

/* Profilkarten */
.profil-karte {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid #dbe6ff;
  background: white;
  border-radius: 1rem;
  padding: 1rem 1.25rem;
  transition: opacity .2s ease, transform .2s ease;
}
.profil-karte.versteckt { display: none; }
.avatar {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 9999px;
  background: #F3F7FF;
  color: #004BFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.demo-abzeichen {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9aa6c8;
  border: 1px solid #eef1fa;
  border-radius: 9999px;
  padding: 0.15rem 0.5rem;
}
.profil-knopf {
  flex-shrink: 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #004BFF;
  text-decoration: none;
  white-space: nowrap;
}
.profil-knopf:hover { text-decoration: underline; }

/* Fahrt-/Schlafplatz-Karten */
.fahrt-karte, .schlaf-karte {
  border: 1px solid #dbe6ff;
  background: white;
  border-radius: 1.25rem;
  padding: 1.75rem;
}
.fahrt-knopf {
  display: inline-block;
  margin-top: 1.25rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #004BFF;
  text-decoration: none;
  border-bottom: 1.5px solid #004BFF;
  padding-bottom: 1px;
}

/* Schritte */
.schritt { border-top: 2px solid #eef1fa; padding-top: 1.5rem; }
.schritt-nr {
  font-size: 2.5rem;
  font-weight: 800;
  color: #cfdcff;
}

/* Preiskarten */
.preis-karte {
  position: relative;
  border-radius: 1.5rem;
  padding: 2.25rem;
  border: 1px solid #dbe6ff;
  background: white;
}
.preis-karte-hervorgehoben {
  background: linear-gradient(160deg, #004BFF, #071B46);
  border: none;
  box-shadow: 0 30px 70px -30px rgba(0,75,255,0.45);
}
.hervorheben-abzeichen {
  position: absolute;
  top: -0.9rem;
  left: 2.25rem;
  background: white;
  color: #004BFF;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.35rem 0.8rem;
  border-radius: 9999px;
}
.haken { position: relative; padding-left: 1.6rem; }
.haken::before {
  content: "";
  position: absolute;
  left: 0; top: 0.42rem;
  width: 0.9rem; height: 0.9rem;
  background: #004BFF;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.haken-hell::before { background: white; }
.preis-knopf {
  display: block;
  margin-top: 2rem;
  text-align: center;
  padding: 0.85rem;
  border-radius: 9999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
}
.preis-knopf-rand { border: 1.5px solid #dbe6ff; color: #071B46; }
.preis-knopf-rand:hover { border-color: #004BFF; color: #004BFF; }
.preis-knopf-weiss { background: white; color: #004BFF; }
.preis-knopf-weiss:hover { transform: translateY(-1px); }

/* FAQ */
.faq-eintrag { padding: 1.1rem 0; }
.faq-frage {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: none;
  border: none;
  text-align: left;
  font-size: 1rem;
  font-weight: 600;
  color: #071B46;
  cursor: pointer;
  padding: 0;
}
.faq-pfeil { font-size: 1.3rem; color: #9aa6c8; transition: transform .2s ease; flex-shrink: 0; }
.faq-eintrag.offen .faq-pfeil { transform: rotate(180deg); color: #004BFF; }
.faq-antwort {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease;
}
.faq-eintrag.offen .faq-antwort { max-height: 10rem; }
.faq-antwort p { padding-top: 0.75rem; font-size: 0.9rem; color: #48527a; line-height: 1.6; }

/* Footer */
.footer-kopf { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #071B46; margin-bottom: 0.9rem; }
.footer-link { display: block; font-size: 0.88rem; color: #9aa6c8; text-decoration: none; margin-bottom: 0.6rem; }
.footer-link:hover { color: #004BFF; }