/* General Style */ 
/* JobNinja GmbH*/
/* by Tom Schmid*/
/* Juli 2025 */
/* Bewerber */

@font-face { font-family: 'Syne';font-display:auto;src: url('../font/Syne.ttf') format('truetype'); }
@font-face { font-family: 'Inter';font-display:auto;src: url('../font/Inter-Regular.ttf') format('truetype'); }

html {scroll-behavior: smooth;}
body {font-family: 'Inter', sans-serif;background: #ffffff;margin: 0;padding: 0;color: #171324;}


h1 {font-size:3em;font-family: 'Syne', sans-serif;padding:0;}
.hire h1{text-align:center;}
.blog h1{color:#c10633;}

h1 span{position:relative;}
h1 span::after{  content: "";position: absolute;bottom: 0;left: 0;background-image: url(/templates/jobninja/images/home-hero-stroke.svg);background-size: 100% auto;background-position: 50%;background-repeat: no-repeat;height: 10px;width: 100%;}

h2 {color:#c10633;font-weight: 700;margin: 32px 0;font-family: 'Syne', sans-serif;margin:0;}
.hire #main h2{text-align:center;margin:0;padding:0;}
.hire #main .newsflash h2{padding: 0.5em 0; min-height:3em;}
.audience h2{margin:0;}
/*.info h2{margin:0;}*/
.timeline .timeline-card h2{padding:0 20px 0 40px;}

h3 {margin:0; padding:0;font-size:1.5rem;font-family: 'Syne', sans-serif;}
.grid-3 h3{color:#c10633;font-size:2rem;}

h4 {margin: 0 0 1em 0;padding: 0;font-weight: 700;font-size: 1.1em;font-family: 'Syne', sans-serif;}

h5 {position: relative;font-weight: 700;font-size: 1em;font-family: 'Syne', sans-serif;}

h6{font-weight:normal;margin:1em 0 0 0;padding:0 0 0 0;font-size:0.9rem;font-family: 'Syne', sans-serif;}

ul li{font-size:1rem;list-style:none;margin-bottom:0.5em;}

p{line-height: 1.375rem;margin-top: .375rem;}
.ds-neu p{font-size: 1rem;}
a {text-decoration:none;outline:none;font-weight:700;color:#000;font-size:0.9em;}
a.vistied{color:#171324;}

a.job-tipp{border: 2px solid #171324;border-radius:13px;color: #171324;background: none;padding: 10px 20px;font-weight:500;}
a.job-tipp:hover{border:2px solid #c10633;color:#c10633;}



/* Nur sichtbar für Tastaturnavigation */
:focus-visible {
    outline: 3px solid #007acc;
    outline-offset: 2px;
}
/* Fallback für ältere Browser, die :focus-visible nicht unterstützen */
:focus:not(:focus-visible) {
    outline: none;
}

/* Header */ 
.header {transition: all 0.2s ease-in-out;background:#ffffff;width:100%;}
header.sticky {position: fixed;top: 0;left: 0;width: 100%;z-index: 9998;transition: all 0.2s ease-in-out;box-shadow: 0 0 5px 5px rgba(100, 100, 100, 0.5);}
header.sticky .banner{padding:10px;font-size:0.8em;}
header .banner .grid-2{grid-column-gap:0;}
header.sticky .banner .grid-2 img{height:3em;}
	
.start .header{background:none;}
.start .banner{background:none;}
.start header.sticky{background:#ffffff;}


/* Main */
#main {margin:0 auto 0;background:#ffffff;}
#main img{max-width:100%;height:auto;width:100%;}
#main .leistung-top{text-align:center;}
#main .main{width: 90%;max-width:1440px;margin: 0 auto;}
#main article{padding: 0;}
/*.hire #main article{padding:40px 40px 0;}*/
.leistungen #main article p{max-width:1000px; width:90%; margin: 0 auto;}
.info{background:#f1f1f2;}
#main .info {text-align:left;background:#ffffff;padding:0;}
.berufe #main .info {display: none;}
#main .info .more-info{padding: 40px 0;margin: 0 auto;width:90%;max-width:1440px;text-align:center;}
.bloginfo .more-info{width:90%;max-width:1440px;margin: 0 auto;}
.info .more-info{position:relative;margin:0 24px;}
.bloginfo .more-info{position:relative;margin:0 24px;}
#main .info .more-info-1{background:#f1f1f2;padding:0;}	
.ueber-uns .info .more-info-1 h3{text-align:center;margin: 0 0 1em 0;color:#c10633;font-size:3vw;}
.more-info-1 .blog-cta{padding:0;}

#main .info .more-info-3{background:#ffffff;margin: 0 0 1em 0;}
.ueber-uns #main .info .more-info-3{display:none;}

#main .bloginfo {text-align:left;background:#f1f1f2;padding:0 0 40px 0;}
.blog-main #main .bloginfo, .blog #main .bloginfo{display:none;}
#main .bloginfo .newsflash-image{text-align:center;}
#main .info .grid-2 .img-grid img{max-height: 13em;width: auto;}
.ueber-uns #main .info img{max-width:100%;height:auto;}
#main .bloginfo img{width: 100%;}

/*#main .info .bilder-item h2{text-align:center;}*/
#main article .list h2{font-size:1.3em; margin: 1em 0 0 0;}
#main article .list li{font-size:1.2rem;}

#main button.info{border: 2px solid #171324;color: #171324;background: none;padding:10px 20px;}
#main button.info:hover{border:2px solid #c10633;color:#c10633;}
#main button.info a{font-size: 1rem;}
#main button.info:hover a{color:#c10633;}


#main .info .button-cta{padding:2em 0;text-align:center;}
#main .info .button-cta button.cta,
#main .info .button-cta button.info{margin:0 5% 2em;padding:0.5em 2%}


/*#main .bloginfo{width:90%;background: #ffffff;border-radius: 40px;max-width: 1440px;margin: 0 auto;}*/
#main .bloginfo .more-info{width:100%; margin:0 auto 0;padding-top:40px;border-radius:15px;text-align:center;}
#main .bloginfo .more-info h2.title{margin: 0;}

/* Grid-2 */
.grid-2{display: grid;grid-template-columns: 45% 45%;grid-column-gap:10%;}
#main .grid-2 {margin: 2em auto 0;}
#main .grid-2 .content-left{text-align:right;margin:1em 0 0 0;padding:1em 0 0 0;}
.hire #main .grid-2 .content-left h2{text-align:right;}

#main .info .audience .grid-2,
#main .info .grid-2{grid-template-columns: 100%;grid-row-gap:40px;}
#main .info .audience  .grid-2-item{padding:20px 40px;}
#main .info .grid-2 p{text-align:center;margin:1em 0;}
#main .info .more-info .grid-2 p{text-align:left;}
#main .info .grid-2-item{background:#ffffff;padding:32px;border-radius:16px;border: 4px solid #ffffff;transition: all 0.5s;}
/*#main .info .grid-2-item:hover{border:4px solid #c10633;transition: all 0.5s;}*/
.start #main .info .grid-2-item .img-grid,
.hire #main .info .grid-2-item .img-grid{text-align:center;}
.more-info .newsflash, .more-info .custom{margin: 0;}
.more-info #termin {height: 40px;}
	
#main .newsflash-image{margin:0;padding:0;}
#main .autor {display:grid; grid-template-columns: 20% 80%; text-align:left;margin:0;width:80%;}
.blog #main .autor{margin: 0 0 1em 0;}
#main .more-info .autor{display:grid; grid-template-columns: 25% 75%;width:80%;height:3em;}

#main .autor img, .ueber-uns #main .info .autor  img{height:3em; width:auto;border-radius:50%;}
#main .autor h3{margin:0 1em;font-size:12px;}
#main .autor p.name{font-family: 'Syne', sans-serif;}
#main .autor p, #main .blog .autor p{margin:0 1em;font-size:12px;}
#main .more-info a.readmore{text-align:right;margin-top:-1em;}
.newsflash h2{font-size: 1.3rem;min-height:3em;margin-top:1em;}
.newsflash h2 a{color:#c10633;}
.berufe .newsflash h2{min-height:4em;margin-top:0;}

/* Grid-3 */
.grid-3{display: grid;grid-template-columns: 100%;grid-row-gap: 40px;}
.grid-3-info{padding: 40px;border-radius: 15px;text-align:left;background:#ffffff;border:4px solid #B5B5B5;transition: all 0.5s;}
.grid-3-info:hover{border:4px solid #c10633;transition: all 0.5s;}
.grid-3-info p{text-align:left;}

/*Grid-3 Test*/
#main .bilder-grid{display: grid;grid-template-columns:100%;grid-column-gap:3%;margin-top: 40px;}
.blog #main .bilder-grid{margin-top:0;}
/*#main .more-info-3 .bilder-grid{margin-top:0;}*/
#main .bilder-item{padding: 40px;border-radius: 16px;text-align:left;background:#f1f1f2;border: 4px solid #f1f1f2;}
#main .newsflash  .bilder-item{background:#ffffff;border: 4px solid #d7d6d9;}
.blog-main #main .newsflash .bilder-item{background:#f1f1f2;border:4px solid #f1f1f2;}
.blog-main #main .newsflash .bilder-item:hover, #main .bilder-item:hover{border: 4px solid #c10633;}
#main .bilder-item p{text-align:left;min-height:5em;}

/* Slider */
.slider{display:none;}
.start .slider{width:90%; max-width:1440px; margin: 3em auto 0;display:inherit;}

.slider h3{font-weight:normal;margin:0 0 2em;}
.slider .grid-2{display: grid;grid-template-columns: 90% 10%;margin: 0;}
.slider .grid-2 .slider-left{}
.start .slider .grid-2 .slider-right{margin:0;}
.slider{display:none;}
.slider button.cta{font-size:1.2rem;border-radius:16px;background: #c10633;}
.slider img{max-width:100%;height:auto;}

/*bearbeitet*/
.blog-cta {text-align:right;margin:40px 0 0;}
button{cursor:pointer;border-radius: 13px;color: #fff;padding: 10px 20px;margin-top: 10px;font-family: 'Syne';color:#c10633;}
a button, button a{font-weight:500;text-decoration:none;}
button.cta{border: 2px solid #c10633;background: #c10633;color: #fff;font-size:1rem;}
button.cta:hover{background:#98092f;color:#ffffff;border: 2px solidj  #98092f;}
button.cta a{color:#ffffff;}


/* Menü */
nav.nav{display:inline-block;text-align:right;}
nav {display:inline-block;margin:0 auto 0;width:100%;}
nav ul {padding:13px 0 0 0;margin:0;}
nav ul li {display:inline-block; margin:0 0 0 3%;vertical-align:top; padding:0.5em 0 0 0;margin: 0;}
nav ul li a{text-decoration:none;font-weight:500;height: inherit;display: inline-block;padding: 0;margin: 0 0 0 25px;box-sizing: border-box;}
nav ul li a.hire-on{border-bottom:3px solid #343434;}
nav ul li a:visited{color:#1e1e1e;}
nav ul li ul{display:none;position:absolute;background:#ffffff;z-index:8000;margin:0;min-width:10%;text-align:left;}
nav ul li.active{border-bottom:2px solid #343434;}
nav ul li:hover ul{display:block;}
nav ul li a.login{font-weight:700;margin:0 0 0 62px;}
.grid-2 nav ul li{}
.banner .top-grid-item{margin: 0;}
 nav.sub{text-align:left;padding:0;}
 nav.sub ul{margin:0;padding:revert;}
 nav.sub ul li {margin: 0 32px 0 0;padding:0.5em 0 0 0;}
 nav.sub ul li a{margin:0;padding:0;font-weight:500;}
 
 
 /*neu Nov 2024*/
.desk .nav{display: inline-block;text-align: right;margin: 0 auto;width: 100%;}
.desk .nav {display:inline-block;margin:0 auto 0;width:100%;}
.desk .nav ul {padding:13px 0 0 0;margin:0;}
.desk .nav ul li {display:inline-block; margin:0 0 0 3%;vertical-align:top; padding:0.5em 0 0 0;margin: 0;}
.desk .nav ul li a{text-decoration:none;font-weight:500;height: inherit;display: inline-block;padding: 0;margin: 0 0 0 25px;box-sizing: border-box;}
.desk .nav ul li a.hire-on{border-bottom:3px solid #343434;}
.desk .nav ul li a:visited{color:#1e1e1e;}
.desk .nav ul li ul{display:none;position:absolute;background:#ffffff;z-index:8000;margin:0;min-width:10%;text-align:left;}
.desk .nav ul li.active{border-bottom:2px solid #343434;}
.desk .nav ul li:hover ul{display:block;}
.desk .nav ul li a.login{font-weight:700;margin:0 0 0 62px;}



.audience {display:none;}
.newsletter{width:90%;max-width:1440px;margin:0 auto;}
.info .newsletter .more-info .convertforms {margin: 2em auto;max-width: 100%;border: 1px solid rgba(23, 19, 36, 0.12); border-radius: 16px;padding: 32px;}
.newsletter .more-info .cf-fields{display:grid;grid-template-columns:60% 40%;}
.newsletter .more-info .convertforms .cf-input{border: 1px solid #171324;background: rgba(23, 19, 36, 0.12);font-size:1.5em;}
.newsletter .more-info .convertforms .cf-form-wrap{padding: 0 0 2em 0;}
.cf-btn-text{font-size:1.5em;}

/* Leistungen */
.leistungen #main .info .more-info-1,
.leistungen #main .info .audience{display:none;}
.leistungen #main .info .more-info{padding: 3em 0 0 0;}
.leistungen h1, .leistungen #main h2{text-align:center;}
.leistungen ul.check li::before {content: '';display: inline-block;margin-right: 10px;height: 2rem;width: 30px;background-image: url("../images/check.png");background-size: 1.5rem;background-repeat: no-repeat;background-position: bottom;}
.leistungen ul.check li {list-style: none;font-size: 1.2rem;line-height: 2rem;max-width:1000px; width:90%; margin: 0 auto;}
.leistungen #main .leistung-top{text-align:center;}

.leistungen-all .grid-4 .img-grid,
.leistungen-all .grid-4-item h3{text-align:center;min-height:3em;font-size:1.3em;}
.leistungen-all .grid-4-item{border: solid 4px #dddddd;transition: all 0.5s;border-radius:16px;padding: 40px 40px 20px 40px;background:#ffffff;}
.leistungen-all .grid-4-item:hover {border: solid 4px #c10633;transition: all 0.5s;}
.leistungen-all .grid-4 .leis-but{position: relative;text-align: center;}

/* Stellen in */
.stellenin #main .bloginfo .more-info{padding:0;}
.stellenin #main .stellen-in-portale  ul li{display: inline;list-style: disc;padding: 0 5% 0 0;}
.stellenin #main .info .more-info{padding:0;}
.stellenin .stellein-item{margin-top: 3em;}
.stellenin #main article {max-width: 1360px;margin: auto;text-align:center;}
.stellenin #main article .recht {text-align:left;}
.stellenin #main img{border-bottom: 2px solid #c10633;}
#main .stellen-in-portale{margin-top:5em;}
#main .stellenin-grid{display:grid;grid-template-columns:47.5% 47.5%;grid-column-gap:5%;}
#main .stellenin-grid .stellenin-item img{max-width:100%;height:auto;margin:0 0 2em 0;filter:grayscale(0.9) brightness(1.2);transition:all 0.5s linear;}
#main .stellenin-grid .stellenin-item img:hover{filter:grayscale(0) brightness(1);transition:all 0.5s linear;}
.stellenin main ul{margin:80px 0;}

/* Blog */

.blog #main{width:90%;max-width:1440px;}
.blog #main article .com-content-article__body{margin:0;}
.blog .main{display:grid;grid-template-columns:100%;padding: 0 40px;}
.blog #main .news-side{margin: 0 20% 0 0;z-index:1;}
.blog #main .news-side .bilder-grid{grid-template-columns:100%;}
.blog #main .news-side .autor{display:none;}
.blog #main .bilder-item{padding:30px;border: solid 4px #f1f1f2;transition: all 0.5s;background: #f1f1f2;}
.blog #main .bilder-item:hover{border: solid 4px #c10633;transition: all 0.5s;}
.blog #main .bilder-item p{min-height:2em;font-size:1rem; line-height:1.2rem;margin: 0 0 0.5em 0;}
.blog .info{position:relative;z-index:5;}
.news-side h2{margin:0;padding:0;font-size:1.1em;}
.blog .news-main{padding:0;margin:0;}
.blog #main .info .more-info,
.blog #main article {text-align:left;}
.blog #main article p{font-size:1.1rem;}
.blog #main article p.fussnote{font-size: 0.9em;color: #4d4d4d;margin: 0 0 2em 0;}
.blog #main .bloginfo .more-info,
.info .more-info{width:90%;max-width:1440px;margin: 0 auto;}
.blog .bloginfo .newsflash{margin:0 40px 1em;}
table{margin:2em auto;width:100%;}
td{width:20%;}

hr #system-readmore{text-align:right;margin-top:-1em;}

.zsiq_theme1 .zsiq_flt_rel{background-color: #ffffff !important;}
.zsiq_theme1 .zsiq_user.siqicon{background-color: #c10633 !important;}

/* Footer */ 
footer{position:relative;background: #98092f;margin:0 auto;color:#ffffff;z-index:400;}
.footer-grid-outer{width:90%;max-width:1440px;margin:0 auto;}
/* .footer-grid{padding: 70px 0;display:flex;flex-direction:row;flex-wrap:wrap;margin: 0 40px;}
.footer-left, .footer-middle, .footer-right{flex:1 1;}*/


footer p{}
footer h5{}
footer h4{}
footer a{color:hsla(0,0%,100%,.72);text-decoration:none;font-weight:400;font-size:1em;}
footer li{color:hsla(0,0%,100%,.72);font-weight:400;font-size:1em;margin: 0 0 20px 0;}
footer a:hover, footer li:hover{color:#ffffff;}
footer li img {height: 1em;width: auto;margin: 0 10px 0 0;}

footer ul{margin:0;padding: 0;}
footer li{list-style:none;}

.footer-grid{padding:70px 0;}

/*hamburger*/
.hamburger {padding: 15px 15px;display: inline-block;cursor: pointer;transition-property: opacity, filter;transition-duration: 0.15s;transition-timing-function: linear;font: inherit;color: inherit;text-transform: none;background-color: transparent;border: 0;margin: 0;overflow: visible;text-align:right;width:90%;}
.hamburger-box {width: 5%;height: 2em;display: inline-block;position: relative;margin-top:1em;}
.hamburger #banner-text{text-align:center;display:inline-block;width:78%;vertical-align:top;}
.hamburger #banner-text #logo{float:none;display:inline-block;width:100%;}
.hamburger-inner {display: block;top: 50%;margin-top: -2px; }
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {width: 30px;height: 2px;background-color: #000000;border-radius: 4px;position: absolute;transition-property: transform;transition-duration: 0.15s;transition-timing-function: ease;}
.hamburger-inner::before, .hamburger-inner::after {content: "";display: block; }
.hamburger-inner::before {top: -10px; }
.hamburger-inner::after {bottom: -10px; }
.hamburger--collapse .hamburger-inner {top: auto;bottom: 0;transition-duration: 0.13s;transition-delay: 0.13s;transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse .hamburger-inner::after {top: -20px;transition: top 0.2s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity 0.1s linear; }
.hamburger--collapse .hamburger-inner::before {transition: top 0.12s 0.2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform 0.13s cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.hamburger--collapse.is-active .hamburger-inner {transform: translate3d(0, -10px, 0) rotate(-45deg);transition-delay: 0.22s;transition-timing-function: cubic-bezier(0.215, 0.61,0.355, 1); }
.hamburger--collapse.is-active .hamburger-inner::after {top: 0;opacity: 0;transition: top 0.2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity 0.1s 0.22s linear; }
.hamburger--collapse.is-active .hamburger-inner::before {top: 0;transform: rotate(-90deg);transition: top 0.1s 0.16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform 0.13s 0.25s cubic-bezier(0.215, 0.61, 0.355, 1); }

  /*Accordion*/
#main .list {margin: 3em auto;}
#main .list .accordion {width: 100%;display: flex;flex-direction: column;margin: 0 0 2rem 0;}
#main .list .accordion input {position: absolute;z-index: -1;opacity: 0;}
#main .list .accordion input:checked ~ label img {transform: translate(0, -50%) rotate(180deg);}
#main .list .accordion input:checked ~ .content {height: auto;opacity: 1;transform: translate(0, 0);padding: 1em;}
#main .list .accordion label {width: 98%;background-color: #ffffff;padding: 1rem;border-radius: 1rem;cursor: pointer;transition: all 150ms;position: relative;z-index: 2;color:#171324;border:1px solid #171324;}
#main .list .accordion label p{font-size: 1.4em;max-width:80%;}
#main .list .accordion label:hover {background: #ffffff;color: #c10633;border:1px solid #c10633;}
#main .list .accordion label img {width: 1.5rem;position: absolute;top: 50%;right: 2rem;transform: translate(0, -50%);transition: 350ms all;}
#main .list .accordion .content {width: 100%;position: relative;z-index: 1;transform: translate(0, -20%);height: 0;opacity: 0;transition: 350ms all;overflow: hidden;}
#main .list .accordion .content p {padding: 1rem;margin: 0;}
#main .list .tabelle-2 .icon img{max-width:100%;}

/* Visform */
.vis-form #main article{width:90%;max-width: 1440px;}
.vis-form  .visCSSlabel{font-size:1.2rem;}
.visform input{width:100%;margin: 0 0 1em 0;}
.visform input:not(.btn){border-radius: 5px;font-size: 1.2rem;padding:0.3rem;background: #f7f7f7;border: 1px solid #cdcdcd;box-shadow: 5px 5px 5px #cdcdcd;}
.vis-form .visform input:not(.btn) .field15{font-size: 1rem;}
.visform textarea{width:100%; height:7em;border-radius: 5px;font-size: 1.2rem;padding:0.3rem;background: #f7f7f7;border: 1px solid #cdcdcd;box-shadow: 5px 5px 5px #cdcdcd;margin: 0 0 1em 0;}
.visform input.btn{  border-radius: 10px;font-size: 1.2rem;padding: 1rem;background: #c10633;border: 1px solid #cdcdcd;box-shadow: 5px 5px 5px #cdcdcd;color: #fff;cursor: pointer;transition: all 0.8s ease-in-out;}
.visform input.btn:hover{border: 1px solid #c10633;background:#ffffff;color:#c10633;transition: all 0.8s ease-in-out;}
.visform .field17{margin:2rem 0;}
.visform .field17 p{font-size:2rem;color:#c10633;}
.visform .visCSSlabel{width:50%;}	

/* Display none */
.ueber-uns .audience{display:none;}
.vis-form #main .info .more-info,
.blog-main #main .info .more-info,
.blog #main .info .more-info,
.faq #main .info .more-info,
.recht #main .info .more-info,
.recht .bloginfo{display:none;}

/*Brutto Netto Rechner*/
.s_r_de_brutto_netto1{margin-top:1em;margin-bottom:2em;}

/* Liste der Job-Kategorien */
ul.job-categorie{
	list-style-type: disc;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    padding-inline-start: 0px;
}
ul.job-categorie li{
    display: inline-block;
    margin-right: 8px;
    margin-bottom: 25px;
}
ul.job-categorie li a{
	    color: #fff;
    font-size: .875rem;
    padding: 8px 14px;
	background: #98092fb3;
    border-radius: 16px;
    font-weight: 500;
    outline: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    transition: all .1s;
}
ul.job-categorie li a:hover{
	background:#98092f;
}

	/* Mobile Style */
@media only screen and (min-width:1670px) {
		.start .slider{height:80vh;}
}	
@media only screen and (max-width:1670px) {
		.start .slider{height:40em;}
		
}	
@media only screen and (max-width:1300px) {
	.leistungen-all .grid-4-item{padding:25px;}
	.leistungen-all h3{font-size:1.1em;}
	.leistungen-all button.cta{font-size:0.8em;}
}

@media only screen and (min-width:1300px) {
	.start .slider .grid-2 .slider-right{margin:0 0 0 50px;}
	
	h1{font-size:57px;}
	.start article h1{display: inline-block;}
	h2{font-size:2.5rem;}
	/*p{font-size:1.3rem;}*/
	.slider button.cta{font-size:1.2rem;}

}	
@media only screen and (max-width:1300px) {
		.start #main {padding: 40px 0;}
		.start .slider{height:25em;}
		.start article h1{display: none;}
		.leistungen-all .grid-4{margin: 0 0 5em 0;}
}	

@media only screen and (min-width:1024px) {
	h2 {font-size:1.8rem;margin: 32px 0;}
	.vis-form h2{font-size: 1.5rem;}
	.vis-form #main{width:90%;max-width:1440px;}
	.vis-form .main{margin:0 40px;}
	.visform .active{border: none;max-width: 1000px;margin: 0 auto;}
	.vis-form .formular{max-width: 1000px;margin: 0 auto;}

	body{font-size:16px;}
	p{font-size:1.2rem;}
	.footer-grid{position:relative;margin:0 40px;}
	.footer-left, .footer-middle, .footer-right{flex-basis:auto;}	
	.info .more-info, .bloginfo .more-info{margin:0 40px;}
	#main .bilder-grid{grid-template-columns: 31.33% 31.33% 31.33%;grid-row-gap:40px;}
	.leistungen-all .grid-4{display:grid; grid-template-columns:23.5% 23.5% 23.5% 23.5%;grid-column-gap:2%;margin:0;grid-row-gap:40px;}
	.slider .grid-2{grid-template-columns: 40% 70%;}
	/*.bloginfo h2{min-height: 2.3em;}*/
	header .banner{width:90%; max-width: 1440px;top:0;margin:auto;background:#ffffff;padding:24px 0;}
	header .banner .grid-2{display:grid;grid-template-columns:20% 80%;margin:0 40px;}
	header .banner .grid-2 img{height:59px;width:100px;}
	.blog .main{display:grid;grid-template-columns:30% 70%;padding: 0 40px;}
	#main article{padding:40px 40px 0;}
		


}	
@media only screen and (max-width:1024px) {
	h2 {font-size:1.5rem;}
	p{font-size:1.1rem;}
		.start .slider{height:20em;}
	body{font-weight:500;background:#fff;margin:0;font-size:12px;overflow-x:hidden;}
	header .banner{width:100%; max-width: 1440px;top:0;margin:auto;background:#ffffff;padding:24px 0;}
	header .banner .grid-2{display:grid;grid-template-columns:20% 80%;margin:0 24px;}
	header .banner .grid-2 img{height:42px;width:auto;}
	.blog .news-main {grid-area:1/1;}
	.blog #main .news-side{margin:0;}
	.blog #main .news-main article{padding:0;}
	.autor .text p{font-size: 1rem;}
	.leistungen-all .grid-4{display:grid; grid-template-columns:48% 48%;grid-column-gap:4%;margin:0 0 15em 0;grid-row-gap:4%;}
	.leistungen .leistungen-all .grid-4{margin: 0 0 10em 0;}

}	
@media only screen and (min-width:900px) {
	body.start{background-image: url("../images/jobninja.jpg"); background-size: 70% auto;background-repeat:no-repeat;background-position-x: right;background-position-y:3em;}
	#main .info .audience .grid-2,
	#main .info .grid-2{grid-template-columns: 47.5% 47.5%;grid-column-gap:5%;grid-row-gap:5%;}
	.grid-3{display: grid;grid-template-columns: 31.33% 31.33% 31.33%;grid-column-gap:3%;}
	.grid-3-info p{min-height:5em;}
	nav ul li a{font-size:1rem;margin: 0 0 0 32px;}
	.hire #main .grid-2 .content-right img{max-width:70%;}
	#main .list {width: 70%;}
}
@media only screen and (max-width:900px) {
	body.start{background-image:none;}
	#main .info .audience .grid-2, #main .info .grid-2,
	#main .bilder-item{margin: 20px 0;}
	.hire #main .grid-2 .content-right img{max-width:100%;}
	#main list{width:100%;}
}	


@media only screen and (min-width:700px) {
	h1 {margin:1em 0 0.5em 0;}
	.footer-grid{display:grid;grid-template-columns: 23.5% 23.5% 23.5% 23.5%;grid-column-gap: 2%;}
	.slider .grid-2{display: grid;grid-template-columns: 70% 20%;}
	.sub{display:inline-block;width:100%;text-align:right;}
	.hamburger-box{display:none;}
	.hamburger{padding:0;margin:0;}
	#main .stellenin-grid{display:grid;grid-template-columns:21.25% 21.25% 21.25% 21.25%;grid-column-gap:5%;}
	button.content-top{display: inline-block;border:none;margin: 0 1% 1% 0;padding:8px 16px;}
	.mobil-menu{max-width:1440px;margin: -1em auto 1em;}
	.mobil-menu .sub{max-width:90%;}
}

@media only screen and (max-width:700px) {
	h1 {margin:0em 0 1em 0;}
	a.job-tipp{line-heigt:3em:}
	.footer-grid{padding: 70px 0;display:grid;grid-template-columns: 48% 48%;margin: 0 40px;grid-column-gap: 40px;}
	.mobil-menu nav{max-height: 0;overflow: hidden;transition: 0.8s ease-out;}
	.mobil-menu nav.is-active{display:inline-block; margin:auto;transition-duration:0.5s;max-height:13em;}
	.mobil-menu nav ul{margin: 0;padding: 5%;display: block;background: #fff;width: 100%;position: relative;text-align:center;z-index: 9;}
	nav.sub ul li{width:100%;}
	nav.sub ul li a{padding:0;}
	button.content-top{display: none;}
	.blog .main{padding: 0;}
}
@media only screen and (min-width:550px) {
	#main .main{width: 90%;}
	#main .info .more-info{width: 90%;}
	.bloginfo .more-info{width:90%;}
	#main .bloginfo{/*width:90%;*/width:100%;}
	.start .slider{width:90%;}
	.newsletter{width:90%;}
	.blog #main{width:90%;padding:0;margin:0 auto;}
	.info .more-info{width:90%;}
	.footer-grid-outer{width:90%;}
	.vis-form #main article{width:90%;}
	#main .bloginfo .more-info h2.title{margin: 0 40px;}
.more-info .newsflash, .more-info .custom{margin: 0 40px;}
.slider .grid-2{margin: 0 40px;}
.banner .top-grid-item{margin: 0 40px;}
#main article{padding:0 40px 40px;}

/*#main .autor{width:50%;}*/
.blog #main article td p{font-size: 1.1rem;}
nav ul li a{font-size: 1rem;}
.leistungen-all .grid-4-item{padding:40px;}
	.leistungen-all h3{font-size:1.3em;}
	.leistungen-all button.cta{font-size:1em;}

}

@media only screen and (max-width:550px) {
	
	header .banner .grid-2{display:grid;grid-template-columns:100%;margin:0 24px;}
	.grid-2 .desk {grid-area: 1/1;}
	header .banner{width:100%; max-width: 1440px;top:0;margin:auto;background:#ffffff;padding:0;}
	.desk nav ul{padding:0 0 13px 0;text-align:center;}
	.logo{text-align:center;widht:50%; text-align:left;}
	.banner .top-grid-item {  margin: -5em 40px 0 0;  position: absolute;  width: 40%;  right: 24px;  text-align: right;}
	.vis-form #main{width:90%;}
	.leistungen-all .grid-4{display:grid; grid-template-columns:100%;grid-column-gap:4%;grid-row-gap:40px;}
	#main .autor{width:80%;}
	.blog #main article td p{font-size: 1rem;}
	nav ul li a{font-size: 0.9rem;}
	.leistungen-all .grid-4{display:grid; grid-template-columns:100%;grid-column-gap:4%;grid-row-gap:1%;margin: 0 0 17em 0;}
}




.dot {display: inline-block;width: 10px;height: 10px;border-radius: 50%;background-color: red;margin:1px 4px 0 0;}
.gallery {display: flex;flex-wrap: wrap;justify-content: space-between;}
.gallery img {max-width: 100%;height: auto;margin-bottom: 20px;}
.category {cursor: pointer;margin-right: 20px;font-weight: bold;}
.category.active {color: red;}
.image {display: none;}
.image.active {display: block;}
.transition {transition: opacity 0.3s ease-in-out;}