/* Farben und Aufbau von der alten Seite übernommen */
:root {
  --yellow: #f8e53c;   /* Seitenleiste */
  --link: #5590e1;     /* Menü */
  --red: #b3544e;      /* Text */
  --dark: #34051f;     /* Links im Text */
  --bg: #e1bbba;       /* Hintergrund, pro Seite unterschiedlich */
  --sidebar: 240px;
  --gap: 27px;
}
body.start      { --bg: #e1bbba; }
body.ueber-uns  { --bg: #d6ebef; }
body.kontakt    { --bg: #a2bf6f; }
body.fotos      { --bg: #87b2a9; }
body.anmeldung  { --bg: #e1bbba; }
body.filzkurse  { --bg: #8da0d6; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--red);
  font: 18px/1.3 "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a { color: var(--dark); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--dark); outline-offset: 3px; }
a.plain { color: inherit; }
img { display: block; max-width: 100%; height: auto; }

/* Seitenleiste: fest links, bleibt beim Scrollen stehen */
.sidebar {
  position: fixed; top: 0; left: 0; bottom: 0; width: var(--sidebar);
  padding: var(--gap); background: var(--yellow); overflow-y: auto;
}
.sidebar a { color: var(--link); }
.sidebar nav ul { margin: 18px 0; padding: 0; list-style: none; }
.sidebar .site-name { display: block; }
.sidebar .address { margin: 0; color: var(--red); }

main { margin-left: var(--sidebar); padding: var(--gap); }
.text { max-width: 622px; }
h1 { font-size: inherit; font-weight: bold; margin: 0 0 18px; }
p { margin: 0 0 18px; }
.text + img, h1 + img { margin-top: 0; }
main > img { margin-top: 0; }
.dashes { list-style: none; margin: 0 0 18px; padding: 0; }
.dashes li::before { content: "– "; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Galerie: Felder 200 x 200, Abstand 25, Bilder mittig */
.gallery { display: grid; grid-template-columns: repeat(auto-fill, 200px); gap: 25px; }
.gallery a { display: flex; align-items: center; justify-content: center; width: 200px; height: 200px; }
.gallery img { max-width: 200px; max-height: 200px; width: auto; height: auto; }

.lightbox { border: 0; padding: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: rgba(0, 0, 0, .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 94vw; max-height: 92vh; width: auto; height: auto; }
.lightbox button { position: fixed; background: none; border: 0; color: #fff; font-size: 2.5rem; line-height: 1; padding: .5rem 1rem; cursor: pointer; }
.lb-close { top: .5rem; right: .5rem; }
.lb-prev { left: .25rem; top: 50%; transform: translateY(-50%); }
.lb-next { right: .25rem; top: 50%; transform: translateY(-50%); }

/* Schmale Bildschirme: Seitenleiste oben, nicht mehr fest */
@media (max-width: 700px) {
  .sidebar { position: static; width: auto; }
  main { margin-left: 0; }
  .gallery { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
  .gallery a { width: auto; height: 140px; }
  .gallery img { max-width: 100%; max-height: 140px; }
}