@import url(https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic);
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic);
@import url(https://fonts.googleapis.com/css?family=Open+Sans);

a{text-decoration:none;color:#000;}
/* h1,h2,h3,h4,h5,h6,a,p,html,body,div,table,ul,li{margin:0;padding:0;} */
h1{margin-bottom:20px;font-size:32px;line-height:32px;}
li{list-style:none;}
html,body{height:100%;background-color:#fff;scroll-behavior:smooth;}
/* body,th,td{font-size:14px;line-height:18px;} */

p{margin-bottom:18px;}

.clear:after{content:'';clear:both;display:block;visibility:hidden;height:0px;}
.wrapper{max-width:1200px;margin:0 auto;position:relative;}
.half{float:left;width:50%;box-sizing:border-box;}
.left{padding-right:2.5%;}
.right{padding-left:2.5%;}
.hidden{display:none;}
.responsive{display:none;}
.clear{clear:both;}
.section-title h2{color:#2e2e2e; font-family:Lato; font-weight:900; text-align:center; font-size:42px;}
.section-title h3{color:#2e2e2e; font-family:Lato; font-weight:700; text-align:center; font-size:18px; margin:5px 0 0 0;}
.section-style{height:10px; background-image:url("../img/section-style.png"); background-position:top center; background-repeat:no-repeat; margin:-3px 0 0 0;}
.section-title-margin{margin:70px 0 0 0;}

header{position:fixed;background-color:rgba(255,255,255,0.6);top:0;width:100%;z-index:10;transition:0.5s;}
header .wrapper{max-width:1300px;padding:10px 0;position:relative;transition:.5s;}
header nav.desktop{position:absolute;transform:translateY(-50%);right:0;top:50%;display: flex;align-items: center;}
header nav a{display:block;padding:5px 15px;font-weight:600;transition:.5s;border-bottom:1px solid transparent;}
header nav.desktop a:not(.button):hover{color:#5052A2;border-bottom:1px solid #5052A2;}
header nav.desktop a:not(.button).active{color:#5052A2;border-bottom:1px solid #5052A2;}
header #logo h1{display:inline-block;color:#5052A2;line-height:90px;vertical-align:top;font-size:32px;padding-left:20px;transition:0.5s;margin:0;}
header #logo img{max-width:90px;transition:.5s;}
header nav.desktop .extra-nav{display: inline-block;}
header.scrolled{background-color:#fff;}
header.scrolled #logo h1{line-height:60px;font-size:24px;}
header.scrolled #logo img{max-width:60px;}
header.scrolled .wrapper{padding:5px 0;}
header .phone-link{text-align: right;margin: 0 15px 0 25px;font-weight: bold;}
header .phone-link i{margin-right: 5px;}
header .phone-link .first-part{font-size:12px;}
header .phone-link .sec-part{font-size: 16px;}
header .button {cursor:pointer;font-size:15px;text-transform:uppercase;color:#fff;background-color:#5052A2;font-weight:600;padding:0 10px;line-height:2.5;transition:.5s;border:none;}
header .button:hover{background-color:#FC760D;color:#010101;}
section{padding:150px 0;position:relative;}

#start{position:relative;height:auto;min-height:100vh;overflow:hidden;padding:0;}
#start > img{width:100%;height:100%;object-fit:cover;position:absolute;top:0;left:0;}
#kontakt{min-height:700px;}
#kontakt h1 {margin-top: 0;}
#kontakt #kontakt-content{max-width:50%;padding:25px 25px;position:absolute;right:0;background-color:#fff;box-sizing: content-box;}
#kontakt #kontakt-content h4{margin-bottom:15px;margin-top:30px;}
#kontakt #kontakt-content table{border-collapse:collapse;}
#kontakt #kontakt-content table td{padding-right:5px;}
#kontakt #map{position:absolute;height:100%;top:0;left:0;width:100%;}
#kontakt .route{margin-top:10px;margin-bottom:10px;font-size:12px;font-weight:600;text-transform:uppercase;line-height:28px;display:inline-block;padding:0 10px;background-color:#FC760D;transition:.5s;}
#kontakt .route:hover{background-color:#5052A2;color:#fff;}
#kontakt .route i{padding-right:5px;line-height:0px;position:relative;top:2px;font-size:15px}
#kontakt form input{width:100%;padding:5px;margin-bottom:10px;}
#kontakt form textarea{width:100%;padding:5px;resize:vertical;}
#kontakt form button{margin-top:15px;cursor:pointer;float:right;font-size:12px;text-transform:uppercase;font-weight:600;background-color:#FC760D;padding:0 10px;line-height:28px;transition:.5s;border:none;}
#kontakt form button:hover{background-color:#5052A2;color:#fff;}
#kontakt td a{color:#333;}

/* #leistungen{height: 100%;} */
#leistungen{background-color: #f1f1f1;}
/* #gallerie{background-color: #f1f1f1;} */
#gallerie a {display: block;width: 100%; border-radius: 8px;background-size: cover; background-position: center; margin-bottom: 20px;margin-top: 15px; padding-bottom: 75%; position: relative;}
#gallerie .col-sm-3 { padding: 0 10px; }
#cta-overlay {position:absolute; top:85%; left:50%; transform:translate(-50%,-50%); background:rgba(255,255,255,0.85); padding:25px 40px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.3); text-align:center; max-width:600px; width:90%; box-sizing:border-box;}

.our-service{margin:30px 0 0 0; text-align:center;}
.services-content{margin:50px 0 0 0;}
.service-icon{height:170px; width:170px; margin:0 auto; border-radius:50%; -webkit-border-radius:50%; border:3px solid #2e2e2e;}
.services-hover-effect:hover> .service-icon{border:3px solid #e78c2e;  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 5px #e78c2e; box-shadow: inset 0 1px 1px rgba(0,0,0,0), 0 0 5px #e78c2e;}
.web-design-icon{background-image:url("../img/web-design-icon.png"); background-position:center; background-repeat:no-repeat;}
.mobile-icon{background-image:url("../img/mobile-icon.png"); background-position:center; background-repeat:no-repeat;}
.game-icon{background-image:url("../img/game-icon.png"); background-position:center; background-repeat:no-repeat;}
.service-text-area h2{color:#2e2e2e; font-weight:400; text-transform:uppercase; text-align:center; margin:27px 0 0 0; font-size:20px;}
.service-text-area p{color:#444444; font-weight:400; text-align:center; margin:27px 0 0 0; font-size:12px; line-height:18px;}
.service{margin-top:90px; background-color:#f3f2f2; border-bottom:8px solid #e78c2e;}
.service h2{color:#444444; font-weight:400; text-transform:uppercase; text-align:left; font-size:16px;}
.service p{color:#444444; font-weight:400; margin:15px 0 30px 0; font-size:12px; line-height:18px;}
.service-icon i{line-height: 164px; font-size: 80px;}
.service-icon:hover i{color: #e78c2e;}

.about-section-title-margin{margin:100px 0 0 0;}
.about-content{margin:80px 0 0 0;}
.about-title{color:#333333; font-weight:400; margin:15px 0 30px 0; font-size:18px; line-height:30px; text-align:center;}
.team-photo-main{margin:0 4% 0 4%;}
.team-photo-margin{margin:15px 0 0 0;}
.team-member-text h2{color:#2e2e2e; font-weight:400; text-transform:uppercase; text-align:center; font-size:18px;}
.team-member-text span{color:#6c6c6c; font-weight:700; text-transform:none; text-align:center; font-size:11px;}
.team-member-text p{color:#444444; font-family: lato; font-weight:400; text-align:center; font-size:12px; line-height:18px; margin:10px 0 0 0;}
.team-member-photo img{background-color:#dddedf;}
.text-center{text-align:center!important;}
.number-text span{color:#5052A2; font-weight:300; font-size:60px;}
.number-text h3{color:#2e2e2e; font-weight:500; font-size:16px; text-transform:uppercase;}
.counter-icon{height:65px;}.coffe-icon{margin:-13px 0 0 0;height:77px}

footer{background-color:#333;}
footer h4{text-transform:uppercase;color:#fff;margin-bottom:20px;}
footer a{color:#fff;}
footer ul{margin-bottom:15px;}
footer ul li{display:inline-block;}
footer ul li a{padding:5px 10px;}
#zertificates, #sitemap{padding:50px 0;margin:0 auto;text-align:center;}
footer #zertificates img{display:inline;max-height:100px;opacity:0.5;transition:.5s;}
footer #zertificates img:hover{opacity:1;}
footer #zertificates a:nth-of-type(1) img{margin-right:5px;}
footer #footer-impressum{padding:20px 0;background-color:#111;font-size:12px;color:#fff;text-align:center;}
footer #link-impressum{color:#FC760D;}

#impressum{background-color:#111;color:#fff;display:none;}
#impressum:target{display:block;}
#impressum a{color:#fff;}
#impressum h2{margin-bottom:10px;}
#impressum h1:nth-of-type(2){margin-top:40px;}

/* Lightbox */
#lightbox-overlay { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.9); z-index:9999; justify-content:center; align-items:center; cursor:pointer; }
#lightbox-overlay.active { display:flex; }
#lightbox-overlay img { max-width:90%; max-height:90vh; object-fit:contain; border-radius:4px; box-shadow:0 0 30px rgba(0,0,0,0.5); cursor:default; }
#lightbox-close { position:absolute; top:20px; right:30px; font-size:40px; color:#fff; cursor:pointer; z-index:10000; line-height:1; transition:.3s; }
#lightbox-close:hover { color:#FC760D; }
#lightbox-prev, #lightbox-next { position:absolute; top:50%; transform:translateY(-50%); font-size:50px; color:#fff; cursor:pointer; z-index:10000; user-select:none; padding:10px 18px; transition:.3s; }
#lightbox-prev:hover, #lightbox-next:hover { color:#FC760D; }
#lightbox-prev { left:15px; }
#lightbox-next { right:15px; }
@media only screen and (max-width:500px) {
	#lightbox-prev, #lightbox-next { font-size:32px; padding:8px 12px; }
	#lightbox-close { font-size:30px; top:12px; right:18px; }
}


.pricing-box { padding: 30px 20px; margin-bottom: 30px; border: 1px solid #ddd; border-radius: 8px; transition: 0.3s; background: #fff; }
.pricing-box:hover { transform: translateY(-5px); box-shadow: 0 5px 15px rgba(0,0,0,0.15); }
.pricing-box .price { font-size: 24px; margin: 20px 0; }
#kontakt {
      position: relative;
      height: 700px;
  }
  #map {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 1;
      /* filter: grayscale(80%) contrast(90%); /* Graue Karte ähnlich wie Google Maps */
  }
  #kontakt-content {
      position: absolute;
      right: 0;
      top: 0;
      background: rgba(255,255,255,0.95);
      padding: 25px;
      z-index: 2;
      max-width: 50%;
      box-sizing: border-box;
  }
/* =============================================
   RESPONSIVE STYLES
   ============================================= */

/* --- Global responsive helpers --- */
*, *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; }

/* --- Tablet landscape & smaller desktops (<=1200px) --- */
@media only screen and (max-width: 1200px) {
	header { transition: 0s; }
	header .wrapper { padding: 5px 15px; box-sizing: border-box; }
	header #logo h1 { line-height: 60px; font-size: 24px; }
	header #logo img { max-width: 60px; padding-left: 15px; }
	header nav.desktop a { padding: 5px 8px; font-size: 14px; }
	header .phone-link { margin: 0 8px 0 12px; }

	section { padding: 80px 20px; }
	.wrapper { padding: 0 15px; }

	#kontakt #kontakt-content { max-width: 55%; }

	#leistungen { text-align: center; }
	#leistungen .col-sm-3 { width: 50%; float: left; }
}

/* --- Tablet portrait & smaller (<=1000px) --- */
@media only screen and (max-width: 1000px) {
	section { padding: 50px 15px; }

	/* Header / Navigation */
	header .wrapper { padding: 5px 15px; }
	header #logo h1 { line-height: 60px; font-size: 22px; }
	header #logo img { max-width: 55px; padding-left: 15px; }
	nav.desktop { display: none !important; }
	nav.responsive { display: block; text-align: center; }
	nav #burger { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); cursor: pointer; z-index: 20; }
	nav #burger span { display: block; width: 30px; height: 4px; background-color: #5052A2; margin-bottom: 5px; border-radius: 15px; transition: .3s; }
	nav #burger span:last-of-type { margin-bottom: 0; }
	nav.responsive ul { display: none; position: absolute; width: 100%; top: 100%; left: 0; background: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 15; padding: 0; margin: 0; }
	nav.responsive ul li { display: block; }
	nav.responsive ul li a { display: block; color: #5052A2; border-top: 1px solid #eee; background-color: #fff; padding: 12px 0; font-weight: 600; }
	nav.responsive ul li:last-of-type a { color: #DF3918; }
	nav.responsive ul li a:hover { background-color: #f5f5f5; }

	/* Start / Hero */
	#start { margin-top: 70px; height: auto; min-height: auto; }
	#start > img { position: relative; width: 100%; height: auto; min-height: 250px; object-fit: cover; }

	/* CTA below image */
	#cta-overlay { position: relative; top: auto; left: auto; transform: none; width: 100%; max-width: 100%; border-radius: 0; box-shadow: none; background: #f1f1f1; padding: 30px 20px; margin: 0; }
	#cta-overlay h2 { font-size: 22px; }
	#cta-overlay .btn { display: block; margin: 8px auto !important; max-width: 280px; }

	/* Services */
	#leistungen { text-align: center; }
	#leistungen .col-sm-3 { width: 50%; float: left; }
	.service-icon { width: 130px; height: 130px; }
	.service-icon i { line-height: 124px; font-size: 60px; }

	/* Gallery */
	#gallerie .col-sm-3 { width: 33.333%; float: left; }
	#gallerie a { padding-bottom: 70%; margin-bottom: 15px; margin-top: 10px; }

	/* Kontakt */
	#kontakt { height: auto; min-height: auto; background-color: #fff; padding: 0; }
	#kontakt #map { position: relative; height: 350px; width: 100%; }
	#kontakt #kontakt-content { max-width: 100%; position: relative; background: #fff; padding: 30px 20px; }
	#kontakt .half { width: 100%; float: none; }
	#kontakt .left { padding: 0; margin-bottom: 25px; }
	#kontakt .right { padding: 0; }
	#kontakt h1 { text-align: center; }

	/* Footer */
	footer ul li { display: inline-block; }
	#zertificates img { max-height: 90px !important; }
}

/* --- Large phones / small tablets (<=768px) --- */
@media only screen and (max-width: 768px) {
	section { padding: 40px 15px; }

	header #logo h1 { font-size: 20px; line-height: 50px; padding-left: 10px; }
	header #logo img { max-width: 50px; }

	/* Half columns stack */
	.half { width: 100%; float: none; }
	.left { padding-right: 0; }
	.right { padding-left: 0; }

	/* Services full width */
	#leistungen .col-sm-3 { width: 100%; float: none; }
	.service-icon { width: 120px; height: 120px; }
	.service-icon i { line-height: 114px; font-size: 55px; }
	.services-content { margin: 20px 0 0 0; }

	/* Gallery 2 columns */
	#gallerie .col-sm-3 { width: 50%; float: left; }
	#gallerie a { padding-bottom: 65%; margin-bottom: 12px; margin-top: 8px; }

	/* Start */
	#start > img { min-height: 200px; }

	/* CTA */
	#cta-overlay { padding: 25px 15px; }
	#cta-overlay h2 { font-size: 20px; }
	#cta-overlay p { font-size: 13px; }

	/* Kontakt */
	#kontakt #map { height: 280px; }

	/* Pricing */
	.pricing-box { margin-bottom: 20px; }

	/* Footer stacking */
	footer ul { padding-left: 0;}
	footer ul li { display: block; margin-bottom: 5px; }
	footer ul li a { padding: 5px 0; }
}

/* --- Mobile phones (<=500px) --- */
@media only screen and (max-width: 500px) {
	section { padding: 30px 12px; }

	header #logo h1 { font-size: 16px !important; padding-left: 5px; line-height: 45px; }
	header #logo img { max-width: 45px; padding-left: 10px; }
	header.scrolled #logo h1 { font-size: 16px; line-height: 45px; }
	header.scrolled #logo img { max-width: 45px; }
	nav #burger { right: 15px; }
	nav #burger span { width: 26px; height: 3px; margin-bottom: 4px; }

	/* Start / Hero */
	#start { margin-top: 60px; }
	#start > img { min-height: 180px; }

	/* CTA */
	#cta-overlay { padding: 20px 12px; }
	#cta-overlay h2 { font-size: 17px; }
	#cta-overlay .btn { font-size: 13px; padding: 8px 12px; }

	/* Services */
	#leistungen .col-sm-3 { width: 100%; float: none; }
	.service-icon { width: 100px; height: 100px; }
	.service-icon i { line-height: 94px; font-size: 45px; }
	.service-text-area h2 { font-size: 16px; margin: 15px 0 0 0; }
	.our-service { margin: 20px 0 0 0; }

	/* Gallery full width */
	#gallerie .col-sm-3 { width: 100%; float: none; max-width: 400px; margin: 0 auto; }
	#gallerie a { padding-bottom: 55%; margin-bottom: 12px; margin-top: 8px; border-radius: 8px; }
	#gallerie .row { text-align: center; }

	/* Kontakt */
	#kontakt #map { height: 220px; }
	#kontakt #kontakt-content { padding: 20px 12px; }
	#kontakt form input, #kontakt form textarea { font-size: 16px; }

	/* Footer */
	#zertificates img { max-height: 70px !important; }
	footer #footer-impressum { font-size: 11px; padding: 15px 10px; }
	footer #footer-impressum p { word-wrap: break-word; }

	/* Sections general */
	h1 { font-size: 24px; }
	h2 { font-size: 20px; }
	h4 { font-size: 16px; }
}

/* --- Very small phones (<=380px) --- */
@media only screen and (max-width: 380px) {
	header #logo h1 { font-size: 14px !important; }

	#cta-overlay { padding: 12px 10px; }
	#cta-overlay h2 { font-size: 15px; }
	#cta-overlay .btn { font-size: 12px; padding: 7px 10px; }

	#kontakt #map { height: 180px; }
	#kontakt #kontakt-content { padding: 15px 10px; }
}