@font-face {
  font-family: 'Font';
  src: url('./fonts/WinkySans-VariableFont_wght-subset.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

body {
  display: flex;
  flex-direction: column;
  gap: 3vw;
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  font-family: 'Font', sans-serif;
  font-size: 1.5vw;
  color: #00000088;
  transition: opacity 0.3s ease;
  opacity: 0;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

body::-webkit-scrollbar {
  display: none;
}

html::-webkit-scrollbar {
  display: none;
}

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  font-size: 1.5vw;
  background-color: #f0eded;
  align-items: start;
  z-index: 1000;
}

.header .horizontal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 96vw;
  padding-left: 2vw;
  padding-right: 2vw;
}

.header .fortschritt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 0%;
  height: 0.4vw;
  background-color: #049ba8;
}

h1 {
  color: black;
  overflow-wrap: break-word;
  font-size: 1.95em;
}

.header .logo {
  width: 25vw;
  height: 5vw;
  display: flex;
  flex-direction: row;
  align-items: center;
  font-size: 2vw;
  color: black;
}

.header .logo img {
  height: 60%;
  padding-right: 1vw;
}

.header .tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 30vw;
}

a {
  color: #049ba8;
}

.header .tabs a {
  text-decoration: none;
  color: #00000044;
  transition: color 0.25s ease;
}

.header .tabs .aktiv {
  color: black;
}

.header .tabs a:hover {
  color: #000000dd;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100vw;
}

.main.index {
  margin-top: 20vh;
}

.main.aktuelles,
.main.zeltlager {
  margin-top: 10vh;
}

.main.imp {
  margin-top: 13vh;
}

.main .inhalt {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.inhalt.index {
  width: 80vw;
}

.inhalt.aktuelles,
.inhalt.zeltlager {
  width: 55vw;
}

.bilder-galerie {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 50vh;
}

.bilder-galerie .beschreibung {
  margin-right: 3vw;
  width: 80%;
}

.bilder-galerie .beschreibung h1 {
  font-size: 2.5vw;
  margin-top: 0;
  margin-bottom: 1vw;
}

.bilder-container {
  width: 80%;
  height: 90%;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  clip-path: polygon(
    3%  5%,  14% 1%,  26% 4%,  38% 0%,  50% 3%,  62% 1%,  74% 4%,  88% 0%,  97% 3%,
    100% 14%, 96% 28%, 100% 42%, 97% 56%, 100% 70%, 96% 84%, 99% 96%,
    88% 100%, 74% 97%, 60% 100%, 46% 97%, 32% 100%, 18% 97%, 6%  100%,
    0%  88%,  3%  74%,  0%  60%,  3%  46%,  0%  32%,  3%  18%
  );
  overflow: hidden;
  transition: clip-path 1.5s ease;
}

.bilder-container > * {
  grid-area: 1 / 1;
  min-width: 0;
  min-height: 0;
}

.bilder-container img {
  min-width: 100%;
  min-height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 1.5s ease;
}

footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 10vh;
  min-height: 10vh;
  gap: 5%;
  justify-content: center;
  align-items: center;
  font-size: 1vw;
  margin-top: auto;
  background-color: #f0eded;
}

footer .kontakt {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 20%;
  height: 40%;
}

footer .kontakt img {
  height: 100%;
  margin-left: 0.5vw;
  margin-right: 0.5vw;
  transition: transform 0.175s ease, box-shadow 0.175s ease;
  cursor: pointer;
  border-radius: 12px;
}

footer .kontakt img:hover {
  transform: scale(1.05);
  box-shadow: 0 3px 10px #00000033;
}

footer a {
  color: #00000022;
  text-decoration: none;
}

.impressum {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.impressum h1 {
  margin-bottom: 5vw;
}

.impresum h1,
.impressum p {
  color: black;
}

.impressum * {
  margin-top: 0.75vw;
  margin-bottom: 0.75vw;
}

.countdown {
  min-width: 28vw;
  min-height: 7vw;
  margin-top: 2vw;
  padding: 10px;
  text-align: center;
  align-content: center;
  background-color: #ff555544;
  border: 8px solid #ff555588;
  border-radius: 1vw;
}

.flyer {
  margin-bottom: 3vw;
}

.flyer-bilder {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 3vw;
}

.flyer-bilder img {
  width: 50%;
  height: 100%;
  object-fit: cover;
}

.infos {
  width: 100%;
  margin-bottom: 3vw;
}

.infos p {
  color: black;
  font-size: 1.75vw;
}

.infos button {
  background-color: #049ba8;
  border-radius: 0.5vw;
  color: white;
  border: none;
  padding: 0.75vw 1.5vw;
  font-size: 1.5vw;
  cursor: pointer;
  transition: background-color 0.25s ease;
  font-family: 'Font', sans-serif;
}

.infos button:hover {
  background-color: #037a7f;
}

.beitrag {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin-bottom: 5vw;
}

.beitrags-bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2vw;
  width: 80%;
  margin-top: 2vw;
}

.beitrags-bilder img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* ─────────────────────────────────────────
   TABLET  (≤ 900px)
───────────────────────────────────────── */
@media (max-width: 900px) {
  body {
    font-size: 2vw;
    gap: 4vw;
  }

  /* Header */
  .header {
    font-size: 2vw;
  }

  .header .logo {
    width: 32vw;
    height: 7vw;
    font-size: 2.8vw;
  }

  .header .tabs {
    width: 38vw;
    font-size: 1.8vw;
  }

  .header .fortschritt {
    height: 0.5vw;
  }

  /* Gallery */
  .bilder-galerie {
    flex-direction: column;
    height: auto;
    gap: 4vw;
  }

  .bilder-galerie .beschreibung {
    width: 100%;
    margin-right: 0;
  }

  .bilder-galerie .beschreibung h1 {
    font-size: 3.5vw;
  }

  .bilder-container {
    width: 100%;
    height: 45vw;
  }

  /* Flyer */
  .flyer-bilder {
    flex-direction: column;
    gap: 4vw;
  }

  .flyer-bilder img {
    width: 100%;
  }

  /* Infos */
  .infos p {
    font-size: 2.5vw;
  }

  .infos button {
    font-size: 2vw;
    padding: 1vw 2vw;
    border-radius: 0.8vw;
  }

  /* Impressum */
  .impressum h1 {
    margin-bottom: 6vw;
  }

  .impressum * {
    margin-top: 1.2vw;
    margin-bottom: 1.2vw;
  }

  /* Beiträge */
  .beitrags-bilder {
    width: 92%;
    gap: 3vw;
  }

  /* Footer */
  footer {
    font-size: 1.6vw;
  }

  footer .kontakt {
    width: 14vw;
    height: 7vw;
  }
}

/* ─────────────────────────────────────────
   MOBILE  (≤ 560px)
───────────────────────────────────────── */
@media (max-width: 560px) {
  body {
    font-size: 5vw;
    gap: 6vw;
    /* leave room for fixed header */
    padding-top: 28vw;
    box-sizing: border-box;
  }

  /* ── Header ── */
  .header .horizontal {
    flex-wrap: wrap;
    row-gap: 2vw;
    padding: 3vw 4vw;
    width: auto;
  }

  .header {
    font-size: 5vw;
  }

  .header .logo {
    width: auto;
    height: 13vw;
    font-size: 6.5vw;
    flex-shrink: 0;
  }

  .header .logo img {
    padding-right: 2.5vw;
  }

  /* Stack tabs below logo + contact row */
  .header .tabs {
    order: 3;
    width: 100%;
    justify-content: space-around;
    font-size: 4.5vw;
    padding-bottom: 2.5vw;
  }

  .header .fortschritt {
    height: 1vw;
  }

  /* ── Main content — reduce side padding ── */
  .main {
    padding-left: 4vw;
    padding-right: 4vw;
    box-sizing: border-box;
  }

  .main.index {
    margin-top: 4vh;
  }

  .main.aktuelles,
  .main.zeltlager {
    margin-top: 0vh;
  }

  .main.imp {
    margin-top: 13vh;
  }

  .main .inhalt {
    width: 90%;
  }

  /* ── Gallery ── */
  .bilder-galerie {
    flex-direction: column;
    height: auto;
    gap: 6vw;
  }

  .bilder-galerie .beschreibung {
    width: 100%;
    margin-right: 0;
  }

  .bilder-galerie .beschreibung h1 {
    font-size: 7vw;
    margin-bottom: 2vw;
  }

  .bilder-container {
    width: 100%;
    height: 60vw;
    /* Soften the jagged clip-path so it still looks good at small sizes */
    clip-path: polygon(
      2%  4%,  14% 0%,  28% 3%,  42% 0%,  56% 3%,  70% 0%,  84% 3%,  98% 0%,
      100% 14%, 97% 30%, 100% 46%, 97% 62%, 100% 78%, 97% 94%, 100% 100%,
      84% 97%, 70% 100%, 54% 97%, 40% 100%, 26% 97%, 12% 100%, 0% 97%,
      3%  82%,  0%  66%,  3%  50%,  0%  34%,  3%  18%
    );
  }

  /* ── Flyer ── */
  .flyer {
    width: 100%;
    margin-bottom: 6vw;
    box-sizing: border-box;
  }

  .flyer-bilder {
    flex-direction: column;
    gap: 5vw;
  }

  .flyer-bilder img {
    width: 100%;
  }

  .countdown {
    margin-top: 6vw;
  }

  /* ── Infos ── */
  .infos {
    width: 100%;
    box-sizing: border-box;
  }

  .infos p {
    font-size: 5vw;
  }

  .infos button {
    font-size: 5vw;
    padding: 3vw 5vw;
    border-radius: 2vw;
    width: 100%;
    margin-bottom: 2vw;
  }

  /* ── Impressum ── */
  .impressum {
    width: 100%;
    box-sizing: border-box;
  }

  .impressum h1 {
    margin-bottom: 8vw;
    font-size: 7vw;
  }

  .impressum * {
    margin-top: 2.5vw;
    margin-bottom: 2.5vw;
  }

  .impressum p {
    color: black;
  }

  /* ── Beiträge ── */
  .beitrag {
    width: 100%;
    margin-bottom: 10vw;
    box-sizing: border-box;
  }

  .beitrags-bilder {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 4vw;
    margin-top: 4vw;
  }

  /* ── Footer ── */
  footer {
    font-size: 3.5vw;
    bottom: 3vw;
    margin-bottom: 4vw;
    text-align: center;
    flex-direction: column;
    gap: 1vw;
  }

  footer .kontakt {
    width: auto;
    height: 50%;
    gap: 3vh;
  }

  footer .kontakt img {
    height: 75%;
  }
}