/* --- GENERAL --- */

/* -- structure and positioning -- */
*{
    margin:0;
    padding:0;
    margin-block-start:0;
    margin-block-end:0;
    margin-inline-start:0;
    margin-inline-end:0;
}

:root{
    --cc_main-light: rgb(255, 255, 255);
    --cc_main-accent: rgb(255, 255, 226);
    --cc_main-grey: rgba(0, 0, 0, 0.100);
    --cc_main-dark: rgb(50, 50, 50);
    --cc_grey-blue: rgb(103, 134, 161);
    --cc_grey-green: rgb(58, 72, 92);

    --cc_logo-blue1: rgb(45,170,225);
    --cc_logo-blue2: rgb(118,200,235);
    --cc_logo-blue3: rgb(182,225,245);
    --cc_logo-dark1: rgb(29,111,146);
    --cc_logo-dark2: rgb(49,59,79);
    
    --smallspace: 40px;
    --bigspace: 100px;

    --smallfont: 10pt;
    --mediumfont: 11pt;
    --bigfont: 18pt;
    --headline: 30pt;

    --formal-text: 10pt;
    --formal-headline: 13pt;

    --mobile-factor: 0.5;
    --maximum-width: 1600px;

    --fonts-elegant: 'JosefinSans', Helvetica, Arial, sans-serif;
    --fonts-clear1: 'Open Sans', 'HelveticaNeue', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --fonts-clear2: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

@font-face {
    font-family: "FagoCo";
    src: url("../res/fonts/FagoCo-MediumCaps_16772.ttf");
}
@font-face {
    font-family: "JosefinSans";
    src: url("../res/fonts/JosefinSans-VariableFont_wght.ttf");
    font-weight: 500;
}


html, body {
    width: 100vW;
    height: 100vH;
    /*
    background-image: linear-gradient(to bottom, #ffffff 75%, #b6bdff 100%);
    background-image: url("");
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    */
    background-color: #ffffff;
    font-family: var(--fonts-clear1);
}

p{
    font-size: var(--mediumfont);
    line-height: 1.7;
}
h1, h2, h3, h4{
    font-family: var(--fonts-elegant);
    line-height: 1.4;
}
h1{
    font-size: var(--bigfont);
    text-transform: uppercase;
    text-align: center;
    font-weight: 200;

    margin: var(--smallspace) 0;
}
h2{
    font-size: var(--bigfont);
    font-weight: 300;
}
h3{
    font-size: var(--mediumfont);
    text-transform: uppercase;
    font-weight: 300;
    line-height: 1.2;
}
h4{
    font-size: var(--mediumfont);
    font-weight: 300;
    line-height: 1.2;
    margin: 10px 0 5px 0;
}
h5{
    text-align: center;
    text-shadow: white 0 0 1px;
    margin: 10px 0 50px 0;
}
a{
    font-family: var(--fonts-clear1);
    font-size: calc(var(--mediumfont) + 2);
    font-weight: 300;
    color: var(--cc_logo-dark1);
    text-decoration: none;
    transition: color 0.3s ease;
}
a:hover{
    color: var(--cc_logo-blue1);
    transition: color 0.5s ease;
}
q:before{
    margin-right: -2px;
}
q:after{
    margin-left: -4px;
}
li{
    text-decoration-style: none;   
}
.attention{
    color: yellow;
    text-shadow: black 1px 1px 3px;
}
.brightfont{
    color: var(--cc_main-light);
}
.bluebackground{
    background-color: var(--cc_grey-blue);
}
.greenbackground{
    background-color: var(--cc_grey-green);
}
.bg-brune-blau1{
    background-color: var(--cc_logo-blue1);
}
.bg-brune-blau2{
    background-color: var(--cc_logo-blue2);
}
.bg-brune-blau3{
    background-color: var(--cc_logo-blue3);
}

#c{
    margin: 50px 0;
}
.hide{
    visibility: hidden;
    opacity: 0;
}
span.line {
    display: inline-block;
}
picture > img{
    max-width: fit-content;
    width: 100%;
    height: auto;
}
.centeredText{
    text-align: center;
    width: inherit;
}
.bigspace{
    height: 150px;
    width: 150px;
}
.animated{
    transition: all 1000ms ease-in-out;
}
.animated:hover{
    transition: all 1000ms ease-in-out;
}

body{
    display: grid;
    /*              v: 1     2     3    4 */
    grid-template-rows: 160px 450px auto;
    grid-template-columns: 300px auto;
    /*                 h: 1     2    3 */
    overflow: hidden;
    width: 100vW;
    height: 100vH;
}
#hiddenElements{
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100vW;
    height: 100vH;
    z-index: 19;
}

#navToggleChkbox{
    visibility: hidden;
    width: 0;
    height: 0;
}
.padded{
    padding: 3%;
}
.narrow{
    max-width: 800px;
}


/* -- details/summary -- */

summary{
    font-size: var(--bigfont);
    font-weight: 300;
    text-align: center;
}
summary::marker {
    content: "";
}
details summary::before {
    content:"";
    /* styles when the element is closed */
}


/* -- logo -- */

#logoBox{
    grid-row: 1/2;
    grid-column: 1/2;
    display: flex;
    align-items: center;
    justify-content: center;
}
#logo{
    width: 240px;
    height: auto;
    object-fit: scale-down;
}

/* -- navigation -- */

#navBox{
    grid-row: 2/3;
    grid-column: 1/2;

    display: flex;
    align-items: center;
    justify-content: center;
    border-bottom: 1px solid var(--cc_main-grey);
}
#navToggleChkbox {
    display: none;
    visibility: hidden;
}
nav{    
    width: 220px;
    height: 449px;
    /*padding: calc(var(--smallspace)/2) calc(var(--smallspace)) calc(var(--smallspace)/2) calc(var(--smallspace));*/
    font-size: var(--normalfont);
    background-color: var(--cc_main-light);
    /*background-color: blueviolet;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    object-fit: scale-down;
    transform: none;
}
nav > span{
    display: none;
    visibility: hidden;
}
#menu > li{
    list-style: none;
    width: 100%;
}
.navlinks > div{
    width: inherit;
    height: 49px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid var(--cc_main-grey);
}
#lastnav{
    border-bottom: none;
}

/* --- MAIN SECTION ---*/

main{
    grid-row: 1/4;
    grid-column: 2/3;

    overflow: hidden auto;

    display: flex;
    flex-direction: column;
    align-items: center;

    width: auto;
    height: auto;
    border-left: 1px solid var(--cc_main-grey);
}
.infobox{
    width: inherit;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
}
.infobox > div{
    padding: 20px;
    background-color: var(--cc_logo-blue2);
    color: var(--cc_logo-dark2);
    text-align: center;
    width: fit-content;
    height: fit-content;
    box-shadow: 5px 5px 10px var(--cc_logo-dark2);
    border-radius: 5px;
}
.infobox > div > p > a{
    color: var(--cc_logo-dark2);
    text-decoration: underline;
}
.infobox > div > p > a:hover{
    color: var(--cc_logo-dark1);
    text-decoration: underline;
}


/* --- articles --- */

main > article{
    max-width: var(--maximum-width);
    /*max-width: calc(100vh * 1.137);*/
    left: 0;
    /*border-bottom: 1px solid var(--cc_main-grey);*/
    height: auto;
}

main > article > section{
    margin: 0 0 50px 0;
}

/* -- home -- */

#opener{
    display: block;
    position: relative;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
    width: 100%;
    height: auto;
}
#headline{
    margin-top: 45%;
    inset: 0;
    color: var(--cc_main-light);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: fit-content;
}
#headline > p{
    font-size: var(--headline);
    font-weight: 900;
    letter-spacing: 0.1em;
    line-height: normal;
    text-align: center;
    text-shadow: black 0 0 3px;
}


/* -- Service -- */

#service{
    display: flex;
    flex-direction: column;
    height: auto;
}
#service h1{
    margin-top: 0;
}

#service section{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
.saeulen{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}
.saeulen > div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 25%;
    margin: 0 10px;
}
.saeulen > div:hover{
    width: 40%;
    max-width: initial;
    margin: 0 10px;
    object-position: center;
    cursor: default;
}
.saeulen > div > p{
    display:block;
    position: sticky;
    align-self: center;

    margin-top: 20px;
    padding: 15px;
    width: 19vw;
    max-width: 280px;
    font-size: 0.85rem;
    opacity: 0.5;
    z-index: 1;
}
.saeulen:hover p{
    color: #ffffff;
    background-color: var(--cc_logo-dark2);
    transform: scale(0.8);
    transform-origin: 50% 0%;
    opacity: 1;
    z-index: 3;
}
.saeulen > div > p:hover{
    background-color: var(--cc_logo-dark1);
    box-shadow: -3px -3px 8px var(--cc_main-dark);
    transform: scale(1);
    opacity: 1;
}
.saeule2{
    z-index: 2;
}


.bigbutton{
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px;
    margin: 0 3px 3px 0;
    border-radius: 5px;
}
.bigbutton:hover{
    box-shadow: -3px -3px 8px var(--cc_main-dark);
    margin: 3px 0 0 3px;
    /*cursor: help;*/
    user-select: none;
}

.intermediate{
    width: auto;
    height: fit-content;

    display: flex;
    flex-direction: column;
    gap: var(--smallspace);
    margin-top: var(--smallspace);
}
.intermediate img{
    width: 50%;
    height: auto;
}
.flx-start{
    align-self: flex-start;
    justify-content: flex-start;
}
.flx-end{
    align-self: flex-end;
    justify-content: flex-end;
}
.flx-end > img{
/*    transform: scale(-1, 1);*/
}
.intermediate q{
    font-family: var(--fonts-clear2);
    text-shadow: var(--cc_logo-blue3) 0 0 5px;
    font-size: 18px;
    margin-bottom: var(--smallspace);
}
.intermediate q:before,
.intermediate q:after{
    color: var(--cc_logo-dark2);
    font-size: 25px;
}

.speech-bubble{
    width: 60%;
	position: relative;
	background: var(--cc_logo-blue3);
	border-radius: .4em;
    padding: 25px;
    box-shadow: 5px 5px 10px var(--cc_main-grey);
}
.speech-bubble:after{
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 0;
	height: 0;
	border: 40px solid transparent;
	border-top-color: var(--cc_logo-blue3);
	border-bottom: 0;
	margin-bottom: -30px;
}
.sb-left:after{
	border-left: 0;
    margin-left: 0;
}
.sb-right:after{
	border-right: 0;
    margin-left: -90px;
}
.bubbleheads{
    width: 100%;
    height: auto;
    display: flex;
}
#bh1{
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}
#bh2{
    mask-image: linear-gradient(to left, rgba(0,0,0,1) 75%, rgba(0,0,0,0) 100%);
}


/* -- Ansprechpartner -- */

#ansprechpartner{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.portrait{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.portrait > div{
    display: flex;
    flex-direction: row;
}
.portrait > div > *{
    width: fit-content;
}
.title{
    font-size: 110%;
    margin: 10px 0;
}
.vita{
    margin-bottom: 10px;
}
.vita p{
    font-weight: 600;
    font-size: 80%;
}
.biopic{
    height: 400px;
    width: auto;
    mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

.even > div{
    flex-direction: row-reverse;
    justify-content: space-between;
}
.even .biopic{
    transform: scale(-1, 1);
    }
.odd > div > div{
    margin-left: 10%;
}


/* -- Leistung -- */

#leistung{
    background-image: url("../pic/notebook.jpg");
    background-size: cover;
    background-position: center;
    height: auto;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,1) 100px);/*, linear-gradient(to top, rgba(0,0,0,0) 0, rgba(0,0,0,1) 100px);*/
}
#leistung > h1{
    margin-top: var(--bigspace);
}
#leistung > section{
    height: fit-content;
    width: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items:center;
}
#leistung > section > div{
    height: 100%;
    min-height: fit-content;

    width: 50%;
    min-width: 300px;
    
    margin: calc(var(--smallspace)/2);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
}
#leistung > section > *{
    /*text-align: left;*/
    padding: 20px;
    height: 100%;
}

.shinybox{
    background-color: var(--cc_main-light);
    opacity: 75%;
    border-radius: 5px;
    /*box-shadow: 5px 5px 10px var(--cc_main-accent);*/
}
.shinybox p, h2{
    /*color: var(--cc_logo-dark2);*/
    opacity: initial;
}

#app-pic{
    width: 100%;
    height: auto;
}


/* -- Downloads -- */

#downloads{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: inherit;
    margin: var(--bigspace) 0;
}

#linkliste{
    display: flex;
    flex-direction: row;
    /* todo: elemente responsive machen:
    gap, width, row->column, etc. */
    gap: 20px;
    list-style-type: none;    
}
#linkliste > li{
    text-decoration: none;
    width: 150px;
    
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
}
.dlbox{
    background-color: var(--cc_main-dark);
    width: 100px;
    height: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 3px;
    border-radius: 5px;
}
.dlbox:hover{
    box-shadow: 0px 0px 10px var(--cc_logo-dark2);
}
.dlboxlink > a{
    color: var(--cc_logo-blue2);
}
.dlboxlink > a:hover{
    color: var(--cc_logo-blue3);
}
.asterisk{
    font-size: 8pt;
    margin: 5px 0 0 0;
}


/* -- Links -- */

#links{
    display: flex;
    flex-direction: column;
    gap: var(--smallspace);

    height: fit-content;
}
#links > h1{
    margin-bottom: 0;
}
#links h2, h3{
    text-align: center;
}
#ishop{
    margin: var(--smallspace) 0 var(--bigspace) 0;
    width: 200px;
}
#links > div{
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#links > ul{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 3%;
    row-gap: 40px;

    list-style: none;
}
#links > ul > li{
    width: 30%;
}
.linkbox{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    color: #ffffff;
    border-radius: 5px;
    background-image: radial-gradient(
        circle 300px at 0% 100%,
        var(--cc_logo-dark2) 0%,
        var(--cc_logo-dark1) 100%
    );
    width: 100%;
    height: 50px;
}
.linkbox:hover{
    box-shadow: 5px 5px 10px var(--cc_logo-dark2);
    transform: scale(1.02);
}
.linkbox *{
    text-align: center;
}


/* -- Kontakt -- */

#kontakt{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: var(--bigspace);
    width: 100%;
}
#kontakt > h1{
    margin-bottom: var(--smallspace);
}
#kontakt .attention{
    margin: 0 var(--smallspace) var(--smallspace) var(--smallspace);
}
#kontakt > div{
    display: flex;
    flex-direction: row;
    gap: var(--bigspace);
    align-items: flex-start;
    margin-bottom: var(--bigspace);
}
.adress{
    color: var(--cc_main-accent);
}
#kontakt a{
    color: #ffffff;
    text-decoration: underline;
    text-decoration-style: dotted;
}
#vereinbarung{
    width: 50%;
    margin-bottom: var(--bigspace);
}

/* -- Datenschutz -- */



/* -- Impressum -- */

.formal{
    padding: var(--smallspace);
}
.formal *{
    color: var(--cc_main-light);
}
.formal p{
    font-size: var(--formal-text);
    padding-top: 10px;
}
.formal h2, h3, h4{
    text-align: left;
    line-height: normal;
    font-size: var(--formal-headline);
}
.formal h2{
    padding: 25px 0 5px 0;
    text-transform: uppercase;
    font-weight: 700;
    
}
.formal h3{
    padding: 15px 0 5px 0;
    text-transform: none;
    font-weight: 500;
    
}
.formal h4{
    font-size: var(--formal-text);
    font-style: italic;
    padding: 2px 5px;
    text-transform: none;
    font-weight: 600;
    
}
.formal a{
    color: var(--cc_logo-blue2);
}
.formal a:hover{
    color: var(--cc_logo-blue3);
}
.formal ul{
    padding-left: 20px;
    list-style: square;
}
.formal li{
    font-size: var(--formal-text);
    padding: 2px 0 3px 0;
}

/* ---- responsiveness ---- 

@media (pointer: coarse){

}*/

/* --- tablet-layout --- */

@media (max-width: 1030px) {
    body{
        grid-template-rows: 100px 360px auto;
        grid-template-columns: 200px auto;
    }
    .modalDialog{
        top: 50%;
        left: 50%;
    }
    #logo{
        width: 160px;
        height: auto;
    }
    #navToggleChkbox{
        visibility: hidden;
    }
    nav{
        height: fit-content;
        width: 160px;
    }
    .navlinks{
        font-size: var(--smallfont);
    }
    .navlinks > div{
        height: 39px;
    }

    #headline > p{
        font-size: calc(var(--headline)* var(--mobile-factor));
        letter-spacing: 0;
    }

    #iuv{
        font-size: 18pt;
    }
    .infobox{
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .infobox > div{
        width: 85%;
        text-align: center;
    }
    .intermediate q{
        font-size: 16px;
    }
    .intermediate q:before,
    .intermediate q:after{
        font-size: 20px;
    }
    #about > ul > li > h3 {
        font-size: 14pt;
    }
    
    .big{
        width: 90%;
        margin: 5%;
    }
    #leistung{
        background-image: url("../pic/notebook.jpg");
        height: fit-content;
    }
    #leistung > section{
        flex-direction: column;
    }
    #leistung > section > div{
        width: 80%;
        max-width: none;
        min-width: none;
    }
    #ansprechpartner .biopic{
        height: 200px;
    }
    #ansprechpartner .odd > div > div{
        margin-left: 3%;
    }
    #linkliste{
        flex-flow: wrap;
        justify-content: center;
    }
    #links{
        padding: 1%;
    }
    #links > ul{
        gap: 1%;
        row-gap: 20px;
    }
    #links > ul > li{
        width: 31%;
    }
    .linkbox{
        height: 60px;
    }
    #kontakt > div{
        gap: 10%;
        justify-content: center;
    }
    #kontakt > div > section{
        width: 40%;
    }
}

/* --- mobile-layout --- */

@media (max-width: 766px) {
    body{
        /*              v: 1     2    3     4 */
        grid-template-rows: 100px auto 100px;
        grid-template-columns: 100px auto 100px;
        /*                 h: 1     2    3     4 */
        width: 99.5vW;
        height: 100vH;
    }
    h1, h2, h3, h4{
        font-size: calc(var(--headline) * var(--mobile-factor));
    }
    .modalDialog{
        top: 50%;
        left: 50%;
    }
    .modalDialogFooter{
        flex-direction: column;
        gap: 20px;
    }
    .modalBox{
        z-index: 20;
    }
    .btn{
        width: 80%;
    }
    #logoBox{
        display: contents;
        position: fixed;
        top: 0;
        left: 0;
        width: fit-content;
        height: fit-content;
    }
    #logo{
        height: 80px;
        width: auto;
        margin: 10px;
    }
    #navBox{
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        width: fit-content;
        height: fit-content;
        border-bottom: none;
        z-index: 10;
    }

    /* original button- and nav-animation-credits to
    * Erik Terwan
    * 24th of November 2015
    * MIT License */

    nav{
        position: fixed;
        top: 40px;
        right: 20px;
        width: 50px;
        height: 50px;
        padding: 0;
        margin: 0;
        
        background: none;
        -webkit-user-select: none;
        user-select: none;        
        z-index: 9;
        
        display: block;
    }
    #navToggleChkbox{
        display: block;
        visibility: initial;
        position: fixed;
        top: 0;
        right: 0;
        height: 100px;
        width: 100px;
        
        cursor: pointer;
        -webkit-touch-callout: none;
        opacity: 0; /* hide this */
        z-index: 5; /* and place it over the hamburger */
    }
    #menu{
        position: fixed;
        top: 100px;
        right: 0;

        width: 158px;
        height: 358px;
        
        background: var(--cc_main-light);
        
        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */
        
        transform-origin: 0% 0%;
        transform: scaleY(0);
        /*transform: translate(120%, 0);*/
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0);
        
        /*box-shadow: 5px 5px 10px var(--cc_logo-dark2);*/
        z-index: 11;
        border: 1px solid var(--cc_main-grey);
    }
    #menu > li{
        padding: 0 0 0 20px;
        width: 120px;
    }
    #lastnav{
        border-bottom: none;
    }
    
    /*
    * Just a quick hamburger
    */
    nav > span{
        display: block;
        visibility: initial;
        width: 33px;
        height: 4px;
        margin: 0 0 5px 0;
        position: relative;
        z-index: 2;
        
        background: var(--cc_main-dark);
        border-radius: 3px;
        
        transform-origin: 4px 0px;
        
        transition: 
            transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
            opacity 0.55s ease;
    }

    nav > span:first-child
    {
        transform-origin: 0% 0%;
    }
    
    nav > span:nth-last-child(2)
    {
        transform-origin: 0% 100%;
    }
    
    /* 
    * Transform all the slices of hamburger
    * into a crossmark.
    */
    #navToggleChkbox:checked ~ span
    {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #232323;
    }
    
    /*
    * But let's hide the middle one.
    */
    #navToggleChkbox:checked ~ span:nth-last-child(3)
    {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    
    /*
    * Ohyeah and the last one should go the other direction
    */
    #navToggleChkbox:checked ~ span:nth-last-child(2)
    {
        transform: rotate(-45deg) translate(0, -1px);
    }

    /*
    * And let's slide it in from the left
    */
    #navToggleChkbox:checked ~ ul
    {
        transform: none;
    }
    #navToggleChkbox::before ~ ul{
        visibility: hidden;
        height: 0;
    }

    /* --- end of nav-menu ---*/

    main{
        grid-row: 2/4;
        grid-column: 1/4;
        width: 100%;
        height: 100%;
        z-index: 1;
    }
    h1{
        margin: var(--smallspace) 0; 
    }
    #headline{
        margin-top: 45%;
    }
    #about > ul{
        flex-direction: column;
    }
    #about > ul > li{
        width: 100%;
        margin-bottom: var(--smallspace);
    }
    #about > ul > li > h3 {
        height: fit-content;
    }
    #leistung{
        background-image: url("../pic/notebook.jpg");
        height: fit-content;
    }
    #leistung > section{
        flex-direction: column;
    }
    #leistung > h1{
        margin-top: 100px;
    }

    .saeulen *, .saeulen *:hover{
        transform: none;
        translate: none;
        opacity: 1;
    }
    .saeulen > div, .saeulen > div > p{
        text-align: center;
        width: 90%;
        max-width: none;
        min-width: none;
    }
    .saeulen > div:hover, .saeulen > div > p:hover{
        width: 90%;
        max-width: initial;
        object-position: center;
        cursor: default;
    }

    #service > section > div{
        align-items: center;
        justify-content: center;
    }
    .saeulen{
        flex-direction: column;
        gap: 20px;
    }

    /*
    #service > section > div > p{
        background-color: var(--cc_logo-blue3);
        border-radius: 5px 5px 0 0;
        box-shadow: 5px 5px 10px var(--cc_logo-dark2);
        padding: 10px;
        margin: 0;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        width: 80%;
    }*/
    #service img{
        border-radius: 0 0 5px 5px;
        box-shadow: 5px 5px 10px var(--cc_logo-dark2);
        margin: 0 calc(var(--smallspace) - 5);
        width: 80%;
    }
    
    #ansprechpartner{
        gap: 30px;
    }
    #ansprechpartner .biopic{
        height: auto;
        width: 100%;
        mask-image: none;
    }
    #ansprechpartner .odd > div > div{
        margin-left: 0;
    }
    .portrait > div{
        flex-direction: column-reverse;
        gap: 15px;
    }
    .even .biopic{
        transform: none;
    }
    .odd > div > div{
        margin-left: 0;
    }
    
    #linkliste{
        flex-direction: column;
    }

    #links > ul{
        flex-direction: column;
        gap: 25px;
        margin: 5%;
        align-items: center;
        justify-content: space-around;
    }
    #links > ul > li{
        width: 90%;
    }
    #links a > div{
        color: #ffffff;
        background-color: var(--cc_logo-dark2);
        width: 90%;
        height: fit-content;
        padding: 20px;
    }

    #kontakt > div{
        flex-direction: column;
        gap: var(--smallspace);
        margin-bottom: var(--smallspace);
    }
    #kontakt > div > section {
        width: 100%;
    }
    #kontakt > section{
        width: 75%;
    }
}

@media (max-width: 475px) {
    #headline > p{
        font-size: calc(var(--headline)-5);
    }
}

@media (max-width: 414px) {
    #headline{
        margin-top: 42%;
    }
    #headline > p{
        font-size: var(--bigfont);
    }
}

@media (max-width: 330px) {
    #logo{
        height: 60px;
        width: auto;
        margin: 15px 10px ;
    }
    #headline{
        margin-top: 45%;
    }
    #headline > p{
        font-size: var(--mediumfont);
    }
}