:root{
  --navy:#0a315d;
  --white:#ffffff;
  --page:#f3f4f5;
  --line:#d8dde3;
  --text:#24364a;
  --muted:#6c7783;
  --red:#b42318;
}
*{box-sizing:border-box}
html{min-height:100%;background:var(--page)}
body{
  margin:0;min-height:100%;
  font-family:Arial,Helvetica,sans-serif;
  font-size:16px;line-height:1.62;
  color:var(--text);background:var(--page);
}
header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  height:68px;background:var(--navy);
  border-bottom:1px solid rgba(255,255,255,.16);
}
nav{
  width:min(1080px,calc(100% - 40px));
  height:100%;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:28px;
}
.brand{display:block;width:180px;line-height:0}
.brand img{display:block;width:100%;height:auto}
.links{display:flex;align-items:center}
.links a{
  color:#fff;text-decoration:none;
  font-size:15px;font-weight:400;
  padding:22px 0;
}
.links a:hover{text-decoration:underline;text-underline-offset:4px}

main{
  margin-top:68px;
  min-height:calc(100vh - 132px);
  padding:38px 20px 58px;
  background:var(--page);
}
.site-card{
  width:min(980px,100%);
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 1px 4px rgba(24,42,61,.08);
}
.site-section{padding:34px 38px}
.site-section + .site-section{border-top:1px solid var(--line)}

h1{
  margin:0 0 22px;
  color:var(--navy);
  font-size:28px;line-height:1.25;
  font-weight:500;letter-spacing:.01em;
}
h2{
  margin:0 0 22px;
  color:var(--navy);
  font-size:20px;line-height:1.3;
  font-weight:600;letter-spacing:.025em;
  text-transform:uppercase;
}
h3{
  margin:0 0 9px;
  color:var(--navy);
  font-size:17px;line-height:1.4;
  font-weight:600;
}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
a{color:var(--navy)}

.lead{
  max-width:810px;
  font-size:17px;
  line-height:1.7;
}
.intro-copy{max-width:810px}
.intro-copy p + p{margin-top:18px}

.item{
  max-width:810px;
  padding:0 0 22px;
}
.item + .item{
  border-top:1px solid var(--line);
  padding-top:22px;
}
.item:last-child{padding-bottom:0}
.meta{
  display:block;
  margin:0 0 7px;
  color:var(--muted);
  font-size:13px;
}

.legal{max-width:820px}
.legal h2{
  margin-top:30px;
  margin-bottom:10px;
  font-size:17px;
  text-transform:none;
  letter-spacing:0;
}
.legal h2:first-of-type{margin-top:0}

.invite-wrap{max-width:620px}
.invite-wrap p{margin-bottom:17px}
.code{
  width:min(100%,360px);
  padding:12px 14px;
  border:1px solid #aeb8c2;
  border-radius:0;
  background:#fff;color:var(--text);
  font:inherit;letter-spacing:.08em;
  outline:none;
}
.code:focus{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.status{min-height:24px;margin-top:8px;color:var(--red)}

footer{
  min-height:64px;
  background:var(--navy);color:#fff;
}
.footer-inner{
  width:min(1080px,calc(100% - 40px));
  min-height:64px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-size:13px;
}
.footer-links{display:flex;align-items:center}
.footer-links a{
  color:#fff;text-decoration:none;
  padding:0 12px;
  border-right:1px solid rgba(255,255,255,.55);
}
.footer-links a:first-child{padding-left:0}
.footer-links a:last-child{padding-right:0;border-right:0}
.footer-links a:hover{text-decoration:underline;text-underline-offset:3px}

@media(max-width:700px){
  header{height:60px}
  nav{width:calc(100% - 28px);gap:16px}
  .brand{width:145px}
  .links a{font-size:13px;padding:19px 0}
  main{margin-top:60px;padding:22px 14px 38px}
  .site-section{padding:26px 22px}
  h1{font-size:23px}
  h2{font-size:18px}
  .lead{font-size:16px}
  .footer-inner{
    width:calc(100% - 28px);
    padding:16px 0;
    flex-direction:column;
    justify-content:center;
  }
}

/* Footer: nur Impressum | Datenschutz, mittig */
.footer-centered{
  justify-content:center;
  text-align:center;
}
.footer-centered .footer-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.footer-centered .footer-links a{
  padding:0;
  border:0;
}
.footer-separator{
  color:rgba(255,255,255,.7);
}

.item h3 a{
  color:var(--navy);
  text-decoration:none;
}
.item h3 a:hover{
  text-decoration:underline;
  text-underline-offset:3px;
}