:root{
  --navy:#0E2A47;
  --green:#1F6A53;
  --text:var(--navy);
  --muted:#2F455B;
  --line:#E2E8F0;
  --panel:#FFFFFF;
  --bg:#F4FAF7;
  --radius:18px;
  --max:1120px;
  --shadow:0 10px 30px rgba(2,6,23,0.05);
  --header-offset:148px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-offset);
}

body{
  margin:0;
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.6;
}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 22px;
}

a{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:2px;
}

a:hover{
  color:var(--navy);
  text-decoration-thickness:2px;
}


/* ===== Barrierefreiheit / Fokus ===== */

.skip{
  position:absolute;
  left:-999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}

.skip:focus{
  left:16px;
  top:14px;
  width:auto;
  height:auto;
  z-index:9999;
  background:#fff;
  border:1px solid var(--line);
  padding:10px 12px;
  border-radius:12px;
  box-shadow:var(--shadow);
}

.sr-only{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{
  outline:3px solid rgba(31,106,83,0.45);
  outline-offset:2px;
  border-radius:10px;
}

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus{
  outline:3px solid rgba(31,106,83,0.45);
  outline-offset:2px;
  border-radius:10px;
}

@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
}


/* ===== Header ===== */

header{
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:rgba(244,250,247,0.92);
  backdrop-filter:blur(10px);
  z-index:10;
}

.nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  padding:16px 0;
  flex-wrap:wrap;
}

.brand{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}

.brand a{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}

.brand a,
.brand a:hover,
.brand a:focus,
.brand a:focus-visible{
  text-decoration:none;
  color:var(--navy);
}

.logo{
  font-size:30px;
  font-weight:800;
  letter-spacing:-0.03em;
  color:var(--navy);
  display:inline-block;
  white-space:nowrap;
}

.tag{
  font-size:18px;
  color:var(--green);
  display:inline-block;
  white-space:nowrap;
  margin-top:1px;
  letter-spacing:0;
  transform-origin:left center;
}

nav{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

nav a{
  font-size:14px;
  color:var(--muted);
  font-weight:700;
  padding:10px 10px;
  border-radius:12px;
  text-decoration:none;
}

nav a:not(.cta):hover,
nav a:not(.cta):focus-visible{
  background:var(--green);
  color:#fff;
}

nav a.cta{
  background:var(--navy);
  color:#fff;
  padding:10px 14px;
  font-weight:800;
  text-decoration:none;
}

nav a[aria-current="true"]{
  color:#fff;
  background:var(--navy);
}


/* ===== Startleiste ===== */

.startbar{
  border-top:1px solid var(--line);
  background:var(--green);
  color:#fff;
  font-size:14px;
  padding:10px 0;
  text-align:center;
  font-weight:600;
  letter-spacing:0.01em;
}

.startbar span{
  font-weight:500;
  color:#fff;
}


/* ===== Grundtypografie ===== */

section{
  padding:72px 0;
}

h1{
  letter-spacing:-0.035em;
  margin:0;
  color:var(--navy);
  font-weight:800;
  line-height:1.08;
  text-align:left;
}

h2{
  font-size:28px;
  letter-spacing:-0.03em;
  color:var(--navy);
  margin:0;
}


/* ===== Rechtliche Overlays ===== */

.legal{
  display:none;
  position:fixed;
  inset:0;
  z-index:50;
  background:rgba(14,42,71,0.35);
  padding:24px 0;
  overflow:auto;
}

.legal:target{
  display:block;
}

.legal .legal-card{
  max-width:900px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:22px;
  box-shadow:var(--shadow);
  position:relative;
  padding:22px;
}

.close-x{
  position:absolute;
  top:14px;
  right:16px;
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--muted);
  font-weight:800;
  line-height:1;
}

.close-x:hover{
  color:var(--navy);
}

.legal h2{
  margin-top:0;
}

.legal h3{
  margin:18px 0 8px;
  font-size:16px;
  letter-spacing:-0.01em;
}

.legal p,
.legal li{
  color:var(--muted);
  font-size:16px;
}

.legal ul{
  margin:8px 0 0;
  padding-left:18px;
}

.legal-brand{
  margin:6px 0 18px;
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
}

.legal-brand .logo{
  font-size:22px;
}

.legal-brand .tag{
  font-size:14px;
}


/* ===== Footer ===== */

footer{
  border-top:1px solid var(--line);
  padding:32px 0;
  font-size:13px;
  color:var(--muted);
}

.footlinks a{
  margin-right:14px;
  text-decoration:underline;
}


/* ===== Mobile global ===== */

@media(max-width:900px){

  section{
    padding:56px 0;
  }

  nav{
    width:100%;
    justify-content:flex-start;
  }

  .legal{
    padding:14px 0;
  }

  .legal .legal-card{
    border-radius:16px;
  }
}

@media(max-width:700px){

  header{
    position:static;
  }

  header .container{
    padding-left:30px;
    padding-right:30px;
  }

  .startbar{
    padding:10px 24px;
  }

  html{
    scroll-padding-top:20px;
  }
}