:root {
  --blue: #048abf;
  --blue-dark: #024f6e;
  --blue-soft: #e7f2f6;
  --yellow: #f2b705;
  --ink: #202b31;
  --muted: #59666d;
  --line: #cfd9de;
  --wash: #eef1f2;
  --shadow: 0 20px 46px rgba(0, 32, 48, 0.18);
  --radius: 0.45rem;
}

body {
  background: #424549;
  font-family: Montserrat, "Segoe UI", Arial, sans-serif;
}

.site-header {
  color: #fff;
  background: rgba(2, 79, 110, 0.97);
  border-bottom: 0;
  box-shadow: 0 0.5rem 1.5rem rgba(0, 27, 39, 0.2);
  backdrop-filter: blur(12px);
}

.header-inner {
  min-height: 6.4rem;
}

.brand {
  padding: 0.35rem 0.6rem;
  background: #fff;
  border-radius: 0.25rem;
}

.brand img {
  width: 8.8rem;
  max-height: 5.4rem;
}

.main-nav a {
  color: #fff;
}

.main-nav a:hover,
.main-nav a[aria-current="page"] {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

.main-nav .nav-cta {
  color: #17252c;
  background: var(--yellow);
}

.main-nav .nav-cta:hover {
  color: #fff;
  background: var(--red);
}

.language-switcher select {
  color: #fff;
  background-color: rgba(0, 39, 55, 0.38);
  border-color: rgba(255, 255, 255, 0.35);
}

.nav-toggle {
  color: #fff;
  background: rgba(0, 39, 55, 0.35);
  border-color: rgba(255, 255, 255, 0.35);
}

.hero {
  min-height: 72vh;
  display: grid;
  align-items: center;
  padding: clamp(4rem, 8vw, 7rem) 0;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(0, 29, 43, 0.82), rgba(2, 79, 110, 0.48)),
    url("../images/drei-bruecken-lauf.jpg") center 38% / cover no-repeat;
}

.hero::after {
  display: none;
}

.hero-grid {
  grid-template-columns: minmax(0, 48rem) 1fr;
}

.hero-copy {
  max-width: 48rem;
  padding: clamp(1.6rem, 4vw, 3rem);
  background: rgba(2, 79, 110, 0.88);
  border-left: 0.55rem solid var(--yellow);
  box-shadow: var(--shadow);
}

.hero .eyebrow,
.hero .lead,
.hero-status {
  color: #fff;
}

.hero h1 {
  font-size: clamp(3.2rem, 8vw, 6.9rem);
  letter-spacing: -0.05em;
}

.hero h1 span {
  color: var(--yellow);
}

.hero-art {
  display: none;
}

.hero .button {
  color: #18272e;
  background: var(--yellow);
  border-color: var(--yellow);
}

.hero .button-secondary {
  color: #fff;
  background: transparent;
  border-color: #fff;
}

.hero .button:hover,
.hero .button-secondary:hover {
  color: #fff;
  background: var(--red);
  border-color: var(--red);
}

.facts {
  background: #424549;
}

.facts-grid {
  position: relative;
  z-index: 2;
  margin-top: -1.3rem;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.section {
  background: #fff;
}

.section-wash {
  background: var(--wash);
}

.section-head h2,
.page-hero h1 {
  color: var(--blue-dark);
}

.eyebrow {
  color: var(--blue-dark);
}

.card,
.project,
.contact-card,
.join-card,
.board-member,
.redirect-card {
  border-radius: var(--radius);
}

.card {
  border-top: 0.35rem solid var(--blue-dark);
}

.card-highlight {
  border-top-color: var(--yellow);
  background: #fffbea;
}

.event-feature {
  color: #fff;
  background:
    linear-gradient(145deg, rgba(2, 79, 110, 0.96), rgba(4, 138, 191, 0.88)),
    url("../images/bruecke-mosaik.jpg") center / cover;
  border-radius: var(--radius);
}

.event-note {
  margin: 1.3rem 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.partner-card,
.media-tile {
  border-radius: var(--radius);
}

.project-number {
  color: #18272e;
  background: var(--yellow);
  border-radius: 0.2rem;
}

.about-visual {
  background: #fff;
  border: 0.45rem solid var(--blue-dark);
  border-radius: var(--radius);
}

.document-panel {
  margin-top: 1.6rem;
  padding: 1.35rem;
  background: var(--blue-soft);
  border-left: 0.4rem solid var(--yellow);
}

.document-panel h3 {
  color: var(--blue-dark);
}

.document-panel p {
  color: var(--muted);
}

.document-link {
  display: inline-flex;
  padding: 0.8rem 1rem;
  color: #fff;
  background: var(--blue-dark);
  font-weight: 800;
  text-decoration: none;
  border-radius: 0.25rem;
}

.document-link:hover {
  color: #17252c;
  background: var(--yellow);
}

.join {
  background:
    linear-gradient(120deg, rgba(2, 79, 110, 0.96), rgba(0, 35, 50, 0.88)),
    url("../images/trakai-festumzug.jpg") center / cover;
}

.site-footer {
  background: #24272a;
  border-top: 0.35rem solid var(--yellow);
}

.page-hero {
  color: #fff;
  background:
    linear-gradient(110deg, rgba(2, 79, 110, 0.96), rgba(2, 79, 110, 0.7)),
    url("../images/bruecke-mosaik.jpg") center / cover;
}

.page-hero h1,
.page-hero .eyebrow,
.page-hero .lead {
  color: #fff;
}

.legal-page main {
  color: var(--ink);
  background: #fff;
}

.legal-page .legal a {
  color: var(--blue-dark);
}

.legal-page .legal a:hover {
  color: var(--red);
}

.simple-header {
  background: var(--blue-dark);
  border-bottom: 0.25rem solid var(--yellow);
}

.simple-header a {
  color: #fff;
}

.simple-header img {
  padding: 0.3rem;
  background: #fff;
}

.simple-header .language-switcher select {
  color: #fff;
}

@media (max-width: 68rem) {
  .main-nav {
    background: var(--blue-dark);
    border-color: rgba(255, 255, 255, 0.2);
  }

  .main-nav a {
    color: #fff;
  }
}

@media (max-width: 52rem) {
  .hero {
    min-height: 66vh;
    background-position: 58% center;
  }

  .hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 38rem) {
  .hero-copy {
    padding: 1.35rem;
  }

  .hero h1 {
    font-size: clamp(2.65rem, 15vw, 4.25rem);
  }

  .brand img {
    width: 7.1rem;
  }
}