/*!
 * Blindwerk Project - Ferienwohnung Rhodt unter Rietburg - https://blindwerk.de/)
 * Copyright 2024 blindwerk - neue medien GmbH
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
  --body-font-family: "Roboto", verdana, sans-serif;
  --body-font-size: 28px;
  --body-font-size-mobile: 24px;
  --body-font-size-tablet: 24px;
  --body-bg: rgb(255,255,255);
  --body-bg-color: var(--body-bg);
  --body-color: #000000;
  --footer-bg: #000000;
  --footer-color: #FFFFFF;
  --footer-font-size:16px;
  --button-bg: #000000;
  --button-border: 1px solid #000000;
  --button-color: #FFFFFF;
  --button-radius: 2rem;
  --button-font-size: 24px;
  --button-font-size-tablet: 22px;
  --button-font-size-mobile: 20px;
  --button-color-hover: #000000;
  --button-bg-hover: #FFFFFF;
  --heading-font-family: "Playfair Display", sans-serif;
  --heading-font-size-h1: 150px;
  --heading-font-size-h2: 100px;
  --heading-font-size-h1-mobile: 65px;
  --heading-font-size-h2-mobile: 40px;
  --heading-font-size-h1-medium: 110px;
  --heading-font-size-h2-medium: 60px;
  --heading-font-size-h1-tablet: 130px;
  --heading-font-size-h2-tablet: 70px;
  --heading-font-line-height-h1: 1;
  --heading-font-line-height-h2: 1.1;
  --color-black: #000000;
  --color-white: #FFFFFF;
  --color-yellow: #FFFF00;
}

.container,
.container-fluid,
.container-xxl,
.container-xl,
.container-lg,
.container-md,
.container-sm {
  --fr-gutter-x: 1.5rem;
  --fr-gutter-y: 0;
  width: 100%;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 720px) {
  .container-sm, .container {
    max-width: 720px;
  }
}
@media (min-width: 960px) {
  .container-md, .container-sm, .container {
    max-width: 960px;
  }
}
@media (min-width: 1140px) {
  .container-lg, .container-md, .container-sm, .container {
    max-width: 1140px;
  }
}
@media (min-width: 1320px) {
  .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1320px;
  }
}
@media (min-width: 1600px) {
  .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
    max-width: 1600px;
  }
}
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: var(----body-color);
}
a:hover {
  text-decoration: underline;
}

p {
  line-height: 1.5;
}

.desktop {
  display: inherit;
}
@media (max-width: 959.98px) {
  .desktop {
    display: none !important;
  }
}

@media (min-width: 960px) {
  .mobile {
    display: none !important;
  }
}
.develop {
  --develop-border: 1px solid red;
  border-left: var(--develop-border);
  border-right: var(--develop-border);
}

.subpage a {
  text-decoration: underline;
}
.subpage nav a {
  text-decoration: none !important;
}

h1, h2 {
  font-family: var(--heading-font-family);
}
h1:first-child, h2:first-child {
  margin-top: unset;
}

h3, h4, h5 {
  font-family: var(--heading-font-family);
}

h1 {
  font-size: var(--heading-font-size-h1);
  line-height: var(--heading-font-line-height-h1);
  margin-bottom: 3rem;
}
@media (max-width: 1319.98px) {
  h1 {
    font-size: var(--heading-font-size-h1-tablet);
  }
}
@media (max-width: 959.98px) {
  h1 {
    font-size: var(--heading-font-size-h1-medium);
  }
}
@media (max-width: 719.98px) {
  h1 {
    font-size: var(--heading-font-size-h1-mobile);
  }
}

h2 {
  font-size: var(--heading-font-size-h2);
  line-height: var(--heading-font-line-height-h2);
}
@media (max-width: 1319.98px) {
  h2 {
    font-size: var(--heading-font-size-h2-tablet);
  }
}
@media (max-width: 959.98px) {
  h2 {
    font-size: var(--heading-font-size-h2-medium);
  }
}
@media (max-width: 719.98px) {
  h2 {
    font-size: var(--heading-font-size-h2-mobile);
  }
}

h3 {
  font-size: var(--heading-font-size-h3);
}
@media (max-width: 1319.98px) {
  h3 {
    font-size: var(--heading-font-size-h3-tablet);
  }
}
@media (max-width: 959.98px) {
  h3 {
    font-size: var(--heading-font-size-h3-medium);
  }
}
@media (max-width: 719.98px) {
  h3 {
    font-size: var(--heading-font-size-h3-mobile);
  }
}

h4 {
  font-size: var(--heading-font-size-h4);
}
@media (max-width: 1319.98px) {
  h4 {
    font-size: var(--heading-font-size-h4-tablet);
  }
}
@media (max-width: 959.98px) {
  h4 {
    font-size: var(--heading-font-size-h4-medium);
  }
}
@media (max-width: 719.98px) {
  h4 {
    font-size: var(--heading-font-size-h4-mobile);
  }
}

h5 {
  font-size: var(--heading-font-size-h5);
}
@media (max-width: 1319.98px) {
  h5 {
    font-size: var(--heading-font-size-h5-tablet);
  }
}
@media (max-width: 959.98px) {
  h5 {
    font-size: var(--heading-font-size-h5-medium);
  }
}
@media (max-width: 719.98px) {
  h5 {
    font-size: var(--heading-font-size-h5-mobile);
  }
}

.subpage h1 {
  --heading-font-size-h1: 110px;
  --heading-font-size-h1-tablet: 60px;
  --heading-font-size-h1-medium: 60px;
  --heading-font-size-h1-mobile: 50px;
  --heading-font-line-height-h1: unset;
  border-bottom: 2px solid var(--color-white);
  padding-top: 3rem;
  padding-bottom: 2rem;
}
.subpage h2 {
  --heading-font-size-h2: 60px;
  --heading-font-size-h2-tablet: 40px;
  --heading-font-size-h2-medium: 31px;
  --heading-font-size-h2-mobile: 30px;
  --heading-font-line-height-h2: unset;
}
.subpage h3 {
  --heading-font-size-h3: 40px;
  --heading-font-size-h3-tablet: 35px;
  --heading-font-size-h3-medium: 30px;
  --heading-font-size-h3-mobile: 29px;
  --heading-font-line-height-h3: unset;
}
.subpage h4 {
  --heading-font-size-h4: 28px;
  --heading-font-size-h4-tablet: 28px;
  --heading-font-size-h4-medium: 24px;
  --heading-font-size-h4-mobile: 24px;
  --heading-font-line-height-h4: unset;
}
.subpage h5 {
  --heading-font-size-h5: 28px;
  --heading-font-size-h5-tablet: 28px;
  --heading-font-size-h5-medium: 24px;
  --heading-font-size-h5-mobile: 24px;
  --heading-font-line-height-h5: unset;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--body-font-family);
  font-size: var(--body-font-size);
  background-color: var(--body-bg);
}
@media (max-width: 1319.98px) {
  body {
    --body-font-size: var(--body-font-size-tablet);
    font-size: var(--body-font-size);
  }
}
@media (max-width: 719.98px) {
  body {
    --body-font-size: var(--body-font-size-mobile);
    font-size: var(--body-font-size);
  }
}

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.pdl {
  padding-left: 15.3rem;
}
@media (max-width: 1599.98px) {
  .pdl {
    padding-left: 8rem;
  }
}
@media (max-width: 1139.98px) {
  .pdl {
    padding-left: 2rem;
  }
}
@media (max-width: 959.98px) {
  .pdl {
    padding-left: 10%;
  }
}
@media (max-width: 719.98px) {
  .pdl {
    padding-left: 5%;
  }
}

.pdr {
  padding-right: 15.3rem;
}
@media (max-width: 1319.98px) {
  .pdr {
    padding-right: 0;
  }
}

@media (max-width: 959.98px) {
  .subpage .pdl {
    padding-left: 1rem;
  }
}
.subpage ol {
  padding-left: 2rem;
}
.subpage ol li {
  margin: 1rem 0;
}
.subpage ol li::marker {
  font-family: var(--heading-font-family);
  font-size: var(--body-font-size);
}
@media (max-width: 1319.98px) {
  .subpage ol li::marker {
    --body-font-size: var(--body-font-size-tablet);
    font-size: var(--body-font-size);
  }
}
@media (max-width: 719.98px) {
  .subpage ol li::marker {
    --body-font-size: var(--body-font-size-mobile);
    font-size: var(--body-font-size);
  }
}
.subpage ol li ol {
  padding-left: 1rem;
}

.main-bg {
  min-height: 100vh;
}

.bg {
  --bg-width-left: 45%;
  --bg-width-left-mobile: 80%;
  --bg-width-left-medium: 65%;
  --bg-width-left-tablet: 52%;
  --bg-width-left-large: 45%;
  --bg-width-right: 55%;
  --bg-width-right-mobile: 90%;
  --bg-width-right-medium: 80%;
  --bg-width-right-tablet: 63%;
  --bg-width-right-large: 55%;
}
.bg-left {
  top: 0;
  left: 0;
  width: var(--bg-width-left-large);
  height: 100%;
  clip-path: inset(0 0 0 0);
  overflow: hidden;
}
@media (max-width: 1599.98px) {
  .bg-left {
    width: var(--bg-width-left-tablet);
  }
}
@media (max-width: 959.98px) {
  .bg-left {
    width: var(--bg-width-left-medium);
  }
}
@media (max-width: 719.98px) {
  .bg-left {
    width: var(--bg-width-left-mobile);
  }
}
.bg-right {
  bottom: 0;
  right: 0;
  width: var(--bg-width-right-large);
}
@media (max-width: 1599.98px) {
  .bg-right {
    width: var(--bg-width-right-tablet);
  }
}
@media (max-width: 959.98px) {
  .bg-right {
    width: var(--bg-width-right-medium);
  }
}
@media (max-width: 719.98px) {
  .bg-right {
    width: var(--bg-width-right-mobile);
  }
}

.main-content {
  width: 100%;
  min-height: 100vh;
}

.content-wrap {
  min-height: 100vh;
}
.content-element {
  margin: 9rem 0;
}
.content-element:first-child {
  margin: 0 0 6rem 0;
}

#header {
  margin-top: 1.5rem;
}
#header .inner-wrap {
  top: 0;
  left: 0;
  right: 0;
  display: inline-grid;
  flex-direction: column;
  justify-items: end;
  margin-right: 8rem;
}
@media (max-width: 1599.98px) {
  #header .inner-wrap {
    margin-right: 0;
  }
}
#header .inner-wrap-headline {
  border-bottom: 2px solid var(--color-yellow);
  margin-top: 3rem;
  margin-bottom: 2rem;
}
@media (max-width: 959.98px) {
  #header .inner-wrap-headline {
    margin-top: 2rem;
    padding-right: 5%;
  }
}
#header .inner-wrap-content {
  width: 452px !important;
}
@media (max-width: 1599.98px) {
  #header .inner-wrap-content {
    width: 360px !important;
  }
}
@media (max-width: 959.98px) {
  #header .inner-wrap-content {
    margin: 0 auto;
  }
}
@media (max-width: 719.98px) {
  #header .inner-wrap-content {
    width: 330px !important;
  }
}
#header .inner-wrap-content .btn {
  margin-top: 5rem;
}
@media (max-width: 719.98px) {
  #header .inner-wrap-content .btn {
    margin-top: 2rem;
  }
}
#header .inner-wrap .wrap-all {
  width: fit-content;
}
@media (max-width: 719.98px) {
  #header .wrap-content {
    display: inline-grid;
    justify-items: center;
  }
}

#unterkunft .row-flex {
  display: inline-grid;
  grid-template-columns: 2fr 3fr;
  gap: 2rem;
  margin-left: 6rem;
}
@media (max-width: 1139.98px) {
  #unterkunft .row-flex {
    margin-left: 2rem;
  }
}
@media (max-width: 959.98px) {
  #unterkunft .row-flex {
    grid-template-columns: 1fr;
    width: 90%;
    margin-left: 10%;
  }
}
#unterkunft .text.text-top {
  display: inline-grid;
  align-content: space-between;
}
#unterkunft .text.text-bottom {
  display: inline-grid;
  align-content: end;
}
#unterkunft .text.text-bottom .text-wrap {
  margin-left: 2rem;
}
@media (max-width: 719.98px) {
  #unterkunft .text.text-bottom .text-wrap {
    margin-left: unset;
  }
}
#unterkunft .text.text-bottom .text-wrap p {
  max-width: 465px;
  margin-bottom: 2rem;
}
@media (max-width: 719.98px) {
  #unterkunft .text.text-bottom .text-wrap p {
    max-width: unset;
    margin-bottom: inherit;
  }
}
#unterkunft .text p:first-child {
  margin-top: 0;
}
#unterkunft .list.list-location {
  margin: 0;
  padding: 0;
  list-style: none;
}
#unterkunft .list.list-location li {
  padding-left: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--color-yellow);
}
@media (max-width: 1599.98px) {
  #unterkunft .list.list-location li {
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
#unterkunft .img.img-bottom {
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (max-width: 719.98px) {
  #unterkunft .img.img-bottom {
    gap: 1rem;
  }
}
#unterkunft .button-wrap {
  margin-top: 6rem;
  margin-left: 30%;
}
@media (max-width: 719.98px) {
  #unterkunft .button-wrap {
    margin-top: 2rem;
    margin-left: 10%;
  }
}

#aktivitaeten .row-flex {
  display: inline-grid;
  gap: 2rem;
  margin-left: 6rem;
}
@media (max-width: 959.98px) {
  #aktivitaeten .row-flex {
    grid-template-columns: 1fr;
    width: 90%;
    margin-left: 10%;
  }
}
#aktivitaeten .row-flex.top {
  grid-template-columns: 1fr;
}
#aktivitaeten .row-flex.bottom {
  grid-template-columns: 3fr 4fr;
}
@media (max-width: 959.98px) {
  #aktivitaeten .row-flex.bottom {
    grid-template-columns: 1fr;
  }
}
#aktivitaeten .wrap-content {
  display: inline-grid;
  gap: 2rem;
}
#aktivitaeten .text.text-bottom {
  display: inline-grid;
  align-content: center;
}
#aktivitaeten .text.text-bottom p {
  max-width: 450px;
  margin-bottom: 2rem;
}
#aktivitaeten .img.img-bottom {
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 719.98px) {
  #aktivitaeten .img.img-bottom {
    gap: 1rem;
  }
}
#aktivitaeten .button-wrap {
  margin-top: 2rem;
  margin-left: 6rem;
}
@media (max-width: 719.98px) {
  #aktivitaeten .button-wrap {
    margin-left: 10%;
  }
}

#kontakt .row-flex {
  display: inline-grid;
  gap: 2rem;
  margin-left: 6rem;
  grid-template-columns: 1fr 2fr;
}
@media (max-width: 1599.98px) {
  #kontakt .row-flex {
    grid-template-columns: 1fr 3fr;
  }
}
@media (max-width: 959.98px) {
  #kontakt .row-flex {
    grid-template-columns: 1fr;
    width: 90%;
    margin-left: 10%;
  }
}
#kontakt .list.list-contact {
  margin: 0;
  padding: 0;
  list-style: none;
}
#kontakt .list.list-contact li {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  padding-left: 2rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid var(--color-white);
}
@media (max-width: 1599.98px) {
  #kontakt .list.list-contact li {
    padding-left: 1.5rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }
}
@media (max-width: 959.98px) {
  #kontakt .list.list-contact li {
    padding-left: 0;
  }
}
#kontakt .img.img-left {
  display: inline-grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

img.header {
  display: flex;
  width: 920px;
  height: 800px;
  object-fit: cover;
  object-position: bottom;
  border-radius: 0 0.5rem 0.5rem 0;
}
@media (max-width: 1319.98px) {
  img.header {
    width: 730px;
    height: 750px;
  }
}
@media (max-width: 1139.98px) {
  img.header {
    width: 550px;
    height: 720px;
  }
}
@media (max-width: 959.98px) {
  img.header {
    width: 95%;
    height: 500px;
  }
}
@media (max-width: 719.98px) {
  img.header {
    width: 95%;
    height: 450px;
  }
}
img.header-location {
  display: flex;
  width: 100%;
  height: 642px;
  object-fit: cover;
  border-radius: 0.5rem 0 0 0.5rem;
}
@media (max-width: 1319.98px) {
  img.header-location {
    height: 520px;
  }
}
@media (max-width: 719.98px) {
  img.header-location {
    height: 350px;
  }
}
img.header-activity {
  display: flex;
  width: 100%;
  height: 642px;
  object-fit: cover;
  object-position: left;
  border-radius: 0.5rem 0 0 0.5rem;
}
@media (max-width: 1319.98px) {
  img.header-activity {
    height: 520px;
  }
}
@media (max-width: 719.98px) {
  img.header-activity {
    height: 350px;
  }
}
img.sample-location {
  display: flex;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 0.5rem;
}
img.sample-activity {
  display: flex;
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: left;
  border-radius: 0.5rem 0 0 0.5rem;
}
@media (max-width: 1599.98px) {
  img.sample-activity {
    height: 330px;
  }
}
@media (max-width: 1319.98px) {
  img.sample-activity {
    height: 285px;
  }
}
@media (max-width: 1319.98px) {
  img.sample-activity {
    height: 300px;
  }
}
@media (max-width: 719.98px) {
  img.sample-activity {
    height: 210px;
  }
}
img.contact {
  border-radius: 0.5rem;
  object-fit: cover;
}
@media (max-width: 1599.98px) {
  img.contact {
    display: flex;
    width: 100%;
    height: auto;
  }
}
@media (max-width: 959.98px) {
  img.contact {
    height: 480px;
    object-fit: cover;
    object-position: center;
    border-radius: 0.5rem 0 0 0.5rem;
  }
}
@media (max-width: 719.98px) {
  img.contact {
    height: 380px;
  }
}

.btn {
  display: flex;
  width: max-content;
  text-decoration: none;
  padding: 1rem 4rem;
  border-radius: var(--button-radius);
  font-size: var(--button-font-size);
}
@media (max-width: 1319.98px) {
  .btn {
    font-size: var(--button-font-size-tablet);
  }
}
@media (max-width: 719.98px) {
  .btn {
    font-size: var(--button-font-size-mobile);
  }
}
.btn-default {
  color: var(--button-color);
  background-color: var(--button-bg);
  border: var(--button-border);
}
.btn-default:hover {
  color: var(--button-color-hover);
  background-color: var(--button-bg-hover);
}

.navbar {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
@media (max-width: 959.98px) {
  .navbar.pdl {
    padding-top: 8px;
    padding-left: 0;
  }
}
.navbar-mainnavigation {
  min-height: 55px;
}
.navbar-collapse {
  flex-basis: 100%;
  flex-grow: 1;
  align-items: center;
}
@media (min-width: 960px) {
  .navbar-collapse {
    display: flex !important;
    flex-basis: auto;
  }
}
.navbar-nav {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
@media (min-width: 960px) {
  .navbar-nav {
    flex-direction: row;
    gap: 2rem;
  }
}
.nav-footer {
  display: flex;
  flex-direction: row;
  padding-left: 0;
  margin-bottom: 0;
  margin-top: 0;
  list-style: none;
  gap: 2rem;
  justify-content: end;
}
@media (max-width: 1319.98px) {
  .nav-footer {
    justify-content: center;
  }
}
.nav-footer .nav-link {
  text-decoration: none;
  color: var(--footer-color);
}
.nav-link {
  text-decoration: unset;
  font-size: 18px;
  color: var(--body-color);
}
.nav-link:hover {
  text-decoration: underline !important;
}

.collapse:not(.show) {
  display: none;
}

.show {
  height: max-content;
  transition: 200ms ease-in-out;
}

.navbar-toggler {
  --button-navbar-toggler-padding-x: 0;
  --button-navbar-toggler-padding-y: 0;
  --button-navbar-toggler-border-color: transparent;
  --button-navbar-toggler-border-width: 0;
  cursor: pointer;
  background-color: transparent;
  border: none;
}
@media (min-width: 960px) {
  .navbar-toggler {
    display: none;
  }
}
.navbar-toggler:focus {
  box-shadow: unset;
}
.navbar-toggler:focus-visible {
  border: unset;
  box-shadow: unset;
}
.navbar-toggler-item {
  --button-navbar-toggler-width: 40px;
  --button-navbar-toggler-height: 3px;
  --button-navbar-toggler-gap: 8px;
  --button-navbar-toggler-foreground: #333;
  --button-navbar-toggler-background: #fff;
  --button-navbar-toggler-margin: 10px 5px;
  --button-navbar-toggler-margin-collapsed: 10px 10px;
  --button-navbar-toggler-animation-timing: 150ms ease-in-out;
  --button-navbar-toggler-c-height: calc(var(--button-navbar-toggler-height) * 3 + var(--button-navbar-toggler-gap) * 2);
  --button-navbar-toggler-x-width: calc(var(--button-navbar-toggler-c-height) * 1.41421356237);
  display: flex;
  flex-direction: column;
  gap: var(--button-navbar-toggler-gap);
  width: max-content;
  cursor: pointer;
  margin: var(--button-navbar-toggler-margin);
}
.navbar-toggler-item::before, .navbar-toggler-item::after, .navbar-toggler-item span {
  content: "";
  width: var(--button-navbar-toggler-width);
  height: var(--button-navbar-toggler-height);
  background-color: var(--button-navbar-toggler-foreground);
  transform-origin: left center;
  transition: opacity var(--button-navbar-toggler-animation-timing), width var(--button-navbar-toggler-animation-timing), rotate var(--button-navbar-toggler-animation-timing), translate var(--button-navbar-toggler-animation-timing);
}
.navbar-toggler-item.cross::before {
  rotate: 45deg;
  width: var(--button-navbar-toggler-x-width);
  translate: 0 calc(var(--button-navbar-toggler-height) / -2);
}
.navbar-toggler-item.cross::after {
  rotate: -45deg;
  width: var(--button-navbar-toggler-x-width);
  translate: 0 calc(var(--button-navbar-toggler-height) / 2);
}
.navbar-toggler-item.cross span {
  opacity: 0;
  width: 0;
}

@media (max-width: 959.98px) {
  .navigation-main {
    position: relative;
  }
  .navigation-main .navbar-nav {
    width: 95%;
    background-color: var(--color-white);
  }
  .navigation-main .nav-item {
    border-bottom: 2px solid var(--color-yellow);
  }
  .navigation-main .nav-item:last-child {
    border-bottom: none;
  }
  .navigation-main .nav-text {
    display: block;
    padding: 1rem 0 1rem 2rem;
  }
  .navbar-toggler {
    margin-left: 1rem;
    padding: 0.5rem 0 0 0;
  }
}
footer {
  background-color: var(--footer-bg);
  color: var(--footer-color);
  font-size: var(--footer-font-size);
}
footer .inner-wrap {
  padding: 1.6rem 0;
}
footer .nav-link {
  font-size: var(--footer-font-size);
}