:root {
  --brand: #0f2d5c;
  --bg: #132e4a;
  --surface: #0f243d;
  --text: #e7edf7;
  --muted: #a9b8cc;
  --line: #24405b;
  --radius: 14px;
}
* { box-sizing: border-box; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(19, 46, 74, 0.92); /* dunkles Blau mit 8 % Transparenz */
  z-index: -1;
}
html, body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", system-ui, sans-serif;
  color: var(--text);
  background-color: #132e4a; /* Fallback */
  background-image: url("/assets/background.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-attachment: fixed; /* optional: Bild bleibt beim Scrollen stehen */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.container { 
    width: min(1100px, 92vw); 
    margin: 0 auto; 

}
a { 
    color: #b3d4ff; 
    text-decoration: none; 

}
a:hover { 
    text-decoration: underline; 

}
header.site-header { 
    border-bottom: 1px solid var(--line); 
    position: sticky; top: 0; 
    z-index: 50; 
    background: rgba(15, 23, 42, 0.5); 
  <!--  backdrop-filter: saturate(140%) blur(8px); -->

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

}
.brand { 
    display:inline-flex; 
    align-items:center; 
    gap:12px; 

}
.brand img { 
    height: 36px; 
    width:auto;
}
.brand .title { 
    font-weight:700; 
    color: #eaf2ff; 
    letter-spacing:.3px;
}
.brand .subtitle { 
    display:block; 
    font-size:12px; 
    color: #9fb4cf; 
    margin-top:-4px;
}
nav ul { 
    list-style:none; 
    display:flex; 
    gap:18px; 
    margin:0; 
    padding:0; 

}
nav a { 
    padding:8px 12px; 
    border-radius:10px; 
    font-weight:600; 
    color:#dbe7ff; 

}
nav a.active, nav a:hover { 
    background: rgba(255,255,255,0.06); 

}
.menu-toggle { 
    display:none; 
    border:1px solid var(--line); 
    background: rgba(255,255,255,0.04); 
    color: var(--text); 
    border-radius:10px; 
    padding:8px 10px;
}
@media (max-width:760px) {
  nav ul { 
      display:none; 
      position:absolute; 
      right:4vw; 
      top:64px; 
      background:#0d2038; 
      border:1px solid var(--line); 
      box-shadow: 0 8px 28px rgba(0,0,0,.35); 
      padding:12px; 
      border-radius:12px; 
  }
  nav.open ul { 
      display:flex; 
      flex-direction:column; 
      min-width:220px; 
  }
  .menu-toggle { 
      display:inline-flex; 
  }
}
.hero {
  background: transparent;
  padding: clamp(40px, 8vw, 120px) 0 56px;
}
.hero h1 { 
    font-size: clamp(28px, 4vw, 42px); 
    line-height:1.15; 
    margin:0 0 12px; 
    color:#f3f7ff; 

}
.hero p { 
    color:#c3d4ea; 
    max-width:720px; 

}
.cta { 
    display:flex; 
    gap:12px; margin-top:18px; 
    flex-wrap:wrap; 

}
.btn { 
    display:inline-block; 
    padding:12px 18px; 
    border-radius:999px; 
    font-weight:700; 
    border: 1px solid transparent; 

}
.btn-primary { 
    background: rgba(31, 61, 107, 0.70); 
    color: #f0f6ff; 
    border-color: #2a4b82; 

}
.btn-primary:hover { 
    background: #25508a; 

}
.btn-outline { 
    background: transparent; 
    border-color: #2a4b82; 
    color: #e0ecff; 

}
.btn-outline:hover { 
    background: rgba(255,255,255,0.06); }
.section { 
    padding: 56px 0; 

}
.section h2 { 
    font-size: clamp(22px, 3.2vw, 32px); 
    margin: 0 0 14px; 
    color:#eef5ff; 

}
.section .lead { 
    color:#b9cae1; 
    max-width:760px; 

}
.grid { 
    display:grid; 
    gap:18px; 
    grid-template-columns: repeat(3, 1fr); 

}
@media (max-width:980px) { 
    .grid { 
        grid-template-columns: repeat(2, 1fr); 

    } 

}
@media (max-width:640px) { 
    .grid { 
        grid-template-columns: 1fr; 

    } 

}
.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 18px;
    background: rgba(15, 36, 61, 0.70);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
}
.card h3 { 
    margin:6px 0 6px; 
    font-size:18px; 
    color:#f0f6ff; 

}
.card p { 
    color:#c1d2e6; 

}
footer.site-footer { 
    border-top:1px solid var(--line); 
    padding:28px 0; 
    background: rgba(15,33,57,0.60); 
    color:#c7d9ef; 
    font-size:14px; 

}
.footer-cols { 
    display:grid; 
    gap:16px; 
    grid-template-columns: 2fr 1fr 1fr; 

}
@media (max-width:760px) { 
    .footer-cols { 
        grid-template-columns:1fr; 

    } 

}
.small { 
    font-size:14px; 
    color: #a9b8cc; 

}
.form { 
    display:grid; 
    gap:12px; 
    max-width:680px; 

}
.input, textarea { 
    width:100%; 
    padding:12px 14px; 
    border:1px solid #32537c; 
    background: #0e2239; 
    color:#e6f0ff; 
    border-radius:12px; 
    font: inherit; 

}
textarea { 
    min-height: 140px; 

}
.input::placeholder, textarea::placeholder { 
    color:#8ea7c4; 

}
.input:focus, textarea:focus { 
    outline:none; 
    border-color:#4b6ea3; 
    box-shadow: 0 0 0 4px rgba(59,130,246,0.18); 

}
.alert { 
    padding:12px 14px; 
    border-radius:12px; 
    border:1px solid var(--line); 

}
.alert-success { 
    background: #0f3a2f; 
    border-color: #1e6c53; 
    color:#d5ffef; 

}
.alert-error { 
    background: #3b1f1f; 
    border-color: #7a3333; 
    color:#ffe1e1; 

}
.badge { 
    display:inline-block; 
    padding:4px 10px; 
    border-radius:999px; 
    background: rgba(255,255,255,0.50); 
    color: #1c3b66; 
    font-weight:700; 
    font-size:12px; 
    letter-spacing:.2px; 

}
.card-content {
  display: flex;
  align-items: flex-start;     /* oben ausrichten */
  gap: 20px;                   /* Abstand zwischen Text und Bild */
  flex-wrap: wrap;             /* bei kleinen Displays umbrechen */
}

.card-text {
  flex: 1 1 60%;               /* nimmt 60 % Breite, kann schrumpfen */
}

.card-media {
  flex: 1 1 35%;               /* Bildbereich */
  display: flex;
  flex-direction: column;      /* mehrere Bilder untereinander */
  gap: 10px;
}

.card-media img {
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}