/* CSS Document */
@charset "utf-8";
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap;}
@font-face {font-family:'Montserrat'; src:url('../fonts/Montserrat-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap;}
html body *:focus {outline:none;}
html { /* killing 300ms touch delay in IE */
-ms-touch-action: manipulation;
touch-action: manipulation;}
html {font-size:100%; scroll-behavior:smooth;}
html, body {width:100%; margin:0; padding:0; background:#fff;}
audio, video, div, iframe, img, input, textarea, table, p, ul, ol {position:relative; display:block; box-sizing:border-box;}
body, button, input, textarea, select, table {font-family:Montserrat,Arial,sans-serif; font-size:16px; line-height:30px; font-weight:400; color:#242435;}
a, a:focus, a:hover {color:inherit; text-decoration:none; outline:none;}

h1, h2, h3, h4, h5, h6 {display:block; clear:both;}
h1 {font-size:48px; line-height:56px; margin:30px 0 48px; padding:0; color:#003764;}
h2 {font-size:48px; line-height:56px; margin:30px 0 48px; padding:0;}
h3 {font-size:36px; line-height:42px; margin:30px 0; padding:0;}
h4 {font-size:24px; line-height:36px; margin:30px 0; padding:0;}
h5 {font-size:20px; line-height:32px; margin:30px 0; padding:0;}
h6 {position:relative; padding:15px 30px; margin:0 0 20px 15%; font-size:48px; line-height:60px; width:max-content; background:rgba(0,50,55,0.55); color:#fff;}
strong {font-weight:700;}

p {padding:0; margin:0 0 30px;}
ul, ol {margin-bottom:30px;}
.nomarbot {margin-bottom:0;}
li {margin-bottom:10px;}
ul, ol, li {text-align:left;}
table {width:100%; padding:0; margin:0 0 26px; border-collapse:collapse; text-align:left;}
td {vertical-align:top; padding:0 20px 10px 0; text-align:left;}
td.tag {width:30px;}

.nowa {background:#003764; color:#fff;}
.nowa a, .nowa h2, .nowa h3, .nowa h4 {color:#fff;}
.gold {background:#fdcf7a; color:#003764;}
.light {background:#f6f6f6; color:#003764;}

.bigger {font-size:140%;}
.minitext {font-size:65%;}
.beitragspreis {color:#008f00; font-size:140%; font-weight:700; margin-bottom:60px; border-bottom:2px solid #008f00;}

.topnavi {margin:0; padding:0; background:#003764; color:#fff; height:44px;}
.toptel, .topmail {width:30px; height:30px; margin:6px 10px -8px 3%; display:inline-block;}
.toptel {background:url(../images/icons/phone.svg) top left no-repeat;}
.topmail {background:url(../images/icons/mail.svg) top left no-repeat;}
.social {width:30px; height:30px; display:inline-block; padding:0; margin:22px 30px 0 0;}

.navi {margin:0; padding:0; background:#fff; height:190px;}
.mainnavi {position:absolute; top:126px; right:20px; margin:0; padding:0; z-index:900 !important;}
.mainnavi li {position:relative; margin:0 20px; padding:0; list-style:none; vertical-align:top; display:inline-block;}
.mainnavi li a {padding:4px 10px 8px; margin:0; height:30px; font-size:18px; line-height:30px; font-weight:600; color:#003764;
display:block; box-sizing:border-box; cursor:pointer;}
.mainnavi li a .indexdis {display:none;}
.mainnavi li a::after {content:""; display:block; padding-top:0px; margin:0 auto; width:35%; border-bottom:3px solid #fdcf7a; transition:.3s;}
.mainnavi li a:hover::after {width:100%;}

input[type="checkbox"].opennavi:checked ~ .mainnavi {transform:translateX(0);}
input[type=checkbox].opennavi {transition:all 0.3s; box-sizing:border-box; display:none;}
.sidebarIconToggle {position:absolute; top:15px; right:3%; width:22px; height:22px; box-sizing:border-box; z-index:99; cursor:pointer; display:none;
transition:all 0.3s; z-index:999;}
.spinner {position:absolute; width:100%; height:3px; background:#fff; box-sizing:border-box; transition:all 0.3s;}
.horizontal {position:relative; float:left; margin-top:3px; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-1 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s;}
.diagonal.part-2 {position:relative; float:left; box-sizing:border-box; transition:all 0.3s; margin-top:3px;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .horizontal {box-sizing:border-box; transition:all 0.3s; opacity:0;}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-1 {box-sizing:border-box; transition: all 0.3s; margin-top:8px; transform: rotate(135deg);}
input[type=checkbox].opennavi:checked ~ .sidebarIconToggle > .diagonal.part-2 {box-sizing:border-box; transition:all 0.3s; margin-top:-9px; transform: rotate(-135deg);}

.header {padding:0; margin:0; color:#fff; font-weight:600; background-size:100%; background-position:center center; background-repeat:no-repeat;}
.banner {width:100%; height:auto; padding:0; margin:0; clear:both; }

.lager-haftpflichtversicherung {background-image:url(../images/Lager-Haftpflichtversicherung_mini.jpg);}
.warentransport-haftpflichtversicherung {background-image:url(../images/Warentransport-Haftpflichtversicherung_mini.jpg);}
.spezialgut {background-image:url(../images/Spezialgut_mini.jpg);}
.verkehrshaftungsversicherung {background-image:url(../images/Verkehrshaftungsversicherung_mini.jpg);}
.frachtfuehrerversicherung {background-image:url(../images/Frachtfuehrerversicherung_mini.jpg);}
.lager-und-speditionsversicherung {background-image:url(../images/Lager-und-Speditionsversicherung_mini.jpg);}
.lager-und-spedition {background-image:url(../images/Lager-und-Spedition_mini.jpg);}
.warentransportversicherung {background-image:url(../images/Warentransportversicherung_mini.jpg);}
.warentransport {background-image:url(../images/Warentransport_mini.jpg);}
.faq {background-image:url(../images/FAQ-zu-Transportversicherung_mini.jpg);}
.versicherungsbeitragsberechnung {background-image:url(../images/Versicherungsbeitragsberechnung_mini.jpg);}
.kontakt {background-image:url(../images/Kontakt_mini.jpg);}
.impressum {background-image:url(../images/Impressum_mini.jpg);}
.datenschutz {background-image:url(../images/Datenschutz_mini.jpg);}

.textbanner {width:80%; max-width:1400px; padding:100px 0; margin:120px auto 220px; overflow:visible; background:url(../images/x.jpg) fixed 50% / cover !important;}
.sinncontent {width:80%; max-width:800px; margin:100px auto -200px !important; padding:50px 8%; background:#003764; color:#fff;}
.sinncontent h2, .sinncontent h3, .sinncontent h4 {color:#fff;}

.starli {padding:30px 0; margin:0; text-align:center; box-sizing:border-box; font-weight:600;}
.starli li {display:inline-block; width:30%; margin:20px 0.5%; padding:110px 20px 40px; border:1px solid #f8f8f8; border-radius:5px; list-style:none; text-align:center;
background-image:url(../images/icons/goldschild.svg); background-repeat:no-repeat; background-position:center 30px; background-size:60px; box-sizing:border-box;
box-shadow:2px 2px 10px rgba(0,0,0,0.05);}

img {max-width:100%;}
.logo {width:94%; max-width:240px; padding:0; margin:22px 3% 0; display:inline; box-sizing:border-box;}
.kunden {width:98%; max-width:1400px; padding:80px 0; margin:0 auto; text-align:center;}
.kunden img {width:340px; margin:0 auto; padding:20px; display:inline-block;}

.star5 {width:40px; max-width:40px; display:inline-block;}

.gallery {width:100%; padding:2px 0; margin:0 auto; text-align:center; line-height:0;}
.gallery img {width:33.33%; margin:0; padding:2px; display:inline-block;}

.versicherungspaket {width:32%; margin:0 0.5% 5px; padding:20px 20px 10px; display:inline-block; text-align:center;
background:rgba(255,255,255,0.8); border-radius:8px; box-shadow:rgba(0,0,0,0.1) 0px 5px 10px; }
.versicherungspaket img {width:100%; margin:0 auto 20px; border-radius:6px}
.versicherungspaket:hover {background:rgba(255,255,255,0.9); cursor:pointer; box-shadow:rgba(0,0,0,0.2) 0px 5px 15px;}

.content {width:92%; max-width:1000px; padding:100px 0; margin:0 auto;}
.bigcontent {width:92%; padding:100px 0; margin:0 auto;}
.center {text-align:center;}
.clear {clear:both;}
.gaclear {clear:both; margin-bottom:-40px;}

.drittel {width:30%; margin:0 5% 0 0; float:left;}
.doppel {width:65%; margin:0 5% 0 0; float:left;}
.halb {width:48%; margin:0 4% 0 0; float:left;}
.last {margin-right:0;}
.left {margin-left:0 !important;}
.right {text-align:right;}

.fall {position:relative; width:24.8%; height:400px; padding:30px; margin:0; display:block; float:left;
border-right:1px solid #eee; border-bottom:1px solid #eee; text-align:center;}
.noborderright {border-right:none;}
.noborderbottom {border-bottom:none;}
.fall h4 {font-size:24px; line-height:32px; margin:20px auto; text-align:center;}
.fall img {width:80%; max-width:60px; margin:20px auto; text-align:center;}

.weiter {display:block; padding:0 0 0 12px; border-left:6px solid #003764; color:#003764; font-size:16px; font-weight:400;
-webkit-transition: border-width 0.2s ease-in-out;
-moz-transition: border-width 0.2s ease-in-out;
transition: border-width 0.2s ease-in-out;
}
.weiter:hover {border-left:30px solid #003764;}

.footer {width:100%; clear:both; background:#00274a;}
.footer, .footer h2, .footer h3 {color:#fff;}
.copyright {font-size:14px; color:#268;}
.footer a, .footer a:link, .footer a:visited {color:#inherit; text-decoration:none;}

.futterblock1 {width:40%; display:block; float:left;}
.futterblock2 {width:60%; display:block; float:left;}

hr {display:block; height:1px; border:0 none; background:#268; padding:0; margin:40px 0;}

.danke {position:absolute; top:0; left:0; width:100%; height:auto; padding:30px 5% 20px; margin:0 auto; text-align:center; 
background:#003764; color:#fff; z-index:9001; display:none;}
.danke h2 {color:#fff;}

.cook {position:fixed; top:0; left:0; width:100%; height:auto; padding:30px 2% 20px; margin:0 auto;
background:rgba(0,0,0,0.9); font-size:20px; line-height:30px; color:#fff; text-align:center; z-index:1000; display:none;}

iframe {width:100%; height:640px; padding:0; margin:0; clear:both;}

form {margin:30px 0 0;}
textarea, input.zeile, select {width:100%; padding:10px 15px 8px; margin:0 auto 30px; border-radius:5px; background:rgba(255,255,255,0.7);
border-top:1px solid #dfe8e8; border-left:1px solid #dfe8e8; border-bottom:1px solid #fff; border-right:1px solid #fff;}
textarea {height:auto; min-height:200px; resize:vertical;}
select {line-height:30px; padding:16px 11px 14px;}
.zeile:focus::-webkit-input-placeholder {color:transparent;}
.zeile:focus::-moz-placeholder {color:transparent;}
.zeile:-moz-placeholder {color:transparent;}
textarea:focus::-webkit-input-placeholder {color:transparent;}
textarea:focus::-moz-placeholder {color:transparent;}
textarea:-moz-placeholder {color:transparent;}
input.honey {visibility:hidden; display:none;}

input.checky {display:none;}
input.checky + label span {position:relative; display:inline-block; margin:-2px 10px 0 0; vertical-align:middle; cursor:pointer;
width:25px; height:25px; background:#fff; border:1px solid #ddd; border-radius:5px;}
input.checky:checked + label {position:relative; cursor:pointer;}
input.checky:checked + label span {box-shadow:inset 0px 0px 0px 2px #fff;}
input.checky:checked + label span::after {position:absolute; left:0; top:-2px; opacity:1; 
content:"✔"; color:#003764; font-size:30px; line-height:30px; font-weight:700; text-align:center;}

input.button, a.button {width:max-content; height:auto; display:block; padding:12px 24px 12px; margin:40px auto 20px; 
font-size:18px; line-height:30px; font-weight:700; text-decoration:none; text-align:center; color:#003764; cursor:pointer; 
background:#fdcf7a; background-image:linear-gradient(0deg,#9d7f2a,#fdcf7a); border:0 none; border-radius:30px; 
-webkit-transition: padding 0.12s ease-in-out;
-moz-transition: padding 0.12s ease-in-out;
transition: padding 0.12s ease-in-out;
}
a.appbutton {background:#008f00; background-image:linear-gradient(0deg,#008f00,#8dff7a);}
a.whitebutton {color:#fff;}
input.beitragbutton {margin:0 0 60px; background:#003764; background-image:linear-gradient(0deg,#66a7c4,#336794); color:#fff;} 

a.telbutton, a.appbutton {letter-spacing:0.1em;}
input.button:hover, a.button:hover, a.telbutton:hover, a.appbutton:hover  {text-decoration:none; padding:12px 26px 12px;}
a.telbutton img, a.appbutton img {margin:0 10px 0 0; padding:0; width:30px; float:left;}
a.button.topspace {margin-top:60px;}
a.topbutton {padding:8px 20px; margin:0 3%; display:inline-block; line-height:20px; font-weight:500;}
a.topbutton:hover {padding:8px 22px; margin:0 3%; display:inline-block;}

.totop {position:fixed; bottom:15px; right:15px; width:2px; height:2px; padding:15px 22px 25px 19px; margin:0; 
border-radius:50%; background:#00c9f9; z-index:999; opacity:0.3; filter: alpha(opacity=30);} /* For IE8 and earlier */
.totop:hover {opacity:0.5; filter: alpha(opacity=50);} /* For IE8 and earlier */
.totop i:before, .totop i:after {content:""; position:absolute; background-color:#fff; width:3px; height:9px;}
.totop i:before {-ms-transform: translate(-2px, 0) rotate(45deg); /* IE 9 */ 
 -webkit-transform: translate(-2px, 0) rotate(45deg); /* Chrome, Safari, Opera */
 transform: translate(-2px, 0) rotate(45deg);}
.totop i:after {-ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);}

/*///////////////////// ACCORDEON /////////////////////////*/

.transition, ul.accord p, ul.accord li.accor i:before, ul.accord li.accor i:after {transition: all 0.25s ease-in-out;}

.no-select, ul.accord h3 {
 -webkit-tap-highlight-color: transparent;
 -webkit-touch-callout: none;
 -webkit-user-select: none;
 -khtml-user-select: none;
 -moz-user-select: none;
 -ms-user-select: none;
 user-select: none;
}
ul.accord h3 {font-size:18px; line-height:26px; padding:0 60px 20px 0; margin:0;}
ul.accord p, ul.accord li.accor ul, ul.accord li.accor ul li {position:relative; overflow:hidden; transform:translate(0, 0); text-align:justify; z-index:2;}
ul.accord {list-style:none; perspective:900; padding:0 0 30px 0; margin:0;}
ul.accord li.accor ul li {list-style:disc outside; padding:0 0 0 10px; margin:0 20px 0 0; overflow:visible; text-align:left;}
ul.accord li.accor {position:relative; padding:20px 0 0 0; margin:0; border-bottom:1px solid #eee;}
ul.accord li.accor:nth-of-type(1) {animation-delay:0.5s; }
ul.accord li.accor:nth-of-type(2) {animation-delay:0.75s;}
ul.accord li.accor:nth-of-type(3) {animation-delay:1s;}
ul.accord li.accor i {position: absolute;  transform: translate(-6px, 0); margin-top:12px; right:10px;}
ul.accord li.accor i:before, ul.accord li.accor i:after {background-color:#003764; content:""; position:absolute; width:3px; height:9px;}
ul.accord li.accor i:before {
 -ms-transform: translate(-2px, 0) rotate(45deg); /* IE 9 */
 -webkit-transform: translate(-2px, 0) rotate(45deg); /* Chrome, Safari, Opera */
 transform: translate(-2px, 0) rotate(45deg);
}
ul.accord li.accor i:after {
 -ms-transform: translate(2px, 0) rotate(-45deg);
 -webkit-transform: translate(2px, 0) rotate(-45deg);
 transform: translate(2px, 0) rotate(-45deg);
}
ul.accord li.accor input[type=checkbox] {position:absolute; width:100%; height:100%; z-index:1; opacity:0; cursor:pointer; z-index:800;}
ul.accord li.accor input[type=checkbox]:checked ~ h4, ul.accord li.accor input[type=checkbox]:checked ~ p, ul.accord li.accor input[type=checkbox]:checked ~ ul,
ul.accord li.accor input[type=checkbox]:checked ~ ol, ul.accord li.accor input[type=checkbox]:checked ~ img, 
ul.accord li.accor input[type=checkbox]:checked ~ table {
 margin:0; max-height:0; opacity:0; display:none;
 transform: translate(0, 50%);
}
ul.accord li.accor input[type=checkbox]:checked ~ i:before {
 -ms-transform: translate(2px, 0) rotate(45deg);
 -webkit-transform: translate(2px, 0) rotate(45deg);
 transform: translate(2px, 0) rotate(45deg);
}
ul.accord li.accor input[type=checkbox]:checked ~ i:after {
 -ms-transform: translate(-2px, 0) rotate(-45deg);
 -webkit-transform: translate(-2px, 0) rotate(-45deg);
 transform: translate(-2px, 0) rotate(-45deg);
}

@keyframes flipdown {
 0% {
 opacity: 0;
 transform-origin: top center;
	-ms-transform: rotateX(-90deg);
	-webkit-transform: rotateX(-90deg);
	transform: rotateX(-90deg);
 }
 5% {
 opacity: 1;
 }
 80% {
 -ms-transform: rotateX(8deg);
	-webkit-transform: rotateX(8deg);
	transform: rotateX(8deg);
 }
 83% {
 -ms-transform: rotateX(6deg);
	-webkit-transform: rotateX(6deg);
	transform: rotateX(6deg);
 }
 92% {
 -ms-transform: rotateX(-3deg);
	-webkit-transform: rotateX(-3deg);
	transform: rotateX(-3deg);
 }
 100% {
 -ms-transform-origin: top center;
 -webkit-transform: rotateX(0deg);
	transform: rotateX(0deg);
 }
}

/*///////////////////// RESPONSIVE ////////////////////*/

@media (min-width: 1700px) {
body {font-size:150%; line-height:150%;}
.content {max-width:1400px;}
}
@media (min-width: 801px) {
.lager-haftpflichtversicherung {background-image:url(../images/Lager-Haftpflichtversicherung.jpg);}
.warentransport-haftpflichtversicherung {background-image:url(../images/Warentransport-Haftpflichtversicherung.jpg);}
.spezialgut {background-image:url(../images/Spezialgut.jpg);}
.verkehrshaftungsversicherung {background-image:url(../images/Verkehrshaftungsversicherung.jpg);}
.frachtfuehrerversicherung {background-image:url(../images/Frachtfuehrerversicherung.jpg);}
.lager-und-speditionsversicherung {background-image:url(../images/Lager-und-Speditionsversicherung.jpg);}
.lager-und-spedition {background-image:url(../images/Lager-und-Spedition.jpg);}
.warentransportversicherung {background-image:url(../images/Warentransportversicherung.jpg);}
.warentransport {background-image:url(../images/Warentransport.jpg);}
.faq {background-image:url(../images/FAQ-zu-Transportversicherung.jpg);}
.versicherungsbeitragsberechnung {background-image:url(../images/Versicherungsbeitragsberechnung.jpg);}
.kontakt {background-image:url(../images/Kontakt.jpg);}
.impressum {background-image:url(../images/Impressum.jpg);}
.datenschutz {background-image:url(../images/Datenschutz.jpg);}
}
@media (max-width: 1500px) {
.mainnavi li {margin:0 10px;}
.mainnavi li a {padding:4px 5px 8px; font-size:18px; line-height:30px;}
}
@media (max-width: 1300px) {
.mainnavi li a .indexnodis {display:none;}
.mainnavi li a .indexdis {display:inline-block;}
}
@media (max-width: 1240px) {
.mainnavi li a .indexnodis {display:none;}
.mainnavi li a .indexdis {display:inline-block;}
.versicherungspaket {width:46%; margin:0 1% 20px;}
.fall {width:49%; margin:1px; height:360px; border:1px solid #eee; background:rgba(255,255,255,0.8);}
.noborderright, .noborderbottom {border:1px solid #eee;}
.content {padding:60px 0;}
h6 {padding:15px 20px; font-size:30px; line-height:42px;}
}
@media (max-width: 900px) {
html, body {overflow-x:hidden;}
body, button, input, textarea, select, table {font-size:15px; line-height:24px;}
.navi {height:160px;}
.logo {max-width:180px; margin:18px auto 0; display:block;}
.mainnavi li a .indexdis {display:none;}
.mainnavi li a .indexnodis {display:block;}
.sidebarIconToggle {display:block;}
.mainnavi {top:44px; right:0; width:100%; max-width:380px; padding:8px 0 16px; margin:0; display:block; box-sizing:border-box; background:#003764; 
transform:translateX(380px); transition:transform 600ms ease-in-out;}
.mainnavi li {display:block; padding:0; margin:0;}
.mainnavi li a {width:100%; padding:8px 24px !important; height:auto; color:#fff; font-size:16px;}
.mainnavi li a::after {content:""; display:none; padding-top:3px; margin:0 auto; width:0%; border-bottom:0 none; transition:.0s;}
.mainnavi li a:hover::after {width:0%; border-bottom:0 none;}
iframe {height:400px;}
.halb, .drittel, .doppel {width:100%; margin:0 auto; padding:0; float:none;}
.beitragsform {margin-bottom:60px;padding-bottom:40px; border-bottom:2px solid #008f00;}
.futterblock1, .futterblock2 {width:100%;}
.right {text-align:left;}
.gallery img {width:50%;}
.starli li {width:48%; margin:20px 0.5%;}
h1 br, h2 br, h3 br, h4 br, h5 br, h6 br {display:none;}
h1, h2 {font-size:32px; line-height:38px;}
h3 {font-size:24px; line-height:30px;}
h4 {font-size:20px; line-height:26px;}
h5 {font-size:18px; line-height:22px;}
h1, h2, h3, h4 { 
-moz-hyphens: auto;
-o-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
-moz-hyphenate-limit-chars: auto 5;
-o-hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-chars: auto 5;
hyphenate-limit-chars: auto 5;
-moz-hyphenate-limit-lines: 2;
-o-hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
hyphenate-limit-lines: 2;
}
.danke h2 {hyphens:none;}
}
@media (max-width: 639px) {
.nodis {display:none;}
.mainnavi {max-width:320px; transform:translateX(320px);}
.mainnavi li a {font-size:14px;}
.fall {width:100%; margin:1px 0; height:auto;}
.content {padding:40px 0;}
.kunden img {width:190px; padding:20px;}
h6 {padding:10px 20px; font-size:22px; line-height:30px; margin:0 0 10px 8%;}
}
@media (max-width: 479px) {
h6 {margin:0 0 10px 4%;}
.versicherungspaket {width:100%; margin:0 0 20px;}
.starli li {width:100%; margin:0 0 20px;}
}
@media (max-width: 279px) {
.telbutton img {display:none;}
a.topbutton {display:none;}
}