/* Grundlayout */
:root{
  --brand:#004f80;
  --brand-2:#0078b8;
  --text:#232323;
  --muted:#6b7280;
  --bg:#f6f7f9;
  --card:#ffffff;
  --border:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.5;
}

/* Layout-Helfer */
.container{
  width:min(1100px, 92vw);
  margin-inline:auto;
  padding: clamp(12px, 2vw, 20px);
}

/* Header */
.site-header{
  background:linear-gradient(180deg, var(--brand) 0%, #033d63 100%);
  color:#fff;
  padding: 28px 0 22px;
  border-bottom: 4px solid var(--brand-2);
}
.brand{
  margin:0;
  font-size: clamp(26px, 3.1vw, 40px);
  letter-spacing:0.2px;
}
.subtitle{
  margin:6px 0 0;
  color:#e6f2fa;
  font-weight:500;
}

/* Hero */
.hero-figure{
  margin: 18px 0 8px;
  background: #dfeaf2;
  border:1px solid var(--border);
  border-radius: 8px;
  overflow:hidden;
}
.hero-figure img{
  display:block;
  width:100%;
  height:auto;
}
.hero-figure figcaption{
  font-size: 0.9rem;
  color: var(--muted);
  background:#f9fbfc;
  padding:10px 12px;
  border-top:1px solid var(--border);
}

/* Tabellenbereich */
h2{
  margin: 28px 0 10px;
  font-size: clamp(22px, 2.6vw, 28px);
}
.table-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:10px;
  overflow:hidden;
}
.data-table{
  width:100%;
  border-collapse: collapse;
  font-size: 0.98rem;
}
.data-table thead th{
  background:#f1f5f9;
  color:#0f172a;
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.data-table .table-subhead th{
  background:#eef6fb;
  color:#0b3a5b;
}
.data-table td{
  padding:12px 14px;
  border-bottom:1px solid var(--border);
}
.data-table tbody tr:nth-child(even) td{
  background:#fbfdff;
}
.note{
  color:var(--muted);
  margin-top:8px;
}

/* Kontakt */
.contact{
  margin-top: 24px;
}
.contact-card{
  margin-top:8px;
  background: var(--card);
  border:1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03);
}
.contact a{
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px dashed rgba(0,79,128,0.35);
}
.contact a:hover{
  color: var(--brand-2);
  border-bottom-color: transparent;
}

/* Footer */
.site-footer{
  margin-top: 34px;
  background:#e9eef3;
  border-top:1px solid var(--border);
  color:#334155;
}
.site-footer p{
  margin:0;
  padding:14px 0;
  text-align:center;
  font-size:0.95rem;
}

/* A11y */
.visually-hidden{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* Responsivität */
@media (min-width: 760px){
  .contact{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap:18px;
    align-items:start;
  }
}