:root {
    --bs-body-line-height: 1.7;
    --bs-body-font-size: 1.15rem;

    --color-brown: #6b5d5b;
    --bs-primary: var(--color-brown);
    --bs-secondary: #e59750;

    --bs-primary-botton: var(--color-brown);
    --bs-border-radius-lg: 0;

    --bs-dark-rgb: 107, 93, 91;
    --bs-light-rgb:  248, 249, 250;
    --bs-light-bg-rgb:  234, 224, 215;

    --css--style--global--content-size: 960px;
    --css--style--global--content-text-size: 790px;
    --css--style--header-border: rgb(var(--bs-light-rgb));
    --css--style--header-border-after: var(--bs-primary);
}

.btn-primary:hover {
    color: var(--bs-secondary);
}

[data-css-bg=dark] {
    --bs-primary: var(--bs-light-rgb);
    --bs-btn-border-color: var(--bs-btn-color);

    background-color: rgb(var( --bs-dark-rgb));
    color: rgb(var(--bs-light-rgb));
}

[data-css-bg=light] {
    --bs-primary: #6b5d5b;
    --bs-body-color: black;
    --css--style--header-border: var(--bs-primary);
    --css--style--header-border-after: rgb(var(--bs-light-rgb));

    background-color: rgb(var( --bs-light-rgb));
}

[data-css-bg=light-bgr] {
    --bs-primary: black;
    --bs-body-color: black;
    --css--style--header-border: var(--color-brown);
    --css--style--header-border-after: rgb(var(--bs-light-bg-rgb));

    background-color: rgb(var( --bs-light-bg-rgb));
}


.btn-primary {
    --bs-btn-bg: var(--bs-primary-botton);
    --bs-btn-border-color: var(--bs-primary-botton);
    --bs-btn-hover-bg: var(--bs-primary-botton);
    --bs-btn-hover-border-color: var(--bs-secondary);
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-bg: var(--bs-primary-botton);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-bg: var(--bs-primary-botton);
    --bs-btn-disabled-border-color: var(--bs-primary-botton);
}

.bg-dark .btn-primary {
    --bs-btn-border-color: white;
}

.btn-lg {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: .75rem;
    --bs-btn-font-size: 1rem;
    --bs-btn-border-radius: 0;
}

/* arvo-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Arvo';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/arvo-v22-latin/arvo-v22-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* arvo-italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Arvo';
    font-style: italic;
    font-weight: 400;
    src: url('../fonts/arvo-v22-latin/arvo-v22-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* arvo-700 - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Arvo';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/arvo-v22-latin/arvo-v22-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* arvo-700italic - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Arvo';
    font-style: italic;
    font-weight: 700;
    src: url('../fonts/arvo-v22-latin/arvo-v22-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

body {
    font-family: 'Arvo', "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
    font-weight: 400;
    padding-top: 55px;
    padding-bottom: 0;
    overflow-x: hidden;
}

.container-box {
    font-size: 1rem;
}

.container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.row {
    padding-top: 6.75rem;
    padding-bottom: 5.75rem;
}

main ul {
    list-style-type: none;
    padding-left: 1.25rem;
}

main li:before {
    content: "- ";
    margin: 0 0.25rem 0 -1rem;
}

#gartenwohnung,
#mit-hund,
#aktivitaeten,
#kontakt {
    scroll-margin: 3rem 0 0 0;
}

#gartenwohnung {
    scroll-margin: 4rem 0 0 0;
}

@media (min-width: 1400px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1200px;
    }
}

body .container-text,
body .container-box {
    max-width: var(--css--style--global--content-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

body .container-text {
    max-width: var(--css--style--global--content-text-size);
    margin-left: auto !important;
    margin-right: auto !important;
}

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
    text-transform: uppercase;
    color: var(--bs-primary);
}

h2, .h2 {
    margin-bottom: 2rem;
    text-transform: none;
}

h3, .h3 {
    letter-spacing: 2px;
}

b, strong {
    font-weight: 700;
}

@media (min-width: 1200px) {
    .home h1 {
        font-size: 3.25rem;
    }
}

.home .teaser {
    font-size: 1.5rem;
}

.btn-buchen {
    font-size: .75rem;
    padding: .75em 1em;
    margin: 0 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

a {
    color: #000000;
    text-decoration: none;
}
a:hover,
a.active,
.navbar-nav .nav-link.active {
    color: var(--bs-secondary);
}

.carousel {
    margin-bottom: 0 !important;
}

.button-container {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Optional: Buttons anpassen */
.button-container button {
    padding: 10px 20px;
    border: 1px solid #ccc;
    background-color: #f0f0f0;
    cursor: pointer;
}

.half-a-border-on-bottom {
    border-bottom: 1px solid var(--css--style--header-border);
    position: relative;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
}
.half-a-border-on-bottom:after {
    padding:0;
    margin:0;
    display:block;
    content: "";
    width: 75%;
    height: 1.1px;
    background-color: var(--css--style--header-border-after);
    position: absolute;
    right:0;
    bottom:-1px;
}
.media-text {
    max-width: 100%;
    width: 100%;

    box-sizing: border-box;
    direction: ltr;
    display: grid;
    grid-template-columns: 50% 1fr;
    grid-template-rows: auto;
}

.media-text.has-media-on-the-right {
    grid-template-columns: 1fr 50%;
}
.media-text > .media-text__media {
    grid-column: 1;
    grid-row: 1;
    margin: 0;
}
.media-text.has-media-on-the-right > .media-text__media {
    grid-column: 2;
    grid-row: 1;
}
.media-text .media-text__content {
    width: 100%;
    max-width: 600px;
    justify-self: start;
    grid-column: 2;
    grid-row: 1;
    padding: 0;
}
.media-text .media-text__content > div,
.media-text.has-media-on-the-right .media-text__content > div {
    padding: 4rem;
}

.media-text.has-media-on-the-right .media-text__content {
    max-width: 600px;
    justify-self: end;
    grid-column: 1;
    grid-row: 1;
}

.media-text > .media-text__content,
.media-text > .media-text__media {
    align-self: center;
}

.media-text.has-media-on-the-right > .media-text__media {
    grid-column: 2;
    grid-row: 1;
    margin: 0;
    height: auto;
}

.media-text__media img, .media-text__media video {
    height: auto;
    max-width: unset;
    vertical-align: middle;
    width: 100%;
}

.media-text__media,
.media-text__media img {
    height: 100% !important;
    overflow: hidden;
}

.media-text__media img {
    object-fit: cover;
}

.bgr-strand,
.bgr-gartenwohnung {
    object-fit: cover;
}
.galery-wrapper {
    overflow: hidden;
}
.galery {
    margin-left: calc((100% - 960px) / 2) !important;
    margin-right: auto !important;
    max-width: 100% !important;
    display: flex;
    flex-wrap: wrap;
    padding-top: 0;
    padding-bottom: 0;
}
.galery .row {
    padding-top: 0;
    padding-bottom: 0;
}

.galery .inner-row {
    width: 1920px;
    transform: translate3d(-480px, 0px, 0px);
}
.galery .col {
    width: 480px !important;
    float: left;
}

footer,
footer .h3,
footer a {
    color: rgb(var(--bs-light-bg-rgb));
}

.aktivitaeten .media-text {
    border-bottom: calc(var(--bs-gutter-x)*1) solid rgb(var( --bs-light-rgb));
    overflow: hidden;
}

.aktivitaeten .media-text.has-media-on-the-right .media-text__content > div,
.aktivitaeten .media-text .media-text__media > div {
    border-right: calc(var(--bs-gutter-x)*.5) solid rgb(var( --bs-light-rgb));
    border-left: 0 none;
    height: 100% !important;
}
.aktivitaeten .media-text.has-media-on-the-right .media-text__media > div,
.aktivitaeten .media-text .media-text__content > div {
    border-left: calc(var(--bs-gutter-x)*.5) solid rgb(var( --bs-light-rgb));
    border-right: 0 none;
    height: 100% !important;
    width: 100%;
}

.media-text-wrapper {
    margin: 0 auto;
    max-width: 1920px;
}

@media (max-width: 1023px) {
    .galery {
        max-width: var(--css--style--global--content-size) !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .galery .inner-row {
        width: 100%;
        max-width: 960px;
        transform: none;
    }
    .galery .col {
        width: 50% !important;
    }

    .media-text .media-text__content .d-flex {
        display: block !important;
    }

    .media-text.has-media-on-the-right,
    .media-text {
        grid-template-columns: 100% 1fr !important;
        border-bottom: none 0 !important;
    }
    .media-text.has-media-on-the-right .media-text__content,
    .media-text .media-text__content {
        max-width: none;
        width: 100%;
        word-wrap: break-word;
    }
    .media-text > .media-text__media {
        grid-column: 1;
        grid-row: 1;
    }
    .media-text .media-text__content {
        grid-column: 1;
        grid-row: 2;
    }

    .media-text.has-media-on-the-right .media-text__content {
        grid-column: 1;
        grid-row: 2;
    }
    .media-text.has-media-on-the-right > .media-text__media {
        grid-column: 1;
        grid-row: 1;
    }

    .aktivitaeten .media-text.has-media-on-the-right .media-text__content,
    .aktivitaeten .media-text .media-text__media,
    .aktivitaeten .media-text.has-media-on-the-right .media-text__media,
    .aktivitaeten .media-text .media-text__content ,
    .aktivitaeten .media-text.has-media-on-the-right .media-text__media > div,
    .aktivitaeten .media-text .media-text__content > div,
    .aktivitaeten .media-text .media-text__media > div,
    .aktivitaeten .media-text.has-media-on-the-right .media-text__content > div {
        border-right: 0 none;
        border-left: 0 none;
    }
}

@media (max-width: 767px) {
    body {
        /* hyphens */
        -moz-hyphens: auto;
        -o-hyphens: auto;
        -webkit-hyphens: auto;
        -ms-hyphens: auto;
        hyphens: auto;
    }
    #aktivitaeten {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .container, .container-sm {
        max-width: 94%;
    }
    .gartenwohnung #gartenwohnung .flex-column {
        padding-bottom: 0 !important;
    }
    .gartenwohnung #aktivitaeten .flex-column {
        padding-top: 0 !important;
    }
    .gartenwohnung #lage ul {
        margin-top: 3rem;
    }
    .gartenwohnung #gartenwohnung .flex-column ul {
        margin-bottom: 0;
    }

    .media-text .media-text__content > div,
    .media-text.has-media-on-the-right .media-text__content > div {
        padding: 4rem 2.5rem;
    }

}
@media (max-width: 768px) {
    .bgr-strand img,
    .bgr-gartenwohnung img {
        width: 100% !important;
    }
}

@media (max-width: 991px) {
    .col {
        flex: auto;
    }

    body .container-text {
        max-width: 92% !important;
    }
}
@media (max-width: 576px) {
    .container, .container-sm {
        max-width: 94%;
    }
}

@media (min-width: 1024px) {
    .bgr-gartenwohnung,
    .bgr-strand {
        height: 468px !important;
    }
}

@media (min-width: 1200px) {
    /*.media-text .media-text__content > div {
        padding: 5rem 0 5rem 5rem;
    }
    .media-text.has-media-on-the-right .media-text__content > div {
        padding: 5rem 5rem 5rem 0;
    }*/

    .home .media-text.has-media-on-the-right .media-text__content > div {
        padding: 4rem 4rem 4rem 1rem;
    }
    .h3, h3 {
        font-size: 1.4rem;
    }
}