body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
/* =============================================================================
   DIEDERIK CONRAD — Main Stylesheet
   Merged from internal Contao stylesheets (Contao 5 migration)
   ============================================================================= */


/* -----------------------------------------------------------------------------
   DESIGN TOKENS — Colours and typography used throughout the site
   Matches Contao global variables: $beige, $brown, $lgrey, $white
   ----------------------------------------------------------------------------- */

:root {
    --color-beige:      #c4996c;
    --color-brown:      #3f2d29;
    --color-lgrey:      #525252;
    --color-white:      #ffffff;

    --font-family:      system-ui, "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    --font-size:        14px;
    --font-size-mobile: 15px;

    --transition-link:  color 0.2s ease;
    --radius-sm:        4px;
    --shadow-container: 0 2px 12px rgba(0, 0, 0, 0.08);
}


/* -----------------------------------------------------------------------------
   GENERAL — Typography, colours, links
   ----------------------------------------------------------------------------- */

#wrapper,
a,
span,
li,
nav {
    font: var(--font-size) var(--font-family);
    color: var(--color-brown);
    text-decoration: none;
}

a {
    transition: var(--transition-link);
}

a:hover {
    text-decoration: underline;
    color: var(--color-beige);
}


/* -----------------------------------------------------------------------------
   LAYOUT — Top, container, main content area
   ----------------------------------------------------------------------------- */

#top {
    background-color: var(--color-beige);
}

#container {
    min-height: 500px;
    background-color: rgba(255, 255, 255, .85);
    box-shadow: var(--shadow-container);
}

#main {
    width: 100%;
    max-width: 800px;
    top: -20px;
    position: relative;
}

.mod_article {
    clear: both;
    padding-top: 40px;
    padding-right: 30px;
    padding-bottom: 20px;
}


/* -----------------------------------------------------------------------------
   HEADER — Logo / background image
   Sub pages use the smaller logo; home pages use the full logo (via .page-home)
   Add CSS class "page-home" to home_nl and home_en in Contao site structure
   ----------------------------------------------------------------------------- */

#header {
    background-image: url("../../files/diederik/files/diederik/images/logo_DC_klein.jpg");
    background-position: center top;
}

.page-home #header {
    background-image: url("../../files/diederik/files/diederik/images/logo_DC.jpg");
}


/* -----------------------------------------------------------------------------
   NAVIGATION — Main nav, language switcher, mini logo
   ----------------------------------------------------------------------------- */

ul.level_1 {
    position: relative;
    margin: 0;
    padding: 1em .5em .5em 1em;
    list-style-type: none;
}

.miniLogo {
    left: 10px;
    position: relative;
}

nav.mod_customnav {
    margin: 0;
    padding-top: 10px;
    font-weight: bold;
    color: var(--color-brown);
}

nav.mod_navigation li {
    padding: 1em .5em .5em 1em;
}

nav.mod_navigation a {
    font-weight: bold;
    color: var(--color-brown);
}

span.active {
    font-weight: bold;
    color: var(--color-beige);
}

nav.mod_changelanguage {
    top: 10px;
    position: relative;
    float: right;
    margin-top: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
}

nav.mod_changelanguage li {
    color: var(--color-beige);
}


/* -----------------------------------------------------------------------------
   FOOTER
   ----------------------------------------------------------------------------- */

#footer {
    background-color: var(--color-brown);
    font: var(--font-size) var(--font-family);
    font-weight: bold;
    color: var(--color-beige);
}


/* -----------------------------------------------------------------------------
   ACCORDION (FAQ / Coachingsvragen)
   ----------------------------------------------------------------------------- */

.ce_accordion div.accordion > div {
    padding: 0 .5em .5em;
    color: var(--color-brown);
}

.ce_accordion div.toggler {
    margin: .5em 0;
    padding: .5em;
    background-color: var(--color-beige);
    color: var(--color-brown);
    cursor: pointer;
    outline: 0 none;
    border-radius: var(--radius-sm);
    transition: background-color 0.2s ease;
}

.ce_accordion div.active {
    margin-top: .5em;
    margin-bottom: .5em;
    background-color: var(--color-brown);
    color: var(--color-beige);
    border-radius: var(--radius-sm);
}

.ce_accordion div.hover {
    margin-top: .5em;
    margin-bottom: .5em;
    text-decoration: underline;
}


/* -----------------------------------------------------------------------------
   MOBILE — Responsive styles (max-width: 768px)
   ----------------------------------------------------------------------------- */

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

    body {
        background-color: var(--color-beige);
        font: var(--font-size-mobile) var(--font-family);
    }

    a,
    span,
    li,
    nav {
        text-decoration: none;
    }

    #container a,
    #container span,
    #container nav {
        color: var(--color-beige);
    }

    #container {
        min-height: 500px;
        background-color: rgba(255, 255, 255, .85);
        color: var(--color-brown);
    }

    /* Mobile header — uses smart logo regardless of page type */
    #header {
        background: var(--color-brown) url("../../files/diederik/files/diederik/images/logo_DC_smart.jpg") center center no-repeat;
    }

    /* Mobile menu */
    #dk_mmenu {
        background-color: var(--color-brown);
        font-weight: bold;
        color: var(--color-beige);
    }

    .dk_mmenu-icon {
        left: 0;
        top: 0;
        position: absolute;
        padding: 0 .2em;
        font-size: 2.5em;
        text-decoration: none;
        color: var(--color-beige);
    }

    #dk_mmenu li {
        font-weight: normal;
    }

    #dk_mmenu li .active {
        margin-left: 1.2em;
        font-size: 1.2em;
        line-height: 2.7em;
        font-weight: bold;
    }

    ul.level_1 {
        position: relative;
        list-style-type: none;
    }

    .miniLogo {
        left: -30px;
        position: relative;
    }

    span.active {
        font-weight: bold;
        color: var(--color-beige);
    }

    nav.mod_changelanguage {
        top: 10px;
        position: relative;
        float: right;
        list-style-type: none;
    }

    nav.mod_changelanguage li {
        color: var(--color-beige);
    }

    a.lang-nl,
    a.lang-en {
        color: var(--color-beige);
    }

    .mod_article {
        clear: both;
        padding-top: 40px;
        padding-bottom: 20px;
    }

    .mod_article img {
        max-width: 90%;
    }

    #main {
        width: 98%;
        top: -20px;
        position: relative;
    }

    #main .inside {
        padding: 5px 6px 5px 15px;
    }

    #main a:hover {
        text-decoration: underline;
        color: var(--color-beige);
    }

    #footer {
        background-color: var(--color-brown);
        font: var(--font-size) var(--font-family);
        font-weight: bold;
        color: var(--color-beige);
    }

    /* Accordion — repeated here for mobile context */
    .ce_accordion div.accordion > div {
        padding: 0 .5em .5em;
        color: var(--color-brown);
    }

    .ce_accordion div.toggler {
        margin: .5em 0;
        padding: .5em;
        background-color: var(--color-beige);
        color: var(--color-brown);
        cursor: pointer;
        outline: 0 none;
        border-radius: var(--radius-sm);
        transition: background-color 0.2s ease;
    }

    .ce_accordion div.active {
        margin-top: .5em;
        margin-bottom: .5em;
        background-color: var(--color-brown);
        color: var(--color-beige);
        border-radius: var(--radius-sm);
    }

    .ce_accordion div.hover {
        margin-top: .5em;
        margin-bottom: .5em;
        text-decoration: underline;
    }

} /* end @media mobile */