/* ---------- Allgemein ---------- */
footer {
  margin-top: 3rem;
  text-align: center;
}

/* ---------- Logo im Kopfbereich ---------- */
.brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
}
.brand img {
  width: 32px;
  height: 32px;
}

/* ---------- Menü: PC oder Handy ---------- */
nav li.menu-mobile {
  display: none;
}

@media (max-width: 1024px) {
  nav li.menu-desktop {
    display: none;
  }
  nav li.menu-mobile {
    display: block;
  }
}

nav li.menu-mobile summary::after {
  display: none;
}
nav li.menu-mobile summary {
  font-size: 1.5rem;
  line-height: 1;
}

/* ---------- Diashow ---------- */
.slideshow {
  margin: 2rem 0;
}

.slides {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-block: 1rem;
}
.slides::-webkit-scrollbar {
  display: none;
}

.slide {
  flex: 0 0 100%;
  scroll-snap-align: center;
  margin: 0;
}

.slide img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.25));
}

.slide figcaption {
  font-style: italic;
  text-align: center;
  margin-top: 0.75rem;
  min-height: 3.5em;
  padding-inline: 1rem;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 0.25rem;
}

.dot {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.dot::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  margin: auto;
  border-radius: 50%;
  border: 2px solid var(--pico-primary);
}
.dot[aria-current="true"]::before {
  background: var(--pico-primary);
}

/* ---------- Porträt auf der Entwicklerseite ---------- */
.page-entwickler img {
  display: block;
  width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%;
  margin: 0 auto 2rem;
}