/* Minimal Reset + sensible defaults */
*,
*::before,
*::after { box-sizing: border-box; }

html, body{
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: #0b1220;
}

body{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main{
  flex: 1 0 auto;
}

.site-footer{
  flex-shrink: 0;
}



html { font-size: var(--font-size); }

body{
  margin: 0;
  font-family: var(--font-sans);
  line-height: var(--line);
  color: var(--text);
  background: var(--bg);
  text-rendering: optimizeLegibility;
}

/* Images */
img { max-width: 100%; height: auto; }

/* Links */
a{
  color: var(--accent);
  text-decoration-thickness: .08em;
  text-underline-offset: .18em;
}
a:hover{ color: var(--accent-2); }

/* Headings */
h1, h2, h3{
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s2) 0;
}
h1{ font-size: var(--h1); }
h2{ font-size: var(--h2); }
h3{ font-size: var(--h3); }

/* Text */
p{ margin: 0 0 var(--s2) 0; color: var(--text); }
.small, small{ color: var(--muted); }

/* Lists */
ul, ol{
  margin: 0 0 var(--s2) 1.25rem;
  padding: 0;
}
li{ margin: .25rem 0; }

/* Focus: sichtbar lassen */
:focus{ outline: 2px solid var(--focus); outline-offset: 2px; }
:focus:not(:focus-visible){ outline: none; }
:focus-visible{ outline: 2px solid var(--focus); outline-offset: 2px; }

/* Visually hidden (für sr-only Text) */
.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;
}

/* Skip Link */
.skip-link{
  position: absolute;
  left: -9999px;
  top: var(--s2);
  z-index: 2000;
  background: var(--bg);
  color: var(--text);
  padding: .75rem 1rem;
  border: 2px solid var(--focus);
  border-radius: var(--r1);
  box-shadow: var(--shadow);
}
.skip-link:focus{
  left: var(--s2);
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce){
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 480px){
  .header-logo-img{
    height: 56px;
    max-width: 90vw;   /* passt sich an */
  }
}