/* ==========================================
   DIE EINRICHTUNGSBERATUNG
   Website Refresh 2026
   Eigene Anpassungen
   ========================================== */


/* ========================================
   01 – SCHRIFTEN
   ======================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}


/* ========================================
   02 – GRUNDLAYOUT & TYPOGRAFIE
   ======================================== */

body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
}

p {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    letter-spacing: 0.02em;
    line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 0.04em;
}


/* ========================================
   03 – FARBWELT
   ======================================== */

.redline {
    border-bottom-color: #DCA46B !important;
}

.navbar {
    border-bottom-color: #DCA46B !important;
}

main a:hover {
    color: #DCA46B;
}


/* ========================================
   04 – HEADER & LOGO
   ======================================== */

.navbar {
    min-height: 130px !important;
    margin-top: 0 !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

.navbar .header.container {
    width: 100% !important;
    max-width: none !important;
    height: 130px !important;
    min-height: 130px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

.navbar .header.container > .row {
    display: flex !important;
    align-items: center !important;
    height: 130px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.navbar .header.container > .row > .col-sm-4 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    height: 130px !important;
    padding-left: 0 !important;
}

.navbar .header.container > .row > .col-sm-8 {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    height: 130px !important;
    padding-right: 0 !important;
}

.deblogo {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.deblogo img {
    display: block;
    width: 450px;
    max-width: 100%;
    height: auto;
}

.logoline {
    display: none !important;
}


/* ========================================
   05 – NAVIGATION ALLGEMEIN
   ======================================== */

.mod_navigation li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    letter-spacing: 0.08em;
}

.mod_navigation li a:hover,
.mod_navigation li a:focus {
    color: #DCA46B !important;
}

.mod_navigation li.active > a,
.mod_navigation li.trail > a {
    color: #DCA46B !important;
}

ul.slimmenu li a:hover,
ul.slimmenu li a:active,
ul.slimmenu li a.trail,
ul.slimmenu li:hover > a {
    color: #DCA46B !important;
    background: transparent !important;
}

ul.slimmenu li.active > a,
ul.slimmenu li.trail > a {
    background: transparent !important;
    color: #DCA46B !important;
}


/* ========================================
   06 – DROPDOWN NAVIGATION
   ======================================== */

ul.slimmenu ul {
    background: rgba(0, 0, 0, 0.60) !important;
}

ul.slimmenu ul li,
ul.slimmenu ul li a {
    background: transparent !important;
}

ul.slimmenu ul li a:hover,
ul.slimmenu ul li a:active,
ul.slimmenu ul li a.trail,
ul.slimmenu ul li:hover > a {
    color: #DCA46B !important;
    background: rgba(220, 164, 107, 0.15) !important;
}


/* ========================================
   07 – DESKTOP NAVIGATION
   ab 992 px
   ======================================== */

@media (min-width: 992px) {

    #navbar {
        position: static !important;
        transform: none !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navbar > nav.mod_navigation {
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navbar > nav.mod_navigation > ul.slimmenu.level_1 {
        display: flex !important;
        justify-content: flex-end !important;
        align-items: center !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li {
        float: none !important;
        display: block;
        background: transparent !important;
    }

    /* Goldene Pills */
    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li > a {
        display: block;
        border: 1px solid #DCA46B !important;
        border-radius: 999px !important;
        padding: 8px 16px !important;
        margin-left: 8px !important;
        background: transparent !important;
        color: #ffffff;
        white-space: nowrap;
    }

    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li > a:hover,
    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li > a:focus,
    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li > a:active,
    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li.active > a,
    #navbar > nav.mod_navigation > ul.slimmenu.level_1 > li.trail > a {
        background: transparent !important;
        color: #DCA46B !important;
    }

    /* Dropdown */
    #navbar ul.slimmenu > li > ul {
        background: rgba(0, 0, 0, 0.60) !important;
        border: 1px solid #DCA46B !important;
        border-radius: 14px !important;
        padding: 8px !important;
        margin-top: 8px !important;
        overflow: hidden;
    }

    #navbar ul.slimmenu > li > ul > li {
        background: transparent !important;
        border: none !important;
    }

    #navbar ul.slimmenu > li > ul > li > a {
        background: transparent !important;
        border: none !important;
        border-radius: 8px !important;
        padding: 8px 14px !important;
        margin: 0 !important;
        color: #ffffff !important;
        white-space: nowrap;
    }

    #navbar ul.slimmenu > li > ul > li > a:hover,
    #navbar ul.slimmenu > li > ul > li > a:focus,
    #navbar ul.slimmenu > li > ul > li > a:active {
        background: rgba(220, 164, 107, 0.15) !important;
        color: #DCA46B !important;
    }
}


/* ========================================
   08 – MOBILE & TABLET
   bis 991 px
   ======================================== */

@media (max-width: 991px) {

    .navbar .header.container > .row > .col-sm-4 {
        flex: 1 1 auto !important;
        width: auto !important;
        float: none !important;
        min-width: 0 !important;
    }

    .navbar .header.container > .row > .col-sm-8 {
        flex: 0 0 auto !important;
        width: auto !important;
        float: none !important;
        padding-left: 0 !important;
    }

    .deblogo {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #navbar {
        position: static !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        width: 50px !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    #navbar .menu-collapser {
        position: relative !important;
        width: 50px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* ========================================
   09 – TABLET / FOLD
   481–991 px
   ======================================== */

@media (min-width: 481px) and (max-width: 991px) {

    .deblogo,
    #navbar {
        top: auto !important;
        transform: none !important;
    }
}


/* ========================================
   10 – MOBILE NAVIGATION DESIGN
   ======================================== */

.menu-collapser {
    background: transparent !important;
    color: #DCA46B !important;
}

.collapse-button,
.collapse-button:hover,
.collapse-button:focus,
.collapse-button:active {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.collapse-button .icon-bar {
    background-color: #DCA46B !important;
    border-color: #DCA46B !important;
}

/* Aufgeklapptes Menü */
ul.slimmenu.collapsed,
ul.slimmenu.collapsed li,
ul.slimmenu.collapsed li a {
    background: rgba(0, 0, 0, 0.60) !important;
}

/* Mobile Untermenüs */
ul.slimmenu.collapsed li ul,
ul.slimmenu.collapsed li ul li,
ul.slimmenu.collapsed li ul li a {
    background: rgba(0, 0, 0, 0.60) !important;
}

ul.slimmenu.collapsed li a:hover,
ul.slimmenu.collapsed li a:active,
ul.slimmenu.collapsed li a.trail,
ul.slimmenu.collapsed li:hover > a {
    background: transparent !important;
    color: #DCA46B !important;
}


/* ========================================
   11 – FOOTER
   ======================================== */

footer {
    border-top: 2px solid #DCA46B !important;
    border-bottom: none !important;
    background: rgba(0, 0, 0, 0.45) !important;
}

footer .mod_navigation li,
footer .mod_navigation li:hover,
footer .mod_navigation li a,
footer .mod_navigation li a:focus,
footer .mod_navigation li a:active,
footer .mod_navigation li.active > a,
footer .mod_navigation li.trail > a {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

footer .mod_navigation li a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 300;
    letter-spacing: 0.05em;
    color: #ffffff !important;
}

footer .mod_navigation li a:hover {
    background: transparent !important;
    color: #DCA46B !important;
}


/* ========================================
   KONTAKTSEITE
   ======================================== */

.kontaktbereich {
    width: 560px;
    max-width: 100%;
    margin: 40px 0 60px 0;
    font-family: 'Montserrat', sans-serif;
}


/* ========================================
   KONTAKTBLOCK
   ======================================== */

.kontakt-info {
    width: 100%;
    box-sizing: border-box;

    padding: 34px 38px;

    background: rgba(0, 0, 0, 0.60);

    border: 1px solid rgba(220, 164, 107, 0.60);
    border-bottom: 2px solid #DCA46B;
    border-radius: 4px;

    color: #ffffff;
}


/* Einzelne Bereiche */

.kontakt-spalte {
    width: 100%;
}


/* Überschriften */

.kontakt-info h3 {
    margin: 0 0 20px 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.3;

    letter-spacing: 0.12em;
    text-transform: uppercase;

    color: #DCA46B;
}


/* Adresse */

.kontakt-adresse {
    margin: 0 0 22px 0;

    font-size: 15px;
    font-weight: 300;
    line-height: 1.7;

    color: #ffffff;
}


/* Kontaktdaten + Öffnungszeiten */

.kontakt-grid {
    display: grid;
    grid-template-columns: 155px 1fr;

    gap: 9px 18px;

    margin: 0;

    font-size: 15px;
    font-weight: 300;
    line-height: 1.6;

    color: #ffffff;
}


.kontakt-grid strong {
    font-weight: 500;
}


/* Links */

.kontakt-grid a {
    color: #ffffff;
    text-decoration: none;

    border-bottom: 1px solid rgba(255, 255, 255, 0.45);

    transition:
        color 0.2s ease,
        border-color 0.2s ease;
}


.kontakt-grid a:hover,
.kontakt-grid a:focus {
    color: #DCA46B;

    border-bottom-color: #DCA46B;

    text-decoration: none;
}


/* Goldene Hinweise */

.kontakt-hinweis {
    margin: 24px 0 0 0;

    font-size: 13px;
    font-weight: 300;
    font-style: italic;
    line-height: 1.6;

    color: #DCA46B;
}


/* Trennlinie zwischen Kontakt und Öffnungszeiten */

.kontakt-trenner {
    width: 100%;
    height: 1px;

    margin: 30px 0;

    background: rgba(220, 164, 107, 0.55);
}


/* ========================================
   GOOGLE MAPS
   ======================================== */

.contact-map {
    width: 100%;
    height: 280px;

    margin-top: 24px;

    box-sizing: border-box;

    overflow: hidden;

    background: rgba(0, 0, 0, 0.60);

    border: 1px solid rgba(220, 164, 107, 0.60);
    border-bottom: 2px solid #DCA46B;
    border-radius: 4px;
}


.contact-map iframe {
    display: block;

    width: 100% !important;
    height: 100% !important;

    border: 0 !important;
}


/* ========================================
   POSITION – AUS BOOTSTRAP-CONTAINER LÖSEN
   ======================================== */

/* Desktop */

@media (min-width: 1200px) {

    .kontaktbereich {
        transform: translateX(
            calc((100vw - 1170px) / -2 + 8vw)
        );
    }

}


/* Tablet / kleinere Desktops */

@media (min-width: 768px) and (max-width: 1199px) {

    .kontaktbereich {
        transform: translateX(
            calc((100vw - 750px) / -2 + 8vw)
        );
    }

}


/* ========================================
   SMARTPHONE
   ======================================== */

@media (max-width: 767px) {

    .kontaktbereich {
        width: 100%;
        max-width: 430px;

        margin: 25px auto 40px auto;

        transform: none;
    }


    .kontakt-info {
        padding: 26px 24px;
    }


    .kontakt-info h3 {
        font-size: 15px;
        margin-bottom: 18px;
    }


    .kontakt-grid {
        grid-template-columns: 1fr;
        gap: 3px;
    }


    .kontakt-grid > div:nth-child(even) {
        margin-bottom: 10px;
    }


    .kontakt-hinweis {
        margin-top: 20px;
    }


    .kontakt-trenner {
        margin: 26px 0;
    }


    .contact-map {
        height: 250px;
        margin-top: 18px;
    }

}


/* ========================================
   13 – WEIHNACHTSAUSSTELLUNG TEASER
   ======================================== */

.weihnachts-teaser {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box;
}

.weihnachts-teaser-card {
    display: inline-block !important;
    width: auto !important;
    max-width: 470px !important;
    box-sizing: border-box;

    padding: 30px 34px !important;

    background: rgba(0, 0, 0, 0.60) !important;

    border: 1px solid rgba(220, 164, 107, 0.60) !important;
    border-bottom: 2px solid #DCA46B !important;
    border-radius: 4px;

    font-family: 'Montserrat', sans-serif !important;
    color: #ffffff !important;
    text-decoration: none !important;
}


/* SAVE THE DATE */
.weihnachts-teaser-label {
    margin: 0 0 12px 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    color: #DCA46B !important;
}


/* Titel */
.weihnachts-teaser-title {
    margin: 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 25px !important;
    font-weight: 400 !important;
    letter-spacing: 0.04em !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
}


/* Beschreibung */
.weihnachts-teaser-text {
    margin: 18px 0 0 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 300 !important;
    line-height: 1.65 !important;
    color: #ffffff !important;
}


/* Datum */
.weihnachts-teaser-text strong {
    color: #DCA46B !important;
    font-weight: 500 !important;
}


/* Weihnachtskränze · Dekoration · Adventsideen */
.weihnachts-teaser-details {
    margin: 15px 0 0 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.6 !important;
    color: #DCA46B !important;
}


/* Flyer-Link */
.weihnachts-teaser-link {
    margin: 22px 0 0 0 !important;
    font-family: 'Montserrat', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    letter-spacing: 0.14em !important;
    color: #ffffff !important;
}

.weihnachts-teaser-link span {
    color: #DCA46B !important;
}


/* Hover */
.weihnachts-teaser-card:hover {
    color: #ffffff !important;
    border-color: #DCA46B !important;
}

.weihnachts-teaser-card:hover .weihnachts-teaser-link {
    color: #DCA46B !important;
}


/* Desktop – am linken Bildschirmrand */
@media (min-width: 1200px) {

    .weihnachts-teaser {
        transform: translateX(
            calc((100vw - 1170px) / -2 + 20px)
        );
    }
}


/* Tablet / kleiner Desktop – am linken Bildschirmrand */
@media (min-width: 768px) and (max-width: 1199px) {

    .weihnachts-teaser {
        transform: translateX(
            calc((100vw - 750px) / -2 + 20px)
        );
        justify-content: flex-start;
    }
}


/* Smartphone – zentriert */
@media (max-width: 767px) {

    .weihnachts-teaser {
        transform: none;
        justify-content: center;
    }

    .weihnachts-teaser-card {
        width: 100% !important;
        max-width: 430px !important;
        padding: 24px !important;
    }

    .weihnachts-teaser-label {
        font-size: 11px !important;
    }

    .weihnachts-teaser-title {
        font-size: 21px !important;
    }

    .weihnachts-teaser-text {
        font-size: 14px !important;
    }

    .weihnachts-teaser-details {
        font-size: 12px !important;
        line-height: 1.7 !important;
    }
}


/* ========================================
   WEIHNACHTEN – NATÜRLICHER SCHNEEFALL
   ======================================== */

#snowfall {
    position: fixed;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    pointer-events: none;
    z-index: 9999;
}


/* ========================================
   GRUNDFLOCKEN
   ======================================== */

.snowflake {
    position: absolute;
    top: -25px;

    width: var(--snow-size);
    height: var(--snow-size);

    background: rgba(255, 255, 255, var(--snow-opacity));
    border-radius: 50%;

    box-shadow:
        0 0 2px rgba(255, 255, 255, 0.35);

    animation:
        snowfall var(--snow-duration) linear infinite,
        snowdrift var(--snow-drift-duration) ease-in-out infinite alternate;

    animation-delay: var(--snow-delay);
}


/* ========================================
   WEICHE FLOCKEN IM HINTERGRUND
   ======================================== */

.snowflake:nth-child(3n) {
    filter: blur(1.2px);

    opacity: 0.65;

    transform: scale(1.3);
}


/* ========================================
   KLEINE SCHARFE FLOCKEN
   ======================================== */

.snowflake:nth-child(5n) {
    filter: none;

    box-shadow:
        0 0 1px rgba(255, 255, 255, 0.8);

    transform: scale(0.65);
}


/* ========================================
   GRÖSSERE WEICHE FLOCKEN IM VORDERGRUND
   ======================================== */

.snowflake:nth-child(7n) {
    filter: blur(0.7px);

    box-shadow:
        0 0 4px rgba(255, 255, 255, 0.45);

    transform: scale(1.6);
}


/* ========================================
   FALLBEWEGUNG
   ======================================== */

@keyframes snowfall {

    0% {
        translate: 0 -30px;
    }

    100% {
        translate: 0 110vh;
    }

}


/* ========================================
   LEICHTER WIND
   ======================================== */

@keyframes snowdrift {

    0% {
        margin-left: -18px;
    }

    35% {
        margin-left: 5px;
    }

    70% {
        margin-left: -4px;
    }

    100% {
        margin-left: 22px;
    }

}


/* ========================================
   REDUZIERTE BEWEGUNG
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    #snowfall {
        display: none !important;
    }

}


/* ========================================
   ÜBER UNS – SEITENBASIS
   ======================================== */

body.ueber-uns {
    background: #000000 !important;
}

body.ueber-uns #wrapper,
body.ueber-uns #container,
body.ueber-uns #main,
body.ueber-uns .main {
    background: transparent !important;
}


/* ========================================
   ÜBER UNS – EINLEITUNG
   ======================================== */

body.ueber-uns .ueberuns-intro {
    width: 760px;
    max-width: calc(100vw - 40px);

    box-sizing: border-box;

    margin: 45px 0 70px 0;
    padding: 42px 46px;

    background: rgba(0, 0, 0, 0.60);

    border: 1px solid rgba(220, 164, 107, 0.60);
    border-bottom: 2px solid #DCA46B;
    border-radius: 4px;

    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
}


/* Kleine Überschrift */

body.ueber-uns .ueberuns-label {
    margin: 0 0 18px 0;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #DCA46B;
}


/* Hauptüberschrift */

body.ueber-uns .ueberuns-intro h1 {
    margin: 0 0 24px 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;

    letter-spacing: 0.02em;

    color: #ffffff;
}


/* Einleitungstext */

body.ueber-uns .ueberuns-text {
    max-width: 650px;

    margin: 0;

    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;

    color: #ffffff;
}


/* ========================================
   DESKTOP – AUS DEM ALTEN CONTAINER LÖSEN
   ======================================== */

@media (min-width: 1200px) {

    body.ueber-uns .ueberuns-intro {
        transform: translateX(
            calc((100vw - 1170px) / -2 + 8vw)
        );
    }

}


/* ========================================
   TABLET
   ======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    body.ueber-uns .ueberuns-intro {
        transform: translateX(
            calc((100vw - 750px) / -2 + 8vw)
        );
    }

}


/* ========================================
   SMARTPHONE
   ======================================== */

@media (max-width: 767px) {

    body.ueber-uns .ueberuns-intro {
        width: 100%;
        max-width: 430px;

        margin: 25px auto 45px auto;
        padding: 30px 26px;

        transform: none;
    }

    body.ueber-uns .ueberuns-intro h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    body.ueber-uns .ueberuns-text {
        font-size: 14px;
        line-height: 1.75;
    }

}


/* ========================================
   ÜBER UNS – TEAM
   ======================================== */

body.ueber-uns .ueberuns-team {
    width: 760px;
    max-width: calc(100vw - 40px);

    box-sizing: border-box;

    margin: 0 0 80px 0;

    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
}


/* ========================================
   TEAM – ÜBERSCHRIFT
   ======================================== */

body.ueber-uns .ueberuns-team-label {
    margin: 0 0 24px 0;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #DCA46B;
}


/* ========================================
   TEAM – ZWEI SPALTEN
   ======================================== */

body.ueber-uns .ueberuns-team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 34px;

    width: 100%;
}


/* ========================================
   PERSON – SANFTES EINBLENDEN
   ======================================== */

body.ueber-uns .ueberuns-person {
    min-width: 0;

    margin: 0;
    padding: 0;

    opacity: 0;
    transform: translateY(32px);

    transition:
        opacity 3s ease,
        transform 3s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Michael kommt einen Moment später */

body.ueber-uns .ueberuns-person:nth-child(2) {
    transition-delay: 0.25s;
}


/* Sichtbarer Zustand */

body.ueber-uns .ueberuns-person.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   PORTRAIT
   ======================================== */

body.ueber-uns .ueberuns-person-image {
    width: 100%;

    overflow: hidden;

    background: rgba(0, 0, 0, 0.60);

    border: 1px solid rgba(220, 164, 107, 0.45);
    border-bottom: 2px solid #DCA46B;
    border-radius: 4px;
}

body.ueber-uns .ueberuns-person-image img {
    display: block;

    width: 100%;
    height: auto;

    margin: 0;
    padding: 0;

    transform: scale(1.03);

    transition:
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* Bild fährt ganz langsam auf Originalgröße */

body.ueber-uns .ueberuns-person.is-visible .ueberuns-person-image img {
    transform: scale(1);
}


/* ========================================
   NAME & TÄTIGKEIT
   ======================================== */

body.ueber-uns .ueberuns-person-info {
    padding: 18px 3px 0 3px;
}

body.ueber-uns .ueberuns-person-info h2 {
    margin: 0 0 8px 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.3;

    letter-spacing: 0.04em;

    color: #DCA46B;
}

body.ueber-uns .ueberuns-person-info p {
    margin: 0;

    font-size: 13px;
    font-weight: 300;
    line-height: 1.6;

    letter-spacing: 0.02em;

    color: rgba(255, 255, 255, 0.88);
}


/* ========================================
   DESKTOP – GLEICHE FLUCHT WIE INTRO
   ======================================== */

@media (min-width: 1200px) {

    body.ueber-uns .ueberuns-team {
        transform: translateX(
            calc((100vw - 1170px) / -2 + 8vw)
        );
    }

}


/* ========================================
   TABLET
   ======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    body.ueber-uns .ueberuns-team {
        width: 760px;
        max-width: calc(100vw - 40px);

        transform: translateX(
            calc((100vw - 750px) / -2 + 8vw)
        );
    }

    body.ueber-uns .ueberuns-team-grid {
        gap: 28px;
    }

}


/* ========================================
   SMARTPHONE
   ======================================== */

@media (max-width: 767px) {

    body.ueber-uns .ueberuns-team {
        width: 100%;
        max-width: 430px;

        margin: 0 auto 50px auto;

        transform: none;
    }

    body.ueber-uns .ueberuns-team-grid {
        grid-template-columns: 1fr;

        gap: 42px;
    }

    body.ueber-uns .ueberuns-team-label {
        margin-bottom: 20px;
    }

    body.ueber-uns .ueberuns-person-info {
        padding: 16px 2px 0 2px;
    }

    body.ueber-uns .ueberuns-person-info h2 {
        font-size: 18px;
    }

    body.ueber-uns .ueberuns-person-info p {
        font-size: 13px;
    }

}


/* ========================================
   REDUZIERTE BEWEGUNG
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    body.ueber-uns .ueberuns-person {
        opacity: 1;
        transform: none;
        transition: none;
    }

    body.ueber-uns .ueberuns-person-image img {
        transform: none;
        transition: none;
    }

}

/* ========================================
   WEINSHOP – KOMPLETTER SEITENBLOCK
   ======================================== */

.weinshop-intro {
    width: 760px;
    max-width: calc(100vw - 40px);

    box-sizing: border-box;

    margin: 45px 0 70px 0;
    padding: 42px 46px;

    position: relative;
    z-index: 10;

    background: rgba(0, 0, 0, 0.60) !important;

    border: 1px solid rgba(220, 164, 107, 0.60);
    border-bottom: 2px solid #DCA46B;
    border-radius: 4px;

    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
}


/* ========================================
   LABEL
   ======================================== */

.weinshop-label {
    margin: 0 0 18px 0;

    font-size: 13px;
    font-weight: 500;
    line-height: 1;

    letter-spacing: 0.18em;
    text-transform: uppercase;

    color: #DCA46B !important;
}


/* ========================================
   ÜBERSCHRIFT
   ======================================== */

.weinshop-intro h1 {
    margin: 0 0 24px 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 30px;
    font-weight: 300;
    line-height: 1.25;

    letter-spacing: 0.02em;

    color: #ffffff !important;
}


/* ========================================
   FLIESSTEXT
   ======================================== */

.weinshop-text {
    margin: 0 0 18px 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    font-weight: 300;
    line-height: 1.8;

    color: #ffffff !important;
}


/* ========================================
   HIGHLIGHTS
   ======================================== */

.weinshop-highlights {
    margin: 26px 0 0 0;

    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.6;

    letter-spacing: 0.04em;

    color: #DCA46B !important;
}


/* ========================================
   TEXT REVEAL
   ======================================== */

.weinshop-reveal {
    opacity: 0;
    transform: translateY(18px);

    transition:
        opacity 1.8s ease,
        transform 1.8s cubic-bezier(0.22, 1, 0.36, 1);
}


/* WEINSHOP */

.weinshop-reveal:nth-child(1) {
    transition-delay: 0s;
}


/* ÜBERSCHRIFT */

.weinshop-reveal:nth-child(2) {
    transition-delay: 0.25s;
}


/* ERSTER ABSATZ */

.weinshop-reveal:nth-child(3) {
    transition-delay: 0.50s;
}


/* ZWEITER ABSATZ */

.weinshop-reveal:nth-child(4) {
    transition-delay: 0.75s;
}


/* HIGHLIGHTS */

.weinshop-reveal:nth-child(5) {
    transition-delay: 1s;
}


.weinshop-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ========================================
   DESKTOP – GLEICHE POSITION WIE ÜBER UNS
   ======================================== */

@media (min-width: 1200px) {

    .weinshop-intro {
        transform: translateX(
            calc((100vw - 1170px) / -2 + 8vw)
        );
    }

}


/* ========================================
   TABLET
   ======================================== */

@media (min-width: 768px) and (max-width: 1199px) {

    .weinshop-intro {
        width: 760px;
        max-width: calc(100vw - 40px);

        transform: translateX(
            calc((100vw - 750px) / -2 + 8vw)
        );
    }

}


/* ========================================
   SMARTPHONE
   ======================================== */

@media (max-width: 767px) {

    .weinshop-intro {
        width: 100%;
        max-width: 430px;

        margin: 25px auto 45px auto;
        padding: 30px 26px;

        transform: none;
    }

    .weinshop-intro h1 {
        font-size: 24px;
        line-height: 1.3;
    }

    .weinshop-text {
        font-size: 14px;
        line-height: 1.75;
    }

    .weinshop-highlights {
        font-size: 12px;
        line-height: 1.7;
    }

}


/* ========================================
   REDUZIERTE BEWEGUNG
   ======================================== */

@media (prefers-reduced-motion: reduce) {

    .weinshop-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

}