
:root {
  --brand: #0A66C2;
  --bg: #0F1F32;
  --surface: #10243C;
  --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: #0F1F32; /* Fallback */
  background-image: url("/assets/background_neu3.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(127, 23, 52, 1); 
  /*  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: 70px; 
    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:#fff; 

}
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:#fff; 

}
.hero p { 
    color:#fff; 
    max-width:720px;
    font-weight: 600;
    font-size: 18px;

}
.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(127, 23, 52, 1); 
    color: #FFF; 
    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:#fff; 

}
.section .lead { 
    color:#fff; 
    max-width:760px;
    font-weight: 600;
    font-size: 18px;

}
.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(127, 23, 52, 1);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25);
    margin-bottom: 12px; 
}
.card h3 { 
    margin:6px 0 6px; 
    font-size:20px; 
    color:#f0f6ff; 

}

.card h4 { 
    margin:6px 0 6px; 
    font-size:16px; 
    color:#f0f6ff; 

}

.card p { 
    color:#c1d2e6; 

}
    .card k {
        color: #c1d2e6;
        font-style: italic;
    }
footer.site-footer { 
    border-top:1px solid var(--line); 
    padding:28px 0; 
    background: rgba(127,23,52,1); 
    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(127,23,52,0.50); 
    color: #fff; 
    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 {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
}
.slider {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9; /* ggf. ändern oder per CSS/Media Queries anpassen */
    overflow: hidden;
    border-radius: 10px;
    border: 2px solid;
    border-color: #7F1734;
}

    /* Bilder übereinander legen */
    .slider img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transition: opacity 700ms ease-in-out;
    }

        /* sichtbares Bild */
        .slider img.active {
            opacity: 1;
        }

/* Buttons (optional) */
.slider-prev, .slider-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0,0,0,.35);
    border: 1px solid rgba(255,255,255,.25);
    color: #EAF4FC;
    padding: 6px 10px;
    border-radius: 999px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
    z-index: 2;
    backdrop-filter: blur(2px);
}

.slider-prev {
    left: 10px;
}

.slider-next {
    right: 10px;
}

    .slider-prev:hover, .slider-next:hover {
        background: rgba(0,0,0,.55);
    }                          