:root{
  --bg:#ffffff;
  --text:#111;
  --muted:#4a4a4a;
  --navText:#f3f6ff;
  --accent:#2f57ff;
  --container:1100px;
}

/* Reset */
*{box-sizing:border-box}
html,body{margin:0;padding:0}

body{
  font-family: Arial, Helvetica, sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}

/* Standard-Links global neutral lassen (Nav & Layout) */
a{color:inherit;text-decoration:none}

/* Layout */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 18px;
}

.center{text-align:center}

/* =====================
   HEADER / NAV
===================== */

.header{
  position:absolute;
  top:0; left:0; right:0;
  z-index:5;
  padding:16px 0;
}

.header .bar{
  display:flex;
  align-items:center;
}

/* linker Bereich (leer/spacer) nimmt Platz ein, Nav geht nach rechts */
.spacer{
  flex: 1;
}

/* ✅ Nav IMMER rechts, egal ob spacer da ist oder nicht */
.nav{
  margin-left:auto;
  display:flex;
  gap:28px;
  font-weight:700;
  align-items:center;
}

.nav a{
  color:var(--navText);
  opacity:.9;
}
.nav a:hover{opacity:1;text-decoration:underline}
.nav a.active{text-decoration:underline}

/* falls irgendwo noch ein Brand auftaucht */
.brand{ display:none !important; }

/* =====================
   HERO
===================== */

.hero{
  position:relative;
  height:320px;

  /* Fallback (falls Bild nicht lädt) */
  background-color:#000;

  /* Banner */
  background-image:
    linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.15)),
    url("hero.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
}

/* =====================
   MAIN CONTENT
===================== */

.main{
  padding:50px 0 80px;
}

.h2{
  font-size:22px;
  font-weight:800;
  margin:0 0 12px;
}

.lead{
  max-width:860px;
  margin:0 auto;
  font-size:18px;
  font-weight:700;
  color:#222;
}

.textblock{
  max-width:900px;
  margin:0 auto;
  font-size:15px;
  color:var(--muted);
}

.hr{
  max-width:920px;
  margin:26px auto;
  border:0;
  border-top:1px solid #e7e7e7;
}

/* =====================
   SECTIONS (Bild 2)
===================== */

.section{
  padding:60px 0;
}

.h3{
  font-size:18px;
  font-weight:800;
  margin:0 0 20px;
}

/* Listen sauber mittig wie in Bild 2 */
.section .list{
  display:inline-block;
  text-align:left;
  margin:0 auto;
  padding:0;
  line-height:2;
  list-style-position:inside;
}

/* =====================
   2-SPALTEN-BEREICH
===================== */

.twoCol{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  max-width:900px;
  margin:0 auto;
}

.card{
  text-align:left;
}

.accent{
  color:var(--accent);
}

/* =====================
   CTA
===================== */

.cta{
  font-size:18px;
  font-weight:800;
  margin:0;
}

.email{
  color:var(--accent);
}
.email:hover{text-decoration:underline}

/* =====================
   IMPRESSUM / DATENSCHUTZ (PAGE)
===================== */

.page{
  padding:26px 0 80px;
}

.page .box{
  border:1px solid #eee;
  border-radius:8px;
  padding:18px;
  background:#fff;
}

.page p, .page li{
  color:var(--muted);
}

/* ✅ Links im Datenschutz/Impressum sichtbar + Hover/Fokus */
/* (nur in der Box, Navigation bleibt unverändert) */
.page .box a{
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  border-radius: 4px;
  padding: 0 2px;
  transition: color .15s ease, background-color .15s ease;
  overflow-wrap: anywhere;  /* lange URLs brechen sauber um */
  word-break: break-word;
}

.page .box a:hover{
  color: #1f3fe6;
  background-color: rgba(47,87,255,.10);
}

.page .box a:focus-visible{
  outline: 3px solid rgba(47,87,255,.35);
  outline-offset: 2px;
}

/* =====================
   RESPONSIVE
===================== */

@media (max-width:800px){
  .twoCol{
    grid-template-columns:1fr;
    gap:40px;
  }

  .section{
    padding:40px 0;
  }
}

@media (max-width:700px){
  .hero{height:260px}
  .nav{gap:16px}
}