/* Konsolidierte Portalnavigation und gemeinsame Basisvariablen */
:root{
  --portal-bg:linear-gradient(135deg,#e8f4ff 0%,#f6fbff 48%,#edf5ff 100%);
  --portal-surface:rgba(255,255,255,.82);
  --portal-line:rgba(110,146,184,.28);
  --portal-text:#12314d;
  --portal-muted:#5f7c97;
  --portal-accent:#2585d3;
  --portal-accent-dark:#145ea3;
  --portal-shadow:0 24px 70px rgba(24,62,99,.12);
  --portal-nav-height:64px;
  --portal-content-max:1320px;
  --portal-content-gutter:28px;
}
*{box-sizing:border-box}
.portal-nav{
  width:100%;
  min-height:var(--portal-nav-height);
  margin:0;
  padding:11px clamp(14px,3vw,30px);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
  border-bottom:1px solid var(--portal-line);
  background:rgba(255,255,255,.93);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
  box-shadow:0 14px 35px rgba(24,62,99,.10);
  font-family:Inter,"SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;
  position:sticky;
  top:0;
  z-index:10000;
}
.portal-nav a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:8px 14px;
  border-radius:999px;
  border:1px solid transparent;
  color:#40536b;
  background:rgba(255,255,255,.58);
  text-decoration:none;
  font-size:.9rem;
  font-weight:850;
  line-height:1;
  white-space:nowrap;
  transition:background .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.portal-nav a:hover{
  color:var(--portal-text);
  border-color:var(--portal-accent);
  background:#eef7ff;
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(37,133,211,.12);
}
.portal-nav a.active,
.portal-nav a[aria-current="page"]{
  color:#fff;
  border-color:var(--portal-accent);
  background:var(--portal-accent);
  box-shadow:0 8px 18px rgba(37,133,211,.22);
}
.portal-page-note{
  margin:14px 0 0;
  padding:13px 15px;
  border:1px solid var(--portal-line);
  border-radius:18px;
  background:rgba(255,255,255,.64);
  color:var(--portal-muted);
  font-size:.9rem;
  line-height:1.5;
}
@media(max-width:760px){
  :root{--portal-nav-height:96px;}
  .portal-nav{justify-content:flex-start;gap:7px;overflow:auto;flex-wrap:nowrap;padding:9px 11px;}
  .portal-nav a{font-size:.78rem;padding:7px 10px;}
}

/* Einheitliches Kopfband – gegen Folium/Bootstrap-Styles auf der Karten-Seite abgesichert */
body .portal-nav{
  width:100% !important;
  min-height:var(--portal-nav-height) !important;
  margin:0 !important;
  padding:11px clamp(14px,3vw,30px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  flex-wrap:wrap !important;
  border:0 !important;
  border-bottom:1px solid var(--portal-line) !important;
  border-radius:0 !important;
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 14px 35px rgba(24,62,99,.10) !important;
  font-family:Inter,"SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif !important;
  position:sticky !important;
  top:0 !important;
  z-index:10000 !important;
}
body .portal-nav a,
body .portal-nav a:link,
body .portal-nav a:visited{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:38px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  color:#40536b !important;
  background:rgba(255,255,255,.58) !important;
  text-decoration:none !important;
  font-size:.9rem !important;
  font-weight:850 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  box-shadow:none !important;
}
body .portal-nav a:hover,
body .portal-nav a:focus-visible{
  color:var(--portal-text) !important;
  border-color:var(--portal-accent) !important;
  background:#eef7ff !important;
  text-decoration:none !important;
  transform:translateY(-1px) !important;
  box-shadow:0 8px 24px rgba(37,133,211,.12) !important;
}
body .portal-nav a.active,
body .portal-nav a[aria-current="page"],
body .portal-nav a.active:hover,
body .portal-nav a[aria-current="page"]:hover{
  color:#fff !important;
  border-color:var(--portal-accent) !important;
  background:var(--portal-accent) !important;
  box-shadow:0 8px 18px rgba(37,133,211,.22) !important;
}
@media(max-width:760px){
  body .portal-nav{justify-content:flex-start !important;gap:7px !important;overflow:auto !important;flex-wrap:nowrap !important;padding:9px 11px !important;}
  body .portal-nav a{font-size:.78rem !important;padding:7px 10px !important;}
}



/* Fix Karten-Kopfband: Die statische Folium-Karte lädt Bootstrap 3, das html{font-size:10px} setzt.
   rem-basierte Werte würden dadurch nur auf der Karten-Seite anders berechnet.
   Deshalb werden die Navigationszellen hier bewusst in px gesetzt und am Dateiende überschrieben. */
body.map-page > .portal-nav{
  min-height:64px !important;
  padding:11px clamp(14px,3vw,30px) !important;
  gap:8px !important;
  align-items:center !important;
  justify-content:center !important;
  flex-wrap:wrap !important;
  border-bottom:1px solid var(--portal-line) !important;
  background:rgba(255,255,255,.93) !important;
  box-shadow:0 14px 35px rgba(24,62,99,.10) !important;
  font-family:Inter,"SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif !important;
}
body.map-page > .portal-nav a,
body.map-page > .portal-nav a:link,
body.map-page > .portal-nav a:visited{
  min-height:38px !important;
  padding:8px 14px !important;
  border-radius:999px !important;
  border:1px solid transparent !important;
  background:rgba(255,255,255,.58) !important;
  color:#40536b !important;
  font-family:Inter,"SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif !important;
  font-size:14.4px !important;
  font-weight:850 !important;
  line-height:14.4px !important;
  text-decoration:none !important;
  box-shadow:none !important;
  box-sizing:border-box !important;
}
body.map-page > .portal-nav a:hover,
body.map-page > .portal-nav a:focus-visible{
  color:var(--portal-text) !important;
  border-color:var(--portal-accent) !important;
  background:#eef7ff !important;
  text-decoration:none !important;
  box-shadow:0 8px 24px rgba(37,133,211,.12) !important;
}
body.map-page > .portal-nav a.active,
body.map-page > .portal-nav a[aria-current="page"],
body.map-page > .portal-nav a.active:hover,
body.map-page > .portal-nav a[aria-current="page"]:hover{
  color:#fff !important;
  border-color:var(--portal-accent) !important;
  background:var(--portal-accent) !important;
  box-shadow:0 8px 18px rgba(37,133,211,.22) !important;
}
@media(max-width:760px){
  body.map-page > .portal-nav{min-height:96px !important;justify-content:flex-start !important;gap:7px !important;overflow:auto !important;flex-wrap:nowrap !important;padding:9px 11px !important;}
  body.map-page > .portal-nav a{font-size:12.48px !important;line-height:12.48px !important;padding:7px 10px !important;}
}

/* Einheitlicher Footer für rechtliche Links */
.portal-footer{
  width:min(var(--portal-content-max,1320px),calc(100vw - var(--portal-content-gutter,28px)));
  margin:24px auto 0;
  padding:16px 0 24px;
  border-top:1px solid var(--portal-line);
  color:var(--portal-muted);
  font-family:Inter,"SF Pro Display","Segoe UI Variable","Segoe UI",Roboto,Arial,sans-serif;
  font-size:13px;
  line-height:1.4;
  text-align:center;
}
.portal-footer a{
  color:var(--portal-accent-dark);
  font-weight:800;
  text-decoration:none;
}
.portal-footer a:hover,
.portal-footer a:focus-visible{
  color:var(--portal-accent);
  text-decoration:underline;
}
body.map-page .portal-footer{
  margin-top:0;
  padding:12px 0 16px;
  background:rgba(255,255,255,.92);
}