/* webfonts *************************************************/

@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto/Roboto-VariableFont_wdth,wght.ttf);
}

@font-face {
    font-family: Cincel;
    src: url(../fonts/Cinzel/Cinzel-VariableFont_wght.ttf);
}

@font-face {
    font-family: Reenie-Beanie;
    src: url(../fonts/Reenie_Beanie/ReenieBeanie-Regular.ttf);
}

@font-face {
    font-family: Symbols;
    font-style: normal;
    src: url(../fonts/Material_Symbols_Rounded/MaterialSymbolsRounded-VariableFont_FILL\,GRAD\,opsz\,wght.ttf);
}


/* globale Variablen ****************************************/

:root {
    /* Fonts *******************/
    --primary-font: Roboto;
    --sig-font: Reenie-Beanie;
    --symbol-font: Symbols;
    /* Colors ******************/
    --dark-blue-bg: rgba(1, 9, 23, 1);
    --light-transparent-bg: rgba(242, 226, 212, .3);
    --contrast-color3: rgba(19, 121, 175, 1);
    --contrast-color2: rgba(166, 43, 4, 1);
    --contrast-color: rgba(207, 202, 165, 1);
    --primary-text-color: rgba(242, 226, 212, 1);
    /* font size ***************/
    --site-title: clamp(100px, 15vw, 250px);
    --site-title-span: .2em;
    --headline2: 3.157rem;
    --headline3: 2.369rem;
    --headline4: 1.777rem;
    --subline1: 2.369rem;
    --subline2: 1.333rem;
    --fliesstext: 1rem;
    --smalltext: .75rem;
    /* primary grid system *****/
    --padding-inline: 2rem;
    --content-max-width: 1200px;
    --breakout-max-width: 1500px;
    /* Abstände allgemein ******/
    --blockpadding: 5rem;
}


/* reset default Browser styles *****************************/

* {
    margin: 0;
    padding: 0;
    text-decoration: none;
    border: none;
    outline: none;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

ol,
ul {
    list-style: none;
}


/* allgemeine styles ****************************************/

html,
body {
    background: var(--dark-blue-bg);
    color: var(--primary-text-color);
    font-family: var(--primary-font);
    font-size: var(--fliesstext);
    line-height: 1.6;
}

.sig {
    font-family: var(--sig-font);
    font-size: 3rem;
    text-align: right;
}

.fixed {
    background-image: url(../img/buntbg.jpg);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

.bg-color {
    background: var(--dark-blue-bg);
}

h2 {
    padding-bottom: .8rem;
    /* font-family: Cincel;
    font-weight: 400;
    font-size: var(--headline4); */
}


/* siteheader ***********************************************/

.primary-header {
    padding-top: 1rem;
    background-image: url(../img/muerta.jpg);
    background-size: cover;
    background-position: center;
    height: 100vh;
}

h1 {
    font-family: Reenie-Beanie;
    font-size: clamp(100px, 15vw, 250px);
    font-weight: 300;
    line-height: .3;
    text-align: center;
    padding-top: min(15vh, 250px);
    color: rgba(242, 226, 212, 1);
}

h1 span {
    display: inline-block;
    font-family: Roboto;
    font-size: .2em;
    font-weight: 200;
    letter-spacing: .08em;
    border-top: .05em solid rgba(242, 226, 212, 1);
    padding-top: .6em;
}


/* Navigation ***********************************************/

#main-nav {
    --padding-right: max(2.5rem, calc((100vw - var(--breakout-max-width)) /2));
    padding-right: var(--padding-right);
    padding-top: .05rem;
    background: linear-gradient(to left, rgba(242, 226, 212, .2), rgba(242, 226, 212, .2) calc(31rem + var(--padding-right)), rgba(242, 226, 212, 0) calc(35rem + var(--padding-right)));
    backdrop-filter: blur(1rem);
    mask-image: linear-gradient(to left, rgba(0, 0, 0, 1), rgba(0, 0, 0, 1) calc(32.5rem + var(--padding-right)), transparent calc(38rem + var(--padding-right)));
}

#main-nav ul {
    justify-content: right;
    display: flex;
    gap: .1rem;
    padding-bottom: .1rem;
}

#main-nav a {
    font-size: 1rem;
    line-height: 1;
    display: inline-block;
    padding: .3rem .8rem;
    color: var(--primary-text-color);
}

#toggle,
#cbNav,
.sr-only {
    display: none;
}

#toggle::after {
    font-family: Symbols;
    font-size: 2rem;
    line-height: 1;
    content: "Menu";
}

#cbNav:checked~#toggle::after {
    content: "Close";
}

#cbNav:checked~#main-nav {
    transform: translateX(0%);
}


/* Gliederung ***********************************************/

.content-grid {
    --breakout-size: calc( (var(--breakout-max-width) - var(--content-max-width)) / 2);
    display: grid;
    grid-template-columns: [full-width-start] minmax(var(--padding-inline), 1fr) [breakout-start] minmax(0, var(--breakout-size)) [content-start] min( 100% - (var(--padding-inline) * 2), var(--content-max-width)) [content-end] minmax(0, var(--breakout-size)) [breakout-end] minmax(var(--padding-inline), 1fr) [full-width-end];
}

.content-grid> :not(.breakout, .full-width),
.full-width> :not(.breakout, .full-width) {
    grid-column: content;
}

.content-grid>.breakout {
    grid-column: breakout;
}

.content-grid>.full-width {
    grid-column: full-width;
    display: grid;
    grid-template-columns: inherit;
}

img.full-width {
    width: 100%;
    max-height: 45vh;
    object-fit: cover;
}

main>*,
footer {
    padding-block: var(--blockpadding);
}

.motto {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.motto>div {
    grid-area: 1/ 1/ 2/ 3;
    align-self: center;
}

.motto>img {
    grid-column: 3/ -1;
    max-width: 100%;
    border-radius: 50%;
}

.imgview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .5rem;
}

.imgview div {
    border: .3rem solid var(--dark-blue-bg);
}

.kachel {
    max-width: 100%;
    display: block;
}


/* footer ***************************************************/

.social-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding-bottom: 5rem;
    border-bottom: 1px solid var(--primary-text-color);
}

svg {
    width: 2rem;
    aspect-ratio: 1;
    margin-right: 1rem;
}

.social {
    height: 100%;
    position: relative;
}

.sm-links {
    position: absolute;
    bottom: 0;
}

.sm-links li {
    display: inline-block;
}

.copy {
    font-size: var(--smalltext);
    letter-spacing: .1rem;
}

.copy a {
    font-family: var(--sig-font);
    color: var(--primary-text-color);
    font-size: var(--subline2);
    letter-spacing: normal;
}


/* contact formular *****************************************/

#contact {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 1rem;
}

#contact input,
#contact textarea {
    display: block;
    padding-block: .2rem;
    width: 100%;
    font-family: var(--primary-font);
    font-size: var(--smalltext);
    background: transparent;
    color: var(--primary-text-color);
    border-bottom: 1px dashed var(--primary-text-color);
}

#contact input::placeholder,
#contact textarea::placeholder {
    font-family: var(--symbol-font);
    font-weight: 300;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--primary-text-color);
}

#message {
    resize: none;
    grid-area: 1/ 2/ 4/ 3;
    height: 3fr;
}

#contact #submit {
    grid-area: 4/ 1/ 5/ 3;
    border: none;
    padding: .5rem;
    background: var(--contrast-color2);
    color: var(--primary-text-color);
    font-family: var(--symbol-font);
    font-size: 1.3rem;
}

#contact #submit:hover,
#contact #submit:focus {
    background: rebeccapurple;
}

#contact>*:focus {
    /* border-bottom: 1px solid var(--contrast-color2); */
    border-color: var(--contrast-color2);
}

#response {
    display: none;
}

validation-bubble-me {
    color: brown;
}


/* Seiten ***************************************************/


/* .home>.fixed {
    background-image: url(../img/buntbg.jpg);
} */


/* verschiedene Auflösungen - Mobiles, Tablets, etc *********/

@media only screen and (max-width: 949px) {
    .imgview {
        grid-template-columns: 1fr 1fr;
    }
    .social-wrapper {
        grid-template-columns: 1fr;
    }
    .sm-links {
        position: static;
        padding-bottom: 3rem;
    }
    #contact {
        grid-template-columns: 1fr;
    }
    #contact>* {
        grid-column: 1/ 3;
        grid-row: auto;
        width: 1fr;
    }
    #contact #submit {
        grid-row: 5/ 6;
    }
    #contact #message {
        height: 6rem;
    }
}

@media only screen and (max-width: 649px) {
    .motto {
        display: block;
    }
    .motto>img {
        padding-bottom: 2.5rem;
    }
    #main-nav {
        position: fixed;
        z-index: 1000;
        inset: 0 0 0 30%;
        gap: 1.5rem;
        padding: min(30vh, 10rem) 2rem;
        transform: translateX(100%);
        transition: transform 500ms ease-in-out;
    }
    #main-nav ul {
        flex-direction: column;
    }
    #main-nav a {
        font-size: var(--subline2);
        line-height: 1.5;
        font-weight: 300;
        display: block;
    }
    #toggle {
        display: block;
        position: fixed;
        z-index: 9999;
        width: 1.5rem;
        aspect-ratio: 1;
        top: 1.5rem;
        right: 1.5rem;
    }
}

@media only screen and (max-width: 449px) {
     :root {
        --padding-inline: 1rem;
    }
    .imgview {
        grid-template-columns: 1fr;
    }
}