:root{
  --brand:#2f6f93;
  --brand-dark:#265c7a;
  --soft:#eef3f6;
  --card-border: rgba(47,111,147,.18);
}

.bg-soft{ background: var(--soft); }

.bg-white {
    background: #fff;
}

.bg-brand {
  background: var(--brand);
}

.nav-primary{ background: var(--brand); }
.brand-mark{ letter-spacing: .2px; font-size: 1.25rem; }
.brand-accent{ opacity: .95; }

.skip-link{
  position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  left:1rem; top:1rem; width:auto; height:auto; z-index:9999;
  background:#fff; padding:.5rem .75rem; border-radius:.5rem; box-shadow:0 8px 24px rgba(0,0,0,.12);
}

.page-wrap{ padding-top: 1.25rem; }

.hero{
  position:relative;
  border-radius: 1rem;
  overflow:hidden;
  background:#fff;
  border: 1px solid var(--card-border);
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
}
.hero-img{
  width:100%;
  height: clamp(320px, 44vw, 520px);
  object-fit: cover;
  display:block;
}
.hero-overlay{
  position:absolute; inset:0;
  background: linear-gradient(to bottom, rgba(255,255,255,.15), rgba(255,255,255,.88) 70%, rgba(255,255,255,.96));
}
.hero-content{
  position:absolute;
  left: 50%;
  bottom: 1.25rem;
  transform: translateX(-50%);
  width: min(900px, 92%);
  text-align:center;
}
.hero-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0;
}
.hero-title .accent{ color: var(--brand); }
.hero-sub{ margin-top: .35rem; color: rgba(0,0,0,.65); font-weight: 600; }
.btn-brand{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-color:#fff;
  --bs-btn-hover-color:#fff;
}

.btn-outline-brand {
  --bs-btn-border-color: var(--brand);
  --bs-btn-color: var(--brand);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-hover-color: var(--brand-dark);
}

.card-soft{
  border: 1px solid var(--card-border);
  border-radius: 1rem;
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
}

.section-title{
  font-weight: 800;
  letter-spacing: .2px;
  margin-bottom: .75rem;
}

.tile{
  border-radius: 1rem;
  overflow:hidden;
  border: 1px solid var(--card-border);
  background:#fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.05);
  height: 100%;
  display:flex;
  flex-direction:column;
}
.tile img{
  width:100%;
  height: 140px;
  object-fit: cover;
  display:block;
}
.tile-body{ padding: .9rem; display:flex; flex-direction:column; gap:.25rem; flex:1; }
.tile-title{ font-weight: 800; margin:0; }
.tile-sub{ color: rgba(0,0,0,.6); margin:0; font-size:.95rem; }
.tile .btn{ margin-top:auto; }

.empire-banner{
  border-radius: 1rem;
  overflow:hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 12px 32px rgba(0,0,0,.06);
  position:relative;
  background:#fff;
}

.empire-banner img{
  width:100%;
  height: 440px;
  object-fit: cover;
  display:block;
  object-position: top center;
}

.parallax-empire{
  position: relative;
  height: 440px;
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid var(--card-border);
  box-shadow: 0 12px 32px rgba(0,0,0,.06);

  background-image: url("/assets/img/project-empire-banner.jpg");
  background-size: cover;
  background-position: top center; /* 🔹 vertikal oben */
  background-repeat: no-repeat;
  background-attachment: fixed;   /* 🔹 Parallax */
}

.empire-content{
  position:absolute; inset:0;
  padding: 1.25rem;
  display:flex;
  align-items:center;
}
.empire-card{
  background: rgba(47,111,147,.72);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(255,255,255,.25);
  color:#fff;
  border-radius: 1rem;
  padding: 1rem 1.1rem;
  width: min(420px, 92%);
  box-shadow: 0 12px 24px rgba(0,0,0,.18);
}
.empire-card h3{ margin:0; font-weight: 800; }
.empire-card p{ margin:.25rem 0 .75rem; opacity:.92; }

.footer-band{
  background: var(--brand);
}
.footer-nav a{
  color: rgba(255,255,255,.92);
  text-decoration:none;
}
.footer-nav a:hover{ text-decoration:underline; }
.footer-nav .sep{ color: rgba(255,255,255,.45); margin: 0 .5rem; }