/* 
Theme Name: Twenty Twenty-Four Child 
Theme URI: http://example.com/twenty-twenty-four-child/ 
Description: Twenty Twenty-Four Child Theme 
Template: twentytwentyfour 
*/

:root {
    --color-white: #ffffff;
    --color-primary: #006532;
    --color-secound: #8AA527;
    --color-third: #422918;
    --color-fouth: #683B10;
    --color-fifth: #7D4E24;
    --color-sixth: #925F36;
    --color-seventh: #6F6F6E;
    --color-eighth: #272727;
    --font-headline: 'Cookie', cursive;
    --font-text: 'Open Sans', sans-serif;
    --font-weight-small: 300;
    --font-weight-regular: 400;
    --font-weight-bold: 700;
    --font-size-text: 1rem;
    --shadow-box: 4px 4px 8px rgba(0, 0, 0, 0.5);
    --shadow-text: 4px 4px 8px rgba(0, 0, 0, 1);
}


/* B2B Cover => First page */
.b2cover {
    gap: 2rem;

    p {
        padding: 14px 0px;
    }

    hr {
        margin-top: 22px !important;
        margin-bottom: 22px !important;
    }

    h3 {
        font-family: var(--font-text);
        font-size: 1.65rem;
        line-height: 2rem;
    }
}

/*B2B */
.b2b {
    .wp-block-columns {

        p,
        ul {
            padding: 24px;
        }

        ul {
            margin-left: 26px;
        }
    }
}


/* NAV  */
.mainnav {
    .wp-block-navigation {

        li {

            a span,
            button {
                font-weight: var(--font-weight-bold);
                text-transform: uppercase;
                letter-spacing: 1px;

                &:hover,
                &:focus {
                    color: var(--color-primary);
                }
            }
        }
    }
}

/* Call icons */
.topheader {
    background-color: var(--color-secound);
    padding-right: var(--wp--style--root--padding-right);
    padding-left: var(--wp--style--root--padding-left);

    p {
        padding-top: 4px;
        padding-bottom: 4px;
        font-weight: bold;

        img {
            vertical-align: middle;
            width: 20px;
            margin-right: 8px;
        }
    }
}

/* Email Kontakt */
.kontaktform {
    .forminator-label {
        font-size: 1.2rem !important;
        color: #000;
    }

    .forminator-checkbox__wrapper {

        p,
        a {
            font-size: 0.8rem;
            margin-top: 0px;
        }
    }
}

/* Media Block */
.wp-block-media-text {
    .wp-block-heading {
        margin-top: 0px;
        margin-bottom: 10px;
    }
}

/* Teaser */
.teaser {
    .box {
        background-color: var(--color-secound);
        margin-left: 16px !important;

        p {
            color: var(--color-white);
            font-size: 1.5rem;
            font-weight: var(--font-weight-bold);
            text-align: left;
            line-height: 1.5rem;
            margin-top: 0px;
        }
    }

    .callsubline {
        margin-left: 24px !important;
        padding: 24px 0px;

    }

    .teasercover {
        position: relative;
        z-index: 500;
        text-align: left;
        padding: 24px 24px 48px 24px !important;
        background-image: radial-gradient(farthest-side at 33% 33%, #8AA527, #003f1f);

        h2.left {
            text-align: left !important;
        }

        ul li {
            font-size: 1.3rem;
            text-align: left;
            margin-left: 32px;
            color: var(--color-white);
        }

        .women {
            position: absolute;
            bottom: 0%;
            right: 0%;
            z-index: 510;
            width: 400px;
        }
    }
}

/* SECTION => Service Icons */
.serviceicon {

    figcaption {
        color: var(--color-primary);
        text-align: center;
        font-size: 1rem;
    }

    img {
        background-color: var(--color-primary);
        padding: 14px;
        width: 60px;
        border-radius: 8px;
    }
}

/* Service Box */
.servicebox {
    background-color: #ffffff;
    position: relative;
    border-radius: 8px;

    img {
        z-index: 200;
        border-radius: 8px 8px 0px 0px;
        background-color: var(--color-secound);
        padding-bottom: 24px;
    }

    h3 {
        font-family: var(--font-headline);
        font-weight: var(--font-weight-bold);
        font-size: 3rem;
        color: var(--color-white);
        line-height: 0.8em;
        z-index: 210;
        position: absolute;
        bottom: 2%;
        left: 4%;
        rotate: -4deg;
        text-shadow: var(--shadow-text);
    }

    p {
        padding: 4% 8% 8% 8%;
        font-size: 0.9rem;
    }
}

/* SECTION => namespace */
section.namespace {
    background: var(--color-white);
    margin-bottom: -8vh !important;
    padding: 28px;
    border-radius: 8px;
    z-index: 10;
    box-shadow: var(--shadow-box);

    .spalten {
        position: relative;
    }

    h2 {
        font-family: var(--font-text);
        font-weight: var(--font-weight-bold);
        margin-bottom: 0px !important;
    }

    h3.sublineh3 {
        font-family: var(--font-text);
        font-weight: var(--font-weight-regular);
        font-size: 1rem !important;
        color: var(--color-third);
        text-transform: uppercase;
        text-align: center;
        letter-spacing: 2px;
        margin-top: 0px;
        margin-bottom: 0px !important;
    }
}

/* SECTION => Contact */
.contactbox {

    .contact {
        background-color: var(--color-primary);
        z-index: 10;
        padding: 24px;
        border-radius: 8px;

        th,
        tr,
        p {
            color: var(--color-white);

            td {
                color: var(--color-white);
            }
        }

        h3 {
            color: var(--color-secound);
            font-family: var(--font-text);
            font-weight: var(--font-weight-regular);
            font-size: 1.5rem !important;
            text-align: center;
            padding-bottom: 0px !important;
        }

        h4 {
            color: var(--color-white) !important;
            font-family: var(--shadow-text);
            font-weight: bold;
            font-size: 1.35rem;
        }
    }
}




/* SECTION => contact */
section.contakt {
    background: var(--color-primary) !important;
    border-radius: 8px;
    z-index: 1;
    padding: 8%;

    p,
    th,
    tr {
        color: var(--color-white);

        td {
            color: var(--color-white);
        }
    }

    h4 {
        color: var(--color-white);
        font-family: var(--font-text);
        font-weight: bold;
        font-size: 1.5rem !important;
        margin-top: 1.25rem;
        margin-bottom: 0px;
    }
}

/* SECTION => email */
section.email {
    background: var(--color-white);
    padding: 10%;
    margin-top: 0vh !important;
    border-radius: 18px;
}

/* SECTIOn => open */
.open {
    text-align: left;
}

tbody th,
tbody tr {
    text-align: left;
}

/* PAGE => Impressum  */
section.impressum {
    h2 {
        font-family: var(--font-text);
        font-weight: var(--font-weight-bold);
    }
}

/* GLOBAL Variabels */
html {
    font-size: 16px;
}

*:focus {
    outline: none;
}

section {
    margin-top: 4vh !important;
}

.space {
    margin-top: 4vh;
    margin-bottom: 4vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-headline);
    color: var(--color-primary);
    margin-bottom: 1rem !important;
}

h1 {
    font-size: 4rem;
    line-height: 3rem;
    text-align: center;
}

h2 {
    font-size: 3.45rem;
    line-height: 3rem;
    text-align: left;

}

h3 {
    font-size: 3rem;
    line-height: 2.8rem;
}

h3.normal {
    font-family: var(--font-text);
    font-size: 1.65rem;
    font-weight: bold;
    line-height: 2rem;
}

a {
    color: var(--color-secound);
    font-size: var(--font-size-text);
    text-decoration: none;

    &:hover,
    &:focus {
        transform: scale(1.1);
        transition: 0.3ms;
        text-decoration: none;
        color: #6F6F6E;
    }
}

p,
tr th,
tr td,
ul li {
    font-family: var(--font-text);
    font-size: var(--font-size-text);
    line-height: 1.65em;
    color: var(--color-eighth);
    margin-bottom: 8px;
}

p.subline {
    font-size: 1.45rem;
    line-height: 1.25em;
    color: var(--color-secound);
    margin-bottom: 1.25rem;
}

.center {
    text-align: center;
}

.left {
    text-align: left;
}

header {
    .wp-block-navigation-item__label {
        font-size: 18px;
    }
}

/* FOOTER */
footer {
    background-color: var(--color-secound);
    color: var(--color-eighth);
    padding-top: 36px;

    h2 {
        font-family: var(--font-size-text);
        font-size: 1.25rem !important;
        font-weight: bold;
        color: var(--color-eighth);
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 0rem !important;
    }

    a span {
        color: var(--font-size-text);
        padding-bottom: 0px;
        margin-bottom: 0px;

        &:hover,
        &:focus {
            color: var(--color-white);
        }
    }

    p {
        color: var(--font-size-text);
        padding-bottom: 10px;
    }

    ul li {
        margin-bottom: 10px;
    }

    .copyright {
        margin-top: 46px;
        font-size: 14px !important;
        text-align: center;
        color: var(--color-eighth);
    }
}

/* SECTION => services   */
section.services {

    h2 {
        color: var(--color-primary);
        margin-bottom: 34px;
    }

    .wp-block-column {
        background: var(--color-white);
        border-radius: 8px;
    }

    h4 {
        font-family: var(--font-headline);
        font-weight: var(--font-weight-regular);
        font-size: 3rem;
        text-align: center;
        line-height: 1em;
        padding: 10px;
        background: var(--color-secound);
        border-radius: 8px 8px 0px 0px;
    }

    .wp-block-list {
        margin-top: 0px;
        padding: 12px 42px;
    }
}