#blendtest {
    display:none;
    position:fixed;
    width:100px;
    height:100px;
    top:100px;
    left:100px;
    border:1px solid red;
    z-index:1000000;
    mix-blend-mode: difference;
    background-color:#ffffff;
}

blockquote, q {
    quotes:auto;
}

blockquote::before, q::before {
    content: open-quote;
}

blockquote::after, q::after {
    content: close-quote;
}

ul {
    list-style-type: circle;
    margin:20px 0;
}

    ul li {
        margin-left:20px;
    }

:root {
    --title-font-size:13.5px;
    --title-line-height:21px;
    --title-letter-spacing:0.13125em;
    --h1-font-size:44px;
    --h1-line-height:50px;
    --h1-letter-spacing:-0.009375em;
    --h2-font-size:28px;
    --h2-line-height:34px;
    --h2-letter-spacing:0.02em;
    --text-font-size:16px;
    --text-line-height:21px;
    --text-letter-spacing:0.02625em;

    --fg-color:#2B3433;
    --bg-color:#EEEFE9;
    --quote-color:#C2F96D;
    --header-padding-side:0;
    --welcome-header-side-padding:0px;
    --page-start-padding:150px;
    --page-start-text-width:65%;
    --menu-hover-color:#9fd64a;
    --menu-active-color:#2B3433;
    --news-link-hover-color:#eeefe9;
    --max-width-content:1400px;
    --max-width-beequote:900px;
    --max-width-quote:900px;
    --max-width-hint:900px;
}

@font-face {
    font-family: "TTFors";
    src: url('/etc/fonts/TypeType - TT Fors Light.ttf') format('truetype');
    font-weight:300;
    font-style:normal;
}

@font-face {
    font-family: "TTFors";
    src: url('/etc/fonts/TypeType - TT Fors Regular.ttf') format('truetype');
    font-weight:400;
    font-style:normal;
}

@font-face {
    font-family: "TTFors";
    src: url('/etc/fonts/TypeType - TT Fors Medium.ttf') format('truetype');
    font-weight:500;
    font-style:normal;
}

.bb-font-title {
    font-size:var(--title-font-size);
    line-height:var(--title-line-height);
    letter-spacing:var(--title-letter-spacing);
    text-transform:uppercase;
}

.bb-font-h1 {
    font-size:var(--h1-font-size);
    line-height:var(--h1-line-height);
    letter-spacing:var(--h1-letter-spacing);
    font-weight:500;
}

.bb-font-h2 {
    font-size:var(--h2-font-size);
    line-height:var(--h2-line-height);
    letter-spacing:var(--h2-letter-spacing);
    font-weight:300;
}

.bb-font-h3 {
    font-size:var(--h1-font-size);
    line-height:var(--h1-line-height);
    letter-spacing:var(--h1-letter-spacing);
    font-weight:300;
}

.bb-font-h4 {
    font-size:var(--h2-font-size);
    line-height:var(--h2-line-height);
    letter-spacing:var(--h2-letter-spacing);
    font-weight:500;
}

.bb-font-text {
    font-size:var(--text-font-size);
    line-height:var(--text-line-height);
    letter-spacing:var(--text-letter-spacing);
}

.bb-medium {
    font-weight:500;
}

.bb-link:hover {
    color:var(--menu-hover-color);
}

html, body {
    background-color:var(--bg-color);
    font-family: "TTFors";
    font-weight:400;
    font-style:normal;
    font-size:var(--text-font-size);
    line-height:var(--text-line-height);
    letter-spacing:var(--text-letter-spacing);
    color:var(--fg-color);
    min-width:320px;
    hyphens: none; /* auto */
    hyphenate-limit-chars:6 3 3;
    -webkit-hyphens: none; /* auto */
    -webkit-hyphenate-limit-chars:6 3 3;
    -webkit-hyphenate-limit-before: 3;
    -webkit-hyphenate-limit-after: 3;
    hyphenate-limit-lines:1;
}

/* section */

.bb-wrap-section {
    position:relative;
    width:100%;
}

.bb-section {
    position:relative;
    margin:0 auto;
    max-width:var(--max-width-content);
    padding:0 20px;
}

.bb-section-content {
    position:relative;
    width:100%;
}

    .bb-section-content.bb-2-column { 
        display:flex;
    }
    
        .bb-section-content.bb-2-column > div {
            position:relative;
            width:50%;
        }
        
        .bb-section-content.bb-2-column.bb-pad-more > div {
            padding:0 0px;
            padding-right:40px;
        }

.bb-section-title-bar {
    position:relative;
    display:grid;
    grid-template-columns:1fr min-content 1fr;
    gap:0 20px;
    text-align:center;
    min-height:22px;
    margin:20px 0;
}

    .bb-section-title-bar.bb-no-label {
        grid-template-columns:1fr;
    }

    .bb-section-title-bar .bb-bar-left,
    .bb-section-title-bar .bb-bar-right {
        position:relative;
    }

    .bb-section-title-bar .bb-bar-left::before,
    .bb-section-title-bar .bb-bar-right::before {
        content:'';
        position:absolute;
        top:11px;
        left:0;
        height:1px;
        background-color:var(--fg-color);
        width:100%;
        z-index:1;
    }

        .bb-section-title-bar.bb-white .bb-bar-left::before,
        .bb-section-title-bar.bb-white .bb-bar-right::before {
            background-color:#ffffff;
        }
    
    .bb-section-title-bar > div {
        position:relative;
        display:inline-block;
        /*
        padding:0 20px;
        background-color:var(--bg-color);
        */
        text-align: center;
        z-index:5;
        white-space:nowrap;
        color:var(--fg-color);
    }
    
        .bb-section-title-bar.bb-white > div {
            color:#ffffff;
        }
    
    .bb-section-title-bar > div > br {
        display:none;
    }
    
.bb-section-pad-1 {
    padding:0 80px;
}

/* header */

#bb-header-placeholder {
    width:100%;
    height:90px;
    overflow:hidden;
}

#bb-header {
    position:fixed;
    z-index:100;
    width:100%;
    height:90px;
    opacity:0;
    transform:translateY(-90px);
    box-shadow: 0px 3px 6px #00000029;
    overflow:hidden;
    transition:all 0.3s ease-in-out;
}

    #bb-header .bb-header-bg {
        position:absolute;
        top:0;
        left:0;
        right:0;
        height:calc(100vh - 300px);
        background-color:#ffffff;
        transition:all 0.3s ease-in-out;
    }

    #bb-header .bb-header-bg-bl {
        position:absolute;
        top:calc(100vh - 302px);
        left:0;
        right:198px;
        bottom:0;
        background-color:#ffffff;
        transition:all 0.3s ease-in-out;
    }

    #bb-header .bb-header-bg-br {
        position:absolute;
        top:calc(100vh - 300px);
        width:200px;
        right:0;
        bottom:0;
        transition:all 0.3s ease-in-out;
    }
    
        #bb-header .bb-header-bg-br .fill {
            fill:#ffffff;
            stroke-width: 0px;
            transition:all 0.3s ease-in-out;
        }
    
    #bb-header.bb-animate {
        /*transition:all 0.3s ease-in-out;*/
    }

    #bb-header.bb-show,
    html.bb-menu-open #bb-header {
        opacity:1;
        transform:translateY(0px);
    }

    #bb-header .bb-header-logo-icon {
        opacity:0;
        position:absolute;
        top:25px;
        left:var(--header-padding-side);
        width:35px;
        height:40px;
    }
    
    #bb-header .bb-header-logo-text {
        position:absolute;
        top:25px;
        left:var(--header-padding-side);
        width:112px;
        height:40px;
    }
    
        #bb-header .bb-header-logo-text:hover {
            cursor:pointer;
            opacity:0.7;
        }
    
    #bb-header .bb-header-menu {
        position:absolute;
        top:25px;
        right:-20px;
        height:40px;
    }
    
        #bb-header .bb-header-menu-entry {
            position:relative;
            float:right;
            line-height:40px;
            padding:0 10px;
            margin:0 10px;
            transition:all 0.2s ease-in-out;
            user-select:none;
        }
        
            #bb-header .bb-header-menu-entry.bb-active {
                color:var(--menu-active-color);
            }
            
                #bb-header .bb-header-menu-entry::after {
                    position:absolute;
                    bottom:10px;
                    left:50%;
                    right:50%;
                    content:'';
                    height:1px;
                    background-color:transparent;
                    transition:all 0.2s ease-in-out;
                }

                #bb-header .bb-header-menu-entry.bb-active::after {
                    position:absolute;
                    bottom:10px;
                    left:10px;
                    right:10px;
                    content:'';
                    height:1px;
                    background-color:var(--fg-color);
                }
        
            #bb-header .bb-header-menu-entry:hover {
                cursor:pointer;
                opacity:0.7;
                color:var(--menu-hover-color);
            }
            
        .bb-open-menu-button,
        .bb-close-menu-button {
            display:none;
        }
        
    #bb-header .bb-menu {
        display:none;
    }
            
.bb-navigate-intermission {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#EEEFE9;
    z-index:10;
    opacity:0;
    display:none;
}

    .bb-navigate-intermission.bb-transition {
        transition:all 0.50s cubic-bezier(.8,0,.2,1);
        display:block;
    }

    .bb-navigate-intermission.bb-open {
        opacity:1;
    }

    .bb-navigate-intermission.bb-close {
        opacity:0;
    }

/* pages */

.bb-page {
    display:none;
    padding-top:90px;
}

.bb-page.bb-active {
    display:block;
}

.bb-page[data-page='welcome'] {
    padding-top:0;
}

/* page welcome */
#bb-welcome-header {
    position:relative;
    width:100%;
    height:170px;
    background-color:#EEEFE9;
}

    #bb-welcome-header .bb-header-logo-icon {
        position:absolute;
        top:50px;
        left:var(--welcome-header-side-padding);
        width:52px;
        height:60px;
    }
    
    #bb-welcome-header .bb-header-logo-text {
        position:absolute;
        top:50px;
        left:calc(var(--welcome-header-side-padding) + 67px);
        width:168px;
        height:60px;
    }
    
    #bb-welcome-header .bb-header-menu {
        position:absolute;
        top:50px;
        right:calc(var(--welcome-header-side-padding) - 20px);
        height:60px;
    }
    
        #bb-welcome-header .bb-header-menu-entry {
            float:right;
            line-height:60px;
            padding:0 10px;
            margin:0 10px;
            transition:all 0.2s ease-in-out;
        }
        
            #bb-welcome-header .bb-header-menu-entry:hover {
                cursor:pointer;
                color:var(--menu-hover-color);
            }

.bb-welcome-image {
    position:relative;
    background-image:url(/etc/images/welcome.webp);
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
    /*padding-top:58.5%;*/
    height:100vh;
}

    .bb-welcome-title {
        position:absolute;
        top:110px;
        left:110px;
        right:40%;
        color:#eeefe9;
    }

        .bb-welcome-title br {
            display:none;
        }
        
        @media all and (min-width:2150px) {
            .bb-welcome-title br {
                display:block;
            }
        }

.bb-welcome-text {
    margin-top:130px;
    margin-bottom:130px;
}


    .bb-welcome-text .bb-font-h2 {
        margin-bottom:20px;
    }

#bb-welcome-cards {
    padding-top:140px;
    background-color:#C2D0C4;
}

    #bb-welcome-cards .bb-section-content {
        display:grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 10px;
    }
    
    #bb-welcome-cards .bb-card {
        position:relative;
        background-position:center center;
        background-size: cover;
        background-repeat: no-repeat;
        padding-top:112%;
        border-radius: 10px 10px 10px 0px;
        overflow:hidden;
    }
    
        #bb-welcome-cards .bb-card:hover {
            cursor:pointer;
        }
    
        #bb-welcome-cards .bb-card[data-page='people'] {
            background-image:url(/etc/images/Teaser-Angebot-01.jpg);
        }

        #bb-welcome-cards .bb-card[data-page='projects'] {
            background-image:url(/etc/images/Teaser-Partner-01.jpg);
        }
    
        #bb-welcome-cards .bb-card[data-page='offers'] {
            background-image:url(/etc/images/Teaser-Experten-01.jpg);
        }
        
        #bb-welcome-cards .bb-card .bb-sheet {
            position:absolute;
            bottom:-2px;
            left:-2px;
            right:-2px;
            top:-2px;
            clip-path: inset(calc(100% - 200px) 20% 0% 0% round 10px 10px 10px 0px);
            transition:all 0.2s ease-in-out;
            background-position:center center;
            background-size: cover;
            background-repeat: no-repeat;
            /*border-radius: 10px 10px 10px 0px;*/
        }
        
            #bb-welcome-cards .bb-card[data-page='people'] .bb-sheet {
                background-image:url(/etc/images/card-sheet-angebot.svg);
            }
        
            #bb-welcome-cards .bb-card[data-page='projects'] .bb-sheet {
                background-image:url(/etc/images/card-sheet-partner.svg);
            }
        
            #bb-welcome-cards .bb-card[data-page='offers'] .bb-sheet {
                background-image:url(/etc/images/card-sheet-experten.svg);
            }
        
            #bb-welcome-cards .bb-card:hover .bb-sheet {
                clip-path: inset(-1% -1% -1% -1% round 0px 0px 0px 0px);
            }
        
            #bb-welcome-cards .bb-card .bb-sheet > div {
                position:absolute;
                transition:all 0.2s ease-in-out;
            }
            
                #bb-welcome-cards .bb-card .bb-sheet .bb-number {
                    left:40px;
                    top:calc(100% - 160px);
                }

                    #bb-welcome-cards .bb-card:hover .bb-sheet .bb-number {
                        top:calc(100% - 260px);
                    }

                #bb-welcome-cards .bb-card .bb-sheet .bb-title {
                    left:40px;
                    top:calc(100% - 140px);
                }

                    #bb-welcome-cards .bb-card:hover .bb-sheet .bb-title {
                        top:calc(100% - 240px);
                    }

                #bb-welcome-cards .bb-card .bb-sheet .bb-text {
                    left:40px;
                    right:30%;
                    top:calc(100% - 100px);
                    opacity:0;
                }
                
                    #bb-welcome-cards .bb-card:hover .bb-sheet .bb-text {
                        top:calc(100% - 200px);
                        opacity:1;
                    }

                #bb-welcome-cards .bb-card .bb-sheet .bb-arrow {
                    left:40px;
                    bottom:40px;
                    opacity:0;
                }

                    #bb-welcome-cards .bb-card:hover .bb-sheet .bb-arrow {
                        opacity:1;
                    }
                    
@media (pointer: coarse) and (hover: none) {
    #bb-welcome-cards .bb-card .bb-sheet {
        clip-path: inset(0% 0% 0% 0% round 10px 10px 10px 0px);
    }
    #bb-welcome-cards .bb-card .bb-sheet .bb-number {
        top:calc(100% - 260px);
    }

    #bb-welcome-cards .bb-card .bb-sheet .bb-title {
        top:calc(100% - 240px);
    }

    #bb-welcome-cards .bb-card .bb-sheet .bb-text {
        top:calc(100% - 200px);
        opacity:1;
    }

    #bb-welcome-cards .bb-card .bb-sheet .bb-arrow {
        opacity:1;
    }
}

#bb-news {
    padding-top:140px;
    padding-bottom:140px;
    background-color:#C2D0C4;
}            

    .bb-news-entry {
        position:relative;
        height:240px;
        padding:0 25px;
        border-left:1px solid var(--fg-color);
    }
    
        .bb-news-entry .bb-type {
            position:absolute;
            top:0;
            left:25px;
            right:25px;
        }
        
        .bb-news-entry .bb-title {
            position:absolute;
            bottom:135px;
            left:25px;
            right:25px;
        }
    
        .bb-news-entry .bb-text {
            position:absolute;
            top:130px;
            left:25px;
            right:25px;
            max-height:calc(3 * var(--text-line-height));
            overflow:hidden;
        }

        .bb-news-entry .bb-link {
            position:absolute;
            bottom:0;
            left:25px;
            right:25px;
        }
        
            .bb-news-entry .bb-link:hover {
                color:var(--news-link-hover-color);
            }
        
            .bb-news-entry .bb-link::before {
                content:'→ ';
            }

        .bb-news-entry .bb-bar {
            position:absolute;
            display:none;
            top:0;
            bottom:0;
            right:-1px;
            width:1px;
            background-color:var(--fg-color);
        }
        
.bb-wrap-section.bb-quote.bb-bee {
    background-color:transparent;
    color:#ffffff;
    padding:250px 0;
}

html[data-page='welcome'] .bb-wrap-section.bb-quote.bb-bee {
    background-color:transparent;
    color:#ffffff;
    background-image:url(/etc/images/bee.jpg);
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
}

    .bb-wrap-section.bb-quote.bb-bee .bb-section {
        max-width:var(--max-width-beequote);
    }

/* page angebot */
#bb-angebot {
    background-color:var(--fg-color);
    color:var(--quote-color);
    padding-top:var(--page-start-padding);
    padding-bottom:var(--page-start-padding);
}

.bb-angebot-grid {
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap:100px 20px;
}

    .bb-angebot-grid .bb-bar {
        margin:25px 0;
        width:100%;
        height:1px;
        background-color:var(--quote-color);
    }

    .bb-angebot-grid .bb-row-1 {
        grid-column-start: 1;
        grid-column-end: 4;
    }
    
        .bb-angebot-grid .bb-row-1 > div {
            width:var(--page-start-text-width);
        }
        
        .bb-angebot-grid .bb-row-1 .bb-font-text {
            margin-top:50px;
            margin-bottom:50px;
        }

    .bb-angebot-grid .bb-row-2-left {
        grid-column-start: 1;
        grid-column-end: 2;
    }
    
        .bb-angebot-grid .bb-row-2-left img {
            width:100%;
            border-radius: 10px 10px 10px 0px;
        }

    .bb-angebot-grid .bb-row-2-right {
        grid-column-start: 2;
        grid-column-end: 4;
        padding-left:200px;
    }

    .bb-angebot-grid .bb-row-3-left {
        grid-column-start: 1;
        grid-column-end: 3;
        padding-right:200px;
    }

    .bb-angebot-grid .bb-row-3-right {
        grid-column-start: 3;
        grid-column-end: 4;
    }

        .bb-angebot-grid .bb-row-3-right img {
            width:100%;
            border-radius: 10px 10px 10px 0px;
        }
        
    .bb-toggle-angebot-details {
        position:relative;
    }
    
        .bb-toggle-angebot-details:hover {
            cursor:pointer;
        }
    
        .bb-toggle-angebot-details .bb-state-icon {
            position:absolute;
            top:0;
            right:0;
            width:var(--h2-line-height);
            height:var(--h2-line-height);
        }
        
            .bb-toggle-angebot-details .bb-state-icon::before {
                content:'';
                position:absolute;
                top:50%;
                bottom:50%;
                left:0;
                right:0;
                width:100%;
                height:1px;
                background-color:var(--quote-color);
                transition:all 0.2s ease;
            }

            .bb-toggle-angebot-details.bb-closed .bb-state-icon::before {
                top:0;
                left:50%;
                right:50%;
                bottom:0;
                width:1px;
                height:100%;
            }

            .bb-toggle-angebot-details .bb-state-icon::after {
                content:'';
                position:absolute;
                top:50%;
                left:0;
                right:0;
                width:100%;
                height:1px;
                background-color:var(--quote-color);
            }
        
        .bb-angebot-details {
            overflow:hidden;
            max-height:0;
            transition:all 0.2s ease-in-out;
        }
            .bb-angebot-details > div {
                margin:40px 0;
            }
        
            .bb-angebot-details.bb-open {
                max-height:600px;
            }

/* page projects */

#bb-project-list {
    margin-bottom:50px;
}

/* page partner */
.bb-partner-fixed-bg {
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-image:url(/etc/images/partner-bg.jpg);
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index:0;
}

#bb-partner-textbox,
#bb-experts-textbox {
    background-color:#EEEFE9E5;
    margin-bottom:150px;
    padding:var(--page-start-padding) 0;
}

#bb-experts-textbox {
    margin-bottom:0;
}

    #bb-partner-textbox .bb-font-h1,
    #bb-experts-textbox .bb-font-h1 {
        width:var(--page-start-text-width);
    }

    #bb-partner-textbox .bb-2-column,
    #bb-experts-textbox .bb-2-column {
        padding-top:40px;
    }
    
    #bb-partner-textbox .bb-2-column > div,
    #bb-experts-textbox .bb-2-column > div {
        padding:0;
    }

    #bb-partner-textbox .bb-2-column > div:nth-child(1),
    #bb-experts-textbox .bb-2-column > div:nth-child(1) {
        padding-right:30px;
    }

    #bb-partner-textbox .bb-2-column > div:nth-child(2),
    #bb-experts-textbox .bb-2-column > div:nth-child(2) {
        padding-left:30px;
    }

#bb-partner-list {
    /*background-color:var(--bg-color);*/
    padding:90px 0;
}

    #bb-partner-list .bb-section-title-bar> div {
        background-color:transparent;
        color:#ffffff;
        
    }
    
    #bb-partner-list .bb-section-title-bar::before {
        content:none;
    }

    .bb-partner-cards {
        padding:30px 0 100px 0;
        display:grid;
        grid-template-columns: 1fr 1fr;
        grid-gap:16px;
    }
    
        .bb-partner-card {
            position:relative;
            background-color:#ffffff;
            border-radius: 10px 10px 10px 0px;
            padding:200px 60px 100px 60px;
        }
        
            .bb-partner-card .bb-type {
                position:absolute;
                top:60px;
                left:60px;
                right:60px;
            }

            .bb-partner-card .bb-name {
                position:absolute;
                top:100px;
                left:60px;
                right:60px;
            }

            .bb-partner-card .bb-link {
                position:absolute;
                bottom:60px;
                left:60px;
                font-weight:500;
            }

                .bb-partner-card .bb-link::before {
                    content:'→ ';
                }

/* experts */

#bb-experts-textbox {
    padding:var(--page-start-padding) 0;
}

    #bb-experts-textbox .bb-section {
    }
    
    #bb-experts-textbox .bb-section .bb-font-h1 {
        width:var(--page-start-text-width);
    }
    
    #bb-experts-textbox .bb-2-column {
        margin-top:40px;
        /*width:var(--page-start-text-width);*/
    }

#bb-experts-list {
    padding-bottom:50px;
}

.bb-board-cards,
.bb-experts-cards {
    position:relative;
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 70px 10px;
    padding:30px 0 120px 0;
}

.bb-board-card {
    position:relative;
    padding:400px 50px 80px 30px;
    border-radius: 10px 10px 10px 0px;
    z-index:0;
}

    .bb-board-card .bb-image {
        position:absolute;
        top:0;
        right:0;
        left:0;
        bottom:0;
        background-position:center center;
        background-size: cover;
        background-repeat: no-repeat;
        z-index:-10;
    }

    .bb-board-card .bb-sheet {
        position:absolute;
        background-color:rgba(255,255,255,0.93);
        top:300px;
        left:0;
        right:20px;
        bottom:20px;
        border-radius: 10px 10px 10px 0px;
        z-index:-9;
    }
    
        .bb-board-card .bb-position {
            position:absolute;
            color:#ffffff;
            top:260px;
            left:30px;
        }
        
        .bb-board-card .bb-name {
            position:absolute;
            top:350px;
            left:30px;
            right:50px;
        }

        .bb-board-card .bb-text {
        }

        .bb-board-card .bb-link {
            position:absolute;
            bottom:30px;
            left:30px;
            right:50px;
            font-weight:500;
        }
        
            .bb-board-card .bb-link::before {
                content:'→ ';
            }

.bb-expert-card {
    position:relative;
    padding:305px 30px 70px 30px;
    z-index:0;
}

    .bb-expert-card .bb-sheet {
        position:absolute;
        top:60px;
        right:0;
        bottom:0;
        left:0;
        background-color:#C2D0C4;
        border-radius: 10px 10px 10px 0px;
        z-index:-10;
    }

    .bb-expert-card .bb-image {
        position:absolute;
        top:0;
        right:20px;
        width:200px;
        height:200px;
        border-radius: 10px 10px 10px 0px;
        background-position:center center;
        background-size: cover;
        background-repeat: no-repeat;
    }

        .bb-expert-card .bb-name {
            position:absolute;
            top:240px;
            left:30px;
            right:10px;
        }

        .bb-expert-card .bb-link {
            position:absolute;
            bottom:30px;
            left:30px;
            font-weight:500;
        }
        
            .bb-expert-card .bb-link::before {
                content:'→ ';
            }

/* kontakt */

.bb-kontakt-block {
    padding:30px 0 70px 0;
}

.bb-legal.bb-section-content.bb-2-column {
    background-color:#ffffff;
    padding:200px 90px 100px 90px;
    border-radius: 10px 10px 10px 0px;
    margin-top:50px;
    margin-bottom:100px;
}

.bb-legal.bb-section-content.bb-2-column > div {
    padding-right:40px;
}

.bb-legal .bb-title {
    position:absolute;
    top:-100px;
    left:0px;
}

/* hint */
.bb-wrap-section.bb-hint {
    padding:90px 0;
    background-color:var(--bg-color);
}

    .bb-wrap-section.bb-hint .bb-section {
        max-width:var(--max-width-hint);
    }
    
    .bb-wrap-section.bb-hint .bb-2 {
        margin-top:40px;
        margin-bottom:20px;
    }
    
    .bb-wrap-section.bb-hint .bb-3 {
        width:auto;
    }

html[data-page='people'] .bb-wrap-section.bb-hint,
html[data-page='projects'] .bb-wrap-section.bb-hint {
    background-color:var(--fg-color);
    color:var(--quote-color);
}

/* facts */
#bb-facts {
    position:relative;
    overflow:hidden;
    background-color:#EEEFE9;
    padding-bottom:90px;
}

    #bb-facts.bb-alt {
        background-color:#2b3433;
        color:#c2f96d;
    }

html[data-page='people'] #bb-facts,
html[data-page='projects'] #bb-facts {
    background-color:var(--fg-color);
}

html[data-page='kontakt'] #bb-facts {
    display:none;
}

.bb-fact {
    position:relative;
    width:100%;
    padding-top:115%;
    background-image:url(/etc/images/Fakten-Bild-01.jpg);
    background-position:center center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px 10px 10px 0px;
    color:#2b3433;
}

    .bb-fact .bb-sheet {
        position:absolute;
        top:40px;
        left:0;
        right:40px;
        bottom:0;
        border-radius: 10px 10px 10px 0px;
        background-color:#ffffff;
        padding:35px 25px 25px 30px;
    }
    
    .bb-fact .bb-sheet .bb-title {
        
    }

    .bb-fact .bb-sheet .bb-number {
        margin-top:10px;
        margin-bottom:10px;
        
    }

    .bb-fact .bb-sheet .bb-text {
        
    }

    .bb-fact .bb-sheet .bb-source {
        margin-top:20px;
    }
    
        .bb-fact .bb-sheet .bb-source::before {
            content:'–';
            margin-right:7px;
        }

        .bb-fact .bb-sheet .bb-source::after {
            content:'–';
            margin-left:7px;
        }

/* quote */
.bb-wrap-section.bb-quote {
    position:relative;
    background-color:#C2D0C4;
    color:var(--fg-color);
    padding:90px 0;
}

html[data-page='welcome'] .bb-wrap-section.bb-quote {
    background-color:var(--fg-color);
    color:var(--quote-color);
}

    .bb-wrap-section.bb-quote .bb-section {
        max-width:var(--max-width-quote);
    }

.bb-quote-origin {
    margin-top:30px;
}

.bb-quote blockquote {
    text-indent:50px;
}

/* footer */

#bb-footer {
    position:relative;
    padding-top:100px;
    background-color:#ffffff;
}            

    #bb-footer .bb-section-title-bar > div {
        background-color:#ffffff;
    }

.bb-footer-founders .splide__slide,
.bb-footer-coops .splide__slide {
    text-align:center;
}

.bb-footer-row {
    position:relative;
    display:flex;
    width:100%;
}

    .bb-footer-row > div {
        padding:30px 0 50px 0;
        width:50%;
    }
    
    .bb-footer-links .bb-wrap {
        float:right;
    }
    
    .bb-footer-menu-entry {
        display:inline-block;
        margin-right:40px;
    }
    
        .bb-footer-menu-entry:hover {
            cursor:pointer;
            color:var(--menu-hover-color);
        }
    
        .bb-footer-menu-entry:nth-child(3) {
            margin-right:0;
        }
        
    .bb-footer-linkedin {
        margin-top:30px;
    }
    
        .bb-footer-linkedin:hover {
            cursor:pointer;
            color:var(--menu-hover-color);
        }
    
.bb-footer-bar {
    position:relative;
    background-color:var(--fg-color);
    display:flex;
    align-items: center;
    color:#ffffff;
    /*line-height:90px;*/
    height:90px;
    padding:0 60px;
    border-radius: 10px 10px 0px 0px;
    margin-top:10px;
    overflow:hidden;
}

    .bb-footer-copy {
        width: calc(100% - 40px);
    }

    .bb-footer-scroll-top {
        position:absolute;
        right:60px;
        transform:matrix(-1, 0, 0, -1, 0, 0);
        transition:all 0.2s ease-in-out;
    }
    
    .bb-footer-scroll-top::before {
        content:'';
        position:absolute;
        top:20px;
        left:0;
        height:1px;
        background-color:#ffffff;
        width:100%;
        z-index:1;
    }
    
    .bb-footer-scroll-top:hover {
        cursor:pointer;
        color:var(--menu-hover-color);
    }
    
        .bb-footer-scroll-top:hover::before {
            background-color:var(--menu-hover-color);
        }

@media all and (max-width:1280px) {
    :root {
        --title-font-size:13.5px;
        --title-line-height:21px;
        --title-letter-spacing:0.13125em;
        --h1-font-size:44px;
        --h1-line-height:50px;
        --h1-letter-spacing:-0.009375em;
        --h2-font-size:28px;
        --h2-line-height:34px;
        --h2-letter-spacing:0.02em;
        --text-font-size:16px;
        --text-line-height:21px;
        --text-letter-spacing:0.02625em;
        
    }
    
        .bb-section-content.bb-2-column.bb-pad-more > div {
            padding:0 45px;
        }

    #bb-welcome-cards .bb-section-content {
        grid-template-columns: 1fr 1fr;
    }
    
    #bb-welcome-cards .bb-card:nth-child(1) {
        grid-column-start: 1;
        grid-column-end: 3;
    }
    
    #bb-welcome-cards .bb-card[data-page='angebot'] {
        padding-top:55%;
    }

    #bb-welcome-cards .bb-card[data-page='angebot'] .bb-sheet {
        background-image:url(/etc/images/card-sheet-angebot-wide.svg);
    }

    .bb-board-cards,
    .bb-experts-cards {
        grid-template-columns: 1fr 1fr;
    }

}

@media all and (max-width:1024px) {
    .bb-section-content.bb-2-column { 
        display:flex;
        flex-direction:column;
    }
    
        .bb-section-content.bb-2-column > div {
            position:relative;
            padding:30px 45px;
            width:100%;
        }
        
            .bb-legal.bb-section-content.bb-2-column > div {
                padding:0 40px 0 0;
            }
        
            .bb-legal.bb-section-content.bb-2-column > div:nth-child(2) {
                padding-top:100px;
            }
            
            .bb-legal.bb-section-content.bb-2-column > div:nth-child(2) .bb-title {
                position:relative;
                top:auto;
                left:auto;
                padding-bottom:66px;
            }

            .bb-section-content.bb-2-column.bb-pad-more > div {
                padding:30px 45px;
            }
        
        .bb-section-content.bb-2-column.bb-bar-division > div:nth-child(1)::after {
            position:absolute;
            content:'';
            bottom:0;
            left:45px;
            right:45px;
            height:1px;
            background-color:var(--fg-color);
        }

    #bb-partner-textbox,
    #bb-experts-textbox {
        margin-bottom:200px;
        padding:var(--page-start-padding) 0px;
    }
    
    #bb-experts-textbox {
        margin-bottom:0;
    }
    
        #bb-partner-textbox .bb-2-column > div:nth-child(1),
        #bb-experts-textbox .bb-2-column > div:nth-child(1) {
            padding-right:0;
        }
    
        #bb-partner-textbox .bb-2-column > div:nth-child(2),
        #bb-experts-textbox .bb-2-column > div:nth-child(2) {
            padding-left:0;
            padding-top:40px;
        }

}

@media all and (max-width:900px) {
    :root {
        --page-start-padding:100px;
    }
    
    html.bb-menu-open .bb-close-menu-button {
        display:block;
    }

    html:not(.bb-menu-open) .bb-open-menu-button {
        display:block;
    }

    .bb-header-menu-entry:not(.bb-open-menu-button):not(.bb-close-menu-button) {
        display:none;
    }
    
    html.bb-menu-open #bb-header {
        /*opacity:0.5;*/
        height:calc(100vh - 100px);
    }
    
    html.bb-menu-open #bb-header .bb-header-bg {
        background-color:#c2f96d;
    }
    
    html.bb-menu-open #bb-header .bb-header-bg-bl {
        background-color:#c2f96d;
    }

    html.bb-menu-open #bb-header .bb-header-bg-br .fill {
        fill:#c2f96d;
    }
    
    #bb-header .bb-menu {
        display:block;
        position:absolute;
        top:90px;
        width:100%;
        padding:80px 20px;
    }
    
        #bb-header .bb-menu .bb-menu-entry {
            line-height:50px;
            border-top:1px solid #93b46b;
            
        }
        
            #bb-header .bb-menu .bb-menu-entry:hover {
                cursor:pointer;
            }
            
        #bb-header .bb-menu .bb-menu-entry.bb-last {
            border-bottom:1px solid #93b46b;
        }

    .bb-section-pad-1 {
        padding:0 0px !important;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .bb-welcome-image {
        padding-top:0;
        height:calc(100vh - 170px);
    }
    
        .bb-welcome-title {
            bottom:80px;
            left:20px;
            right:20px;
            margin-left:0 !important;
        }

    .bb-partner-cards {
        grid-template-columns: 1fr;
    }

    .bb-board-cards,
    .bb-experts-cards {
        grid-template-columns: 1fr;
    }

    .bb-angebot-grid {
        grid-template-columns: 1fr;
        grid-gap:20px;
    }
    
        .bb-angebot-grid .bb-row-1 {
            grid-row: 1;
            grid-column-start: 1;
            grid-column-end: 2;
        }
    
        .bb-angebot-grid .bb-row-2-left {
            grid-row: 2;
            grid-column-start: 1;
            grid-column-end: 2;
        }
        
            .bb-angebot-grid .bb-row-2-left img {
                width:200px;
            }
    
        .bb-angebot-grid .bb-row-2-right {
            grid-row: 3;
            grid-column-start: 1;
            grid-column-end: 2;
            padding-left:0;
        }
    
        .bb-angebot-grid .bb-row-3-left {
            grid-row: 5;
            grid-column-start: 1;
            grid-column-end: 2;
            padding-right:0;
        }
    
        .bb-angebot-grid .bb-row-3-right {
            grid-row: 4;
            grid-column-start: 1;
            grid-column-end: 2;
            text-align:right;
        }
    
            .bb-angebot-grid .bb-row-3-right img {
                width:200px;
            }
        
    .bb-fact .bb-sheet {
        padding:20px 20px 20px 30px;
    }

    .bb-footer-row {
        display:flex;
        flex-direction: column;
        width:100%;
    }
    
        .bb-footer-row > div {
            padding:20px 0;
            width:100%;
        }
        
        .bb-footer-links .bb-wrap {
            float:none;
        }
        
        .bb-footer-menu-entry {
            display:inline-block;
            margin-right:0;
            width:100%;
        }

    .bb-footer-bar {
        padding:0 20px;
    }
    
    .bb-footer-scroll-top {
        right:20px;
    }

    .bb-fact {
        padding-top:125%;
    }
        
}

@media all and (max-width:720px) {
    .bb-fact {
        padding-top:125%;
    }
    .bb-fact .bb-sheet {
        top:20px;
        right:20px;
        padding:20px 10px 10px 20px;
    }

    .bb-wrap-section.bb-hint .bb-3 {
        width:auto;
    }

    .bb-legal.bb-section-content.bb-2-column {
        padding:160px 45px 50px 45px;
    }
}

@media all and (max-width:640px) {
    :root {
        --title-font-size:13px;
        --title-line-height:19px;
        --title-letter-spacing:0.11375em;
        --h1-font-size:25px;
        --h1-line-height:30px;
        --h1-letter-spacing:0em;
        --h2-font-size:21px;
        --h2-line-height:27px;
        --h2-letter-spacing:0.013125em;
        --text-font-size:16px;
        --text-line-height:21px;
        --text-letter-spacing:0.025em;
    
        --page-start-padding:50px;
    }

    .bb-section-content.bb-2-column > div {
        padding:30px 0px;
    }
    
        .bb-section-content.bb-2-column.bb-bar-division > div:nth-child(1)::after {
            position:absolute;
            content:'';
            bottom:0;
            left:0px;
            right:0px;
            height:1px;
            background-color:var(--fg-color);
        }

    #bb-welcome-cards .bb-section-content {
        grid-template-columns: 1fr;
    }
    
    #bb-welcome-cards .bb-card:nth-child(1) {
        grid-column-start: auto;
        grid-column-end: auto;
    }

    #bb-welcome-cards .bb-card[data-page='angebot'] {
        padding-top:112%;
    }

    #bb-welcome-cards .bb-card[data-page='angebot'] .bb-sheet {
        background-image:url(/etc/images/card-sheet-angebot.svg);
    }

    .bb-wrap-section.bb-hint .bb-2 br {
        display: none;
    }

    .bb-footer-title-bar > div > br {
        display:inline;
    }

}

@media all and (max-width:560px) {
    .bb-fact {
        padding-top:60%;
    }
}

@media all and (max-width:480px) {
    .bb-news-entry {
        height:300px;
    }
    
        .bb-news-entry .bb-title {
            bottom:195px;
        }
        
        .bb-news-entry .bb-text {
            max-height:calc(7 * var(--text-line-height));
        }
        
    .bb-fact {
        padding-top:110%;
    }

    .bb-fact .bb-sheet {
        top:20px;
        right:20px;
        padding:20px 10px 10px 20px;
    }

    .bb-legal.bb-section-content.bb-2-column {
        padding:100px 20px 50px 20px;
    }
    
    .bb-legal .bb-title {
        top:-50px;
    }

}