/* crimson-pro-300 - 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: 'Crimson Pro';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/crimson-pro-v28-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-pro-300italic - 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: 'Crimson Pro';
    font-style: italic;
    font-weight: 300;
    src: url('../Fonts/crimson-pro-v28-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-pro-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: 'Crimson Pro';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/crimson-pro-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-pro-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: 'Crimson Pro';
    font-style: italic;
    font-weight: 400;
    src: url('../Fonts/crimson-pro-v28-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* crimson-pro-500 - 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: 'Crimson Pro';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/crimson-pro-v28-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-300 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 300;
    src: url('../Fonts/fira-sans-v18-latin_latin-ext-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-300italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Sans';
    font-style: italic;
    font-weight: 300;
    src: url('../Fonts/fira-sans-v18-latin_latin-ext-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-regular - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 400;
    src: url('../Fonts/fira-sans-v18-latin_latin-ext-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Sans';
    font-style: italic;
    font-weight: 400;
    src: url('../Fonts/fira-sans-v18-latin_latin-ext-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-500 - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Sans';
    font-style: normal;
    font-weight: 500;
    src: url('../Fonts/fira-sans-v18-latin_latin-ext-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* fira-sans-500italic - latin_latin-ext */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Fira Sans';
    font-style: italic;
    font-weight: 500;
    src: url('../Fonts/fira-sans-v18-latin_latin-ext-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/***********************************************************************
 * Standardelemente  *
 * ********************************************************************/

/*
    sm              576
    md              768
    lg              992
    xl              1200
    xxl             1400
*/

/*
    black:          Menuschrift, h3, h4, p
    carbon-grey:    h1, h2, hr, underline, h5
    stonewall:      Fira Sans Book kursiv, Link
    cement:         Button Hintergrund, Footer dunkel
    platinum:       Footer Hell
    white-smoke:    Hintergrund Grau
*/

:root {
    --bs-carbon-grey: #5e5a58;
    --bs-carbon-grey-rgb: 94, 90, 88;

    --bs-stonewall: #978a74;
    --bs-stonewall-rgb: 151, 138, 116;


    --bs-cement: #aca594;
    /* Farbkontrast Links/Buttons */
    --bs-cement: #757165;
    --bs-cement-rgb: 117, 113, 101;

    --bs-platinum: #ebe7db;
    --bs-platinum-rgb: 235, 231, 219;
    --bs-white-smoke: #f8f6f2;
    --bs-white-smoke-rgb: 248, 246, 242;

    --bs-font-sans-serif: 'Fira Sans';
    --bs-body-font-size: 1rem;
    --bs-body-font-weight: 300;
    --bs-body-line-height: 1.625;
    --bs-body-color: var(--bs-black);
}

@media (min-width: 768px) {
    :root {
        --bs-body-font-size: 1.125rem;
    }

    /* 
        Fragen 16px Font-size für .row-2cols trifft alle 2 spaltigen Elemente auf der Startseite:
    
        Unsere Modelle (Text|Text)
        Klangliche Perfektion für das solistische Spiel (Bild|Text)
        Japanische Flötenbaukunst – auf höchstem Niveau (Text|Bild im Wechsel)
    
        .row-2cols entfernt
    */

    .row-cols-lg-3, .news-cards {
        font-size: 1rem;
    }
}


.bg-carbon-grey {
    background-color: var(--bs-carbon-grey);
}

.bg-stonewall {
    background-color: var(--bs-stonewall);
}

.bg-cement {
    background-color: var(--bs-cement);
}

.bg-platinum {
    background-color: var(--bs-platinum);
}

.bg-white-smoke {
    background-color: var(--bs-white-smoke);
}

/*html {
    hyphens: auto;
}*/

@media (min-width: 768px) {
    h1, h2, h3, h4, h5 {
        hyphens: manual;
    }
}


h1, h2 {
    font-family: 'Crimson Pro';
    font-weight: 400;
    color: var(--bs-carbon-grey);
}

h1 {
    font-size: calc(1.75rem + 1.5vw);
}

h2 {
    font-size: calc(1.75rem + 1.0vw);
}

h3 {
    font-weight: 500;
    font-size: 1.5rem;
}

h4, h5 {
    font-weight: 500;
    font-size: 1.125rem;
}

h5 {
    color: var(--bs-carbon-grey);
}

h5 {
    font-weight: 400;
    color: var(--bs-carbon-grey);
}

h1, h2, h3, h4, h5, h6 {
    /*margin-top: 1.5rem;*/
    margin-bottom: 1.5rem;
    line-height: 1.125;
}

h1.ce-headline-underline, h2.ce-headline-underline, h3.ce-headline-underline, h4.ce-headline-underline, h5.ce-headline-underline  {
    margin-bottom: 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-carbon-grey);
}

.teaser p {
    font-size: 1.125rem;
}

@media (min-width: 768px) {
    .teaser p {
        font-size: 1.25rem;
    }
}

main p.text-small {
    font-size: 1rem;
}

main p.text-large {
    font-size: 1.25rem;
}

.footer h4 {
    font-weight: 300;
    margin-bottom: 0.75rem;
}

main header, main p, main .accordion {
    max-width: 50rem;
}

@media (min-width: 992px) {
    main header, main p, main .accordion {
        max-width: 55rem;
    }
}

@media (min-width: 1200px) {
    main header, main p, main .accordion {
        max-width: 60rem;
    }
}

@media (min-width: 1400px) {
    main header, main p, main .accordion {
        max-width: 70rem;
    }
}

main p.text-center {
    max-width: none;
}

main a {
    text-decoration: underline;
}

a {
    color: var(--bs-black);
    text-decoration: none;
}

/* Links im Text fett ??? */
/*
.frame a {
    font-weight: 500;
}*/

.frame a:hover {
    text-decoration: underline;
}

.bg-platinum a {
    color: var(--black);
}

.bg-cement a, .bg-cement a:hover,
.bg-stonewall a, .bg-stonewall a:hover {
    color: white;
}

img {
    max-width: 100%;
    height: auto;
}

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

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

/*
    Bootstrap Grid
*/

.g-6,
.gx-6 {
    --bs-gutter-x: 5rem;
}
.g-6,
.gy-6 {
    --bs-gutter-y: 5rem;
}
.g-7,
.gx-7 {
    --bs-gutter-x: 8rem;
}
.g-7,
.gy-7 {
    --bs-gutter-y: 8rem;
}

.row-cols-1 .ce-right img {
    max-width: 5rem;
}

@media (min-width: 576px) {
    .g-sm-6,
    .gx-sm-6 {
        --bs-gutter-x: 5rem;
    }
    .g-sm-6,
    .gy-sm-6 {
        --bs-gutter-y: 5rem;
    }
    .g-sm-7,
    .gx-sm-7 {
        --bs-gutter-x: 8rem;
    }
    .g-sm-7,
    .gy-sm-7 {
        --bs-gutter-y: 5rem;
    }
    .g-sm-7,
    .gx-sm-7 {
        --bs-gutter-x: 8rem;
    }
    .g-sm-7,
    .gy-sm-7 {
        --bs-gutter-y: 8rem;
    }

    .row-cols-1 .ce-right img {
        margin-left: 0.25rem;
        max-width: none;
    }
}

@media (min-width: 768px) {
    .row-2cols {
        --bs-gutter-x: 4rem;
    }
    .g-md-6,
    .gx-md-6 {
        --bs-gutter-x: 5rem;
    }
    .g-md-6,
    .gy-md-6 {
        --bs-gutter-y: 5rem;
    }
    .g-md-7,
    .gx-md-7 {
        --bs-gutter-x: 8rem;
    }
    .g-md-7,
    .gy-md-7 {
        --bs-gutter-y: 8rem;
    }
}

@media (min-width: 992px) {
    .row-2cols {
        --bs-gutter-x: 6rem;
    }
    .g-lg-6,
    .gx-lg-6 {
        --bs-gutter-x: 5rem;
    }
    .g-lg-6,
    .gy-lg-6 {
        --bs-gutter-y: 5rem;
    }
    .g-lg-7,
    .gx-lg-7 {
        --bs-gutter-x: 8rem;
    }
    .g-lg-7,
    .gy-lg-7 {
        --bs-gutter-y: 8rem;
    }
}

@media (min-width: 1200px) {
    .row-2cols {
        --bs-gutter-x: 8rem;
    }
    .g-xl-6,
    .gx-xl-6 {
        --bs-gutter-x: 5rem;
    }
    .g-xl-6,
    .gy-xl-6 {
        --bs-gutter-y: 5rem;
    }
    .g-xl-7,
    .gx-xl-7 {
        --bs-gutter-x: 8rem;
    }
    .g-xl-7,
    .gy-xl-7 {
        --bs-gutter-y: 8rem;
    }
}

@media (min-width: 1400px) {
    .row-2cols {
        --bs-gutter-x: 10rem;
    }
    .g-xxl-6,
    .gx-xxl-6 {
        --bs-gutter-x: 5rem;
    }
    .g-xxl-6,
    .gy-xxl-6 {
        --bs-gutter-y: 5rem;
    }
    .g-xxl-7,
    .gx-xxl-7 {
        --bs-gutter-x: 8rem;
    }
    .g-xxl-7,
    .gy-xxl-7 {
        --bs-gutter-y: 8rem;
    }
}

/*
    Navigation
*/

.navbar-brand img {
    width: 22vw;
    max-width: 16rem;
    min-width: 14rem;
}

.navbar {
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: 1rem;
    --bs-navbar-toggler-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-font-size: 1.5rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2833, 37, 41, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    --bs-navbar-toggler-border-color: var(--bs-stonewall);
    --bs-navbar-toggler-focus-width: 0.125rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
}

.navbar-nav {
    --bs-nav-link-font-size: 1.125rem;
    --bs-nav-link-font-weight: 400;
}

.navbar-toggler{
    border-width: 2px;
}

.navbar-collapse {
    margin-top: 1rem;
}

.nav-item {
    position: relative;
}

.nav-item.show:after, .nav-item.active:after, .nav-item:hover::after {
    position: absolute;
    top: 2.5rem;
    left: 0;
    right: 0;
    border-bottom: 2px solid black;
    content: '';
}


@media (min-width: 768px) {
    .nav-item.show:after, .nav-item.active:after, .nav-item:hover::after {
        bottom: 0.5rem;
        right: var(--bs-navbar-nav-link-padding-x);
        left: var(--bs-navbar-nav-link-padding-x);
    }
}

.dropdown-menu {
    --bs-dropdown-font-size: 1.125rem;
    --bs-dropdown-link-hover-color: var(--bs-body-color);
    --bs-dropdown-link-hover-bg: var(--bs-white-smoke);
    --bs-dropdown-link-active-color: var(--bs-body-color);
    --bs-dropdown-link-active-bg: var(--bs-white-smoke);
    --bs-dropdown-link-disabled-color: var(--bs-tertiary-color);
    --bs-dropdown-border-width: 0;
    --bs-dropdown-border-radius: 0;
    --bs-dropdown-item-padding-y: 0.375rem;
    margin-left: 0.5rem;
    padding-top: 0;
    padding-bottom: 1rem;
}

@media (min-width: 768px) {
    .dropdown-menu {
        padding-top: 0.5rem;
        padding-bottom: 0;
    }
}

.nav-link:focus-visible {
    box-shadow: 0 0 0 0.125rem rgba(0, 0, 0, 0.75);
}

.dropdown-item {
    padding-left: 0.5rem;
    padding-right: 2rem;
    border-bottom: 1px solid black;
}

/* 
    Language Menu
*/

.navbar-lang {
    --bs-nav-link-padding-x: 1.5rem;
    --bs-navbar-nav-link-padding-x: var(--bs-nav-link-padding-x);
}
.navbar-lang .nav-item.show:after, .navbar-lang .nav-item.active:after, .navbar-lang .nav-item:hover::after {
    top: 2rem;
}

.navbar-lang .nav-item.show:after, .navbar-lang .nav-item.active:after, .navbar-lang .nav-item:hover::after {
    left: 2rem;
    right: var(--bs-nav-link-padding-x);
}

.navbar-lang .nav-link {
    padding-left: 2rem !important;
    background-image: url("../Images/lang-german.png");
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: left 50%;
}

.navbar-lang .nav-link.en {
    background-image: url("../Images/lang-usa.png");
}

/* 
    Header Image
*/

.header img {
    width: 100%;
    /*    height: 18rem;
        object-fit: cover;*/
}

/*@media (min-width: 768px) {
    .header img {
        height: 25rem;
    }
}

@media (min-width: 992px) {
    .header img {
        height: 38rem;
    }
}*/

.header p {
    font-family: 'Crimson Pro';
    font-weight: 400;
    font-size: calc(1.5rem + 1.25vw);
    line-height: 1.5;
    padding: .125rem 1rem;
    margin-bottom: .375rem;
    color: var(--bs-carbon-grey);
    background: var(--bs-white-smoke);
    background:  linear-gradient(to right, var(--bs-platinum), #fff);
}

/* 
    Footer
*/

.footer-columns {
    font-size: 1.125rem;
}
.footer-columns p {
    margin-bottom: 0.75rem;
}

.footer-columns img {
    height: 1.75rem;
    margin: 0 0.25rem 0.5rem 0;
}

.footer .nav {
    --bs-nav-link-font-weight: 400;
    --bs-nav-link-padding-x: 0;
    --bs-nav-link-padding-y: 0.25rem;
}

.footer .nav-link:after {
    content: '|';
    padding: 0 0.75rem;
}

.footer .nav-link:last-child:after {
    content: normal;
}

/***********************************************************************
 * Inhalte                                                         *
 * ********************************************************************/

/*
    Typo3 Inhaltselemente
*/

/* für gleiche Abstände von Inhalten mit Buttons bzw. Bilder weil diese einen Abstand nach unten erzeugen.
   Vergleiche 2col, Text/Text und TEXT/Bild mit Button */
.frame-type-text, .frame-type-image {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.container-xl > .frame-default {
    margin-top: 3rem;
    margin-bottom: 3rem;
}

/*
    News Cards
*/

.news-cards .card-img-top {
    border-bottom: 1px solid var(--bs-stonewall);
}

.news-cards .card-body {
    --bs-card-spacer-y: 0.5rem;
}

.news-cards h3 {
    font-size: 1rem;
    font-weight: 400;
    margin-top: 0.5rem;
}

.news-cards h3, .news-cards p {
    line-height: 1.5;
}

.news-cards .card-body p:last-child {
    margin-bottom: 0;
}

/*
    Testimonials
*/

.testimonials-cards .card-body img  {
    height: 7.5rem;
}

.testimonials-cards .card-body p  {
    font-size: 1.375rem;
    font-weight: 300;
    line-height: 1.25;
    width: 80%;
}

.testimonials-cards .card-body p:last-child {
    margin-bottom: 0;
}

/*
    FAQ
*/

.accordion-faq {
    --bs-accordion-active-color: var(--bs-accordion-btn-color);
    --bs-accordion-bg: transparent;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-border-color: var(--bs-stonewall);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-stonewall-rgb), 0.25);
}

.accordion-faq .accordion-button {
    font-weight: 500;
    font-size: 1.125rem;
}

.accordion-faq h3 {
    margin-top: 0.5rem;
}

/*
    Artists
*/

.artists-cards .card {
    --bs-card-cap-bg: var(--bs-white);
    --bs-card-cap-padding-x: 0;
    --bs-card-spacer-x: 0;
    --bs-card-border-width: 0;
    --bs-card-title-spacer-y: 0rem;
}

/***********************************************************************
 * Storefinder                                                         *
 * ********************************************************************/


.storefinder {
    margin-top: 20px;
    margin-bottom: 20px;
}


.storefinder ul.gme-addresses {
    height: 600px;
    overflow-y: auto;
    margin-left: -15px;
    padding: 0 15px;
}

.storefinder .gme-addresses li {
    margin: 1rem 0;
    padding: 1rem 0.5rem;
    color: #212529;
    border-left: 1rem solid transparent;
    background-color: #eee;
    list-style: none;
    transition: 0.5s all;
}

.storefinder .gme-addresses li:hover {
    background-color: #c0c0c0;
}

.storefinder .gme-addresses li:hover a {
    color: #fff;
    transition: 0.5s all;
}

.storefinder .gme-addresses li.basic {
    border-color: #7c7c7c;
}

.storefinder .gme-addresses li.professional {
    border-color: #9e6b05;
}

.storefinder .gme-addresses h3 {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.25rem;
}

.storefinder .gme-addresses p {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0;
}

.storefinder a, .storefinder a:hover, .storefinder a:active, .storefinder a:focus  {
    font-style: normal;
    text-decoration: none;
}

.gm-style .gm-style-iw {
    font-weight: 300;
    font-size: 0.875rem;
    line-height: 1.5;
    padding-left: 1rem;
    padding-right: 1rem;
}

.gm-style .gm-style-iw h3 {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.gm-style .gm-style-iw p {
    line-height: 1.5;
    margin-bottom: 0.5rem;
}

.js-gme-preview a {
    display: block;
    position: relative;
}
.js-gme-preview a button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background-color: #aca594;
    border-color: #aca594;
    cursor: pointer;
}

@media (min-width: 768px) {
    .js-gme-preview a button {
        font-size: 2.0rem;
    }
}

/***********************************************************************
 * Buttons *
 * ********************************************************************/


.btn-pdf {
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0px 5px 4px 45px;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 48px;
    border-radius: 0;
    background-image: url(../Images/bg_button_pdf.png);
    background-repeat: no-repeat;
}
.btn-pdf a, a.btn-pdf,
.btn-daten a, a.btn-daten,
a.HGbraunFontweiss {
    color: #fff;
    font-style: normal;
}
.btn-daten  {
    color: #fff;
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    border: 1px solid transparent;
    padding: 0px 5px 4px 45px;
    font-size: 15px;
    font-size: 0.9375rem;
    line-height: 48px;
    border-radius: 0;
    background-image: url(../Images/bg_button_daten.png);
    background-repeat: no-repeat;
}
.btn-pdf:focus, .btn-pdf:hover,
.btn-daten:focus, .btn-daten:hover{
    text-decoration: none;
}

.btn-pdf:focus, .btn-pdf.focus,
.btn-daten:focus, .btn-daten.focus{
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn-pdf.disabled, .btn-pdf:disabled,
.btn-daten.disabled, .btn-daten:disabled{
    opacity: .65;
}
.btn-primary {
    color: #fff;
    background-color: #aca594;
    border-color:#fff;
}
.btn-primary:hover, .btn-primary:not([disabled]):not(.disabled).active, .btn-primary:not([disabled]):not(.disabled):active, .show>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #af7d04;
    border-color: #fff;
    box-shadow: 0 0 0 0.2rem rgba(255,255,255,.5);
}
.HGbraunFontweiss {
    background-color: #aca594;
    color: #fff;
    padding: 0.5rem 1rem;
    font-style: normal;
}

.HGbraunFontweiss:hover {
    font-style: normal;
}

.btn-cement {
    color: #fff;
    background-color: var(--bs-cement);
    padding: 0.25rem 1rem;
    margin: 1.5rem 0 1.5rem 0;
    display: inline-block;
}

a.btn-cement, a.btn-cement:hover {
    text-decoration: none;
}

/* Wenn Bild/Text nebeneinander stehen dürfen die Buttons keine Abstände nach unten erzeugen */
@media (min-width: 768px) {
    .frame p:last-child .btn-cement {
        margin-bottom: 0;
    }
}

/***********************************************************************
 * Tabelle allgemein *
 * ********************************************************************/

.table {
    --bs-table-bg: transparent;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

table.contenttable {
    width: 100%;
    max-width: 100%;
    margin-bottom: 2rem;
    background-color: transparent;
    font-style: normal;
}

/***********************************************************************
 * Tabelle Flötensuche *
 * ********************************************************************/

.floetensuche {
    background-color: #fff;
    margin-left: 0;
    width: 100%;
    padding: 1.5em 0 0 0;
}
.floetensuche table.contenttable {
    width: 100%;
}
.floetensuche table.contenttable th {
    padding: 15px;
    background-color: #fff;
}
.floetensuche table.contenttable tr {
    border-bottom: 1px solid #000;
}

.floetensuche table.contenttable tr:nth-child(odd) {
    background-color: #f4efe3;
}
.floetensuche table.contenttable tr:nth-child(even) {
    background-color: #e3dccc;
}
.floetensuche table.contenttable td {
    padding: 15px 0 15px 15px;
    vertical-align: top;
    border-right: 0 solid #000;
}
.floetensuche table.contenttable td:nth-child(2) {
    width: 59%
}
.floetensuche table.contenttable td:last-child {
    border-right: 0 solid #000;
}
.floetensuche table.contenttable tr:first-child {
    background-color: #f5f5f5;
}

@media (min-width: 767px) {
    table.contenttable, .floetensuche table.contenttable {
        max-width: 60rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        -ms-overflow-style: -ms-autohiding-scrollbar;
    }
}

table.contenttable th, table.contenttable td, table td  {
    padding: 0.75rem;
    vertical-align: top;
}

table.contenttable th:last-child, table.contenttable td:last-child {
    padding: 0.75rem;
    vertical-align: top;
}

table.contenttable td, table td  {
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

table.contenttable td:last-child {
    border-top: 1px solid #000;
    border-right: 0px solid #000;
}

table.contenttable tr:last-child {
    border-bottom: 1px solid #000;
}

/***********************************************************************
 * Bilderformatierung/Galerie *
 * ********************************************************************/
.ce-center.ce-above img {
    width: 100%;
    height: auto;
}

.ce-border img {
    border: 1px solid #000;
    padding: 5px;
}

/* TODO Abstand Bilder nach unten, Ruth fragen (Modelle/Zubehör */

.ce-gallery .ce-row {
    margin-bottom: 0rem;
}

.ce-gallery .ce-row:last-child {
    margin-bottom: 0;
}

.ce-below .ce-gallery {
    margin-top: 10px;
    margin-bottom: 2rem;
}

.ce-column {
    margin-top: .5rem;
    margin-bottom: .5rem;
}
/*
.ce-above .ce-gallery {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .ce-above .ce-gallery {
        margin-top: 2rem;
        margin-bottom: 2rem;
    }
}*/

.ce-gallery figcaption {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

/***********************************************************************
 * Card *
 * ********************************************************************/

/* alte Container Konstruktio löschen */

.card-deck {
    padding: 1.5em;
    background-color: #f6f6f6;
}

.card-deck .card {
    background-color: #aca594;
}

.card-deck .card-title {
    text-align: center;
    margin: 0.5em;
}

.card-deck .card-title a {
    font-style: normal;
    font-size: calc(16px + (24 - 16) * ((80vw - 300px) / (1500 - 300)));
}
@media (min-width: 576px) {
    .card-deck .card {
        display: -ms-flexbox;
        display: flex;
        -ms-flex: 1 0 0%;
        flex: 1 0 0%;
        -ms-flex-direction: column;
        flex-direction: column;
        margin-right: 0.2rem;
        margin-bottom: 0;
        margin-left: 0.2rem;
    }
    .card-deck .card-title {
        text-align: center;
        margin: 0.5rem 0.1rem;
    }
}
@media (min-width: 776px) {
    .card-deck .card-deck {
        -ms-flex-flow: row wrap;
        flex-flow: row wrap;
        margin-right: -15px;
        margin-left: -15px;
    }
    .card-deck .card {
        margin-right: 0.5rem;
        margin-bottom: 0;
        margin-left: 0.5rem;
    }
}

/***********************************************************************
 * Carousel *
 * ********************************************************************/

.carousel-caption {
    position: absolute;
    right: 15%;
    bottom: 20px;
    left: 15%;
    z-index: 10;
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    background-color: rgba(224,224,224,0.9);
    text-align: center;
}
.carousel-caption h1 {
    font-size: calc(16px + (20 - 16) * ((100vw - 300px) / (1200 - 300)));
}
.carousel-caption h2 {
    font-size: calc(16px + (18 - 16) * ((100vw - 300px) / (1200 - 300)));
}

.carousel-indicators li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    width: 30px;
    height: 3px;
    margin-right: 3px;
    margin-left: 3px;
    text-indent: -999px;
    background-color: #c9c2b1;
}
.carousel-indicators .active {
    background-color: #6b695e;
}
.carousel-item {
    position: relative;
    display: none;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 440px;
    transition: -webkit-transform .6s ease;
    transition: transform .6s ease;
    transition: transform .6s ease,-webkit-transform .6s ease;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000px;
    perspective: 1000px;
}
@media (min-width: 440px) {
    .carousel-item {
        position: relative;
        display: none;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 470px;
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}
@media (min-width: 500px) {
    .carousel-item {
        position: relative;
        display: none;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 520px;
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}
@media (min-width: 592px) {
    .carousel-item {
        position: relative;
        display: none;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 380px;
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}
@media (min-width: 768px) {
    .carousel-item {
        position: relative;
        display: none;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 460px;
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}
@media (min-width: 992px) {
    .carousel-item {
        position: relative;
        display: none;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 480px;
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}
@media (min-width: 1200px) {
    .carousel-item {
        position: relative;
        display: none;
        -ms-flex-align: center;
        align-items: center;
        width: 100%;
        height: 550px;
        transition: -webkit-transform .6s ease;
        transition: transform .6s ease;
        transition: transform .6s ease,-webkit-transform .6s ease;
        -webkit-backface-visibility: hidden;
        backface-visibility: hidden;
        -webkit-perspective: 1000px;
        perspective: 1000px;
    }
}

/***********************************************************************
 * Farben, Abstand *
 * ********************************************************************/

.white, .bg-light {
    background-color: #fff !important;
}
.gray {
    background-color: var(--bs-white-smoke);
}
.light {
    background-color: #f3f1ec;
    background-color: #dd9cf8;
}
.gray-dark {
    background-color: #e0e0e0;
    background-color: #8417b1;
}
.kupfer-hell {
    background-color: #e3dccc;
    background-color: #ff7d8e;
}
.kupfer {
    background-color: #aca594;
    background-color: #df0723;
}

/***********************************************************************
 * SK Video *
 * ********************************************************************/

.sk-video-supercontainer {
    margin-left: unset !important;
    margin-right: unset !important;
}

.sk-video-modal .disclaimer {
    max-height: none !important;
}

.sk-video-modal .btn {
    color: var(--bs-white);
    background-color: var(--bs-cement);
    margin-bottom: 1em;
}

.frame-type-skvideo_ce h3 {
    font-size: 1.125rem;
    font-weight: 300;
    line-height: 1.375;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .frame-type-skvideo_ce header {
        min-height: 3.5rem;
    }
    .frame-type-skvideo_ce h3 {
        margin-bottom: 0;
    }
}

.gm-err-icon img {
    width: auto;
}

/*
    Scroll Top Botton
*/

.btn-top {
    display: none;
}

@media (min-width: 768px) {
    .btn-top {
        --bs-btn-bg: rgba(var(--bs-cement-rgb), .5);
        --bs-btn-hover-bg: rgba(var(--bs-cement-rgb), .4);
        --bs-btn-active-bg: rgba(var(--bs-cement-rgb), .7);
        --bs-btn-active-border-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Cpath d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/%3E%3C/svg%3E");
        background-size: 2.0rem auto;
        background-repeat: no-repeat;
        background-position: center;
        width: 3rem;
        height: 3rem;
        position: fixed;
        bottom: 5rem;
        right: 5rem;
        display: block;
        visibility: hidden;
        opacity: 0;
        transition: opacity .7s, visibility .7s, background-color .15s;
        z-index: 550;
    }

    .btn-top.visible {
        visibility: visible;
        opacity: 1;
    }
}

/* Simple Lightbox */

.sl-overlay {
    background: var(--bs-white-smoke);
}

.sl-wrapper .sl-image .sl-caption {
    position: initial;
    background: var(--bs-cement);
    font-size: 1.125rem;
    font-weight: 400;
}

@media (min-width: 768px) {
    .sl-wrapper .sl-navigation button.sl-prev,
    .sl-wrapper .sl-navigation button.sl-next {
        font-size: 4rem;
    }
}