:root {
  --site-primary: #5d5791;
  --site-primary-dark: #543e74;
  --site-accent: #bd6ca0;
  --site-secondary: #59b1c0;
  --site-surface: #fffcff;
  --site-text-secondary: #5c5972;
  --bs-body-bg: #f7efff;
  --bs-body-color: #19102a;
  --bs-body-font-family: 'Hanken Grotesk', sans-serif;
  --bs-link-color: #5d5791;
  --bs-link-hover-color: #543e74;
  --type-body: 1.125rem;
  --type-small: .95rem;
  --type-eyebrow: .78rem;
  --type-h1: clamp(2.4rem, 5vw, 3.4rem);
  --type-h2: 2.2rem;
  --type-h3: 1.5rem;
  --section-pad: clamp(5rem, 8vw, 7rem);
}
body { background: var(--bs-body-bg); color: var(--bs-body-color); font-family: var(--bs-body-font-family); font-size: var(--type-body); line-height: 1.55; }
h1, h2, h3, h4, h5, h6 { font-family: 'Hanken Grotesk', sans-serif; font-weight: 700; letter-spacing: -.035em; }
h1 { font-size: var(--type-h1); line-height: 1.05; }
h2 { font-size: var(--type-h2); line-height: 1.1; }
h3 { font-size: var(--type-h3); line-height: 1.2; }
p { max-width: 68ch; text-wrap: pretty; }
a { color: var(--site-primary); transition: color .2s ease; }
a:hover { color: var(--site-primary-dark); }
.btn { border-radius: 0; padding: .7rem 1.05rem; font-weight: 600; box-shadow: none; letter-spacing: .01em; transition: background-color .2s ease, color .2s ease, border-color .2s ease; border-width: 1.5px; }
.btn-primary { background-color: var(--site-primary); border-color: var(--site-primary); color: #fff; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--site-primary-dark); border-color: var(--site-primary-dark); color: #fff; }
.btn-outline-primary { color: var(--site-primary); border-color: var(--site-primary); background-color: transparent; }
.btn-outline-primary:hover, .btn-outline-primary:focus { background-color: var(--site-primary); border-color: var(--site-primary); color: #fff; }
.bg-primary { background-color: var(--site-primary) !important; }
.text-primary { color: var(--site-primary) !important; }
.border-primary { border-color: var(--site-primary) !important; }
.navbar { background: var(--bs-body-bg); transition: padding .25s ease, box-shadow .25s ease; padding-top: 1.25rem; padding-bottom: 1.25rem; z-index: 20; }
.navbar.nav-scrolled { padding-top: .55rem; padding-bottom: .55rem; box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.navbar-brand { color: var(--bs-body-color); font-weight: 700; letter-spacing: -.02em; }
.navbar-brand:hover { color: var(--bs-body-color); }
.logo-mark { width: 42px; height: 42px; object-fit: contain; transition: width .25s ease, height .25s ease; }
.nav-scrolled .logo-mark { width: 32px; height: 32px; }
.nav-link { color: var(--bs-body-color); font-size: .95rem; }
.nav-link:hover, .nav-link:focus { color: var(--site-primary); }
.hero { min-height: 74vh; position: relative; display: flex; align-items: end; background-image: url('../images/hero-routenplanung-deutschland-oesterreich.jpg'); background-size: cover; background-position: center; color: #fff; }
.hero::before { content: ''; position: absolute; inset: 0; background: rgba(25,16,42,.22); }
.hero h1, .hero p { color: #fff; }
.hero .container { position: relative; z-index: 1; }
.hero-content { padding-top: 7rem; padding-bottom: clamp(4rem, 9vw, 8rem); }
.section-space { padding-top: var(--section-pad); padding-bottom: var(--section-pad); }
.section-heading { max-width: 760px; margin-left: auto; margin-right: auto; text-align: center; }
.eyebrow { display: block; color: var(--site-primary); font-size: var(--type-eyebrow); text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin-bottom: 1rem; }
.eyebrow::first-letter { font-size: 1.7em; color: var(--site-accent); }
.section-heading p { margin-left: auto; margin-right: auto; }
.service-grid .card { height: 100%; border: 0; border-radius: 0; box-shadow: 0 1px 2px rgba(0,0,0,.05); background: var(--site-surface); }
.card-body { padding: 2rem; }
.icon-fill { width: 30px; height: 30px; fill: var(--site-primary); margin-bottom: 1.25rem; }
.route-image { width: 100%; height: auto; display: block; margin-top: 3.5rem; }
.form-control, .form-select { border-radius: 0; border: 1px solid rgba(25,16,42,.28); background: var(--site-surface); padding: .75rem .85rem; }
.form-control:focus, .form-select:focus { border-color: var(--site-primary); box-shadow: 0 0 0 .15rem rgba(93,87,145,.15); }
.form-label { font-size: var(--type-small); font-weight: 600; }
.contact-detail { font-variant-numeric: tabular-nums; }
.site-footer { padding-top: 4rem; padding-bottom: 2rem; background: var(--site-surface); }
.footer-map { width: 100%; height: 260px; border: 0; margin-top: 3rem; }
.cookie-banner { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; background: var(--site-surface); box-shadow: 0 1px 2px rgba(0,0,0,.05); padding: 1rem 1.25rem; }
.cookie-banner p { font-size: var(--type-small); margin-bottom: 0; }
.legal-content { max-width: 760px; }
.page-intro { padding-top: var(--section-pad); padding-bottom: 2rem; }
.page-intro p { max-width: 62ch; }
.link-list li { margin-bottom: .7rem; }
.compact-list { max-width: 620px; }
@media (max-width: 767.98px) { .hero { min-height: 78vh; } .hero-content { padding-bottom: 4rem; } .navbar-brand span { font-size: .95rem; } }