/* alps.ride website — shared look for index.html, impressum.html and
   datenschutz.html. It follows the app, not a separate web brand:
   - colour tokens verbatim from lib/theme/color_schemes/enzian.dart (light and
     dark), the glass formulas from lib/widgets/glass.dart, and the faceted
     ground from lib/widgets/screen_ground.dart (painted by site.js);
   - Urbanist for text, Outfit Bold for headings and the wordmark (lib/theme.dart);
   - the rainbow logo and the rainbow ".ride" (BrandColors.rideGradient), as the
     app header stacks them.
   The marketing posts (marketing/instagram/shared.css on social-media) use the
   same tokens, so site and posts stay one system.

   Fonts are self-hosted (SIL OFL 1.1, fonts/*-OFL.txt). Loading them from
   fonts.googleapis.com would send every visitor's IP address to Google before
   they can consent (LG München I, 3 O 17493/20), and the privacy policy promises
   the site loads no external fonts. Keep everything on this host. */

@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 400;
             font-display: swap; src: url('fonts/Urbanist-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 500;
             font-display: swap; src: url('fonts/Urbanist-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 600;
             font-display: swap; src: url('fonts/Urbanist-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 700;
             font-display: swap; src: url('fonts/Urbanist-Bold.woff2') format('woff2'); }
@font-face { font-family: 'Urbanist'; font-style: normal; font-weight: 800;
             font-display: swap; src: url('fonts/Urbanist-ExtraBold.woff2') format('woff2'); }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 700;
             font-display: swap; src: url('fonts/Outfit-Bold.woff2') format('woff2'); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* Enzian light */
  --bg: #F4F6FD; --surface: #FFFFFF; --surface-alt: #E6E9F9; --divider: #C8CDF0;
  --text: #131A3A; --text-2: #323B7A; --hint: #5263C9; --primary: #5263C9;
  --on-accent: #FFFFFF; --stop-bg: #C8CDF0; --stop-fg: #5263C9;
  --live: #2E9E6B; --warning: #E8A020;
  --glass-fill-pct: 42%; --row-pct: 86%;
  --glass-edge: rgba(255, 255, 255, 0.85);
  --glass-shadow: 0 8px 24px rgba(50, 59, 122, 0.12);
  --card-shadow: 0 2px 10px rgba(50, 59, 122, 0.10), 0 1px 2px rgba(50, 59, 122, 0.06);
  --facet-dark: 0;
  /* Transit-mode "Almwiesen" fills, the same in every theme */
  --bus: #92BC9C; --tram: #D497A9; --train: #8FACC8; --cable: #D8BC8E; --ink: #262B36;
  --rainbow: linear-gradient(90deg, #F2003C 0%, #FF8A00 22%, #FFD400 42%, #00A651 60%, #0072CE 78%, #8A2BE2 100%);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    /* Enzian dark */
    --bg: #17181B; --surface: #1F2024; --surface-alt: #1E2030; --divider: #2A2C30;
    --text: #EEF0F2; --text-2: #A9AEDC; --hint: #8288C2; --primary: #9BA0F0;
    --stop-bg: #2C2F52; --stop-fg: #9BA0F0;
    --live: #5FBF8F; --warning: #E0A855;
    --glass-fill-pct: 40%; --row-pct: 90%;
    --glass-edge: rgba(255, 255, 255, 0.09);
    --glass-shadow: 0 2px 10px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.28);
    --card-shadow: var(--glass-shadow);
    --facet-dark: 1;
  }
}
/* glassFrost = glassFill over FacetBand's mean shade over bg
   (textSecondary at 0.09 × meanAlphaScale 1.68 = 15.12 %);
   glassRow = surface at 86 % (dark 90 %) over bg. */
:root {
  --glass: color-mix(in srgb, var(--surface) var(--glass-fill-pct), color-mix(in srgb, var(--text-2) 15.12%, var(--bg)));
  --glass-row: color-mix(in srgb, var(--surface) var(--row-pct), var(--bg));
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg); color: var(--text);
  line-height: 1.6; -webkit-font-smoothing: antialiased;
  min-height: 100vh; overflow-x: hidden;
}
h1, h2, h3, .brand-face { font-family: 'Outfit', 'Urbanist', sans-serif; font-weight: 700; }
a { color: var(--primary); }

/* The faceted ground sits behind every page, fixed like the app's ScreenGround */
canvas.ground { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: -1; pointer-events: none; }

/* ── Glass ─────────────────────────────────────────────────────────────── */
.glass {
  background: var(--glass); border: 1.5px solid var(--glass-edge); border-radius: 24px;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.chip {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 999px;
  font-weight: 700; font-size: 14px; color: var(--text-2);
  background: var(--glass); border: 1.5px solid var(--glass-edge); box-shadow: var(--card-shadow);
  backdrop-filter: blur(28px); -webkit-backdrop-filter: blur(28px);
}
.chip svg { width: 18px; height: 18px; color: var(--primary); flex: none; }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--live); flex: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--live) 25%, transparent); }
.icon-tile { width: 48px; height: 48px; border-radius: 15px; background: var(--stop-bg); color: var(--stop-fg);
  display: grid; place-items: center; flex: none; }
.icon-tile svg { width: 24px; height: 24px; }

/* ── Wordmark & logo ───────────────────────────────────────────────────── */
.wordmark { font-family: 'Outfit', 'Urbanist', sans-serif; font-weight: 700; letter-spacing: -0.01em; color: var(--text); line-height: 1; }
.ride, .rainbow { background: var(--rainbow); -webkit-background-clip: text; background-clip: text; color: transparent; }
.logo { display: block; flex: none; }

/* ── Nav ───────────────────────────────────────────────────────────────── */
.topbar { position: sticky; top: 0; z-index: 100; padding: 12px 16px 0; }
.topbar-inner {
  max-width: 1080px; margin: 0 auto; height: 64px; padding: 0 10px 0 14px;
  display: flex; align-items: center; justify-content: space-between; border-radius: 999px;
}
.nav-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.nav-brand .logo { width: 46px; height: 37px; }
.nav-brand .wordmark { font-size: 26px; }
.lang-switcher { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: color-mix(in srgb, var(--text-2) 8%, transparent); }
.lang-btn {
  background: none; border: 0; border-radius: 999px; padding: 6px 12px;
  font: 700 13px 'Urbanist', sans-serif; color: var(--text-2); cursor: pointer;
  transition: background .15s, color .15s;
}
.lang-btn:hover { color: var(--primary); }
.lang-btn.active { background: var(--surface); color: var(--primary); box-shadow: var(--card-shadow); }
@media (prefers-color-scheme: dark) { .lang-btn.active { background: #2A2C33; } }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer { padding: 48px 16px 40px; }
.site-footer .inner { max-width: 1080px; margin: 0 auto; padding: 32px 24px; text-align: center; }
.footer-brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.footer-brand .logo { width: 40px; height: 32px; }
.footer-brand .wordmark { font-size: 24px; }
.footer-desc { font-size: 14px; color: var(--text-2); margin-top: 6px; }
.footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 20px; margin: 16px 0 10px; }
.footer-legal a { font-size: 14px; font-weight: 700; color: var(--primary); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-credits { font-size: 13px; color: var(--hint); font-weight: 600; }
.footer-attrib { font-size: 12px; color: var(--hint); line-height: 1.55; max-width: 620px; margin: 12px auto 0; }
.footer-attrib a { color: inherit; }

@media (max-width: 540px) {
  .topbar { padding: 8px 10px 0; }
  .topbar-inner { height: 56px; padding: 0 6px 0 10px; }
  .nav-brand .logo { width: 38px; height: 31px; }
  .nav-brand .wordmark { font-size: 22px; }
  .lang-btn { padding: 5px 9px; font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}