/*
  crema WAG! Agentur für neue Medien, Schwetzingen
  http://www.crema.da
  Copyright (c) 2025 crema WAG!

  Farbwerte
  dunkelgrün: #003234
  hellgrün: #aad8da
  pink: #C1007A
*/

html{hyphens:auto;scroll-behavior:smooth;}
body{margin:0;font-family:'Ubuntu',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-weight:400;line-height:1.6;color:#212529;background-color:#fff;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;hyphens:auto;}

/* FONTS */
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:300;src:url('../fonts/ubuntu-v11-latin-300.eot');src:local('Ubuntu Light'),local('Ubuntu-Light'),url('../fonts/ubuntu-v11-latin-300.eot?#iefix') format('embedded-opentype'),url('../fonts/ubuntu-v11-latin-300.woff2') format('woff2'),url('../fonts/ubuntu-v11-latin-300.woff') format('woff'),url('../fonts/ubuntu-v11-latin-300.ttf') format('truetype'),url('../fonts/ubuntu-v11-latin-300.svg#Ubuntu') format('svg');}
@font-face{font-family:'Ubuntu';font-style:normal;font-weight:400;src:url('../fonts/ubuntu-v11-latin-regular.eot');src:local('Ubuntu Regular'),local('Ubuntu-Regular'),url('../fonts/ubuntu-v11-latin-regular.eot?#iefix') format('embedded-opentype'),url('../fonts/ubuntu-v11-latin-regular.woff2') format('woff2'),url('../fonts/ubuntu-v11-latin-regular.woff') format('woff'),url('../fonts/ubuntu-v11-latin-regular.ttf') format('truetype'),url('../fonts/ubuntu-v11-latin-regular.svg#Ubuntu') format('svg');}
@font-face{font-display:swap;font-family:'Merriweather';font-style:normal;font-weight:400;src:url('../fonts/merriweather-v33-latin-regular.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'Merriweather';font-style:normal;font-weight:500;src:url('../fonts/merriweather-v33-latin-500.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'Merriweather';font-style:normal;font-weight:600;src:url('../fonts/merriweather-v33-latin-600.woff2') format('woff2');}
@font-face{font-display:swap;font-family:'Merriweather';font-style:normal;font-weight:700;src:url('../fonts/merriweather-v33-latin-700.woff2') format('woff2');}

/* MENÜ */
#mainNav{position:fixed;top:0;left:0;width:100%;z-index:999;transition:transform .4s ease,background .3s ease;padding:10px 0;background:#044e51;border-bottom:1px solid white;}
#mainNav.scrolled{background:#044e51;padding:15px 0;box-shadow:0 5px 20px rgba(0,0,0,.1); border-bottom:1px solid white;}
#mainNav.hide{transform:translateY(-100%);}
.nav-inner{width:90%;max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-between;}
.logo{color:#fff;font-weight:700;font-size:20px;letter-spacing:1px;}
.nav-link {color:#FFFFFF;margin-right:30px;}
a.nav-link:hover {color:#C1007A; text-decoration:none;}
.nav-links{display:flex;gap:30px;}
.nav-links a{color:#fff;text-decoration:none;font-weight:500;transition:.3s;}
.nav-links a:hover{opacity:.7;}
.navbar-toggler{border:2px solid #ffffff;background:#aad8da;padding:6px 10px;}
.navbar-toggler:focus{box-shadow:none;}
.navbar-toggler-icon{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");}

/* TEXTE */
a{color:#003234;}
a:hover{color:#C1007A;text-decoration:underline;}
p,li{font-size:18px;line-height:1.5;hyphens:auto;overflow-wrap:break-word;word-wrap:break-word;}
h1,h2{font-family:'Merriweather',serif;font-size:50px;color:#003234;padding:60px 0 40px 0;font-weight:500;letter-spacing:.3px;}
h3{font-size:24px;color:#003234;margin:0 0 10px 0;font-weight:normal;text-transform:uppercase;}
h4{font-size:24px;color:#003234;margin:25px 0 10px 0;font-weight:normal;text-transform:uppercase;}
.txt-weiss{color:#fff;}
.txt-footer{font-size:14px;}
.txt-bold {font-weight:bold;}
.txt-impressum {vertical-align:top;font-weight:bold;}
.art-txt-weiss{font-size:16px;color:#fff;line-height:1.0;}
.art-txtblock-weiss{font-size:16px;color:#fff;line-height:1.3;display:inline-block;}
.art-txt-hinweise{font-size:14px;opacity:.8;line-height:1;display:inline-block;}
.art-txt p{font-size:16px;line-height:1.0;}
.art-preis{font-size:28px;font-weight:600;margin:10px 0;}

/* SLIDER */
#heroSlider .carousel-item{height:80vh;min-height:500px;position:relative;overflow:hidden;border-bottom:3px solid #C1007A;}
#heroSlider img{height:100%;object-fit:cover;}
.slider-overlay{position:absolute;left:0;bottom:0;width:100%;height:30%;background:rgba(255,255,255,.9);display:flex;align-items:center;transform:translateX(-100%);}
.slider-content{width:33.3333%;margin-left:50%;padding:40px 60px;text-align:left;}
.h2-slider{font-family:'Merriweather',serif;font-size:50px;color:#C1007A;margin:0 0 20px 0;padding:0;font-weight:500;letter-spacing:.3px;text-shadow:3px 3px 3px rgba(0,0,0,.40);}
#heroSlider .carousel-item.active .slider-overlay{animation:overlaySlide 1s cubic-bezier(.22,.61,.36,1) forwards;}
@keyframes overlaySlide{0%{transform:translateX(-100%);}100%{transform:translateX(0);}}
.carousel-fade .carousel-item{transition:opacity 1.2s ease;}

/* LAYOUT */
.domain-verfuegbar{background-color:#E6EDED;}
.domain-belegt{background-color:#fee1f3;}
.domain-fehler{background-color:#eeeeee;}
.hr{margin:50px 0 70px 0;}
.spacer-top{margin-top:150px;}
.spacer-impressum {padding-bottom:10px;}

/* SEKTOREN */
.sector1-einleitung .row{align-items:center;padding:100px 0;}
.sector1-einleitung img,.img-sector1{max-height:520px;width:auto;}
.sector2-leistung{background:#f7f7f7;position:relative;}
.sector2-leistung p{font-size:1.1rem;line-height:1.7;color:#333;}
.img-person-float{float:right;max-width:260px;margin:0 0 20px 40px;border-radius:6px;}

/* HG-FOND-GRÜNMUSTER */
.sector2-keil-wrap{background:linear-gradient(to bottom,#f7f7f7 0,#f7f7f7 260px,#fff 260px,#fff 100%);}
.sector2-keil{--keil-top:5%;--keil-bottom:95%;position:relative;color:#000;padding:120px 0;background:url("../images/bg-hg-gruenverlauf01.jpg") center/cover no-repeat;clip-path:polygon(0 var(--keil-top),100% 0,100% var(--keil-bottom),0 100%);overflow:hidden;}
.sector2-keil::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.35);pointer-events:none;z-index:1;}
.sector2-keil::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;background:linear-gradient(to bottom left,#003234 0,#003234 1px,transparent 1px),linear-gradient(to top right,#003234 0,#003234 1px,transparent 1px);}
.sector2-keil>*{position:relative;z-index:3;}

/* LEISTUNGEN TILES */
.leistung-tile{position:relative;aspect-ratio:1/1;display:flex;align-items:flex-start;overflow:hidden;border-radius:8px;color:#fff;transition:.4s ease;cursor:pointer;}
.leistung-tile::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.8);z-index:1;transition:.4s ease;}
.leistung-tile .tile-content{position:relative;z-index:2;padding:30px;text-align:left;transition:.4s ease;}
.leistung-tile h3{font-size:1.6rem;margin-bottom:12px;}
.leistung-tile p{font-size:1rem;line-height:1.6;color:#eee;}
.leistung-tile:hover{transform:translateY(-8px);}
.leistung-tile:hover::before{background:rgba(0,0,0,0);}
.leistung-tile:hover .tile-content{opacity:0;transform:translateY(20px);}
.tile-grafik{background:url("../images/img-grafik01.jpg") center/cover no-repeat;}
.tile-layout{background:url("../images/img-layout01.jpg") center/cover no-repeat;}
.tile-print{background:url("../images/img-print01.jpg") center/cover no-repeat;}
.tile-foto{background:url("../images/img-foto01.jpg") center/cover no-repeat;}

/* HG-FOND-SATZ */
.sector5-keil{--keil-top:5%;--keil-bottom:95%;position:relative;color:#000;padding:120px 0 180px 0;background:url("../images/bg-hg-print01.jpg") center/cover no-repeat;clip-path:polygon(0 var(--keil-top),100% 0,100% var(--keil-bottom),0 100%);overflow:hidden;}
.sector5-keil::before{content:"";position:absolute;inset:0;background:rgba(255,255,255,.90);pointer-events:none;z-index:1;}
.sector5-keil>*{position:relative;z-index:2;}
.sektor5-keil-spacer{margin:0 0 150px 0;}

/* ART BOXEN */
.art-box{background:#044e51;padding:40px;text-align:center;height:100%;border:#FFF 2px solid;}
.art-box-aktion{background:#044e51;padding:30px 40px 40px 40px;text-align:center;height:100%;border:#C1007A 10px solid;position:relative;}
.art-hr{border-top:1px solid rgba(255,255,255,.5);}
.art-empfehlung{position:absolute;width:141px;top:-30px;left:50%;transform:translateX(-50%);background:#C1007A;color:#fff;padding:6px 20px;font-size:14px;font-weight:600;text-transform:uppercase;letter-spacing:1px;}

/* INFOTHEK */
.infothek-toggle{width:100%;background:none;border:none;padding:0x 0;display:flex;justify-content:space-between;align-items:center;font-size:20px;font-weight:600;color:#044e51;cursor:pointer; text-align:left;}
.infothek-toggle:focus{outline:none;}
.arrow{width:8px;height:8px;border-right:2px solid #044e51;border-bottom:2px solid #044e51;transform:rotate(45deg);transition:.3s ease;}
.infothek-toggle[aria-expanded="true"] .arrow{transform:rotate(-135deg);}
.infothek-content{padding:10px 0 20px 0;color:#333;}
.infothek-content a{text-decoration:none;color:#044e51;}
.infothek-content a:hover{text-decoration:underline;}

.infothek-table th:last-child,.infothek-table td:last-child{text-align:right;width:120px;}
.infothek-table th:nth-child(1),.infothek-table td:nth-child(1){width:90px;}

/* FORMULAR */
.abfragerahmen{border:2px solid #003234;border-radius:10px;background-color:#E6EDED;padding:20px;margin:30px 0;}
.form-control:focus,.form-check-input:focus{border-color:#C1007A;box-shadow:0 0 0 .25rem rgba(193,0,122,.25);}
.form-check-input:checked{background-color:#C1007A;border-color:#C1007A;}
.form-control.is-invalid,.was-validated .form-control:invalid{border-color:#C1007A;}
.form-control.is-invalid:focus,.was-validated .form-control:invalid:focus{border-color:#C1007A;box-shadow:0 0 0 .25rem rgba(193,0,122,.25);}
.form-check-input.is-invalid,.was-validated .form-check-input:invalid{border-color:#C1007A;}
.form-check-input.is-invalid:focus,.was-validated .form-check-input:invalid:focus{box-shadow:0 0 0 .25rem rgba(193,0,122,.25);}
.invalid-feedback{color:#C1007A;}

/* IMAGES */
.ref-wrapper{display:flex;justify-content:center;gap:40px;flex-wrap:wrap;}
.ref-preview{width:300px;height:auto;border-radius:6px;box-shadow:0 10px 30px rgba(0,0,0,.3);border:1px solid #000;}
.img-rahmen{border: 1px solid black;border-radius:0px;box-shadow:5px 5px 10px rgba(0,0,0,.2);transition:all .3s ease;}

/* BUTTONS */
.btn-outline-light{border:1px solid #fff;color:#fff;}
.btn-outline-light:hover{background:#C1007A;color:#fff;border-color:#C1007A;}
.btn-domainrecherche{border:1px solid #fff;color:#fff;background:#003234;}
.btn-domainrecherche:hover{background:#C1007A;color:#fff;border-color:#C1007A;}

/* FOOTER */
.footer-crema{background:#003234;color:#fff;border-top:2px solid #C1007A;padding-top:2px;margin-top:50px;}
.footer-crema a{color:#fff;text-decoration:none;font-size:14px;}
.footer-crema a:hover{text-decoration:none;}

#scrollTop{position:fixed;right:30px;bottom:30px;width:50px;height:50px;background:#044e51;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;opacity:0;visibility:hidden;transition:.3s ease;z-index:999;}
#scrollTop.show{opacity:1;visibility:visible;}
#scrollTop:hover{background:#066b70;}
#scrollTop svg{display:block;}
#scrollTop{position:fixed;right:30px;bottom:30px;width:50px;height:50px;background:#044e51;color:#ffffff;display:flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer;opacity:1;visibility:visible;z-index:99999;font-size:50px;line-height:1; padding-bottom:5px; text-decoration:none;}




/* MEDIAQUERYS */


/* XXL */
@media(max-width:1399.98px){
.slider-content{width:50%;margin-left:50%;padding:30px 40px;}

}

/* XL */
@media(max-width:1199.98px){
.slider-content{width:80%;margin-left:35%;padding:30px 40px;}
.slider-overlay{position:absolute;left:0;padding-left:0px;bottom:0;height:30%;transform:translateX(-100%);}
.leistung-tile{aspect-ratio:auto;height:420px;}
}

/* LG */
@media(max-width:991.98px){
.nav-links{position:fixed;top:0;right:-100%;height:100vh;width:280px;background:#044e51;flex-direction:column;padding:120px 40px;gap:25px;transition:.4s ease;}.nav-links.active{right:0;}.burger{display:flex;}
.navbar-collapse .nav-item{border-bottom:1px solid #aad8da;}
.navbar-collapse .nav-item:last-child{border-bottom:none;}
.navbar-collapse .nav-link{padding:12px 0;}
.slider-content {width:100%; margin:0;padding:0 0 0 15px;}
.slider-overlay{position:absolute;left:0;padding-left:45px;bottom:0;height:40%;transform:translateX(-100%);}
#heroSlider .carousel-item{height:50vh;min-height:400px;}
#heroSlider .carousel-item.active .slider-overlay{animation:overlaySlide 1s cubic-bezier(.22,.61,.36,1) forwards;}
.container{padding-left:20px;padding-right:20px;}
#heroSlider .carousel-item{border-bottom:1px solid #C1007A;}
.h2-slider{font-size:34px;color:#C1007A;margin:0 0 0 0;font-weight:500;letter-spacing:.3px;text-shadow:3px 3px 3px rgba(0,0,0,.40);}
.mq-size1 {font-size:20px;}
.mq-ausblenden {display:none;}
.spacer-top{margin-top:50px;}
h1,h2{padding:2px 0 20px 0 !important;font-size:36px;}
.sector1-einleitung .row {padding:0px;}
.first-h1 {margin:0 0 0 0;}
.mq-abstand1 {margin:0 0 30px 0;}
.sector2-keil{--keil-top:1%;--keil-bottom:99%;}
.sector5-keil{--keil-top:1%;--keil-bottom:99%;}
.sector2-keil{padding:60px 0;}
.sector5-keil{padding-top:0 !important;}
.sektor5-keil-spacer{margin:0;}
.img-rahmen{width:80%;display:block;margin-left:auto;margin-right:auto;}
.leistung-tile{aspect-ratio:auto;height:400px;}

}


/* MD */
@media(max-width:767.98px){
.slider-content {width:100%; margin:0;padding:0 0 0 15px;}
.slider-overlay{position:absolute;left:0;padding-left:0;bottom:0;height:40%;transform:translateX(-100%);}
#heroSlider .carousel-item{height:50vh;min-height:400px;border-bottom:1px solid #C1007A;}
#heroSlider .carousel-item.active .slider-overlay{animation:overlaySlide 1s cubic-bezier(.22,.61,.36,1) forwards;}
.container{padding-left:20px;padding-right:20px;}
.h2-slider{font-size:26px;color:#C1007A;margin:0;font-weight:500;letter-spacing:.3px;text-shadow:3px 3px 3px rgba(0,0,0,.40);}
.mq-size1{font-size:14px;}
.mq-ausblenden{display:none;}
.spacer-top{margin-top:50px;}
h1,h2{padding:2px 0 0 0 !important;font-size:36px;}
.sector1-einleitung .row{padding:0;}
.first-h1{margin:0 0 25px 0;}
.mq-abstand1{margin:0 0 30px 0;}
.sector2-keil{--keil-top:1%;--keil-bottom:99%;}
.sector5-keil{--keil-top:1%;--keil-bottom:99%;}
.sector2-keil{padding:60px 0;}
.sector5-keil{padding-top:0 !important;}
.sektor5-keil-spacer{margin:0;}
.leistung-tile{aspect-ratio:auto;height:auto;}
.img-rahmen{width:80%;display:block;margin-left:auto;margin-right:auto;}
}

/* SM */
@media(max-width:575.98px){
.slider-content {width:100%; margin:0;padding:0 0 0 15px;}
.slider-overlay{position:absolute;left:0;padding-left:0;bottom:0;height:30%;transform:translateX(-100%);}
#heroSlider .carousel-item{height:50vh;min-height:400px;border-bottom:1px solid #C1007A;}
#heroSlider .carousel-item.active .slider-overlay{animation:overlaySlide 1s cubic-bezier(.22,.61,.36,1) forwards;}
.container{padding-left:20px;padding-right:20px;}
.h2-slider{font-size:26px;color:#C1007A;margin:0;font-weight:500;letter-spacing:.3px;text-shadow:3px 3px 3px rgba(0,0,0,.40);}
.mq-size1{font-size:16px; padding-top:20px;}
.mq-ausblenden{display:none;}
.spacer-top{margin-top:50px;}
h1,h2{padding:2px 0 0 0 !important;font-size:36px;}
.sector1-einleitung .row{padding:0;}
.first-h1{margin:0 0 25px 0;}
.mq-abstand1{margin:0 0 30px 0;}
.sector2-keil{--keil-top:1%;--keil-bottom:99%;}
.sector5-keil{--keil-top:1%;--keil-bottom:99%;}
.sector2-keil{padding:60px 0;}
.sector5-keil{padding-top:0 !important;}
.sektor5-keil-spacer{margin:0;}
.leistung-tile{aspect-ratio:auto;height:auto;}
#scrollTop{right:15px;bottom:15px;width:45px;height:45px;}
}