/* ==========================================================================
   GLOBAL: SCHRIFTARTEN & BASIS-LAYOUT
   ========================================================================== */

/* --- Fonts --- */
@font-face {
    font-family: 'Delius';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/delius-v10-latin-regular.eot');
    src: local('Delius-Regular'),
        url('../fonts/delius-v10-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/delius-v10-latin-regular.woff2') format('woff2'),
        url('../fonts/delius-v10-latin-regular.woff') format('woff'),
        url('../fonts/delius-v10-latin-regular.ttf') format('truetype'),
        url('../fonts/delius-v10-latin-regular.svg#Delius') format('svg');
}

@font-face {
    font-family: 'Architects Daughter';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/architects-daughter-v11-latin-regular.eot');
    src: local('Architects Daughter Regular'), local('ArchitectsDaughter-Regular'),
        url('../fonts/architects-daughter-v11-latin-regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/architects-daughter-v11-latin-regular.woff2') format('woff2'),
        url('../fonts/architects-daughter-v11-latin-regular.woff') format('woff'),
        url('../fonts/architects-daughter-v11-latin-regular.ttf') format('truetype'),
        url('../fonts/architects-daughter-v11-latin-regular.svg#ArchitectsDaughter') format('svg');
}

/* --- Typografie Basics --- */
body {
    font-family: 'Delius', sans-serif;
    font-weight: normal;
    background: #AFBACC;
}

p, li, td, a {
    font-family: 'Delius';
    font-weight: normal;
}

p { font-size: 14px; }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Architects Daughter';
    font-weight: normal;
}

h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5, h6 { font-size: 14px; }

a { color: #000000; }
a:hover { text-decoration: underline; color: #000000; }

img { display: inline; }

/* --- Layout Elemente & Polaroids --- */
div.polaroid_right,
div.polaroid_left {
    padding: 10px;
    border: 1px solid #BFBFBF;
    background-color: #FFFDEF;
    box-shadow: 3px 3px 3px #aaaaaa;
    margin: 20px;
}

div.polaroid_right { transform: rotate(5deg); }
div.polaroid_left { transform: rotate(-3deg); }

.caption { margin: 8px 0 0 0; }

.body-innerwrapper { overflow-x: visible; }
.layout-boxed .body-innerwrapper { background: none; box-shadow: none; }
.row { margin: 0; }


/* ==========================================================================
   HEADER & CONTAINER STYLES (Desktop)
   ========================================================================== */

#sp-top-bar {
    padding: 2px 0;
    margin-bottom: 15px;
}

#sp-titel {
    background: none;
    box-shadow: none;
}

/* GRUNDLAGE: Alle Haupt-Boxen (Header, Content) gleich breit */
#sp-titel .container,
#sp-header-ganz .container, 
#sp-header-logo,            
#sp-main-body .container {
    padding: 0;
    margin-bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 5px 5px 5px #888888;
    width: 100%; 
}

/* BILDER: Müssen immer die Box ausfüllen */
#sp-header-ganz img,
#sp-header-logo img {
    width: 100%;
    height: auto;
    display: block;
}

#sp-main-body {
    padding: 0;
    overflow: hidden;
    font-family: 'Delius';
}

.wsg div[itemprop="articleBody"] {
    display: flex;
    flex-wrap: wrap;
}

#sp-titel .row { margin-left: 0; }

/* --- Modul-Positionen --- */
#sp-position0, #sp-position1, #sp-position2, #sp-position3, 
#sp-position4, #sp-position5, #sp-position6, #sp-position7, 
#sp-position8, #sp-position9 {
    box-shadow: 5px 5px 5px #888888;
    padding: 0;
}

#sp-position0 p, #sp-position1 p, #sp-position2 p, 
#sp-position3 p, #sp-position4 p, #sp-position5 p, 
#sp-position6 p, #sp-position7 p, #sp-position8 p, 
#sp-position9 p {
    margin: 0;
}


/* ==========================================================================
   OFFCANVAS & MENU STYLES
   ========================================================================== */

#sp-offcanvas { min-height: 15px; }
#sp-offcanvas .container { padding: 0; }
#offcanvas-toggler { padding-right: 15px; line-height: 30px; }

/* Desktop Menü Abstand */
#sp-menu { margin-top: 15px; }

/* Linke Spalte */
#sp-left {
    text-align: left;
    padding-top: 15px;
    padding-right: 0;
    background-size: cover;
}
#sp-left .sp-column { padding-bottom: 15px; padding-top: 28px; }

/* Mega Menu Styles */
ul.sp-megamenu-parent { float: none; text-align: left; }
.sp-megamenu-parent>li>a {
    text-transform: none;
    font-size: 18px;
    line-height: 28px;
}

/* Modul Listen Styles (Navigation rechts) */
.sp-module ul>li { border: 0; }
.sp-module ul>li>a:before { content: ""; }
.sp-module ul>li>a {
    font-size: 16px;
    margin-left: 12px;
    line-height: 26px;
}
.sp-module ul>li>ul>li>a { font-size: 16px; margin-left: 24px; }
.sp-module ul>li>ul>li>ul>li>a { font-size: 16px; margin-left: 36px; }

.item-108 { padding-top: 20px; }

/* Component & Footer */
#sp-component .sp-column { padding-left: 2%; padding-right: 2%; }
#sp-component h1 { padding: 18px 0; }
.page-header { border: 0; padding-top: 30px; }
#sp-bottom-shadow .container {
    box-shadow: 5px 5px 5px #888888;
    max-height: 10px;
    margin-top: -10px;
}
footer#sp-footer {
    padding: 10px 0 5px 0;
    margin-bottom: 0px;
    background-color: transparent;
    color: #222222;
    font-family: 'Delius';
}

/* Forms & UI Elements */
.well { background-color: transparent; }
legend { display: none; }
.dl-horizontal dd { padding-top: 8px; }
.form-horizontal .control-label { width: 20%; display: inline-block; margin: 0 1% 0 0; }
.form-horizontal .controls { margin: 0; display: inline-block; width: 79%; }
label { display: block; }
button { float: right; }
textarea#jform_contact_message.required { height: 200px; }
.contact-form .optional { display: none; }
div.contact h2 { padding-top: 45px; margin-top: 0; }
dl.contact-position dt { visibility: hidden; }

/* Einladungen */
.einladung { padding: 50px; }
@media only screen and (max-width: 800px) {
    .einladung { padding: 10px; }
}


/* ==========================================================================
   OFFCANVAS MENÜ (Mobile Styling)
   ========================================================================== */

.offcanvas-menu {
    width: 280px !important;
    border-right: 1px solid rgba(0,0,0,0.1);
}

/* Close Button OHNE Kreis */
.offcanvas-menu .close-offcanvas {
    color: #222;
    opacity: 0.7;
    top: 15px;
    right: 20px;
    font-size: 24px;
    background: transparent !important;
    border: none !important;
    width: auto !important; 
    height: auto !important;
}

/* Transparenter Hintergrund */
.offcanvas-menu .nav.menu,
body.winter .offcanvas-menu .nav.menu,
body.sommer .offcanvas-menu .nav.menu,
body.tulpe .offcanvas-menu .nav.menu,
body.kastanie .offcanvas-menu .nav.menu,
body.schnee .offcanvas-menu .nav.menu {
    background-color: transparent !important;
    padding: 20px 10px;
}

/* Hauptlinks (Level 1) */
.offcanvas-menu .nav.menu > li > a {
    font-family: 'Architects Daughter', sans-serif !important;
    font-size: 18px !important;
    color: #222 !important;
    text-transform: none !important;
    border-bottom: 1px dashed rgba(0,0,0,0.2); 
    padding: 12px 10px;
    font-weight: normal;
}

/* Aktiver Link */
.offcanvas-menu .nav.menu > li.active > a,
.offcanvas-menu .nav.menu > li > a:hover {
    font-weight: bold;
    background-color: transparent !important;
}

/* Pfeile */
.offcanvas-menu .offcanvas-menu-toggler {
    color: #444;
    right: 15px;
    top: 15px;
}

/* Untermenüs (Level 2) */
.offcanvas-menu .nav.menu li > ul > li > a {
    font-family: 'Architects Daughter', sans-serif !important;
    font-size: 14px !important;
    padding-left: 25px;
    border-bottom: none;
    color: #333 !important;
}

/* Unter-Untermenüs (Level 3) */
.offcanvas-menu .nav.menu li > ul > li > ul > li > a {
    font-family: 'Architects Daughter', sans-serif !important;
    font-size: 13px !important; 
    padding-left: 35px;
    color: #333 !important;
}

/* Bilder im Menü */
.offcanvas-menu img {
    max-width: 20px;
    height: auto;
    margin-right: 8px;
    vertical-align: middle;
}


/* ==========================================================================
   TABLET & MOBILE FIXES (Breiten & Ausrichtung)
   ========================================================================== */

/* 1. TABLET/HANDY (< 992px): Container auf 96% begrenzen (Rand außen behalten) */
@media (max-width: 991px) {
    #sp-titel .container,
    #sp-header-ganz .container,
    #sp-header-logo,
    #sp-main-body .container {
        width: 96% !important;
        max-width: 96% !important;
    }
}

/* 2. HANDY (< 768px): Spezielle Anpassungen */
@media (max-width: 767px) {
    
    /* FIX: Hamburger-Menü vertikal mittig anordnen */
    /* Gleicher Rand oben und unten (15px) */
    #sp-menu {
        margin-top: 15px;
        margin-bottom: 15px; 
    }

    /* FIX: Kontaktformular Breite */
    /* Wir überschreiben die 'col-8' Begrenzung, damit die Felder die volle Breite nutzen */
    form.form-validate fieldset {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}


/* ==========================================================================
   SAISONALE OVERRIDES
   ========================================================================== */

/* --- 1. KASTANIE (Herbst) --- */
body.kastanie { background: #FFFDEF; }
body.kastanie #sp-top-bar { background-color: #FFFDEF; color: #999999; }
body.kastanie #sp-left { background-image: url(/images/Kastanie-left.jpg); }

body.kastanie .offcanvas-menu { background-color: #FFFDEF !important; }
body.kastanie .offcanvas-menu .nav.menu > li.active > a { color: #912017 !important; }

body.kastanie .sp-megamenu-parent>li>a { color: #000000; }
body.kastanie .sp-megamenu-parent>li.active>a,
body.kastanie .sp-megamenu-parent>li:hover>a { color: #5F6E27; }

body.kastanie .sp-module ul>li.current>a,
body.kastanie .sp-module ul>li>a:hover {
    color: #912017;
    text-decoration: none;
    border-right: 3px solid #912017;
}

body.kastanie #sp-component { background-color: #ffa95ebf; }
body.kastanie .dl-horizontal a { color: #868b00; }

body.kastanie .btn-primary {
    border-color: #912017;
    background-color: #FBB32C;
    color: #000000;
}
body.kastanie .btn-primary:hover {
    border-color: #FBB32C;
    background-color: #912017;
    color: #AFBACC;
}


/* --- 2. SOMMER --- */
body.sommer { background: #FFFDEF; }
body.sommer #sp-top-bar { background-color: #FFFDEF; color: #999999; }
body.sommer #sp-left { background-image: url(/images/Sommer-left.jpg); }

body.sommer .offcanvas-menu { background-color: #FFFDEF !important; }
body.sommer .offcanvas-menu .nav.menu > li.active > a { color: #515F25 !important; }

body.sommer .sp-megamenu-parent>li>a { color: #000000; }
body.sommer .sp-megamenu-parent>li.active>a,
body.sommer .sp-megamenu-parent>li:hover>a { color: #5F6E27; }

body.sommer .sp-module ul>li.current>a,
body.sommer .sp-module ul>li>a:hover {
    color: #515F25;
    text-decoration: none;
    border-right: 3px solid #515F25;
}
body.sommer #sp-component { background-color: #d6e477; }
body.sommer .dl-horizontal a { color: #333; }
body.sommer .dl-horizontal a:hover { color: #868b00; }

body.sommer .btn-primary {
    border-color: #a6ac00;
    background-color: #A9AB1C;
    color: #000000;
}
body.sommer .btn-primary:hover {
    border-color: #2B2B2B;
    background-color: #5F6E27;
    color: #AFBACC;
}


/* --- 3. SCHNEE (Jan/Feb) --- */
body.schnee { background: #76BEF0; }
body.schnee #sp-top-bar { background-color: #76bef0; color: #222222 !important; }
body.schnee #sp-left { background-image: url(/images/Schnee-left.jpg); }

body.schnee .offcanvas-menu { background-color: #76BEF0 !important; }
body.schnee .offcanvas-menu .nav.menu > li.active > a { color: #5F6E27 !important; }

body.schnee .sp-megamenu-parent>li>a { color: #000000; }
body.schnee .sp-megamenu-parent>li.active>a,
body.schnee .sp-megamenu-parent>li:hover>a { color: #5F6E27; }

body.schnee .sp-module ul>li.current>a,
body.schnee .sp-module ul>li>a:hover {
    color: #5F6E27;
    text-decoration: none;
    border-right: 3px solid #5F6E27;
}
body.schnee #sp-component { background-color: #cadf7d; }
body.schnee .dl-horizontal a { color: #868b00; }

body.schnee .btn-primary {
    border-color: #a6ac00;
    background-color: #BAD94D;
    color: #000000;
}
body.schnee .btn-primary:hover {
    border-color: #BAD94D;
    background-color: #5F6E27;
    color: #BAD94D;
}


/* --- 4. TULPE (Frühling) --- */
body.tulpe { background: #bfd4e6; color: #342a20; }
body.tulpe #sp-top-bar { background: #bfd4e6; color: #999999; }
body.tulpe #sp-left { background-image: url(/images/Tulpe-left.jpg); }

body.tulpe .offcanvas-menu { background-color: #bfd4e6 !important; }
body.tulpe .offcanvas-menu .nav.menu > li.active > a { color: #d35218 !important; }

body.tulpe .sp-megamenu-parent>li>a { color: #342a20; }
body.tulpe .sp-megamenu-parent>li.active>a,
body.tulpe .sp-megamenu-parent>li:hover>a { color: #5F6E27; }

body.tulpe .sp-module ul>li.current>a,
body.tulpe .sp-module ul>li>a:hover {
    color: #742100;
    text-decoration: none;
    border-right: 3px solid #d35218;
}
body.tulpe #sp-component { background-color: #fcd65c; }
body.tulpe .dl-horizontal a { color: #868b00; }

body.tulpe .btn-primary {
    border-color: #984b01;
    background-color: #f6ad42;
    color: #000000;
}
body.tulpe .btn-primary:hover {
    border-color: #2B2B2B;
    background-color: #5F6E27;
    color: #AFBACC;
}


/* --- 5. WINTER (Dezember - MASTER) --- */
body.winter { background: #AFBACC; }
body.winter #sp-top-bar { background-color: #AFBACC; color: #999999; }
body.winter #sp-left { background-image: url(/images/Winter-left.jpg); }

body.winter .offcanvas-menu { background-color: #AFBACC !important; }
body.winter .offcanvas-menu .nav.menu > li.active > a { color: #002CB1 !important; }

body.winter .sp-megamenu-parent>li>a { color: #000000; }
body.winter .sp-megamenu-parent>li.active>a,
body.winter .sp-megamenu-parent>li:hover>a { color: #5F6E27; }

body.winter .sp-module ul>li.current>a,
body.winter .sp-module ul>li>a:hover {
    color: #002CB1;
    text-decoration: none;
    border-right: 3px solid #002CB1;
}
body.winter #sp-component { background-color: #859abd; }
body.winter .dl-horizontal a { color: #1061cc; }
body.winter .dl-horizontal a:hover { color: #1061cc; }

body.winter .btn-primary {
    border-color: #002CB1;
    background-color: #5783CD;
    color: #000000;
}
body.winter .btn-primary:hover {
    border-color: #AFBACC;
    background-color: #002CB1;
    color: #AFBACC;
}


/* ==========================================================================
   MODULE SICHTBARKEIT (Hilfsklassen)
   ========================================================================== */
.nur-winter, .nur-sommer, .nur-tulpe, .nur-schnee, .nur-kastanie { display: none !important; }
body.winter .nur-winter { display: block !important; }
body.sommer .nur-sommer { display: block !important; }
body.tulpe .nur-tulpe { display: block !important; }
body.schnee .nur-schnee { display: block !important; }
body.kastanie .nur-kastanie { display: block !important; }

#system-message-container {
    margin-top: 30px;
    margin-bottom: 20px;
}