/**
 * Service Center Standard Layout
 *
 * @package 	html-css
 * @cssdoc 		version 0.1
 * @author		office-discount.at
 * @site		https://www.office-discount.at/
 * @date		14.02.2018
 * @copyright	2006-2018 office discount GmbH
 * @media		screen
 *
 * @colordef	#ce0915;	Rot
 * @colordef	#fee200;	Gelb
  * @colordef	#333333;	Grau
 * @colordef	#f7f7f7;	Hellgrau
 */

@font-face {
    font-family:'SquareSlab';
    src:url('SquareSlab.ttf') format('truetype');
    font-weight:bold;
    font-style:normal;
}

@font-face {
    font-family:'FontAwesome';
    src:url('fontawesome-webfont.eot');
    src:url('fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
         url('fontawesome-webfont.woff') format('woff'),
         url('fontawesome-webfont.ttf') format('truetype');
    font-weight:normal;
    font-style:normal;
}

@font-face {
    font-family: 'Font Awesome 5 Free';
    font-style: normal;
    font-weight: normal;
    font-display: auto;
    src: url("fa-solid-900.eot");
    src: url("fa-solid-900.eot?#iefix") format("embedded-opentype"), url("fa-solid-900.woff2") format("woff2"), url("fa-solid-900.woff") format("woff"), url("fa-solid-900.ttf") format("truetype"), url("fa-solid-900.svg#fontawesome") format("svg"); 
}

/* Layout */
body {min-height:0;}
input[type="text"], select{height:2em;}
input[type="text"], textarea{-webkit-appearance: none; width:90%;}
main, header {flex-direction: column;}
header{display:flex; width:94%; align-self:center;}
header .logo{display:flex; flex-direction:column; align-self:center; text-align:center;}
header .logo img{max-width:90%;}
header #k_search_form{position:relative; display:flex; align-self:center; justify-content:center; width:90%; margin-top:2em;}
header .search_field{-webkit-appearance: none !important; border-radius: 4px 0 0 4px; background:#fee200; border:0 none; align-self:center; width:62%; font-size:0.8em; height:2.85em; padding: 0 0.7em;}
header .search input[type=submit], .search_button{height:2.25em; width:10%;}
header .search legend{display:block; font:bold 0.8em SquareSlab, Arial, sans-serif;}
.breadcrumb {margin-top:1em; margin-bottom:1em;}
.breadcrumb span {display: inline-block; margin-right:0.5em; font-family: FontAwesome;}
body {display: flex; flex-direction: column; min-height: 100vh;}
.wrapper{display:block; min-width:60%; max-width: 1200px; width: 100%; margin: 0em; flex-direction:column; justify-self:center; align-self:center; margin-top:1em;}
main {display: block; flex: 1 1 auto; display: flex;}
nav{flex:0 0 15.5em; }
.content {display: flex; flex-basis: auto; flex-shrink:0; flex-flow: row wrap; justify-content: flex-start; align-content:flex-start; max-height:100%; font-size:0.9em;}
.content h2, .content h3, .content .breadcrumb{flex-basis:100%; margin-top:0;}
form{display:flex; flex-flow:row wrap;}
label{margin-top:0.8em; display:block;}
label em{margin-left:0.1em;}
form small{display:block; font-size:0.7em; width: intrinsic; width: -moz-max-content; width: -webkit-max-content; background:#f6ff68; margin-top:0.4em; padding:0.3em 0.5em;}
select{width: intrinsic; width: -moz-max-content; width: -webkit-max-content;}
#fld_street, #fld_city{width:65%;}
#fld_streetNumber, #fld_zipCode{width:23%;}
footer {text-align:center; font-size:0.9em;}
.grid1{width:100%;}
.grid1 h4{margin-bottom:0;}
.grid1 h4:first-child{margin-top:0;}
.grid1 h4 + p{margin-top:0.5em;}
.grid1 h4 a {font-family: Arial; font-size: 0.8em; line-height: 1.8;}
.grid2 + .grid1{margin-top:1em;}
.content .grid2{box-sizing: border-box; width:100%; border:1px solid #aaa; font-size: 0.9em; margin: 0 0 1em 0; padding: 1em; overflow:hidden;}
.content .grid2 a{font-size:1.1em; display:block; padding-bottom:0.7em;}
.content .grid2 strong{display:block;}
.grid3{box-sizing:border-box; width:100%; margin: 0 1em 1em 0; overflow:hidden;}
.grid3 h4{font:bold 1.3em Arial, sans-serif; margin:0 0 0.5em 0;}
.grid3 span{display:block; padding: 0.5em 0;}
.grid3 img{max-width:100%;}
#catalog_form .grid3 img {margin-top: 1em;}

/* Decoration */

body {
	margin: 0;
	background: #fff;
	font-family: Arial, sans-serif;
	font-size: 1.1em;
}

a, a h1, a h2, a h3, a h4{color:#333;}
.wrapper a {word-break: break-word;}

h1, h2, h3, h4{font-family:SquareSlab, Arial, sans-serif; font-weight:bold; color:#000;}

h1{font-size:2em;}
h2{font-size:1.8em;}
h3{font-size:1.6em;}
h4{font-size:1.4em; margin-top: 1em;}

em{font-style:normal; color:#ce0915;}

hr{border-bottom:0; border-top:1px solid #ccc;}

address {font-style: normal; margin-top: 0.5em;}

.error {
    width: fit-content;
	width: -moz-fit-content;
	background: #ffe0e1 none repeat scroll 0 0;
    color: #ee1c25;
    font-size: 0.8em;
    padding: 0.3em 0.5em;
    clear: both;
}

.success {
    width: 100%;
	background: #cdffcf none repeat scroll 0 0;
    color: #198a1f;
    padding: 1em;
	font-size:0.9em;
}

.success::before {
    content: "\f00c";
    font-family: FontAwesome;
}

.privacy_info{font-family:FontAwesome; padding-right:0.5em;}

header, nav, section, footer {
	padding: 0.5em;
	margin: 0;
}
header h1{vertical-align:middle; text-align:center; margin:0; font-size:1.5em;}
header a{text-decoration:none;}
section{width:calc(100% - 1em);}
footer{margin-top:2em;}
nav {margin-top:1em;}
nav a {display: block; padding: 1em 0.8em; font-size:0.95em; text-decoration: none; border-bottom: 1px solid #aaa; color:#333;}
nav a.active, nav a:hover {font-weight: bold;}

.button_important{-webkit-appearance:none; background:#ce0915; border:1px solid #920109; border-radius:0.35em; color: #fff !important; font: bold 1.1em/1.5 Arial, sans-serif; padding: 0.2em 0.7em; margin-top:1em; text-align: center; text-decoration: none !important; cursor:pointer;}
header .search input[type=submit], .search_button{-webkit-appearance: none; border-radius: 0 4px 4px 0; padding:0 0.7em; background:#ce0915; border:0 none; box-sizing: content-box; color: #fff; display: inline-block; font: bold 1em Arial,Helvetica,sans-serif; text-align: center; vertical-align:top; text-decoration: none; cursor:pointer;}
.pdffile:before{display:inline-block; content:"\f1c1"; font-family:FontAwesome; font-size:1.5em; color:#e30613; padding-right:8px;}
.advantages ul{list-style:none outside; padding:0;}
.advantages li {clear: both; margin: 1em 0;}
.advantages ul li:before{content:"\f00c"; font-family:FontAwesome; color:#0097dd; float: left; padding: 0 1em 3em 0;}
.question, .bankverbindung{display:block; margin:1em 0; color:#000; text-decoration:underline; cursor:pointer;}
	.question .plus, .question .minus, .bankverbindung .plus, .bankverbindung .minus{display:inline-block; font-family:FontAwesome; font-size:1.1em; text-decoration:none; margin-right:0.4em;}
	.question .minus, .bankverbindung .minus{display:none;}
.answer{display:none;}
.info{font-size:0.8em;}

#catalog_form .grid3{overflow: visible; margin: 0 2em 1em 0;}
    #catalog_form .catalogHint ~ label + p{margin: .2em 0 0  1.9em;}
.catalogHint{position: relative; display: inherit; text-decoration: none;}
.catalogHint ~ h3{margin: 1em 0 0;}
.catalogHint ~ label{margin: .5em 0 0; font-weight: bold;}
.catalogHint:after{content: ''; background: url('../images/pfeil.png') no-repeat; background-size: contain; position: absolute; width: 32px; height: 55px; top: .8em; right: 1em;}
    .catalogHint h3{margin: 0; font-size: 1.3em;}
    .catalogHint span{font-size: .8em;}

@media screen and (min-width: 40em) {
header .logo img{max-width:50%;}
}

/* Responsive */

@media screen and (min-width: 64em) {
	main, header {flex-direction: row;}
	input[type="text"], textarea{width:60%;}
	header{align-self:left; width: 100%; padding: 0.5em 0;}
 	nav {padding: 0;}
	header .logo{width:18em; text-align:left;}
	header .logo a{max-height:6.5em;}
	header .logo img{max-width:100%; max-height:6.5em;}
	header h1{margin-top:0.2em; text-align:left;}
	header #k_search_form{width:auto; justify-content:left;}
	header .search_field{width:16em;}
	header .search input[type="submit"], .search_button {width:8%; height:2.85em; font-size:0.8em; }
	nav {margin-right:2em !important;}
	nav a{padding: 0.5em 0.8em;}
	.content{flex-shrink: unset;}
	.content .grid2{flex-basis: calc(48% - 2em); margin-right:1em; max-height:14em;}
	.grid3{flex-basis:30%; font-size:0.8em;}
	form small{display:inline-block;}
	#fld_street, #fld_city{width:43%;}
	#fld_streetNumber, #fld_zipCode{width:15%;}
}

/* MOBILE MENU NEO-6189 */

.header-container .shop:before {
    content: '\f290';
    font-family: "Font Awesome 5 Free";
    padding-right: .33em;
}
.header-container .shop span {
    border-bottom: 1px solid #000;
}

@media screen and (min-width: 1024px) {
    .menuButton, #menuCheckbox  {
        display: none;
    }
    header {
        position: relative;
    }
    .header-container {
        align-self: center;
    }
    .header-container .shop {
        position: absolute;
        right: 0;
    }
}

@media screen and (max-width: 1023px) {
    section {
        width: auto;
        padding: 1.25em;
    }
    header {
        padding: 0;
        width: 100%;
    }
    nav { margin-top: 0 !important; padding: 0 .5em;}
    .header-container {
        display: flex;
        flex-basis: 100%;
        justify-content: space-between;
        margin-top: 1em;
        padding: 0 5px;
    }
    .header-container .menu, .header-container .shop {
        padding: 10px 15px;
        cursor: pointer;
    }
    .header-container label {margin-top: 0;}
    .menuButton {
        vertical-align: middle;
    }
    .menuButton label {margin-top: 0;}
    .menuButton span {border-bottom: 1px solid #000;}
    .menuButton strong {display: none;}
    .menuButton:before {
        content: "\f0c9";
        font-family: FontAwesome;
        padding-right: .33em;
    }

    /* MOBILE MENU CHECKBOX HACK */
    #navigation {
        display: none;
        opacity: 0;
        transition: all 1s;
    }

    input#menuCheckbox {
        display: none;
    }

    #menuCheckbox:checked~main nav#navigation {
        display: block;
        opacity: 1;
        background: #eaeaea;
    }
    #menuCheckbox:checked~header .menu {
        background: #eaeaea;
    }
    #menuCheckbox:checked~header .menuButton strong {
        display: initial;
        font-weight: normal;
        border-bottom: 1px solid #000;
    }
    #menuCheckbox:checked~header .menuButton:before {
        content: "\f00d";
        font-family: FontAwesome;
        padding-right: .33em;
    }
}