/* main.css */
/* Farb- und Skalierungsvariablen */
:root{
  --blue-deep: #062a6b;
  --blue: #0b3d91;
  --gold: #f0c808;
  --gold-soft: #ffd24a;
  --bg: #f6f8fb;
  --card-bg: #ffffff;
  --text: #0b1a2b;
  --radius: 12px;
}

/* Schriftgröße skaliert mit Viewport (hilft beim Zoomen/Responsive-Eindruck) */
html{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: clamp(14px, 1.6vw, 18px);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  box-sizing: border-box;
}
*, *::before, *::after { box-sizing: inherit; }

body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  display:flex;
  flex-direction:column;
}

/* Skip link für Zugänglichkeit */
.skip-link{
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus{
  left: 1rem;
  top: 1rem;
  width: auto;
  height: auto;
  padding: 0.4rem 0.6rem;
  background: var(--blue);
  color: white;
  border-radius: 6px;
  z-index: 1000;
}

/* Kopfbereich */
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: linear-gradient(90deg, var(--blue) 0%, #2748b0 60%);
  color: white;
  box-shadow: 0 2px 6px rgba(2,10,40,0.08);
}

.logo{
  display:flex;
  align-items:center;
  gap:0.75rem;
}
.logo svg{ width:44px; height:44px; flex:0 0 44px; border-radius:50%; }
.brand{
  font-weight:700;
  font-size: 1.05rem;
  color: var(--gold-soft);
}

/* Top-Navigation (mobil / schmal) */
.top-nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  gap:0.5rem;
}
.top-nav a{
  color: white;
  text-decoration:none;
  padding:0.45rem 0.6rem;
  border-radius:8px;
  background: rgba(255,255,255,0.04);
  transition: background .18s, transform .08s;
}
.top-nav a:hover,
.top-nav a:focus{
  background: rgba(255,255,255,0.12);
  transform: translateY(-1px);
  outline: none;
}

/* Seiten-Layout */
.layout{
  width:100%;
  max-width:1200px;
  margin: 1rem auto;
  padding: 0 1rem;
  display:grid;
  grid-template-columns: 1fr;
  gap:1rem;
  align-items:start;
  flex:1 0 auto;
}

/* Seiten-Navigation (wird im großen Viewport links angezeigt) */
.side-nav{
  display:none;
}
.side-nav ul{
  list-style:none;
  margin:0;
  padding:0.75rem;
  background: linear-gradient(180deg, rgba(11,61,145,0.04), rgba(11,61,145,0.01));
  border-radius: var(--radius);
}
.side-nav a{
  display:block;
  padding:0.6rem 0.75rem;
  color:var(--text);
  text-decoration:none;
  border-left:4px solid transparent;
  border-radius:6px;
}
.side-nav a:hover,
.side-nav a:focus{
  background: rgba(240,200,8,0.06);
  border-left-color: var(--gold);
  color: var(--blue-deep);
}

/* Hauptinhalt */
.content{
  min-width:0;
}
.panel{
  background: var(--card-bg);
  padding:1.25rem;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(11,61,145,0.04);
}
.panel + .panel{
  margin-top:1rem;
}

/* Fußzeile */
.site-footer{
  background: linear-gradient(180deg, var(--blue-deep), #04143a);
  color: white;
  padding: 0.8rem 1rem;
  text-align:center;
}
.site-footer a{
  color: var(--gold-soft);
  text-decoration: underline;
}

/* Kleine Bildschirm-Verbesserungen */
@media (max-width: 600px){
  .brand{ font-size: 0.98rem; }
  .top-nav a{ padding: 0.45rem 0.5rem; font-size: 0.95rem; }
  .logo svg{ width:40px; height:40px; }
}

/* Breite Bildschirme / "größte Vergrößerung" -> Menü links */
@media (min-width: 1100px){
  .layout{
    grid-template-columns: 220px 1fr;
    gap: 1.25rem;
  }

  /* Zeige die Seiten-Navigation links und verstecke die Top-Navigation */
  .side-nav{ display:block; position:sticky; top:1rem; height:calc(100vh - 4rem); overflow:auto; }
  .top-nav{ display:none; }

  .site-header{ padding-right: 2rem; padding-left: 2rem; }
}

/* Fokus-Styles deutlich, aber dezent */
a:focus{
  outline: 3px solid rgba(240,200,8,0.25);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Kleinere optische Anpassungen für Lesbarkeit */
h1{
  margin-top:0;
  margin-bottom:0.5rem;
  font-size: 1.15rem;
  color: var(--blue-deep);
}
p{ margin:0 0 0.6rem 0; line-height:1.5; color: #122033; }