/*
 * Anpassungen des eSophia-Designs an die Seitenstruktur von Flexportal.
 * Wird nach den Stylesheets des Designs geladen. Statt resources/css/frontend.css lädt das Layout
 * frontend-module.css: dieselben Regeln ohne die Grund- und Gerüstregeln, die das Design stören.
 * Funktionsmodule von Flexportal tragen die Klasse .fp-module.
 */

/* Funktionsmodule von Flexportal: Grundstile aus frontend.css, nur innerhalb der Module */
.fp-module,
.fp-module *,
.fp-module ::before,
.fp-module ::after {
    box-sizing: border-box;
}

.fp-module :is(h1, h2, h3, h4, h5, h6) {
    margin: 0 0 .6em;
    line-height: 1.25;
}

.fp-module :is(p, ul, ol) {
    margin: 0 0 1em;
}

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

.fp-module table {
    width: 100%;
    border-collapse: collapse;
}

.fp-module :is(th, td) {
    padding: 8px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
}

.fp-module a.button {
    display: inline-block;
    padding: 9px 20px;
    border-radius: 5px;
    background: var(--accent);
    color: #fff;
    font-weight: 700;
    text-decoration: none;
}

/* Flexportal: linke Spalte, Hauptspalte, rechte Spalte – das Design: links, rechts, Hauptspalte */
@media (min-width: 1101px) {
    body.layout-public #main {
        float: left;
        margin-left: 14px;
    }
}

#wrapper .content-html,
#wrapper .page-assets {
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    overflow: visible;
}

#wrapper .page-assets {
    display: none;
}

/* Login-Modul in der Seitenleiste (Klassen der Design-Box werden per Layout-Skript ergänzt) */
.aside .mod_customer_login .invisible {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.aside .mod_customer_login .widget {
    margin: 0;
}

.aside .mod_customer_login .checkbox {
    display: block;
    margin: 0 0 8px;
    font: 11px Arial, sans-serif;
    color: #6b5a4f;
}

/* Formulare der Funktionsmodule im Stil der Formulare des Designs (Kontaktformular) */
#main .fp-module.page-section-box :is(label, .widget > label) {
    color: #684f42;
    font: bold 11px/16px Arial, sans-serif;
    letter-spacing: .25px;
    text-transform: uppercase;
}

#main .fp-module.page-section-box label.checkbox,
#main .fp-module.page-section-box .checkbox label {
    font: 12px/18px Arial, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}

#main .fp-module.page-section-box :is(input[type=text], input[type=email], input[type=password], input[type=tel],
    input[type=number], input[type=date], select, textarea) {
    min-height: 40px;
    padding: 8px 11px;
    border: 1px solid #c9b8a8;
    border-radius: 4px;
    background: rgba(255, 253, 248, .92);
    color: #493d35;
    box-shadow: inset 0 1px 2px rgba(70, 45, 30, .08);
    font: 14px/1.35 Arial, sans-serif;
}

#main .fp-module.page-section-box :is(input, select, textarea):focus {
    border-color: #8c4960;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(124, 16, 51, .07);
}

#main .fp-module.page-section-box :is(small, .hint, .help) {
    color: #8a7668;
    font: italic 12px/17px Arial, sans-serif;
}

:is(#main, #left, #right) .fp-module :is(button[type=submit], .button, a.button) {
    min-height: 41px;
    padding: 0 18px;
    border: 1px solid #3e2b26;
    border-radius: 3px;
    background: #735039 url("/site/assets/images/buttons-hintergrund/button-aktion-schwarzbraun-strip-hd.webp") center / cover no-repeat;
    color: #fff;
    font: 19px/41px Arvil, "Times New Roman", serif;
    letter-spacing: .35px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .45);
    text-transform: uppercase;
    cursor: pointer;
}

:is(#main, #left, #right) .fp-module :is(button[type=submit], .button, a.button):hover {
    filter: brightness(1.08);
}