/* ===========================
   GLOBALE BREAKPOINTS
   Handy: bis 600px
   Tablet: 601px bis 1024px
   Normal: 1025px bis 1919px
   2K/QHD: 1920px bis 2559px
   4K/UHD: ab 2560px
   =========================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
svg,
video {
  max-width: 100%;
}

body {
  overflow-x: hidden;
}

/* ===========================
   HANDY
   =========================== */

@media (max-width: 600px) {
  .container,
  .content-page,
  .intro,
  .intro-features,
  .gallery-page-main,
  .guestbook-page,
  .spots-page {
    width: 100%;
    padding-left: 14px;
    padding-right: 14px;
  }

  body:not(.home-page) h1,
  .gallery-hero h1,
  .spots-hero h1,
  .guestbook-hero h1,
  .content-card h1 {
    font-size: 1.55rem;
    line-height: 1.25;
  }

  .main-nav {
    padding-left: 8px;
    padding-right: 8px;
  }

  .nav-links {
    gap: 6px;
  }

  .home-hero {
    min-height: 280px;
  }

  .content-card,
  .guestbook-card,
  .spots-card {
    border-radius: 12px;
  }

  .site-footer {
    margin-top: 40px;
    font-size: 0.85rem;
  }
}

/* ===========================
   TABLET
   =========================== */

@media (min-width: 601px) and (max-width: 1024px) {
  .container,
  .content-page,
  .intro,
  .intro-features,
  .gallery-page-main,
  .guestbook-page,
  .spots-page {
    width: 100%;
    padding-left: 22px;
    padding-right: 22px;
  }

  .nav-links {
    gap: 18px;
  }

  .main-nav a {
    font-size: 0.96rem;
  }

  .home-hero {
    min-height: 330px;
  }
}

/* ===========================
   NORMALE DESKTOPS
   =========================== */

@media (min-width: 1025px) and (max-width: 1919px) {
  .container,
  .content-page,
  .intro {
    max-width: 900px;
  }

  .gallery-page-main,
  .spots-page {
    max-width: 1400px;
  }
}

/* ===========================
   2K / QHD
   =========================== */

@media (min-width: 1920px) and (max-width: 2559px) {
  .container,
  .content-page,
  .intro {
    max-width: 1040px;
  }

  .intro-features,
  .gallery-page-main,
  .spots-page {
    max-width: 1680px;
  }

  .home-hero {
    max-height: 640px;
  }

  .gallery-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .gallery-thumb {
    height: 260px;
  }
}

/* ===========================
   4K / UHD
   =========================== */

@media (min-width: 2560px) {
  body {
    font-size: 1.06rem;
  }

  .container,
  .content-page,
  .intro {
    max-width: 1120px;
  }

  .intro-features,
  .gallery-page-main,
  .spots-page {
    max-width: 1840px;
  }

  .home-hero {
    max-height: 720px;
  }

  .gallery-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .gallery-thumb {
    height: 280px;
  }
}