/* ========= Design-Tokens ========= */
: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;
  font-size:16px;
}
img{max-width:100%; height:auto; display:block}

/* Skip link */
.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 */
.container{width:min(1200px, 100% - 2rem); margin-inline:auto}

/* Buttons */
.btn{display:inline-block; background:var(--brand); color:#fff; text-decoration:none; padding:.7rem 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}

/* Header / Nav */
.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:.6rem 0}
.brand{display:flex; align-items:center; gap:.5rem; 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:60px 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)}
.pill{border:2px solid rgba(255,255,255,.7); padding:.35rem .75rem; border-radius:999px}

.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}

@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}
}

/* Cookie */
.cookie{
  position:fixed; inset:auto 1rem 1rem 1rem;
  background:#0b65a3; color:#fff; padding:1rem; border-radius:.75rem;
  box-shadow:var(--shadow); z-index:9999;
  width: 250px;
}
.cookie a{color:#fff; text-decoration:underline}

/* Banner – zeigt das komplette Bild, ohne Beschneidung */
.banner{padding:0}
.image-banner{
  margin:0; padding:0; text-align:center;
  background:#f0f6fc;           /* Hintergrund für Letterboxing */
}
.banner-image{
  width:100%;
  height:auto;
  max-height:600px;             /* anpassbar */
  object-fit:contain;           /* wichtig: kein Zuschneiden */
}

/* Intro */
.einleitung-container{
  width:min(900px, 100% - 2rem);
  margin: 20px auto;
  padding: 20px;
  background: var(--card);
  border-radius: 12px;
  box-shadow: var(--shadow);
}
.einleitung-container h1{
  margin:0 0 .25rem;
  color: var(--brand);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
}

/* ======= 5-Spalten-Grid (Themen) ======= */
.grid-5 {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(12px, 1.5vw, 20px);
  align-items: start;
  margin: 18px 0 28px;
}

.gcard {
  display: block;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
  outline: none;
}
.gcard:hover { transform: translateY(-2px); }
.gcard:focus-visible { outline: var(--ring); outline-offset: 3px; }

.gcard img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}
.gcard .body { padding: 12px 14px; }
.gcard .title { margin: 0 0 6px; font-weight: 700; color: var(--brand); font-size: 1rem; }
.gcard .meta { margin: 0; color: var(--muted); font-size: .9rem; }

/* Breakpoints für 5-Spalten-Grid */
@media (max-width: 1200px) { .grid-5 { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px)  { .grid-5 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .grid-5 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 420px)  { .grid-5 { grid-template-columns: 1fr; } }

/* ======= Blogkarten (5-Spalten, responsiv) ======= */
.blog-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
  margin: 8px 0 48px;
}
@media (max-width: 1200px){ .blog-grid{ grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 960px) { .blog-grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px) { .blog-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .blog-grid{ grid-template-columns: 1fr; } }

.blog-card{
  background: var(--card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100%;
}
.blog-card img{
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;      /* Für Artikelbilder: konsistente Kacheloptik */
}
.blog-card-content{
  padding: 12px 14px 16px;
  display: grid;
  gap: 8px;
}
.blog-card-content .date{
  font-size: .95rem;
  color: var(--muted);
  margin: 0;
}
.card-title{font-size: 1rem; margin:0; color: var(--brand); line-height:1.35}

.read-more{
  justify-self: start;
  display: inline-block;
  background: var(--brand);
  color:#fff;
  text-decoration:none;
  padding:.55rem .85rem;
  border-radius:.6rem;
  font-weight:700;
}
.read-more:hover,.read-more:focus{background:var(--brand-dark)}
.read-more:focus-visible{outline:var(--ring); outline-offset:3px}

/* Footer */
.site-footer{background:var(--brand); color:#eaf4ff; padding:1rem 0 0; margin-top: 16px}
.footer-grid{display:grid; gap:1rem; align-items:start; width:min(1200px, 100% - 2rem); margin-inline:auto}
.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 styles */
a:focus-visible, 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}
}