/*
 * Theme Name: vovovo
 * Description: Ein modernes Wordpress-Theme für eine moderne Unternehmung.
 * Author: Studio Tillack Knöll, Sven Tillack
 * Author URI: https://www.studiotillackknoell.com
 * Version: 1.0
 * Theme URI: www.studiotillackknoell.com

*/
@font-face {
font-family: 'mabry-black-pro';
src: url('../woff/mabry-black-pro.woff2') format('woff2'),
    url('../woff/mabry-black-pro.woff') format('woff'),
    url('../woff/mabry-black-pro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


@font-face {
font-family: 'mabry-black-italic-pro';
src: url('../woff/mabry-black-italic-pro.woff2') format('woff2'),
url('../woff/mabry-black-italic-pro.woff') format('woff'),
url('../woff/mabry-black-italic-pro.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}




* {
    font-family: 'mabry-black-pro', sans-serif;
}

body, h1, h2, h3, h4, h5, h6 {
    font-weight: 400;
}

nav {
    font-size: 30px;
}

body,
.section__personen > * > * > * > *,
.package--item__body--erklarung,
.package--item__body--einleitung {
    font-size: 24px;
    line-height: 28px;
}

.is-button {
    font-size: 20px;
    line-height: 24px;
}

h2:not(.akkordeon--single h2):not(.footer__content h2),
h1:not(header h1):not(footer h1) {
    color: var(--darkgreen);
}

a {
    color: black;
}

footer h1 {
    color: black;
    text-align: center;
}

.footer__content h2 {
    color: white;
}

h1:not(header h1):not(footer h1) {
    font-size: 128px;
    line-height: 120px;
}

.section__anreisser {
    font-size: 80px;
    line-height: 80px;
}

header h1,
header h2,
footer h1,
footer h2 {
    font-size: 34px;
    line-height: 34px;
    display: inline-block;
}

    header h1 {
        font-size: 50px;
    }


.package--item__sternchentext,
.package--item__body--punkte {
    font-size: 16px;
    line-height: 20px;
}

[class^="section__"] + [class^="section__"] {
    padding-top: calc( 2 * var(--gutter) );
}

.section__copy + .section__copy {
    padding-top: var(--gutter);
}

.section__headline.has--asterisk h1::after {
    content: '\2055';
    height: 120px;
    width: 120px;
    border-radius: 100%;
    color: var(--darkgreen);
    background-color: var(--black);
    display: inline-block;
    text-align: center;
    animation: opacity 3s infinite ease-in-out;
}

.section__headline .asterisk--text {
    opacity: 0;
    width: calc( 100vw / 12 * 5);
    background: var(--darkgreen);
    color: var(--black);
    border-radius: var(--radius);
    padding: calc( .5 * var(--gutter) );
    margin-top: calc( var(--gutter) );
    transition: opacity .2s ease-in-out;
    position: absolute;
    z-index: 2;
}

    .asterisk--text__self::before {
        content: '\2055';
    }

    .asterisk--text__self {
        display: block;
        position: relative;
    }

    .asterisk--text__self::before {
        content: '\2055';
        margin-right: 50px;
        height: 100%;
        position: relative;
        left: 0;
    }

@media (max-width: 1024px) {    
    nav {
        font-size: 22px;
    }

    h1:not(header h1):not(footer h1) {
        font-size: 56px !important;
        line-height: 56px !important;
    }

    .section__headline.has--asterisk h1::after {
        height: 56px !important;
        width: 56px !important;
    }
    
    .section__anreisser {
        font-size: 50px;
        line-height: 50px;
    }
    
    header h1,
    header h2,
    footer h1,
    footer h2 {
        font-size: 26px;
        line-height: 28px;
        display: inline-block;
    }

    header h1 {
        font-size: 32.5px;
    }
    
    body,
    .package--item__sternchentext,
    .section__personen > * > * > * > *,
    .package--item__body--erklarung,
    .package--item__body--einleitung {
        font-size: 20px;
        line-height: 24px;
    }

    .is-button {
        font-size: 16px;
        line-height: 20px;
    }
}

@media (max-width: 768px) {    
    nav {
        font-size: 20px;
    }

    h1:not(header h1):not(footer h1) {
        font-size: 46px;
        line-height: 46px;
    }

    .section__headline.has--asterisk h1::after {
        height: 46px;
        width: 46px;
    }
    
    .section__anreisser {
        font-size: 40px;
        line-height: 40px;
    }
    
    header h1,
    header h2,
    footer h1,
    footer h2,
    body,
    .section__personen > * > * > * > *,
    .package--item__sternchentext,
    .package--item__body--erklarung,
    .package--item__body--einleitung {
        font-size: 20px;
        line-height: 24px;
    }

    header h1 {
        font-size: 25px;
    }

    .is-button {
        font-size: 16px;
        line-height: 20px;
    }
}