@import url('basis.css');
@import url('hero.css');
@import url('typograhy.css');
@import url('header.css');
@import url('komponenten.css');
@import url('buttons.css');
@import url('formulare.css');
@import url('footer.css');
@import url('utilities.css');


/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Max-Width (Mobile-First approach, checking existing queries) */
@media (max-width: 1024px) {
  .video-hero-container {
    height: 510px;
  }
  .video-hero {
    height: 525px;
  }
  .video-hero-bg {
    height: 510px;
    top: 0;
  }

  /* Geschenkkarte Mobile */
  .geschenkkarte {
    padding-top: var(--spacing-xl);
  }

  .geschenk-card {
    flex-direction: column !important;
    max-width: 100%;
    margin-top: 50px;
  }

  .card-image {
    order: 1;
    min-height: 250px;
  }

  .card-image img {
    position: relative;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-30px);
    width: 280px;
    height: 280px;
  }

  .card-content {
    order: 2;
    padding: var(--spacing-l);
    text-align: center;
  }

  .card-buttons {
    align-items: center;
    margin-top: 2rem;
  }

  .card-buttons .btn {
    max-width: 100%;
    width: 100%;
  }

  .geschenkkarte .wave {
    top: -40px;
  }
  .geschenkkarte-header {
    text-align: center;
  }
  .geschenkkarte-header .text {
    margin-bottom: var(--spacing-l);
  }
  .geschenkkarte-header h2 {
    font-size: 2rem;
  }
}

@media (max-width: 600px) {
  .checkbox-grid {
    grid-template-columns: 1fr;
  }
}

/* Min-Width (Standard Desktop Breakpoints) */
@media screen and (min-width: 60rem) {
  body {
    padding: 0;
  }
}

@media (min-width: 768px) {
  .geschenkkarte .wave {
    top: -60px;
  }
  .geschenk-card {
    margin: 40px auto;
  }
}

@media (min-width: 1108px) {
  .geschenkkarte .wave {
    top: -80px;
  }
  .geschenk-card {
    max-width: 1108px;
  }
  .card-image img {
    width: 500px;
    height: 500px;
    transform: translateX(-50%) translateY(-60px);
  }
}

@media (min-width: 900px) {
  .header-wave {
    top: -70px;
    margin-bottom: -80px;
  }
}

@media (min-width: 1086px) {
  /*.header-wave {*/
  /*  top: -90px;*/
  /*  margin-bottom: -90px;*/
  /*}*/
}

@media (min-width: 1250px) {
  /*.header-wave {*/
  /*  top: -135px;*/
  /*  margin-bottom: -135px;*/
  /*}*/
}

@media (min-width: 1300px) {
  .main .container {
    margin-top: -50px;
  }

}

@media (min-width: 1380px) {
  .header-wave {
    top: -115px;
    margin-bottom: -145px;
  }
}

@media (min-width: 1442px) {
  .header-wave {
    top: -100px;
    margin-bottom: -100px;
  }
}

@media (min-width: 1550px) {
  .header-wave {
    top: -115px;
    margin-bottom: -115px;
  }
}

@media (min-width: 1600px) {
  .header-wave {
    top: -130px;
    margin-bottom: -130px;
  }
  .main .container {
    max-width: 65%;
  }
}

@media (min-width: 1800px) {

  .header-wave {
    top: -115px;
    margin-bottom: -150px;
  }
  .footer-wave {
    top:105px;
  }
}


.meldung .main {
  padding-top: 0;
}
.about .column figure {
  min-height: 350px;
}
.about .column img {
  /*border-radius:850px 600px 250px 250px*/
  min-height: 350px;
}
.about .footer .column img {
  min-height: 0;
}

/* Clip the layout images into the blob masks defined in footer.php:
   the left column of each row uses the mirrored mask, the right column
   uses the original. (The clip-path takes over from the border-radius
   above as the visible shape.) */
.about-detail .column:first-child img {
  clip-path: url(#maske-links);
}

.about-detail .column:last-child img {
  clip-path: url(#maske-rechts);
}

/*Responsive*/
/* Basis: Mobile first, kleine Smartphones ab 320 px */

/* Mobile default */
.section {
  padding: 40px 20px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.footer .grid {
  grid-template-columns: repeat(12, 1fr);
}

.footer .grid > .column {
  grid-column: span 6;
}

@media (max-width: 767px) {
  .footer .grid {
    grid-template-columns: 1fr;
  }
  .footer .grid > .column {
    grid-column: auto;
  }
}

.footer-top {
  padding: 3rem 0;
}

.footer {
  padding-top: 4rem;
}

.footer-heart {
  max-width: 90%;
}

/* Große Smartphones */
@media (min-width: 390px) {
  .section {
    padding-inline: 24px;
  }
}

/* Sehr große Smartphones */
@media (min-width: 430px) {
  .section {
    padding-inline: 28px;
  }
}

/* Tablet vertikal */
@media (min-width: 768px) {
  .video-hero-stoerer {
    left: 10px;
    top: 460px;
    width: 250px;
  }

  .video-hero-stoererkontakt {
    top: 540px;
  }

  .section {
    padding: 64px 48px;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }

  .footer-top {
    padding: 4rem 0;
  }

  .footer {
    padding-top: 0;
  }

  .footer-heart {
    max-width: 60%;
  }

  .logo-kreis {
    width: 180px;
    height: 180px;
  }

  .logo-img {
    width: 70px;
    height: 130px;
  }
}

/* iPad Air / iPad Pro 11 vertikal */
@media (min-width: 834px) {
  .section {
    padding-inline: 64px;
  }
}

/* Großes iPad / Desktop Einstieg */
@media (min-width: 1024px) {
  .video-hero-stoererkontakt {
    top: 650px;
    width: 100px;
  }

  .video-hero-stoerer {
    left: 130px;
    top: 540px;
    width: 350px;
  }
  .section {
    padding: 80px 72px;
  }

  .grid {
    grid-template-columns: repeat(12, 1fr);
  }
  .grid > .column {
    grid-column: span var(--columns);
  }

  .footer-top {
    padding: 6rem 0;
  }

  .footer {
    padding-top: 0;
  }

  .logo-kreis {
    width: 214px;
    /*height: 214px;*/
  }

  .logo-img {
    width: 180px;
    height: 150px;
  }

  .footer-heart {
    max-width: 40rem;
  }
}