/* RESET - http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  border: 0;
  font-family: inherit;
  font-size: 100%;
  font-style: inherit;
  font-weight: inherit;
  margin: 0;
  outline: 0;
  padding: 0;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none;}
table {border-collapse: collapse; border-spacing: 0;}

/* WEBSITE-STYLE */
header .container,
nav .container,
section .container,
footer .container {  
	max-width: 1280px;
	margin: 0 auto;
	height: 100%;
    }

/* HEADER */
#startseite header {z-index: 1; position:relative;}
#startseite header .titelbild img {width: 100%; height: auto;}
#startseite header .overlay {z-index:2; position:absolute; top: 22%; width: 100%;}
#startseite header .overlay img {display: block; margin-left: auto; margin-right: auto; width: 75%; height: auto; max-width: 550px;}

.unterseite header {background-color: #E9D9C4; padding-top: 15px; padding-bottom:15px;}
.unterseite .headwrapper {position:relative;}
.unterseite .headwrapper p {position:absolute; bottom:0; left: 100px;}

/* HINTERGRUND */
.bgbeige {background-color: #E9D9C4;}

/* BILDER */
.imgcenter {display: block; margin-left: auto; margin-right: auto;}

img.img230 {width: 100%; max-width:230px; height: auto;}
img.img640 {width: 100%; max-width:640px; height: auto;}
img.img650 {width: 100%; max-width:650px; height: auto;}
img.img950 {width: 100%; max-width:950px; height: auto;}
img.img1024 {width: 100%; max-width:1024px; height: auto;}



/* ABSTÄNDE */
.abstandvor5 {margin-top: 5px;}
.abstandvor7 {margin-top: 7px;}
.abstandvor10 {margin-top: 10px;}
.abstandvor15 {margin-top: 15px;}
.abstandvor20 {margin-top: 20px;}
.abstandvor25 {margin-top: 25px;}
.abstandvor30 {margin-top: 30px;}
.abstandvor35 {margin-top: 35px;}
.abstandvor40 {margin-top: 40px;}
.abstandvor45 {margin-top: 45px;}
.abstandvor50 {margin-top: 50px;}
.abstandvor55 {margin-top: 55px;}
.abstandvor60 {margin-top: 60px;}
.abstandvor70 {margin-top: 70px;}
.abstandvor80 {margin-top: 80px;}
.abstandvor90 {margin-top: 90px;}
.abstandvor100 {margin-top: 100px;}

.abstand0 {margin-bottom: 0px;}
.abstand3 {margin-bottom: 3px;}
.abstand5 {margin-bottom: 5px;}
.abstand7 {margin-bottom: 7px;}
.abstand10 {margin-bottom: 10px;}
.abstand15 {margin-bottom: 15px;}
.abstand20 {margin-bottom: 20px;}
.abstand25 {margin-bottom: 25px;}
.abstand30 {margin-bottom: 30px;}
.abstand35 {margin-bottom: 35px;}
.abstand40 {margin-bottom: 40px;}
.abstand35 {margin-bottom: 35px;}
.abstand40 {margin-bottom: 40px;}
.abstand45 {margin-bottom: 45px;}
.abstand50 {margin-bottom: 50px;}
.abstand55 {margin-bottom: 55px;}
.abstand60 {margin-bottom: 60px;}
.abstand70 {margin-bottom: 70px;}
.abstand80 {margin-bottom: 80px;}
.abstand90 {margin-bottom: 90px;}
.abstand100 {margin-bottom: 100px;}

.text80p {width: 80%;}
.text70p {width: 70%;}
.text60p {width: 60%;}

/* SECTIONS */
section {padding-top: 55px; padding-bottom: 55px;}
section.banner {padding-top: 35px; padding-bottom: 35px;}
section.borderbottom {border-bottom: 2px solid #E9D9C4;}

/* FLEXBOX */
.reihenboxen {
    display: flex;
    justify-content: space-between;
    flex-direction: row; 
    flex-wrap: wrap;
    justify-content: center;
}
.reihenbox {
    width: 19%;
    min-width: 200px;
    margin-left: 25px;    
    margin-right: 25px;
    margin-bottom: 15px;
}

/* FOOTER */
footer {padding-top: 10px; padding-bottom: 25px; border-top: 2px solid #E9D9C4; }

/* TYPOLOAD */
@font-face {
font-family: 'MontserratLight'; font-display: swap;
src: url('../typo/Montserrat-Light.ttf');}

@font-face {
font-family: 'MontserratRegular'; font-display: swap;
src: url('../typo/Montserrat-Regular.ttf');}

@font-face {
font-family: 'MontserratRegularItalic'; font-display: swap;
src: url('../typo/Montserrat-Italic.ttf');}

@font-face {
font-family: 'MontserratMedium'; font-display: swap;
src: url('../typo/Montserrat-Medium.ttf');}

@font-face {
font-family: 'MontserratSemiBold'; font-display: swap;
src: url('../typo/Montserrat-SemiBold.ttf');}

@font-face {
font-family: 'MontserratSemiBoldItalic'; font-display: swap;
src: url('../typo/Montserrat-SemiBoldItalic.ttf');}

@font-face {
font-family: 'MontserratBold'; font-display: swap;
src: url('../typo/Montserrat-Bold.ttf');}

@font-face {
font-family: 'MontserratExtraBold'; font-display: swap;
src: url('../typo/Montserrat-ExtraBold.ttf');}

@font-face {
font-family: 'MontserratBlack'; font-display: swap;
src: url('../typo/Montserrat-Black.ttf');}

/* Typo-Formatierungen */

p, li, label {
    line-height: 150%;
	font-size: 1.0rem; 
	font-family:MontserratRegular,verdana,sans-serif;
	color: #3b3b3a;
    text-align: left;
}

.banner p {font-size: 1.25rem;}

p.typomin {font-size: 0.75rem;}
p.typoplus {font-size: 1.15rem;}

b, strong, .typosemibold {font-family:MontserratSemiBold,verdana,sans-serif;}
i {font-family:MontserratRegularItalic,verdana,sans-serif;}

ul.textlist {
    list-style-type: square;
    list-style-position: outside;
    margin-left: 15px;
    margin-bottom: 0px;
}

.einleitung h1 {
    line-height: 120%;
	font-size: 1.6rem; 
	font-family:MontserratSemiBold,verdana,sans-serif;
	color: #515B38;
}

.unterseite header p {
	line-height: 100%;
	font-size: 1.5rem; 
	font-family:MontserratSemiBold,verdana,sans-serif;
	color: #515B38;
}
.unterseite header p span {
	font-size: 1.0rem; 
	font-family:MontserratRegular,verdana,sans-serif;
	color: #000000;
}

.einleitung h2 {
    line-height: 120%;
	font-size: 1.05rem; 
	font-family:MontserratSemiBold,verdana,sans-serif;
	color: #734C36;
}

h2, .einleitung h3 {
    line-height: 120%;
	font-size: 1.35rem; 
	font-family:MontserratSemiBold,verdana,sans-serif;
	color: #515B38;
    margin-bottom: 15px;
}

.einleitung h3.typomin {font-size: 1.15rem; margin-bottom: 7px;}


/* Ausrichtungen */
.centertext, .centertext p, .centertext h1, .centertext h2, .centertext h3, .centertext h4, .centertext h5, #produktseite p.headbig.centertext {text-align: center;}
.lefttext, .lefttext p, .lefttext h1, .lefttext h2, .lefttext h3, .lefttext h4, .lefttext h5 {text-align: left;}
.righttext, .righttext p, .righttext h1, .righttext h2, .righttext h3, .righttext h4, .righttext h5 {text-align: right;}

/* Schriftfarben */
.typowhite {color: #ffffff;}
.typoblack {color: #000000;}
.typogreen {color: #515B38;}
.typobrown {color: #734C36;}


    .text80p {width: 80%;}
    .text70p {width: 70%;}
    .text60p {width: 60%;}
    
    .zweispaltiger_inhalt,
    .zweispaltiger_inhalt1,
    .zweispaltiger_inhalt2
     { 
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	}
    .zweispaltiger_inhalt {
	width: 100%; 
	}
    .zweispaltiger_inhalt1,
    .zweispaltiger_inhalt2 {
	display: inline-block;
	vertical-align: top;
	width: 100%;
	text-align: left;
	}	
    .zweispaltiger_inhalt1 {width: 48%; margin-right:3%;}
    .zweispaltiger_inhalt2 {width: 48%;}



/* NAVIGATION */

nav {width: 100%; text-align: center; padding-top: 20px;}

nav ul li {float:none;
      list-style:none;
      position:relative;
      display:inline;
      padding-left: 10px;
      padding-right: 10px;
      } 

nav a:link,
nav a:active,
nav a:visited {
	line-height: 100%;
	font-size: 1.05rem; 
	font-family:MontserratRegular,verdana,sans-serif;
	color: #3b3b3a;
    text-decoration: none;
    -webkit-transition: color 1s;
        transition: color 1s; 
}
nav a:hover {color: #515B38; text-decoration: underline;}     
     
nav a:link span,
nav a:active span,
nav a:visited span {font-family:MontserratSemiBold,verdana,sans-serif;}

a:link,
a:visited,
a:active {color: #734C36; text-decoration: underline;}
a:hover {color: #515B38; text-decoration: underline;}


/* MAILFORMULAR */	
form {width: 100%;}
input, textarea, .entry__field {color: #3b3b3a; font-size: 0.8em;font-family:osr,verdana, sans-serif; border-color: #3b3b3a;}
input[type=text]{margin-bottom: 20px; margin-top: 5px;width:90%;padding: 10px;border-radius:0px;border:1px solid #3b3b3a; background-color: #ffffff;}
textarea{width:90%; padding: 10px; margin-top: 5px; border:1px solid #3b3b3a; border-radius:0px; margin-bottom: 20px; resize:none;background-color: #ffffff;}
input[type=text]:focus,textarea:focus {border-color: #3b3b3a;}
input[type=submit] {background-color: #515B38; padding-top: 10px; padding-bottom: 10px; padding-left: 25px; padding-right: 20px; border:0px; cursor:pointer; color:#ffffff; text-decoration: none; text-transform: uppercase;border:0px solid #50ae30;}
input[type=submit]:hover {background-color: #1b5a0e; border:0px solid #1b5a0e;}


@media only screen and (max-width: 1280px) {
.unterseite header .container,
nav .container,
section .container,
footer .container {margin-left: 25px; margin-right: 25px;}       
}

@media only screen and (max-width: 800px) {
.zweispaltiger_inhalt1,
.zweispaltiger_inhalt2 {display: block; width: 100%; margin-bottom: 45px;}
.text80p, .text70p, .text60p {width: 100%;} 
nav ul li {display: block; margin-bottom: 10px; text-align: center;}
.headerdog {width:75px; height: auto;}
.headerdogtitel span {display:none;}
}