/* ==========================================================
   SCHÜTZA-CMS
   Hauptstylesheet
   Version: 1.1
   Beschreibung:
   Zentrale Einbindung aller CSS-Dateien
   ========================================================== */


@import url("fonts.css");
@import url("reset.css");
@import url("variables.css");
@import url("typography.css");
@import url("layout.css");
@import url("cms_button.css");

@import url("header.css");
@import url("reservierung.css");
@import url("menue.css");
@import url("hero.css");
@import url("sonderhinweis.css");
@import url("cms_verlinkung.css");
@import url("cms_kontaktformular.css");
@import url("cms_trennlinie.css");
@import url("cms_layout_50_50.css");
@import url("cms_layout_33_33_33.css");



/* --------------------------------------------------
   CMS Textblock Grundlayout
-------------------------------------------------- */

.cms-textblock {

    width: 100%;

    padding: 20px;

}



/* --------------------------------------------------
   CMS Textblock Ausrichtung
-------------------------------------------------- */

.cms-textblock .cms-text,
.cms-textblock .cms-stoerer-gruen,
.cms-textblock .cms-stoerer-rot {
    width: 100%;
}


.cms-textblock.mitte .cms-text,
.cms-textblock.mitte .cms-stoerer-gruen,
.cms-textblock.mitte .cms-stoerer-rot {
    text-align: center;
}


.cms-textblock.links .cms-text,
.cms-textblock.links .cms-stoerer-gruen,
.cms-textblock.links .cms-stoerer-rot {
    text-align: left;
}


.cms-textblock.rechts .cms-text,
.cms-textblock.rechts .cms-stoerer-gruen,
.cms-textblock.rechts .cms-stoerer-rot {
    text-align: right;
}


.cms-textblock.mitte h2 {
    text-align: center;
}


.cms-textblock.links h2 {
    text-align: left;
}


.cms-textblock.rechts h2 {
    text-align: right;
}

/* --------------------------------------------------
   CMS Bildblock Ausrichtung
-------------------------------------------------- */

.cms-bildblock {
    width: 100%;
}


.cms-bild {
    display: block;
    max-width: 100%;
    height: auto;
}


/* --------------------------------------------------
   CMS Bild - Weicher Rand
-------------------------------------------------- */

.cms-bild-soft {

    filter: drop-shadow(0 0 18px #f4efe4);

}

/* --------------------------------------------------
   CMS Bildform
-------------------------------------------------- */

.cms-bild-rund {

    aspect-ratio: 1 / 1;
    border-radius: 50%;
    object-fit: cover;
    object-position: center center;

}


.cms-bildblock.links img {
    margin-left: 0;
    margin-right: auto;
}


.cms-bildblock.mitte img {
    margin-left: auto;
    margin-right: auto;
}


.cms-bildblock.rechts img {
    margin-left: auto;
    margin-right: 0;
}


.cms-bildblock.links .bild-caption {
    text-align: left;
}

.cms-bildblock.mitte .bild-caption {
    text-align: center;
}

.cms-bildblock.rechts .bild-caption {
    text-align: right;
}

/* --------------------------------------------------
   CMS Bild - Symbolbild
-------------------------------------------------- */

.bild-symbolbild {

    font-size: 10px;

    line-height: 1.15;

    color: #888;

    font-style: italic;

    font-weight: 400;

    letter-spacing: 0.03em;

    margin-bottom: 2px;

}

/* --------------------------------------------------
   CMS Seiten Container
-------------------------------------------------- */

.seiten-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding-left: 50px;
    padding-right: 50px;

    box-sizing: border-box;

}


/* Mobil */

@media (max-width: 768px) {

    .seiten-container {

        padding-left: 16px;
        padding-right: 16px;

    }

        .cms-bild[style*="width: 75%"] {
        width: 100% !important;
    }

    .cms-bild[style*="width: 50%"] {
        width: 100% !important;
    }

    .cms-bild[style*="width: 25%"] {
        width: 75% !important;
    }





}

/* --------------------------------------------------
   Abstand zwischen CMS Blöcken
-------------------------------------------------- */

.seiten-container > section {

    margin-bottom: 40px;

}




/* --------------------------------------------------
   Footer
-------------------------------------------------- */

.fussbereich {

    margin-top: 40px;
    border-top: 1px solid var(--footer-border);
    background: var(--footer-bg);

}

.footer-inhalt {

    max-width: var(--container-width);
    margin: 0 auto;

    padding: 12px 16px;

    text-align: center;

    font-size: 12px;
    color: var(--footer-text);

}

.footer-inhalt a {

    color: var(--footer-link);
    text-decoration: none;

}

.footer-inhalt a:hover {

    color: var(--footer-link-hover);

}