@charset "UTF-8";
/* CSS Document */

@font-face {
  font-family: 'Bitter';
  src: local('Bitter'),
        url('fonts/Bitter/Bitter-Regular.otf');
}

/*******************************************/
/*************** Animation *****************/
/*******************************************/

@keyframes fading {from{opacity:0} to{opacity:1}} 
.fading {
    animation: fading 0.5s;
}
@keyframes pushup {
    from{opacity: 0; width: 20px;} 
    to{opacity: 1; width: 100%;}
}
.pushup1 {
    animation: pushup 1s;
    position: relative;
    z-index: -100;
}
.pushup2 {
    animation: pushup 2s;
    animation-delay: 2s;
    position: relative;
    z-index: -100;
}
.pushup3 {
    animation: pushup 2s;
    position: relative;
    animation-delay: 3s;
    z-index: -100;
}
@keyframes slideinleft {from{left: -300px;opacity:0} to{left: 0px;opacity:1}}
.slideinleft {
    animation: slideinleft 1s;
    position: relative;
    z-index: -100;
}
#oberteil:active {
   -webkit-transform: rotate(25deg) translate(0px, 0px);
   -ms-transform: rotate(25deg) translate(0px, 0px);
   transform: rotate(25deg) translate(0px, 0px);
}
@keyframes mymove {
  50% {opacity: 0;}
}
@keyframes cookiehint {from{opacity:0} to{opacity:1}}
.cookiehint {
    position:relative;
    z-index: -100;
    animation:cookiehint 5s;
}


* {
    box-sizing:  border-box; 
    margin: 0;
}
header {
    margin: 0 auto;
    padding-bottom: 3rem;
    padding-top: 3rem;
    width: 92%;
}
@media (min-width: 800px){
    header {width:86%;}
}

body {margin: auto;}

nav {
    background-color: white;
    border-bottom: 1px solid #E0081B;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    padding: 0 0 16px 0;
    position: sticky;
    top: 0;
    text-align: right;
    width: 100%;
}

section {
    padding-top: 2em;
    padding-bottom: 2em;
}
@media (min-width: 800px){
    section {
        padding-top: 4em;
        padding-bottom: 4em;
    }
}

footer {
    background-color: black;
    color: white;
    padding: 2em 0 3em 0;
}
footer a{color: white;}

a {
    color: black;
    display: inline-block;
    text-decoration: none;
    cursor: url("cursor1.png"), pointer;
}

ul { 
    list-style-type: disc;
    padding: 0;
}
li {list-style-position:inside;}
span {display: inline-block;}
em {
    font-style: normal;
    color: #E0081B;
}

.butt a, a.butt {
    border: 1px solid #e0081b;
    border-radius: 4px;
    color: #000000;
    font-family: "mendl-sans-dusk";
    font-size: 1em;
    font-weight: 700;
    padding: 15px 20px;
    text-align: center;
    width: auto;
}



html {font-size: 16px;}
body {
    font-family:"semplicitapro", sans-serif;
    font-weight: 400;
    font-style: normal;  
}
p, ul {font-size: 1.2rem;}
main p {color: #333;}
h1, h2, h3, h4, h5, h6 {
    font-family:"mendl-sans-dusk";
    font-weight: 700;
}
h1 {
    font-size: calc(1.325rem + 1.2vw);
    margin-bottom: 2rem;
}
h2 {
    font-size: calc(1.4rem + 0.4vw);
    margin-bottom: 0.5em;
}
@media (min-width: 800px){
    h2 {font-size: calc(1.2rem + 0.4vw);}
}

#showroom article img, 
#einleitung article img,
#agentur article img,
#seo_einleitung article img,
#neuesite article img,
#relaunch img {
    width: 100%; 
    height: auto;
}
#typo button,
#hinweistext {
    font-family: "American Typewriter";
    font-size: 18px;    
    font-style: normal;
    font-weight: 400;
    color:#000;
}
.titel, 
.desc {
    font-family:"mendl-sans-dusk";
    font-weight: 700;
}
.desc {font-size: calc(1.325rem + 0.9vw);}
.titel {font-size: calc(1.375rem + 1.5vw);}
@media (min-width: 800px){
    .titel { font-size: calc(1.425rem + 2.1vw);}
}
.cta {
    width: 14em;
    height: 14em;
    border-radius: 50%;
    
}
.ctafont {
    color:black;
    font-family:"mendl-sans-dusk";
    font-size: calc(1.1rem + 0.4vw);
    font-weight: 700; 
}
.ctafont2 {
    color: #e0081b;
    font-family:"mendl-sans-dusk";
    font-size: 8em;
    font-weight: 700; 
}

.fs09 {font-size: 0.9rem;}
.fs15 {font-size: 1.5rem;}
.fw700 {font-weight:700;}

.cursor {cursor: url("cursor1.png"), pointer;}
.cen {text-align: center;}
.right {text-align: right;}
.out {list-style-position: outside;}
.fett { 
    font-family: "mendl-sans-dusk";
    font-size: 24px;
    font-weight: 700;
}
.grid {
    display: grid;
    grid-template-areas:"logo"
                        "typo";
    text-align: center;
}
@media (min-width: 1150px){   
    .grid {
        display: grid;
        grid-template-columns: 20% 40% 40%;
        grid-template-areas:"logo typo typo";
        column-gap: 0px;
    }
}
#logo {grid-area: logo;}
#logo {
    height: auto;
    margin: 0 auto;
    width: 160px;
}

#typo {grid-area: typo;}
#typo button {
    padding: 10px;
    margin-bottom: 10px;
} 
@media (min-width: 1150px){   
    #typo {text-align: left;} 
}

#elch {
    position:absolute;
    left: 52%;
    top: 5.7%;
    margin-left: -100px;
}
@media (min-width: 1150px){
    #elch {
            position:absolute; 
            left: 52%;
            top: 16%;
        }
}
.topnav a {color: #333;}
.topnav li {
    display: none;
    padding: 16px;
}
.topnav li:last-child {display: block;}
.topnav.responsive {position: relative;}
.topnav.responsive li {
    display: block;
    text-align: left;
    padding: 5px;
}
.topnav.responsive li:first-child {
    padding-top:20px;
}
.topnav.responsive li.burger {
    position: absolute;
    right: 0;
    top: 0;
}
.topnav.responsive li.kontakt {border: none;}

@media (min-width: 800px){   
    .topnav li, .topnav.responsive li {display: inline-block;}
    .topnav.responsive li {border: none;}
    .topnav li a, .topnav.responsive li a {display: block;}
    .topnav li:last-child, topnav.responsive li:last-child {display: none;}   
}

.lr9286 {
    width: 92%; 
    margin: auto;
}
@media (min-width: 800px){
    .lr9286 {width:86%;}
}
.frame {
    background-color: #ffffff;    
    border: 1px solid #E0081B;
    border-radius: .8rem;
    display: inline-block;
    padding: 0.8em 20px;
}

.versteckt {visibility: hidden;}
.nodis {visibility: hidden;}
.shad {box-shadow: 0px 3px 50px #eee;}
.shad2 {box-shadow: rgba(0, 0, 0, 0.15) 2px 2px 12px 0px}

.sprung {
    height: 0px !important; 
    position: absolute;
    margin-top: -150px;
    visibility: hidden; 
}

.foto_rund {
    width: 220px; 
    height: 220px;
    border: solid 1px black; 
    border-radius: 50%;
    background-image:url("../images/portrait1.png");
    background-size:cover;
    background-repeat: no-repeat;
}
.sketch_rund {
    background-color: white;
    background-size:contain;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 50%;
    height: 230px;
    width: 230px; 
}
.sketch1_ag {
    background-image:url('../images/Projektmanagerin.svg');
    border: solid 2px #000000;
}
.sketch2_ag {
    background-image:url('../images/Designerin.svg');
    border: solid 2px #000000;
}
.sketch3_ag {
    background-image:url('../images/Entwicklerin.svg');
    border: solid 2px #000000;
}
.sketch1_webd {
    background-image:url('../../4_illu_grafiken/Verzweifelt5.png');
    border: solid 2px #e0081b; 
}
.sketch2_webd {
    background-image:url('../../4_illu_grafiken/Verzweifelt5.png');
    border: solid 2px #e0081b; 
}
.sketch3_webd {
    background-image:url('../../4_illu_grafiken/Verzweifelt5.png');
    border: solid 2px #e0081b;
}

#cookies {margin-top: 3rem;} 
#team img {
    width: 150px;
    height: auto;
}    
#datenschutz h3 {margin-bottom: 1em;}
#datenschutz h4 {margin-bottom: 0.5em;}
#datenschutz p {margin-bottom: 2em;}
#datenschutz ul {
    margin-left: 2em;
    margin-bottom: 2em;
}
#datenschutz li {list-style-position:outside;}

.flexcon {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 1rem;
}
.flexconnw {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    row-gap: 1rem;
}
.flexcon.flexi2 {
    row-gap: 4rem;
    column-gap: 10%;

}
.flexcon.flexi3, .flexconnw.flexi3 {
    row-gap: 4rem;
    column-gap: 2%;
}
.flexcon.flexcon-c {
    text-align: center;
    flex-direction: column;
}
.chdir {flex-direction: column;}
@media (min-width: 800px){
    .flexcon.flexcon-c {
        text-align: left;
        flex-direction: row;
    }
    .chdir {flex-direction: row;}
}
.flexcon article, 
.flexcon > div, 
.flexcon > p  {padding: 0.8rem;}
.flexcon article div h2 {padding-top: 10px;}

.flex30 {flex: 1 1 50%;}
@media (min-width: 1000px){ 
    .flexcon.flexi3 article,
    .flexcon.flexi3 div {flex: 1 1 30%;}
    .flexcon.flexi2 article,
    .flexcon.flexi2 div {flex: 1 1 40%;}
    .flex20 {flex: 1 1 20%;}
    .flex25 {flex: 1 1 25%;}
    .flex30 {flex: 1 1 30%;}
    .flex40 {flex: 1 1 40%;}      
    .flex50 {flex: 1 1 50%;}
    .flex60 {flex: 1 1 60%;}
    .flex70 {flex: 1 1 70%;}
}


/*************************************************/
/**************** Farben ********************/
/*************************************************/
.rot {color: #E0081B;}
.hgrün {color: #73d809;} 
.orange {color: #ff6600;} 
.pink {color: #f438ac;} 
.türkis {color: #48eef7;}
.gelb {color: #fdcd4f;} 
.lila {color: #2005c4;}
.jrot {color: #e50d07;}
.white {color: #ffffff;}

/*************************************************/
/************* Hintergrundfarben *****************/
/*************************************************/
.bgor {background-color: #ff6600;}
.bgge {background-color: #fdcd4f;}
.bggr {background-color: #eeeeee;}
.bgbl {background-color: black;}
.bgro {background-color: #e0081b;}
.bggre {background-color: #73d809;}
.bgwhi {background-color: white;}
.bgseo {background-color: #48eef7;}

.inverse {background-color: black; color: white;}

/*************************************************/
/******************* Border **********************/
/*************************************************/
/*** Radius ***/
.borr10 {border-radius: 10px;}
.borr50pr {border-radius: 50%;}

/*** Farbe ***/
.borbl1 {border: 1px solid #020202;}
.borro1 {border: 1px solid #e0081b;}

.borlbl {border-left: black thick solid;}
.borrbl {border-right: black thick solid;}
.bortbl {border-top: black thick solid;}
.borbbl {border-bottom: black thick solid;}

.borrot {border: #e0081b 5px solid ;}
.bortrot {border-top: #E0081B thick solid;}
.bortrot1 {border-top: #E0081B 1px solid;}
.borrrot {border-right: #E0081B thick solid;}
.borbrot {border-bottom: #E0081B thick solid;}
.borbrot1 {border-bottom: #E0081B 1px solid;}
.borlrot {border-left: #E0081B thick solid;}

.bortrot3 {border-top: #E0081B 3px solid;}
.borbrot3 {border-bottom: #E0081B 3px solid;}

.bortrot_br {border-top: #e0081b 30px solid;}
.borbrot_br {border-bottom: #e0081b 30px solid;}
.borlrot_br {border-left: #e0081b 2em solid;}
.borlrot_br2 {border-left: #e0081b 1.3em solid;}

/*** orange ***/
.borlor {border-left: #ff6600 thick solid;}
.borror {border-right: #ff6600 thick solid;}
.bortor {border-top: #ff6600 thick solid;}
.borbor {border-bottom: #ff6600 thick solid;}
.borbor_d {border-bottom: 1px solid #ff6600}
.bortor_br {border-top: #ff6600 60px solid;}
.borbor_br {border-bottom: #ff6600 60px solid;}
.borlor_br {border-left: #ff6600 60px solid;}
.borror_br {border-right: #ff6600 60px solid;}

.borlge49 {border-left: #d0f056 thick solid;}
.borrge49 {border-right: #d0f056 thick solid;}
.bortge49 {border-top: #d0f056 thick solid;}
.borbge49 {border-bottom: #d0f056 thick solid;}

.borlgr {border-left: lightgray thick solid;}
.borrgr {border-right: lightgray thick solid;}
.bortgr {border-top: lightgray thick solid;}
.borbgr {border-bottom: lightgray thick solid;}

/*** hellgrün ***/
.bortgre_br {border-top: #73d809 60px solid;}
.borbgre_br {border-bottom: #73d809 60px solid;}
.borlgre_br {border-left: #73d809 60px solid;}
.borrgre_br {border-right: #73d809 60px solid;}

/*** türkis ***/
.borltk {border-left: #48eef7 thick solid;}
.borltk_d {border-left: 2px solid #48eef7;}
.borrtk {border-right: #48eef7 thick solid;}
.borttk {border-top: #48eef7 thick solid;}
.borbtk {border-bottom: #48eef7 thick solid;}
.borbtk_d {border-bottom: 2px solid #48eef7;}
.borttk_br {border-top: #48eef7 60px solid;}
.pointtk {
    background-color: #48eef7;
    border: 1px solid #48eef7; 
}

/*** pink ***/
.borlpi {border-left: #f438ac thick solid;}
.bortpi {border-top: #f438ac thick solid;}
.borrpi {border-right: #f438ac thick solid;}
.borbpi {border-bottom: #f438ac thick solid;}

/*** gelb ***/
.borlge {border-left: #fdcd4f thick solid;}
.borrge {border-right: #fdcd4f thick solid;}
.bortge {border-top: #fdcd4f thick solid;}
.borbge {border-bottom: #fdcd4f thick solid;}
.bortge_br {border-top: #fdcd4f 60px solid;}

/***lila ***/
.borlli {border-left: #2005c4 thick solid;}
.bortli_br {border-top: #2005c4 60px solid;}


/*** Abstände ***/
/*** gaps ***/
.rg0 {row-gap: 0;}
.rgem3 {row-gap: 3em;}
.rgem4 {row-gap: 4em;}
.cgpro2 {column-gap: 2%;}
.cgpro4 {column-gap: 4%;}
.cgpro10 {column-gap: 10%;}

/*** margins ***/
.maut {margin: auto;}

/* top*/
.mt0 {margin-top: 0;}
.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mt20 {margin-top: 20px;}
.mt50 {margin-top: 50px;}
.mt1em {margin-top: 1em;}
.mt2em {margin-top: 2em;}
.mt22em {margin-top: 2.2em;}
.mt23em {margin-top: 2.3em;}
.mt3em {margin-top: 3em;}
.mt4em {margin-top: 4em;}
.mt5em {margin-top: 5em;}
.mt15em {margin-top: 1.5em;}
.mt08r {margin-top:0.8rem;}
.mt2r {margin-top: 2rem;}

/* right */
.mr5 {margin-right: 5px;}
.mr20 {margin-right: 20px;}
.mr2em {margin-right: 2em;} 

/* bottom */
.mb10 {margin-bottom: 10px;}
.mb50 {margin-bottom: 50px;}
.mb100 {margin-bottom: 100px;}
.mb1em {margin-bottom: 1em;}
.mb2em {margin-bottom: 2em;}
.mb3em {margin-bottom: 3em;}
.mb4em {margin-bottom: 4em;}
.mb5em {margin-bottom: 5em;}

/* left */
.ml20 {margin-left: 20px;}
.ml50 {margin-left: 50px;}
.ml2em {margin-left: 2em;}

/* mix */
.mtb5 {margin-top: 5px; margin-bottom: 5px;}
.mlr20 {margin-left: 20px; margin-right: 20px;}
.m08r {margin: 0.8rem;}


/*** paddings ***/

/* top */
.pt10 {padding-top: 10px;}
.pt20 {padding-top: 20px;}
.pt25 {padding-top: 25px;}
.pt30 {padding-top: 30px;}
.pt50 {padding-top: 50px;}
.pt120 {padding-top: 120px;}
.pt1em {padding-top: 1em;}
.pt2em {padding-top: 2em;}
.pt3em {padding-top: 3em;}
.pt4em {padding-top: 4em;}
.pt5em {padding-top: 5em;}
.pt6em {padding-top: 6em;}
.pt8em {padding-top: 8em;}

/* right */
.pr10 {padding-right: 10px;}
.pr08r {padding-right: 0.8rem;}
.pr1r {padding-right: 1rem;}
.pr18r {padding-right: 1.8rem;}
.pr2r {padding-right: 2rem;}
.pr3r {padding-right: 3rem;}

/* bottom */
.pb10 {padding-bottom: 10px;}
.pb20 {padding-bottom: 20px;}
.pb30 {padding-bottom: 30px;}
.pb50 {padding-bottom: 50px;}
.pb100 {padding-bottom: 100px;}
.pb150 {padding-bottom: 150px;}

.pb1em {padding-bottom: 1em;}
.pb4e {padding-bottom: 4em;}

/* left */
.pl5 {padding-left: 5px;}
.pl1em {padding-left: 1em;}

.pl1r {padding-left: 1rem;}
.pl06r {padding-left: 0.6rem;}
.pl08r {padding-left: 0.8rem;}
.pl15r {padding-left: 1.5rem;}
.pl18r {padding-left: 1.8rem;}
.pl38r {padding-left: 3.8rem;}

.p2000 {padding: 20px 0;}
.pem51 {padding: 2em 0.5em;}
.pem1050 {padding: 1em 0em 0em 0em;}
.pem5010 {padding: 0em 0em 1em 0em;}
.p3050 {padding: 30px 50px;}
.p3030 {padding: 30px 30px;}

.p5 {padding: 5px;}
.p10 {padding: 10px;}
.p20 {padding: 20px;}
.p30 {padding: 30px;}
.p50 {padding: 50px;}
.p050 {padding: 0 50px;}
.p100 {padding: 100px;}
.p1050 {padding: 10px 50px;}
.p1020 {padding: 10px 20px;}
.p08r {padding: 0.8rem;}

.pft {padding: 10px;}
@media (min-width: 800px){
    .pft {padding:30px;}   
}

@media (min-width: 800px){
.pem51 {padding: 5em 1em;}
.pem1050 {padding: 1em 0em 5em 0em;}
.pem5010 {padding: 5em 0em 1em 0em;}
}

/*** Weiten ***/
.mw200 {max-width: 200px;}
.mw250 {max-width: 250px;}
.mw300 {max-width: 300px;}
.mw350 {max-width: 350px;}
.mw800 {max-width: 800px;}
.mw1000 {max-width: 1000px;}
.w100 {width: 100%;}
.w230 {width: 230px;}
.w250 {width: 250px;}
.w300 {width: 300px;}
.w350 {width: 350px;}

/*** Höhen ***/
.h230 {height: 230px;}
.h250 {height: 250px;}
.h300 {height: 300px;}