/* === Reset / Grundformatierung === */
*, *::before, *::after { box-sizing: border-box; }
.hero img  {
    width: 100%;
    height: auto;
}
body {}

/* === Header + Logo + Menü (responsive, global) === */
header{
  height: clamp(56px, 8vw, 80px) !important;   /* 80px @≥1000 → 56px @≤700 */
  background: rgb(255,255,255);
  max-width: 1400px;
  margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px;
  position: sticky; top: 0; z-index: 1000;
  border-bottom: 2px solid rgb(0,38,77);
  overflow: visible;
}

/* Linie (oben), Fade (darunter) */
header::before{
  content:"";
  position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background: rgb(0,38,77);
  z-index:1006;
}
header::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-15px; height:15px;
  pointer-events:none;
  background: linear-gradient(to bottom, rgba(242,242,242,1) 0%, rgba(242,242,242,0) 100%);
  z-index:1005;
}

header img{
  height: 50px !important;
  width: auto !important;
  max-height: calc(100% - 30px);
  display: block;
}

/* === Navigation (Desktop/Tablet) === */
header nav ul{
  display: flex; list-style: none; align-items: center;
  margin: 0; padding: 0;
  gap: clamp(14px, 2vw, 20px) !important;
}
header nav ul li{ border-radius: 4px; padding: 5px 20px; }
header nav ul li a{
  color: #00264D; text-decoration: none;
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: clamp(1rem, 1.92vw, 1.4rem) !important;
  transition: color .2s, background-color .2s;
}
header nav ul li a.active{
  background: rgb(0,38,77); color:#fff; border-radius:4px; padding:5px 20px;
}
header nav ul li:hover{ background: rgb(220,220,220); }
header nav ul li:hover a{ color:rgb(0,38,77); }

.logo { display: inline-block; }
.logo img { display: block; }


/* === Main (global) === */
main{
  width: 100%; max-width: 1400px; margin: 0 auto;
  background: #f2f2f2;
}
main section{
    width: auto;
    margin: 0 auto;
    max-width: 1400px;
    padding-top: 10px;
    padding-right: 10px;
}

/* Textbereich */
main section article{
  text-align: center; min-width: 200px; margin: 0 20px; display: flow-root;
}
main section article p{
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: clamp(0.9rem, 1.5vw, 1.2rem);
  color: rgb(0,38,77); text-align: left;
  hyphens: auto; overflow-wrap: anywhere;
  line-height: 1.5; margin: 0 0 12px;
}
main section article p:last-child{ margin-bottom: 0; }

/* Abstand vor Footer */
main > section:last-of-type { padding-bottom: 40px; }

/* CTA */
.cta-wrap{
  text-align: center;
  margin: 20px 0 40px;
}

/* === Button (global) === */
.btn-primary{
  display: inline-block;
  background: rgb(0,38,77); color: #fff; text-decoration: none;
  padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 18px);
  border-radius: 6px;
  font-size: clamp(0.95rem, 3.5vw, 1.1rem);
  transition: filter .2s, transform .05s;
}
.btn-primary:hover{ filter: brightness(1.1); }
.btn-primary:active{ transform: translateY(1px); }

/* === Burger (global) – Desktop versteckt === */
.burger{ display:none; cursor:pointer; }
.burger img{ height: clamp(28px, 7vw, 35px); width:auto; display:block; }
.burger .icon-close{ display:none; }
/* Toggle */
#nav-toggle:checked + label.burger .icon-open{ display:none; }
#nav-toggle:checked + label.burger .icon-close{ display:block; }

/* === Footer (global) === */
footer{
  background: rgb(0,38,77);
  padding: 10px 0;
  color: rgb(250,250,250);
  font-family: Roboto, Helvetica, Verdana, Arial, sans-serif;
  font-size: 90%;
  min-width: 0; margin-top: 0;
}
.BodyKontakt footer {
}
footer section{ text-align: center; width: 200px; margin: 0 auto; }
footer ul{
  list-style: none; text-align: center;
  line-height: 180%; font-size: 80%; color: rgb(250,250,250);
  margin: 0; padding: 10px 0 0;
}
footer li{ margin: 0; }

/* === Utilities === */
.active{ color: rgb(0,38,77); font-weight: normal; }
.normal_font_weight{ font-weight: lighter; font-size: 90%; }
.normal_font{ text-decoration: none; color: rgb(250,250,250); }

/* === Mobile gesamt: <700px === */
@media (max-width:700px){
  /* Header/Logo */
  header{ height: clamp(48px, 10vw, 56px); padding: 0 20px; }
  header img{ height: clamp(28px, 7vw, 35px) !important; }

  /* Burger sichtbar */
  .burger{ display:block; margin-left:auto; }

  /* Nav als Dropdown */
  header nav ul{
    position:absolute; top:100%; left:0; right:0;
    display:none; flex-direction:column;
    align-items:flex-end; text-align:right;
    gap:12px; background:#f2f2f2;
    padding:12px 20px 16px 16px; border-top:1px solid #ddd;
    z-index:1100;
  }
  #nav-toggle:checked ~ nav ul{ display:flex; }
  header nav ul li{ padding:8px 10px; width:100%; }
  header nav ul li a{ display:block; font-size: clamp(0.95rem, 4.2vw, 1.1rem) !important; }

  /* Fließtext etwas kleiner */
  main section article p{ font-size: clamp(0.9rem, 4vw, 1.05rem); line-height:1.5; }

  /* Abstand vor Footer sicherstellen */
  main > section:last-of-type{ padding-bottom: 40px; }

  /* Footer: nur „Impressum“ anzeigen (wie zuvor) */
  footer ul li:not(:first-child){ display:none; }
  footer ul{ padding: 12px 0; line-height:1.6; font-size:90%; }
  footer a{ display:inline-block; padding:6px 10px; }
}

/* Responsives Logo im Header */
header .logo img,
header > img {                   /* Fallback, falls <a class="logo"> noch nicht genutzt */
  width: clamp(140px, 22vw, 360px);
  height: auto;
  display: block;
}

/* Sehr kleine Screens: Logo noch kompakter */
@media (max-width: 520px) {
  header .logo img,
  header > img {
    width: clamp(120px, 38vw, 220px);
  }
}

/* Header-Layout robust gegen Kollisionen mit Menü */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
/* --- Navigation Hover-Fix --- */

/* 1) Entfernt die breite Hover-Fläche auf dem <li> */
header nav li:hover {
  background: none !important;
}

/* 2) Hover nur auf Links, nicht auf dem aktiven Menüpunkt */
header nav a:not(.active):not([aria-current="page"]):hover,
header nav a:not(.active):not([aria-current="page"]):focus-visible {
  background: #e6e9ee;   /* dezentes Grau für Hover */
}

/* 3) (Optional) gleiche Rundung wie im Active-State */
header nav a {
  border-radius: 6px;     /* anpassen/entfernen, falls anders definiert */
}
/* Einheitliche Klick-/Highlight-Fläche in der Navi: immer das <a>-Element */
header nav ul { list-style: none; margin: 0; padding: 0; }
header nav li { margin: 0; padding: 0; background: none !important; }

/* Der Link bildet die Box (gleich für active & hover) */
header nav a {
  display: block;            /* füllt die <li>-Box */
  padding: 10px 14px;        /* gleiche Innenabstände für alle States */
  border-radius: 6px;        /* wie beim Active-State */
  text-decoration: none;
}

/* Active-State (dunkelblau) */
header nav a.active,
header nav a[aria-current="page"] {
  background: #00264d;
  color: #fff;
}

/* Hover/Focus exakt auf derselben Fläche, aber nicht für den aktiven Punkt */
header nav a:not(.active):not([aria-current="page"]):hover,
header nav a:not(.active):not([aria-current="page"]):focus-visible {
  background: #e6e9ee;       /* Grau für Hover */
}