@font-face {
    font-family: 'Chalkduster';
    src: url('/static/fonts/chalkduster/Chalkduster.eot');
    /* IE9 Compat Modes */
    src: url('/static/fonts/chalkduster/Chalkduster.eot?#iefix') format('embedded-opentype'),
        /* Modern Browsers */
        url('/static/fonts/chalkduster/Chalkduster.ttf') format('truetype');
    /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('/static/fonts/montserrat/Montserrat-Black.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}



/* Scrollbar Styles */
.card::-webkit-scrollbar {
    width: 4px;
}

.card::-webkit-scrollbar-track {
    background: #59240e;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.card::-webkit-scrollbar-thumb {
    background: #c49b50;
    height: 12px;
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

.card-img-overlay{
    background-color: rgba(0, 0, 0, 0.6);
}
card:not(:hover) card-title {
    display: none;
    background-color: rgba(0, 0, 0, 0.2);
}


.card:hover .card-img-overlay {
    display: flex;
    background-color: rgba(0, 0, 0, 0.2);
    
}

/* Sticky Positioning */
.sticky-0 {
    position: sticky;
    top: 0;
}

/* Navigation Styles */
.nav-link {
    color: #b47d49;
    text-shadow: 2px 1px 1px #000;
    font-family: Chalkduster;
    font-size: 24px;
    transition: all .2s ease-in-out;
}

.nav-link:hover {
    color: #a3e77f;
    text-decoration: underline;
    transform: scale(1.05);
}

/* Link Styles */
.a-nolink,
a {
    color: #b47d49;
    font-weight: 600;
    text-decoration: none;
}

.a-nolink:hover,
a:hover {
    color: #a3e77f;
    text-decoration: underline;
}

/* Heading Styles */
h1, h2, h3, h4, h5, h6 {
    color: #c49b50; /* Goldbrauner Farbton */
    font-family: Chalkduster; /* Schriftfamilie */
    font-weight: 800; /* Extra-bold Gewicht */
}

h1 {
    font-size: 4.7em; /* Beispielsweise für h1 */
    line-height: 1.2;
}

h2 {
    font-size: 3.92em; /* Beispielsweise für h2 */
    line-height: 1.2;
}

h3 {
    font-size: 3.14em; /* Beispielsweise für h3 */
    line-height: 1.2;
}

h4 {
    font-size: 2.36em; /* Beispielsweise für h4 */
    line-height: 1.2;
}

h5 {
    font-size: 1.58em; /* Beispielsweise für h5 */
    line-height: 1.2;
}

h6 {
    font-size: .8em; /* Beispielsweise für h6 */
    line-height: 1.2;
}


.btn {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Paragraph Styles */
p {
    color: #c49b50;
    font-size: 21px;
    font-family: Chalkduster;
}

/* Body Background */
.bodybg {
    background-image: url('/static/img/resized/gallery (24).jpg' );
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

/*  Grow Effect */
.grow {
    transition: all .2s ease-in-out;
}

.gallerygrow:hover {
    transition: all .7s ease-in-out;
    transform: scale(1.75);
    z-index: 1;
}
.grow:hover {
    transform: scale(1.5);
    z-index: 1;
}

.grow2 {
    transition: all .2s ease-in-out;
}

.grow2:hover {
    transform: scale(0.99);
}

/* Accordion Active Element Color */
.accordion-button:not(.collapsed) {
    background-color: transparent;
    color: #a3e77f;
}

/* Optional: Hover State Color */
.accordion-button:not(.collapsed):hover {
    background-color: transparent;
    color: #a3e77f;
}

/* Colors */

.bg-frame {
    background-color: hsla(39, 39%, 7%, 0.3) !important;
}
.bg-frame:hover {
    background-color: hsla(39, 39%, 7%, 0.85) !important;
    transition: all .3s ease-in;
}
.bg-textbox {
    background-color: hsla(39, 39%, 7%, 0.959) !important;
}

.bg-textboxnoal {
    background-color: #1a150b !important;
}

.bc-textboxnoal {
    border-color: #1a150b !important;
}

.bg-button {
    background-color: #62c450 !important;
}

.highlight {
    color: #62c450 !important;
}

.Grauschwarz {
    color: #1f1f31 !important;
}

.bg-Grauschwarz {
    background-color: #1d1d1d !important;
}

.Nussbraun {
    color: #593c0e !important;
}

.bg-Nussbraun {
    background-color: #583c0ecc !important;
}

.Rotbraun-dark {
    color: #59240e !important;
}

.bg-Rotbraun-dark {
    background-color: #59240e !important;
}


/* Back to Top Button */
#back-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: rgba(0,0,0,0.5);
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 5px;
    display: none; /* Versteckt den Button */
}

#back-to-top:hover {
    background-color: #1d1d1d; /* Dunklerer Hintergrund beim Hover */
}

/* Media Query für Mobilgeräte */
@media (max-width: 768px) {
    h1 {
        font-size: 3.2em;
    }
    h2 {
        font-size: 2.67em;
    }
    h3 {
        font-size: 2.13em;
    }
    h4 {
        font-size: 1.6em;
    }
    h5 {
        font-size: 1.07em;
    }
    h6 {
        font-size: .53em;
    }
    .gallerygrow:hover {
        transition: all .7s ease-in-out;
        transform: scale(1);
        z-index: 1;
    }
    .grow:hover {
        transform: scale(1);
        z-index: 1;
    }
    .grow2:hover {
        transform: scale(1);
    }
  }