:root{
  --bg:#30577b;
  --fg:#ffffff;
  --fg-dim:rgba(255,255,255,.88);
  --fg-faint:rgba(255,255,255,.68);
  --link:#ffffff;
  --link-hover:#e6f0ff;
  --card:rgba(255,255,255,.08);
  --border:rgba(255,255,255,.2);
  --focus:#ffcc66;
  --radius:16px;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

html,body{height:100%}
*{box-sizing:border-box}
body{
  margin:0;
  color:var(--fg);
  background:var(--bg);
  font-family:Aptos, "Segoe UI Variable", "Segoe UI", "Helvetica Neue",
              Helvetica, Arial, system-ui, -apple-system, Roboto, "Noto Sans",
              "Liberation Sans", sans-serif;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

a{color:var(--link); text-decoration:underline}
a:hover{color:var(--link-hover)}
a:focus,[tabindex]:focus,button:focus{outline:3px solid var(--focus); outline-offset:2px}

.wrap{max-width:960px; margin:0 auto; padding:24px}

header{
  display:flex;
  align-items:center;
  gap:16px;
  padding:24px;
}
header img{height:56px; width:auto}

/* Navigation */
nav{
  display:flex;
  align-items:center;
  gap:12px;
  margin-left:auto;     /* bei >=748px schiebt nach rechts */
  text-align:right;
}
nav a{
  display:inline-block;
  padding:6px 10px;
  border-radius:10px;
  border:1px solid transparent;
}
nav a[aria-current="page"]{
  border-color:var(--border);
  background:var(--card);
}

dd {margin-left:0;}

/* Main-Kartenlayout */
main{margin-top:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow)}
.section{padding:24px}
h1,h2,h3{margin:0 0 8px}
h1{font-size:clamp(1.6rem,2vw + 1rem,2.2rem)}
h2{font-size:clamp(1.2rem,1.2vw + .9rem,1.6rem); color:var(--fg-dim)}
p,li,dd,address{color:var(--fg-dim)}
address{font-style:normal}
.grid{display:grid; gap:18px}
@media (min-width:720px){.grid{grid-template-columns:1fr 1fr}}
.card{padding:18px; border:1px solid var(--border); border-radius:14px; background:rgba(0,0,0,.06)}

footer{color:var(--fg-faint); font-size:.95rem; padding:24px 0; border-top:1px solid var(--border); margin-top:24px}

/* Skip-Link */
.skip{position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden}
.skip:focus{position:static; width:auto; height:auto; padding:8px 10px; background:#000; color:#fff; border-radius:8px}

/* Responsive Umsortierung unter 748px: Navigation zwischen Logo und Inhalt */
@media (max-width:747.98px){
  header{
    flex-direction:column;   /* Logo oben */
    align-items:flex-start;  /* Logo linksbündig */
    gap:10px;
    padding-bottom:0;
  }
  nav{
    margin-left:0;           /* nicht mehr rechts schieben */
    align-self:stretch;      /* volle Breite */
    justify-content:flex-start;
    padding: 24px 0 8px;
    border-top:1px solid var(--border);
  }
}