/* ========== Design-Vorgaben ==========
   - Modern, responsiv, barrierearm
   - Fokus-Styles für Tastatur
   - Mobile-first
====================================== */

:root{
  --bg:#f7fafc;
  --card:#ffffff;
  --text:#11334a;
  --muted:#5c6b76;
  --brand:#007ACC;
  --brand-dark:#005f99;
  --ring: 2px solid #93c5fd;
  --radius:16px;
  --shadow: 0 10px 30px rgba(17,51,74,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0;
  font-family:"Open Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;height:auto;display:block}

/* Accessibility */
.skip-link{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip-link:focus{
  position:fixed; left:1rem; top:1rem; width:auto; height:auto;
  background:#fff; color:#000; padding:.75rem 1rem; border-radius:.5rem; z-index:10000;
  box-shadow:var(--shadow);
}

.container{width:min(1200px, 100% - 2rem); margin-inline:auto}

/* Cookie */
.cookie{
  position:fixed; inset:auto 1rem 1rem 1rem; width: 250px;
  background:#0b65a3; color:#fff; padding:1rem; border-radius:.75rem;
  box-shadow:var(--shadow); z-index:9999;
}
.cookie a{color:#fff; text-decoration:underline}
.cookie .btn{
  margin-top:.5rem;
  background:#fff; color:#0b65a3; border:0; border-radius:.5rem; padding:.6rem 1rem; cursor:pointer;
}
.btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none; padding:.8rem 1.1rem; border-radius:.7rem; font-weight:700; box-shadow:var(--shadow)}
.btn:hover,.btn:focus{background:var(--brand-dark)}
.btn:focus-visible{outline:var(--ring); outline-offset:3px}
.btn-light{background:#e6f2ff; color:#0b65a3}
.btn-light:hover,.btn-light:focus{background:#d6eaff}
.pill{border:2px solid rgba(255,255,255,.7); padding:.45rem .8rem; border-radius:999px}

/* Header */
.site-header{background:var(--brand); color:#fff; position:sticky; top:0; z-index:999}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:.7rem 0}
.brand{display:flex; align-items:center; gap:.6rem; color:#fff; text-decoration:none; font-weight:800}
.brand span{letter-spacing:.2px}
.nav-toggle{background:transparent; border:0; display:grid; gap:4px; padding:.4rem; cursor:pointer}
.nav-toggle:focus-visible{outline:var(--ring); outline-offset:3px}
.nav-toggle-bar{width:26px; height:3px; background:#fff; border-radius:2px}

.nav{position:fixed; inset:64px 0 auto 0; background:var(--brand); transform:translateY(-110%); transition:.3s ease transform; box-shadow:var(--shadow)}
.nav.open{transform:translateY(0)}
.nav-list{list-style:none; margin:0; padding:1rem; display:grid; gap:.4rem}
.nav-list a{color:#fff; text-decoration:none; font-weight:600; padding:.55rem .75rem; border-radius:.5rem}
.nav-list a:hover,.nav-list a:focus{background:rgba(255,255,255,.12)}
.has-sub{position:relative}
.sub-toggle{background:transparent; border:0; color:#fff; font-weight:700; padding:.55rem .75rem; border-radius:.5rem; cursor:pointer}
.sub-toggle:focus-visible{outline:var(--ring); outline-offset:3px}
.sub-menu{list-style:none; margin:.25rem 0 0; padding:.4rem; display:none; background:rgba(0,0,0,.08); border-radius:.5rem}
.sub-menu.open{display:grid; gap:.25rem}
.sub-menu a{display:block}

/* Desktop Nav */
@media (min-width: 960px){
  .nav{all:unset}
  .nav{display:block}
  .nav-list{display:flex; align-items:center; gap:.3rem; padding:0;}
  .nav-toggle{display:none}
  .has-sub:hover .sub-menu{display:grid; position:absolute; top:100%; left:0; background:#0b65a3; min-width:220px; padding:.5rem}
}

/* Hero */
.hero{background:linear-gradient(180deg,#eaf5ff, #f7fafc 60%); padding:clamp(1.2rem, 2vw, 2rem) 0 0}
.hero-inner{display:grid; gap:1.25rem; align-items:center}
.hero-copy h1{font-size:clamp(1.6rem, 3vw, 2.2rem); line-height:1.25; margin:.25rem 0 .5rem}
.hero-copy p{color:var(--muted); margin:0 0 .75rem}
.hero .trust{font-size:.95rem; color:#3b5566; margin-top:.5rem}
.cta-row{display:flex; gap:.6rem; flex-wrap:wrap}
.hero-media{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow)}
.hero-media img{aspect-ratio:3/2; object-fit:cover}
@media (min-width: 960px){
  .hero-inner{grid-template-columns: 1.05fr .95fr; gap:2rem; padding:1.2rem 0 2rem}
}

/* Hub Cards */
.hub{padding:2rem 0}
.grid-3{display:grid; gap:1rem}
@media (min-width:720px){.grid-3{grid-template-columns: repeat(2,1fr)}}
@media (min-width:1024px){.grid-3{grid-template-columns: repeat(3,1fr)}}
.card{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; display:flex; flex-direction:column}
.card img{aspect-ratio:16/10; object-fit:cover}
.card-body{padding:1rem}
.h3{font-size:1.25rem; margin:.25rem 0 .4rem}
.card p{color:var(--muted); margin:0 0 .9rem}

/* Feature block */
.feature{padding:1.2rem 0 2rem}
.feature-inner{display:grid; gap:1rem; align-items:center; background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1rem}
.feature-text p{color:var(--muted)}
.bullet{padding-left:1rem; margin:.6rem 0 1rem}
.bullet li{margin:.2rem 0}
.feature-media{border-radius:12px; overflow:hidden}
.feature-media img{aspect-ratio:4/3; object-fit:cover}
@media (min-width: 960px){
  .feature-inner{grid-template-columns: 1.1fr .9fr; padding:1.2rem}
}

/* Lists */
.lists{padding:1.2rem 0 2rem}
.grid-2{display:grid; gap:1rem}
@media (min-width: 960px){.grid-2{grid-template-columns: 1fr 1fr}}
.link-list{margin:.5rem 0 0; padding-left:1.25rem}
.link-list li+li{margin-top:.35rem}
.link-list a{text-underline-offset:2px}

/* Notice */
.notice{padding:1rem 0}
.notice .container{background:#fff; border-left:6px solid var(--brand); border-radius:12px; padding:1rem 1rem}

/* Contact */
.contact{padding:1.2rem 0 2rem}
.contact-inner{display:grid; gap:1rem; align-items:start}
.contact-embed{background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:.4rem}
@media (min-width: 960px){
  .contact-inner{grid-template-columns: .9fr 1.1fr}
}

/* Footer */
.site-footer{background:var(--brand); color:#eaf4ff; padding:1.2rem 0 0}
.footer-grid{display:grid; gap:1rem; align-items:start}
.footer-brand{color:#fff; text-decoration:none; display:inline-flex; align-items:center; gap:.5rem; font-weight:800}
.footer-links{list-style:none; margin:0; padding:0; display:grid; gap:.25rem}
.footer-links a{color:#fff; text-decoration:none}
.footer-links a:hover{text-decoration:underline}
.credits{text-align:center; color:#cfe6ff; margin:1rem 0; font-size:.95rem}

/* Focus */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{outline:var(--ring); outline-offset:3px}

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important; transition:none !important; scroll-behavior:auto !important}
}