/* WEBFONTS #################################### */

@font-face {
    font-family: 'Gotham';
    src: url('fonts/GothamHTF-Book.eot');
    src: url('fonts/GothamHTF-Book.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamHTF-Book.woff2') format('woff2'),
        url('fonts/GothamHTF-Book.woff') format('woff'),
        url('fonts/GothamHTF-Book.ttf') format('truetype'),
        url('fonts/GothamHTF-Book.svg#GothamHTF-Book') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Bold';
    src: url('fonts/GothamHTF-Bold.eot');
    src: url('fonts/GothamHTF-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamHTF-Bold.woff2') format('woff2'),
        url('fonts/GothamHTF-Bold.woff') format('woff'),
        url('fonts/GothamHTF-Bold.ttf') format('truetype'),
        url('fonts/GothamHTF-Bold.svg#GothamHTF-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham Black';
    src: url('fonts/GothamHTF-Black.eot');
    src: url('fonts/GothamHTF-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/GothamHTF-Black.woff2') format('woff2'),
        url('fonts/GothamHTF-Black.woff') format('woff'),
        url('fonts/GothamHTF-Black.ttf') format('truetype'),
        url('fonts/GothamHTF-Black.svg#GothamHTF-Black') format('svg');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}



/* END WEBFONTS ################################ */



/* VARIABLEN #################################### */

:root {

/* TYPO */

--mengentext: 'Gotham';
--fetttext: 'Gotham Bold';

--font20: 20px;
--font30: 30px;
--font40: 40px;

--Blockhyphens: auto;

/* FABREN */

--bodybackground: #ECF3F9;
--blau: #0D2A46;
--transblau: rgba(20,19,63, .6);
--hellgrau: #a2a2a2;
--weiss: #fff;
}

/* END VARIABLEN ################################ */

/* GLOBAL #################################### */

body {
    font-familiy: var(--mengentext);
    background-color: var(--bodybackground);
    color: var(--blau);
    font-size: var(--font20);
    hyphens: var(--Blockhyphens);

}

h1.sppb-addon-title {
    font-size: 70px;

}

h3.sppb-sp-slider-title {
    font-family: var(--fetttext);
}

h1 {
    font-family: var(--fetttext);
}

.vertical  {
  margin-top: 10px;
  font-family: var(--fetttext);
  writing-mode: vertical-rl;
    rotate: 180deg;
    display: flex;
    align-items: center;
}

.vertical h3 {
    font-size: var(--font40);
}

.big__oeffnungzeiten span.tage {
    font-size: 75%;
    text-transform: uppercase;
    letter-spacing: .5px;
    display: block;
}

/* END GLOBAL ################################ */

/* HEADER #################################### */

.sp-megamenu-parent>li {
    width: 140px;
    scale: 1;
    transition: .5s;
    filter: grayscale(0.70);
}

.sp-megamenu-parent>li:hover,
.sp-megamenu-parent>li.current-item.active {
    scale: 1.1;
    transition: .2s;
    filter: grayscale(0);
}

/* END HEADER ################################ */

/* FOOTER #################################### */

#sp-footer ul.menu li a {
    line-height: 100%;
}

#sp-footer ul.menu li {
    border-right: 1px solid var(--hellgrau);
    margin: 0;
    padding: 0 10px;
}

#sp-footer ul.menu li:last-child {
    border-right: 0;
    margin: 0;
    padding: 0 0 0 10px;
}

.footer1 {
    color: var(--hellgrau);
}

/* END FOOTER ################################ */

/* TEAM #################################### */

#sppb-addon-1705912170215 .sppb-person-addon-content-wrap,
.sppb-addon-person .sppb-col-sm-7 {
    background-color: var(--bodybackground);
}


/* END TEAM ################################ */

/* COVERTFORMS #################################### */

.flatpickr-months .flatpickr-month {
    height: 60px!important;
}

/* END CONVERTFORMS ################################ */

/* KS AUTOGLAS #################################### */

#big__ksAutoglas .sppb-addon-text-block {
    margin-bottom: 30px;
}

/* END KS AUTOGLAS ################################ */

/* HAUPTMENU #################################### */

.sp-megamenu-parent>li:last-child>a {
    padding: 0px 15px;
}

/* END HAUPTMENU ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* CUSTOM #################################### */

/* END CUSTOM ################################ */

/* OFFCANVAS MENU #################################### */

/* MENU ---------------------------------------------- */

.offcanvas-overlay {
    background: var(--transblau);
}

#offcanvas-toggler {
    background-color: var(--weiss);
    transform: translateY(-25%);
    top: 29%;
    width: 49px;
    height: 49px;
    margin-top: 18px;
    margin-left: 0!important;
}

#offcanvas-toggler:hover {
    background-color: var(--weiss)!important;
}

.burger-icon {
    width: 25px;
    cursor: pointer;
    top: 12px;
    position: absolute;
    left: 13px;
}




body.ltr .close-offcanvas {
    width: 49px;
    height: 49px;
    background-color: #fff;
}

.offcanvas-active .burger-icon>span {
    background-color: var(--blau)
}

#offcanvas-toggler > div > span,
#offcanvas-toggler.active .burger-icon>span {
    background-color: #blau;
}

#offcanvas-toggler > div > span:nth-child(2) {
    max-width: 100%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(2) {
    max-width: 70%;
    transition: .3s;
}

#offcanvas-toggler > div > span:nth-child(3) {
    max-width: 70%;
    transition: .5s;
}

#offcanvas-toggler:hover > div > span:nth-child(3) {
    max-width: 50%;
    transition: .3s;
}

.offcanvas-menu {
    background-color: var(--blau);
    border-left: 3px solid #ffffff;
    max-width: 200px;
}

body > div.offcanvas-menu > div.offcanvas-inner > div.sp-module > div > ul > li > a > img {
    max-width: 80%;
}



/* END +++++++++++++++++++++++++++++++ */


/* END MENU ------------------------------------------------ */

/* END OFFCANVAS MENU ################################ */



/* MEDIA QUERIES */

@media (300px <= width <= 575px) {

#sp-header {
    min-height: 60px;
}

h1.sppb-addon-title {
    font-size: 50px;
}

.cf-control-input h3 {
    font-size: var(--font20)!important;
    line-height: 150%!important;
}

#sp-footer .container-inner {
    text-align: center;
}

}

@media (300px <= width <= 767px) {

.vertical  {
  margin-top: 10px;
  font-family: var(--fetttext);
  writing-mode: horizontal-tb;
    rotate: 0deg;
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

h3.sppb-sp-slider-title {
    font-size: var(--font30);
}

}


@media (768px <= width <= 992px) {

h1.sppb-addon-title {
    font-size: 40px;

}

}

@media (992px <= width <= 1199px) {

#sp-logo {
    max-width: 230px;
}

.sp-megamenu-parent>li {
    width: 106px;
}

h1.sppb-addon-title {
    font-size: 70px;

}

}


@media (1200px <= width <= 1399px) {

.sp-megamenu-parent>li {
    width: 130px;
}

}









        /* --- CSS für den Button --- */

        .appointment-button-style.bigService {
            /* Neue Grundstile nach deinen Vorgaben */
            background-color: #0D2A46;
            color: #fff;
            border: 1px solid #0D2A46; 
            cursor: pointer;
            font-size: 18px; /* Schriftgröße erhöht */
            font-weight: 500;
            text-align: center;
            min-width: 120px;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
            transition: all 0.3s ease;
            z-index: 1000;
            
            /* Mobile-Ansicht (Standard): Button als Leiste am unteren Rand */
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            border-radius: 0;
            padding: 15px 20px; /* Optimiertes Padding für mobile Ansicht */
        }

        .appointment-button-style.bigService:hover {
            /* Hover-Effekt nach deinen Vorgaben */
            background-color: #fff; 
            border-color: #fff;
            color: #0D2A46;
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }

        /* Stellt sicher, dass der Dialog über allem liegt */
        dialog#booking-widget-dialog-view {
            z-index: 11999!important;
        }

        /* Desktop-Ansicht (ab 768px Bildschirmbreite) */
        @media (min-width: 768px) {
            .appointment-button-style.bigService {
                /* Positionierung */
                position: fixed;
                top: 40%; /* Vertikal zentrieren */
                right: 28px; /* Korrigierter Wert: Button ist jetzt am Rand sichtbar */
                bottom: auto; 
                left: auto;
                
                /* Form und Ausrichtung */
                width: auto;
                transform: translateY(-50%) rotate(-90deg); /* Zentrierung korrigieren und drehen */
                transform-origin: right center; /* An der rechten Kante drehen */
                
                /* Aussehen wieder anpassen */
                border-radius: 5px 5px 0 0; /* Ecken oben abrunden */
                padding: 15px 25px; /* Angepasstes Padding für die Seitenleiste */
            }
            
            .appointment-button-style.bigService:hover {
                 right: 28px; /* Button beim Hover komplett sichtbar machen */
                 padding-bottom: 40px;
            }
        }















/* CASALINI ########################################
#################################################### */

:root {

--casa-headline-eins: clamp(3.375rem, 1.8074rem + 3.027vw, 9.375rem);
--casa-headline-zwei: clamp(1.5rem, 1.1909rem + 1.6486vw, 5.3125rem);

--casa-headline-fett: 'Gotham Black';

}

#casalini_intro .sppb-section-title.left h1.sppb-title-heading,
#casalini_angebote .sppb-section-title.left h2.sppb-title-heading,
#casalini_kontakt .sppb-addon.sppb-addon-header h2.sppb-addon-title {
    font-size: var(--casa-headline-eins);
    font-family: var(--casa-headline-fett);
    line-height: 100%;
}

#casalini_intro .sppb-addon.sppb-addon-header h2.sppb-addon-title {
    font-size: var(--casa-headline-zwei);
}

#casalini_kontakt #column-id-1778208076577 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: 100%;
}







/* TEAM #####################################
############################################# */

#team .sppb-row-column {
    margin-bottom: 30px;
}

#team .sppb-person-information {
    min-height: 76px; /* Wert ggf. leicht anpassen, je nach Schriftgröße */
    display: flex;
    flex-direction: column;
}