/*======================================================================
Normalisierung, Startwerte
======================================================================*/
*{
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html {
	background-color: white;
	overflow-y: scroll; /*Optional, kein Scrollbalken*/
	-webkit-text-size-adjust: none; /*keine Textvergrösserung iphone*/
}

/*Block / Float
-----------------*/
main, header, footer, section, address, .container, .wrapper {
	display: block;
	clear:both;
	overflow: hidden;
}

/*Bilder responsive
---------------------------------------------------------*/
img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
	flex-shrink: 0;
}	

/*Listen
--------*/
ul {
    list-style: none; /* Remove list bullets */
}
main .inhalt ul li {
	padding-left: .8em; 
	padding-top: 0.3em;
}
main .inhalt ul li:before {
    content: "\25AA";
    font-weight: normal;
    font-style: normal;
    font-size: .6em;
    padding-right: .6em;
    vertical-align: -.25em; 
    margin-left: -.8em;
	color: #c71d47;
}
main .inhalt ul.untergruppe > li {
    padding: 0;
}
main .inhalt ul.untergruppe > li:before {
    content: none;
}

/*Links Buttons*/
a {
	color: #676C6D;	
	cursor: pointer;
	outline: none; 
	text-decoration: none;   	
}
main a {
	opacity: .8;
	text-transform: uppercase;
	font-size: .9em;
	line-height: 1.25;
	display: inline-block;	
}
main a:before {
	font-family: "artexpertsicons" !important;
	text-transform: lowercase;
	font-size: .7em;
	content: "\73";
	color: #c71d47;
	padding-right: 5px;
}

nav a, nav ul a {
	text-decoration: none;
}
button {
    border: none;
    box-shadow: none;
    outline: none;
    cursor: pointer;
}

/*Weitere Formate
-----------------*/
address {
	font-style: normal;
	font-weight: normal; 
}
table, th, tr, td {
	font-weight: normal;
	border:none;
    border-collapse:collapse;
    border-spacing:0;
    text-align: left;
}
.small {
	font-size: .8;
}
.clear {
	clear:both;
}
.hide {
	display: none;
}
.transparent {
	opacity: 0;
}
.nowrap {
	white-space: nowrap;
}
.trennung {
    -webkit-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}
.ohnelink,
main a[href^="mailto:"],
address a {
	color: inherit;
	font-family: inherit;
	text-decoration: none;
	cursor: default;
	border-bottom: none;
	opacity: 1;
	text-transform: none; 
	font-size: 1em;
}
main a.mail:before,
main a[href^="mailto:"]:before {
	content: "\65";
	font-size: 1.5rem;
	line-height: 1;
	vertical-align: bottom;
}

/*Hervorheben Blöcke
header, nav, main, section, article, footer {border: 2px solid rgba(0,0,0,.3);}
nav {border-color: rgba(0,200,0,.3);}*/

/*Media Queries / Breakpoints*/
@media screen and (min-width: 600px) {

}
@media screen and (min-width: 900px) {

}
@media screen and (min-width: 1200px) {

}
@media screen and (min-width: 1600px) {

}
@media screen and (min-width: 1800px) {

}

/*======================================================================
Typografie
======================================================================*/
html {
	font-family: 'Crimson Text', 'Georgia',  serif;
	font-weight: normal;
	font-style: normal;
	color: #676C6D;
	font-size: 17px;
	line-height: 1.4;
}
@media screen and (min-width: 600px) {
	html {font-size: 18px; line-height: 1.65;}
}
@media screen and (min-width: 1200px) {
	html {font-size: 19px;}
}
@media screen and (min-width: 1600px) {
	html {font-size: 21px;}	
}


/*Überschriften 
...............*/
h1, h2, h3, h4, h5, h6 {
	color: #676C6D;
	font-weight: normal;
	line-height: 1.3;
	margin: 0;
}
h1 {
	font-family: 'Cinzel', serif;
	font-size: 150%;
}
h2 {
	font-size: 120%;
}
h3 {
	font-size: 105%;
	text-transform: uppercase;
	margin-bottom: .6em;
	margin-top: 15px;
}
h4 {
	font-size: 110%;
	letter-spacing: .5px;
}
h5 {	
	font-size: 100%;
}

main p + p {
	margin-top: .5rem;
}
main .inhalt p + h4,
main .inhalt p + h3 {
	margin-top: 30px;
}

main p + h3 {
	margin-top: 1.5rem;
}

/*Einzelne Klassen*/


/*======================================================================
Basisaufbau / Abstände / Ränder
======================================================================*/
.container, .news {
	padding-left: 4.8%;	
	padding-right: 4.8%;
	overflow: hidden;
}
@media screen and (min-width: 800px) {
	.container {
		padding-left: 10%;	
		padding-right: 10%;
	}
}
@media screen and (min-width: 1200px) {
	.container {
		padding-left: 15%;	
		padding-right: 15%;
	}
}
@media screen and (min-width: 1600px) {
	.container {
		padding-left: 20%;	
		padding-right: 20%;
	}
}

section.container {
	padding-bottom: 30px;
}

@media screen and (min-width: 900px) { 
	section.container {
		padding-bottom: 3rem;
	}
}
@media screen and (min-width: 1200px) { 
	section.container {
		padding-bottom: 4rem;
	}
}
main {
	margin-top: 40px;
}

/*======================================================================
HEADER
======================================================================*/

/*Kopfzeile mit Logo*/
.kopfzeile {
    background-color: #676c6d; /*grau*/
    color: white;
    text-align: right;
    width: 100%;
    padding-right: 80px; /*grauer Rand*/
}
.logo {
	background-color: #676c6d;
    border-top: 10px solid #c71d47; /*rot*/
    padding-top: 15px;    
    padding-bottom: 20px;
    text-align: right;
    padding-right: 0;
}

.logo img {	 
	display: inline;	
	width: 208px; /*Maximale Grösse*/
}
.logobox {
	margin-top: 90px;
}
@media screen and (min-width: 900px) { 
	header.titelbox {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 30;
	}
	header.titelbox .introbild img {
				transform-origin: 50.01%;
		-ms-transform: scale(1.1);
		-webkit-transition: all 0.8s ease;
 		transition: all 0.8s ease;
	}
	header.titelbox .introbild img:hover  {
		cursor: pointer;
		max-width: 90%;
	}
	main { 
		margin-top:  250px;
	}
}

/*INTRO
---------------*/
.introbild img, .introbild .weiter {
	margin: 0 auto;
	text-align: center;
}
.introbild .weiter {
	display: none;
	color: white;
	font-size: 40px;
	margin-top: 15px;
}

.logo h1 {
	line-height: 0;
}
h1 .untertitel {
	color: white;
	display: block;
	font-size: 20px;
	line-height: 1.5;
	padding-top: 10px;
}
h1 a {
	display: inline-block;
}

.logo, .logo h1, .untertitel, .introbild, .titelbox, .logo img
 {
	transform-origin: 50.01%;
	-ms-transform: scale(1.1);
	-webkit-transition: all 0.8s ease;
		transition: all 0.8s ease;
} 

@media screen and (min-width: 900px) { 
	#home .titelbox {
		min-height: 100vh;
		background-color: #676c6d;
	}
	h1 .untertitel {
		font-size: 25px;
	    letter-spacing: .09em;
	}
}
@media screen and (min-width: 900px) {
	.introbild .weiter {
		display: block;
	}
	.introbild {
		background-color: #676c6d;
		margin-bottom: 40px;
	}
	.logo h1 {
		margin: 20px 0;
	}
	.logo {
		padding: 0;
	}
	#home .logo img {
		width: 297px;
	}
	#home .logo {
		padding-top: 15px;    
    	padding-bottom: 20px;
	}

	.alternative h1 .untertitel, .alternative .introbild {
		opacity: 0;
		height: 0;
		margin: 0;
	}
	#home .alternative .logo {
		padding: 0;
	}
	#home .alternative .logo img {
		width: 208px;
	}
	.alternative h1 .untertitel {
		display: none;
	}
	#home .titelbox.alternative {
		min-height: 0;
	}
}	
@media screen and (max-width: 899px) { 
	#home .introbild.container {
		padding-right: 0;
		padding-left: 0
	}
}

/*======================================================================
FOOTER
======================================================================*/
/*sticky*/
.wrapper {
	display: -webkit-flex;  /*für alte Webkit-Browser*/
	display: -ms-flexbox;   /*IE 10*/
	display: flex;
	min-height: 100vh;
	height: auto !important; 
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative; /*für z-index*/
	z-index: 10;
}
main {
  flex: 1 auto; /*auto für den ie*/
}

footer {
	margin-top: 50px;
	padding: 40px 0 60px 0;
	background-color: #676c6d;
	color: white;
}


/*Adresse
Block oder Linie mit Trenn-Linien*/

@media screen and (min-width: 600px) {
	.adressblock li {
		display: inline-block;
	}
	.adressblock li + li:before {
	    content: "\007C"; /*Gerader Strich*/
	    font-weight: normal;
	    font-style: normal;
	    color: #c71d47;
	    padding: 0 10px;
	    vertical-align: -.1em;
	}
}
@media screen and (max-width: 1000px) {
	.adressblock li.umbruch:before,
	.adressblock li:last-child:before { 
		content: ""; 
		padding: 0;
	}	
	.adressblock li.umbruch, .adressblock li:last-child { display: block; }	
	.adressblock li.umbruch + li { float: left; }
}

/*======================================================================
Navigation
======================================================================*/
nav#hauptnavi, nav#hauptdesknavi { 
	display: none;
}
.sub-menu {
	display: none;
}

.hauptmenu > li > a, 
.sprachwahl li {
	font-family: 'Cinzel', serif;
	font-size: 22px;
	padding: 7px 0;
	display: inline-block;
	cursor: pointer;
}
.sprachwahl {
	text-align: right;
	display: none;
}
.sprachwahl li {
	margin-left: 15px;
}
.sprachwahl li a {
	font-size: .8em;
}
.sprachwahl .aktiv {
	display: none;
}
a.aktiv {
	border-bottom: 1px solid #c71d47;
}
#hauptnavi a.aktiv {
	border: none;
}

.hauptmenu > li {
	border-bottom: 1px solid #c71d47;
}
nav#hauptnavi { 
	padding-top: 15px;
	padding-bottom: 15px;
}
.sub-menu {
	padding: 5px 0 30px 0;
}.sub-menu a {
	padding: 4px 0;
	display: inline-block;
	cursor: pointer;
}

button.subnaviplus {
	padding: 7px;
	float: right;
	background-color: white;
	color: #c71d47;
}
@media screen and (min-width: 900px) { 
	button.hamburger {
		display: none;
	}
	nav#hauptdesknavi { 
		display: block;
		display: flex;
    	justify-content: space-between;
    	margin-bottom: 40px;
		padding-top: 15px;
		padding-bottom: 30px;
		background: rgb(255,255,255);
		background: linear-gradient(180deg, rgba(255,255,255,1) 60%, rgba(255,255,255,0.6) 80%, rgba(255,255,255,0) 100%);
		position: fixed;
		top: 100px;
		width: 100%;
	}
	.hauptmenu {
		display: flex;
	}
	.hauptmenu li {
		margin-right: 30px;
		border-bottom: none;
	}
	.hauptmenu li a {
		font-size: 24px;
		padding: 0;
	}
}


/*======================================================================
LAYOUT
======================================================================*/

/*Klappliste
-------------------------------------------------*/

/*Rote Linie*/
main section > h1:before, 
main header h1:before {
	content: ""; 
	display: block;
	border-top: 1px solid #c71d47;
	width: 50px;
	padding-bottom: 5px;
	margin-left: -1000px;
	width: 1070px;
}
main section > h1 {
	margin-bottom: 60px;
}

.klappartikel > article:before,
.untergruppe > li > h2:before,
.linie:before {
	content: ""; 
	display: block;
	border-top: 1px solid #c71d47;
	width: 50px;
	padding-bottom: 5px;
}
.artikelbereich.blog > article.bloginhalt:before {
	content: none;
}
.untergruppe {
	padding-left: 20px;
}
.bloginhalt + .bloginhalt {
	margin-top: 40px;
}
.untergruppe h2 {
	font-size: 1em;
}
.artikelbereich > article:first-child:before {
	margin-left: -1000px;
	width: 1070px;
}
.artikelbereich .inhalt {
	padding: 10px 0 40px 0;
}
.artikelbereich article .btn-toggle {
	margin-bottom: 5px;
	cursor: pointer;
}
.artikelbereich article .btn-toggle.offen {
	cursor: default
}
/*Aussehen*/
.btn-toggle .plusminus {
    float: right;
    display: block;
    background-color: white;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
}
.btn-toggle .plusminus i {
    font-style: normal;
    font-weight: bold;
    font-size: 1rem;
    color: #c71d47;
}
.btn-toggle .plusminus i.plus {
    position: relative;
    top: -3px;
}
/*Ein und Ausblenden*/
.artikelbereich article:first-child .hide,
.artikelbereich h1 + article .hide,
.artikelbereich header + article .hide {
    display: block;
}
.btn-toggle .plusminus .minus,
.btn-toggle .minus .plus {
    display: none;
}
.btn-toggle .minus .minus {
    display: block;
}

@media screen and (min-width: 900px) { 
	.artikelbereich .inhalt {
		padding: 10px 0 40px 30px;
	}
	.untergruppe,
	.inhalt .inhalt {
		padding-left: 0;
	}
	main header {
		overflow: visible;
	}
	/*main header h1 {
		display: none;
	}*/
}

.artikelbild {
	margin-top: 60px;
}
/*Bild Text liste 2 Spaltig
-------------------------------------------------*/
.layout {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.layout.bildtext > div {
	margin-bottom: 30px;
}
.layout.bildtext > div:first-child {
	width: 25%;
}
.layout.bildtext > div + div {
	margin-left: 20px;
	width: calc(75% - 20px);
}
.layout.trio,
.layout.quartett {
	flex-wrap: wrap;
	justify-content: space-between;
}

.layout.trio > *,
.layout.quartett > * {
	display: block;
	text-align: center;
	border: 1px solid grey;
	padding: 50px 0;
	width: calc(50% - 10px);
	margin: 10px 0;
}

.layout.quartett > article > div + div {
	padding-top: 10px;
}
p + .layout {
	margin-top: 40px;
}
@media screen and (min-width: 600px) { 
	.layout.bildtext > div:first-child {
		width: 140px;
	}
	.layout.bildtext > div + div {
		margin-left: 20px;
		width: calc(100% - 160px);
	}	
	.layout.blog > div:first-child {
		width: calc(50% - 15px);
		margin-right: 15px;
	}
	.layout.blog > div + div {
		margin-left: 15px;
		width: calc(50% - 15px);
	}
}
@media screen and (min-width: 900px) { 
	.layout.bildtext > div + div {
		margin-left: 30px;
		width: calc(100% - 170px);
	}
	.layout.trio > * {
		width: calc(33.33% - 20px);
		margin: 15px 0;
		padding: 0 0 20px 0;
	}
	.layout.quartett > * {
		width: calc(25% - 90px / 4);
		margin: 15px 0;
		padding: 0 0 20px 0;
		text-align: center;
	}
}

/*
Monogramme
---------------------------------------------------------*/
main, main section {
	position: relative;
}
header, nav {
	position: static;
	z-index: 20;
}
.monogram {
	display: none;
}
main section {
	z-index: 10;
}
footer {
	display: flex;
	justify-content: center;
}
#home footer {
	justify-content: flex-start;
}
footer .monogramme + div {
	display: none;
}
footer .monogramme {
	margin: 0;
	width: 300px;
	justify-content: flex-end;
}
.monogramme .slide {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	flex-direction: column;
}
.monogramme .slide .slidebild {
	width: 100px;
	height: 110px;
    display: flex;
    align-self: center;
    align-items: flex-end;
	margin-bottom: 15px;
}
.monogramme .slide .slidetext {
	align-self: center;
}
.monogramme .slide .slidetext p {
	font-size: .8rem;
	text-align: right;
}
@media screen and (min-width: 600px) { 
	footer {
		justify-content: flex-end;
	}
	footer .monogramme {
		margin: 0 80px 0 0;
		width: 500px;
	}
	.monogramme .slide .slidebild {
		margin-bottom: 0;
	}
	.monogramme .slide {
		margin: 0;
		height: 150px;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: row-reverse;
	}
	.monogramme .slide .slidetext p {
		font-size: .8rem;
		margin: 0 20px;
	}
}
@media screen and (min-width: 900px) {
	.monogram {
		display: block;
		z-index: 5;
		position: fixed;
		top: 200px;
		left: 20%;
		width: 60%;
	    opacity:0.2;
	}

}

/*======================================================================
FORMULAR
======================================================================*/

.labelbox label,
.labelbox input,
.labelbox textarea {
    display: block;
    width: 100%;
}
.labelbox +.labelbox {
	margin-top: 10px;
}
.labelbox.nachricht {
	margin-top: 20px;
}
.labelbox label {
    padding-bottom: 0;
    margin-bottom: 5px;
}
.labelbox input,
.labelbox textarea {
    background-color: rgba(255,255,255,0.8);
    color: #676c6d;
    border: 1px solid #676c6d;
    padding: 3px 0 3px 7px;
}
.labelbox input {
    height: 40px;
}
.labelbox textarea {
    height: 192px;
}
@media screen and (min-width: 900px) {
	.kontaktformular {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;		
	}	
	.labelbox {
		width: 100%;
		margin-top: 10px; 
	}	
	.labelbox.vorname,
	.labelbox.nachname,
	.labelbox.email,
	.labelbox.telefon,
	.labelbox.strasse,
	.labelbox.ort {
		width: calc(50% - 15px);
	}
}
@media screen and (min-width: 1200px) {
	.labelbox input {
	    height: 50px;
	}
	.labelbox textarea {
	    height: 222px;
	}
}
.meldung {
	background-color: #676c6d;
	color: white;
    padding: 20px 10px;
    margin-bottom: 20px;
}
button.button {
	cursor: pointer;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid #c71d47;
    background-color: rgba(255,255,255,0.8);
    color: #676c6d;
    padding: 5px 22px 6px 22px;
    margin-top: 20px;
}
#honigtopf {display: none;}


/*---------------------------------------------------------
Karte
---------------------------------------------------------*/
/*Karte*/
.karte  {
  position: relative;
  height: 0;
  overflow: hidden;
  height: 410px;
}

.karte iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*---------------------------------------------------------
Hamburger
---------------------------------------------------------*/
button.hamburger {
    position: absolute;
    top: 30px;
    right: 7px;
    z-index: 990;
}
.hamburger {
    padding: 10px 10px;
    display: inline-block;
    cursor: pointer;
    transition-property: opacity, filter;
    transition-duration: 0.15s;
    transition-timing-function: linear;
    font: inherit;
    color: inherit;
    text-transform: none;
    background-color: transparent;
    border: 0;
    margin: 0;
    overflow: visible; 
}

.hamburger-box {
    width: 32px;
    height: 24px;
    display: inline-block;
    position: relative; 
}
.hamburger-inner {
    display: block;
    top: 50%;
    margin-top: -2px; 
}
.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 32px;
  height: 2px;
  background-color: white;
  border-radius: 0;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease; 
}
.hamburger-inner::before, .hamburger-inner::after {
    content: "";
    display: block; 
}
.hamburger-inner::before {
    top: -10px; 
}
.hamburger-inner::after {
    bottom: -10px; 
}

.hamburger--stand .hamburger-inner {
    transition: transform 0.075s 0.15s cubic-bezier(0.55, 0.055, 0.675, 0.19), background-color 0s 0.075s linear; 
}
.hamburger--stand .hamburger-inner::before {
    transition: top 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
.hamburger--stand .hamburger-inner::after {
    transition: bottom 0.075s 0.075s ease-in, transform 0.075s 0s cubic-bezier(0.55, 0.055, 0.675, 0.19); 
}
.hamburger--stand.is-active .hamburger-inner {
    transform: rotate(90deg);
    background-color: transparent;
    transition: transform 0.075s 0s cubic-bezier(0.215, 0.61, 0.355, 1), background-color 0s 0.15s linear; 
}
.hamburger--stand.is-active .hamburger-inner::before {
    top: 0;
    transform: rotate(-45deg);
    transition: top 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 
}
.hamburger--stand.is-active .hamburger-inner::after {
    bottom: 0;
    transform: rotate(45deg);
    transition: bottom 0.075s 0.1s ease-out, transform 0.075s 0.15s cubic-bezier(0.215, 0.61, 0.355, 1); 
}