:root{
  --blue:#0f3d8a; --blue-2:#0b2f6b; --muted:#6b7280; --bg:#fbfcfe; --card:#ffffff;
  --max-width:1100px; --gap:1.25rem; --radius:14px;
}
*{box-sizing:border-box} html,body{height:100%}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial;
  line-height:1.45;color:#0f1724;background:var(--bg);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none} img{max-width:100%;display:block}
.container{width:calc(100% - 2rem);max-width:var(--max-width);margin:0 auto}

/* header / nav */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.6);backdrop-filter:blur(6px)}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.brand{display:flex;align-items:center;gap:.75rem}
.brand .logo{width:48px;height:48px;display:grid;place-items:center;background:transparent;border-radius:10px}
.brand .logo img{width:48px;height:48px;object-fit:contain;border-radius:8px} /* kein blauer Rahmen */
.brand h1{font-size:1rem;margin:0;color:var(--blue)}
.brand p{margin:0;font-size:.75rem;color:var(--muted)}
nav ul{display:flex;gap:1rem;list-style:none;margin:0;padding:0;align-items:center}
nav a{padding:.5rem .6rem;border-radius:8px;color:var(--muted);font-weight:600;font-size:.9rem}
nav a:hover,nav a.active{color:var(--blue)}
.cta{background:var(--blue);color:#fff;padding:.55rem .8rem;border-radius:10px;font-weight:700}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(15,61,138,.12)}

/* hero */
.hero{padding:2.4rem 0 2rem}
.hero-grid{display:grid;gap:var(--gap);align-items:center}
.hero-card{background:linear-gradient(180deg,rgba(15,61,138,.05),rgba(11,47,107,.02));border-radius:18px;padding:1.2rem}
.hero h2{font-size:1.6rem;margin:.2rem 0 0;color:var(--blue)}
.lead{font-size:1.05rem;color:var(--muted);margin:.6rem 0 1rem}
.pill{display:inline-block;padding:.3rem .6rem;border-radius:999px;background:rgba(15,61,138,.06);color:var(--blue);font-weight:700;font-size:.8rem}

/* sections / cards / grids */
section{padding:2rem 0}
.section-title{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1rem}
.section-title h3{margin:0;color:var(--blue)}
.section-title p{margin:0;color:var(--muted);font-size:.95rem}
.card{padding:1rem;border-radius:12px;background:var(--card);box-shadow:0 10px 30px rgba(11,47,107,.04)}
.info-card{max-width:420px;margin:0 0 1.25rem 0}
.grid{display:grid;gap:1rem}
.services{grid-template-columns:repeat(1,1fr)}
.service{background:var(--card);padding:1rem;border-radius:12px;box-shadow:0 6px 18px rgba(11,47,107,.04)}
.service h4{margin:.2rem 0 0}
.service p{margin:.45rem 0 0;color:var(--muted);font-size:.95rem}

.about-grid{display:grid;gap:1rem;grid-template-columns:1fr 380px;align-items:start}
.facts{display:flex;gap:1rem;flex-wrap:wrap}
.fact{background:linear-gradient(90deg,#fff,#fbfdff);padding:.7rem 1rem;border-radius:10px;min-width:160px;box-shadow:0 6px 14px rgba(11,47,107,.03)}

.contact{display:grid;gap:1rem;grid-template-columns:1fr 380px}
.field{display:flex;flex-direction:column;gap:.35rem}
input,textarea{padding:.6rem .7rem;border-radius:8px;border:1px solid #e6eef9;font-size:.95rem}
button[type=submit]{background:var(--blue);color:#fff;padding:.6rem .8rem;border-radius:10px;border:0;font-weight:700}

/* footer */
footer{padding:1.5rem 0;color:var(--muted);font-size:.9rem}
.footer-grid{display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}

/* responsive */
@media(min-width:700px){
  .hero-grid{grid-template-columns:1fr 380px}
  .services{grid-template-columns:repeat(3,1fr)}
  .about-grid{grid-template-columns:1fr 380px}
  .contact{grid-template-columns:1fr 380px}
}
@media(min-width:1100px){ .container{width:calc(100% - 4rem)} }
.muted{color:var(--muted)}