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

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

.topic-section {
  overflow-x: clip;
}

.topic-inner,
.topic-inner-home,
.topic-inner-7_s,
.topic-inner-8_i,
.topic-inner-9_c {
  max-width: calc(100% - 48px);
}

.brand img {
  width: min(300px, 70vw);
  height: auto;
}

.brand p {
  max-width: min(760px, calc(100vw - 32px));
  margin-left: auto;
  margin-right: auto;
}

.hotel-intro,
.hotel_preise,
.rest-intro,
.urlaub-card,
.stelle1,
.stelle2 {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.95fr);
}

.timeline-grid,
.timeline-grid-2_h_1,
.timeline-grid-2_h_2,
.timeline-grid-3_r_1,
.timeline-grid-3_r_2 {
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.hotel-image1,
.hotel-image2,
.hotel-image3,
.hotel_preise-image1,
.hotel_preise-image2,
.hotel_preise-image3,
.hotel_preise-image4,
.rest-image1,
.rest-image2,
.rest-image3,
.rest-image4,
.urlaub-image1,
.urlaub-image2,
.urlaub-image3,
.urlaub-image4,
.urlaub-image5,
.urlaub-image6,
.stelle1-image,
.stellen-image,
.home-urlaub-image {
  min-height: clamp(220px, 42vw, 420px);
}

#heroCarousel img {
  max-height: 72vh;
  object-fit: cover;
}

@media (max-width: 767.98px) {
	
.brand img {
  width: min(200px, 70vw);
}

  .topic-inner,
  .topic-inner-home,
  .topic-inner-7_s,
  .topic-inner-8_i,
  .topic-inner-9_c {
    width: min(100% - 32px, 1180px);
    max-width: calc(100% - 32px);
    padding-top: 58px;
    padding-bottom: 72px;
  }

  .content-strip {
    min-height: 76px;
    padding: 16px;
  }

  .haus-grid,
  .haus-section,
  .oeffnung-grid,
  .hotel-intro,
  .hotel_preise,
  .rest-intro,
  .urlaub-card,
  .stelle1,
  .stelle2,
  .timeline-heading,
  .timeline-grid,
  .timeline-grid-2_h_1,
  .timeline-grid-2_h_2,
  .timeline-grid-3_r_1,
  .timeline-grid-3_r_2 {
    grid-template-columns: 1fr;
  }

  .hotel-intro,
  .hotel_preise,
  .rest-intro,
  .urlaub-card,
  .stelle1,
  .stelle2 {
    gap: 22px;
    padding: 0 0 34px;
  }

  .stelle1,
  .stelle2 {
    gap: 0;
    padding: 0;
  }

  .rest-intro .rest-copy,
  .hotel-intro .hotel-copy,
  .hotel_preise .hotel_preise-copy,
  .urlaub-card .urlaub-text,
  .stelle1 .stelle1-text,
  .stelle2 .stelle2-text {
    text-align: center;
  }

  .stelle1-image,
  .stelle2-image {
    order: 1;
  }

  .stelle1-text,
  .stelle2-text {
    order: 2;
  }

  .rest-intro > :first-child:not([class*="image"]),
  .hotel-intro > :first-child:not([class*="image"]),
  .urlaub-card > :first-child:not([class*="image"]) {
    order: 2;
  }

  .rest-intro > [class*="image"],
  .hotel-intro > [class*="image"],
  .urlaub-card > [class*="image"] {
    order: 1;
  }

  .oeffnung-section .oeffnung-card {
    width: 100%;
    max-width: 760px;
    margin: 16px 0;
  }

  .oeffnung-card h3,
  .oeffnung-card p,
  .oeffnung-card span {
    overflow-wrap: anywhere;
  }

  .sustain-card {
    border-radius: 8px;
  }

  .card-content {
    padding: 28px;
  }

  .sustain-card img {
    min-height: 260px;
  }
}

@media (max-width: 575.98px) {
  .brand h1 {
    font-size: clamp(2.4rem, 11vw, 4.6rem);
    line-height: 1;
  }

  .brand-mark {
    font-size: clamp(2rem, 11vw, 3.4rem);
  }

  .brand p {
    font-size: 0.78rem;
    letter-spacing: var(--tracking-label);
  }
	
.brand img {
  width: min(150px, 70vw);
  height: auto;
}

  .home-urlaub-intro p {
    font-size: 1rem;
    line-height: 1.6;
  }

  .oeffnung-card {
    padding: clamp(24px, 8vw, 32px);
  }

  .urlaub-intro {
    font-size: 1.05rem;
    line-height: 1.5;
  }

  .topic-title,
  .topic-title-5_n {
    font-size: clamp(1.7rem, 12vw, 3rem);
  }

  .timeline-card,
  .timeline-card-2_h_1,
  .timeline-card-2_h_2,
  .timeline-card-3_r_1,
  .timeline-card-3_r_2,
  .haus-card {
    min-height: 220px;
    padding: 22px;
  }

  .contact-form {
    padding: 24px !important;
  }
}