/* =======================================
1. Kalibrierung und Restauration
Dieser Abschnitt enthält die Regeln zur Kalibrierung und zur Restaurierung der wichtigsten Abstände.
======================================= */
:root {
    color-scheme: light only;
	forced-color-adjust: none;
}

* {
    padding:0;
    margin:0;
	color-scheme: light only;
	forced-color-adjust: none;
}


/* =======================================
2. Allgemeine Styles
Im zweiten Abschnitt legen Sie die allgemeinen, für die ganze Seite geltenden Einstellungen fest.
Die meisten Selektoren in diesem Teil gelten für die gesamte body-Kiste, wobei sich folgende Reihenfolge anbietet:
    Elemente html und body
    Block-Elemente wie Überschriften, Absätze, Listen, Zitate etc.
    Inline-Elemente: Hyperlinks, Bilder und Elemente wie strong und em
    allgemeine Klassen und IDs wie .infobox oder img#logo

Im Zweifelsfall ordnen Sie die Selektoren einfach nach dem Punktesystem für Selektoren in umgekehrter Spezifität: Styles mit einem Punkt zuerst, IDs zuletzt.
======================================= */

/* =======================================
	Farben
	
	Rot: #EF383A
	Gelb: #FFE574
	Braun, hell: #CC6601
	Braun, dunkel: #703634
	Orange: #FDAA60
	
========================================== */

body {
  font-family:Georgia, "Palatino Linotype", "Book Antiqua", Palatino, serif;
  /*font-family: 'IBM Plex Sans', sans-serif;*/
  background-color: #703634;
  background-color: #CC6601;
  color: #FFE574;
}

@media screen and (prefers-reduced-motion: no-preference) {
  html,
  body {
    scroll-behavior: smooth;
  }
}

@media screen and (min-width: 961px){
	h1, h2, h3, .slogan {
		color: #FFE574;
		margin-bottom: 0.0em;
	}
	.slogan {
		margin: 0.8em;
		text-align: center;
	}
	.CenteredText {
		text-align: center;
	}
	h1 {
		line-height:2.0em;
		font-size: 1.6em;
	}
	h2 {
		line-height:1.7em;
		font-size: 1.3em;
	}
	h3 {
		line-height:1.4em;
		font-size: 1.1em;
	}
	p, ul, ol {
		margin-bottom: 0.0em;
	}
	ul.square {
		list-style-type:square;
		margin-left: 2.5em;
	}
	ul.nobullets{
		list-style-type: none;	
	}
	li {
		list-style-position:inside;
	}
	p {
		text-align: justify;
	}
	br {
		
	}
	address {
		margin-top: 0.6em;
		margin-bottom: 0.6em;
	}
}

@media screen and (max-width: 960px){
	h1, h2, h3, .slogan {
		color: #FFE574;
	}
	h1, h2, h3 {
		margin-bottom: 0;
	}
	.slogan {
		margin: 0.4em;
		text-align: center;
	}
	.CenteredText {
		text-align: center;
	}
	h1 {
		line-height:1.6em;
		font-size: 1.4em;
	}
	h2 {
		line-height:1.3em;
		font-size: 1.1em;
	}
	h3 {
		line-height:1.1em;
		font-size: 1em;
	}
	p, ul, ol {
		margin-bottom: 0.0em;
	}
	ul.square {
		list-style-type:square;
		margin-left: 2.5em;
	}
	ul.nobullets{
		list-style-type: none;	
	}
	li {
		list-style-position:inside;
	}
	p {
		text-align: justify;
	}
	br {

	}
	address {
		margin-top: 0.6em;
		margin-bottom: 0.6em;
	}
}

a{
	color: #FFE574;
	text-decoration: none;
	outline: none;
}

a:link{
	font-weight: bold;
}
a:visited{
	color: #FDAA60;
}
a:hover, a:focus{
	text-decoration: underline;
}
a:active
{
	color: #FDAA60;
}

.caption{
	font-family: 'Antic Slab', serif;
}

img.ContentImage{
	max-width:100%;
	height:auto;
	margin-bottom: 1.2em;
}

img.CenteredImage{
	display: block;	
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.2em;
}

.galleryheading{
	margin-top: 1.2em;
}

.galleryrow{
	display: flex;
	flex-direction: row;
	flex-flow: row wrap;
}

.galleryitem{
	border: 0.2em solid #FDAA60; 
	margin: 0.2em;
}

.holidaymessage {
	font-family: 'Amaranth', sans-serif;
	font-size: 1.2em;
	color: #703634;
	background: #FDAA60;
	font-weight: bold;
	padding: 1.2em;
	border: 0.2em solid #CC6601;
	text-align: center;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

.christmasmessage {
	/*
		Rot: #DF1C2A
		Grün: #2F5C40
	*/
	font-family: 'Amaranth', sans-serif;
	font-size: 1.2em;
	color: #FFFFFF;
	background: #DF1C2A;
	font-weight: bold;
	padding: 1.2em;
	border: 0.4em solid #2F5C40;
	text-align: center;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

.newyearmessage {
	/*
	font-family: 'Amaranth', sans-serif;
	font-size: 1.2em;
	color: #ffe574;
	background: #115;
	font-weight: bold;
	padding: 1.2em;
	border: 0.2em solid #ffe574;
	text-align: center;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	*/
}

.marquee {
	width: auto;
	margin: 0 auto;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
	font-size: 1.4em;
	white-space: nowrap;
	overflow: hidden;
	box-sizing: border-box;
}

.marquee span {
  display: inline-block;
  padding-left: 100%;
  font-size: 1.4em;
  will-change: transform;
  /* show the marquee just outside the paragraph */
  animation: marquee 15s linear infinite;
}

/* Make it move */
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-100%, 0);
  }
}

/* Respect user preferences about animations */
@media (prefers-reduced-motion: reduce) {
  .marquee { 
    white-space: normal 
  }
  .marquee span {
    animation: none;
    padding-left: 0;
  }
}


p.warning {
	font-family: 'Amaranth', sans-serif;
	font-size: 1.2em;
	color: #DF1C2A;
	background: #FDAA60;
	font-weight: bold;
	padding: 0.4em;
	border: 0.2em solid #DF1C2A;
	text-align: center;
	margin-top: 1.2em;
	margin-bottom: 1.2em;
}

.kontaktdaten {
	margin-top: 1.4em;
}

.review{
	padding: 0.4em;
	margin-bottom: 1em;
	border: 2px dotted #FDAA60;
}

.slogan{
	font-size:125%;
}




/* =======================================
3. Styles für die Layoutbereiche
Im dritten Abschnitt folgen Selektoren, die nur in einem bestimmten Bereich der Seite gelten.
Die Reihenfolge entspricht dabei der des Auftretens im HTML-Quelltext, von oben nach unten.
Verschachtelte Selektoren, die nur für einen bestimmten Bereich gelten, können Sie dabei leicht einrücken, sodass leicht erkennbar wird, wo der folgende Bereich beginnt.
Im Beispiel-Stylesheet könnte das im Überblick so aussehen, wobei ich das div vor den IDs ab jetzt meist weglasse:
#wrapper { ... }
#kopfbereich { ... }
#kopfbereich p span { ... }
#navibereich { ... }
#textbereich { ... }
#fussbereich { ... }
======================================= */
.grid-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.Header {
  display: flex;
  flex-direction: row;
  height: 120px;
  align-items: center;
  justify-content: center;
  background-color:#CC6601;
  /*
  Farbverlauf
  background: rgb(204,102,1);
  background: linear-gradient(0deg, rgba(204,102,1,1) 0%, rgba(112,54,52,1) 100%);
  */
}

@media screen and (max-width: 960px){
	.Header .LogoContainer {
		flex-grow: 1;
		margin: 0.2em;
	}

	.Header .BrandingContainer {
		flex-grow: 5;
	}

	.Header .Company{
		color: #703634;
		font-size: 2.2em;
	}

	.Navigation {
	  flex: 0 0 35px;
	  justify-content: center;
	}

	.Main {
	  flex: 1 1 auto;
	  display: flex;
	  flex-direction: row;
	}

	.Main .Content {
	  flex: 1 1 auto;
	  overflow: auto;
	  margin-left: 5vw;
	  margin-right: 5vw;
	  margin-top: 2vh;
	  margin-bottom: 2vh;  
	}

	.Main .LeftPane {
	  order: -1;
	  flex: 0 0 100px;
	  overflow: auto;
	}

	.Footer {
	  flex: 0 0 50px;
	  background: #FDAA60;
	  /*
		  margin-left: 5vw;
		  margin-right: 5vw;
	  */
	  margin-top: 2em;
	}
}

@media screen and (min-width: 961px){
	.Header .LogoContainer {
		flex-grow: 1;
		margin: 0.2em;
	}

	.Header .BrandingContainer {
		flex-grow: 5;
	}

	.Header .Company{
		color: #703634;
		font-size: 2.2em;
	}

	.Navigation {
		/*
		flex: 0 0 35px;
		
		justify-content: center;
		*/
		display:flex;
		width:100%;
		background: #FDAA60;
	}

	.Main {
		flex: 1 1 auto;
		display: flex;
		flex-direction: row;
	}

	.Main .Content {
		flex: 1 1 auto;
		overflow: auto;
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
		margin-top: 2vh;
		margin-bottom: 2vh;
		padding-left: 5vw;
		padding-right: 5vw;
	}

	.Main .LeftPane {
		order: -1;
		flex: 0 0 100px;
		overflow: auto;
	}

	.Footer {
		flex: 0 0 50px;
		background: #FDAA60;
		margin-top: 2em;
	}

}



/* =======================================
4. Sonstige Styles
Teil 4 ist im Beispiel-Stylesheet momentan noch leer und fungiert als Platzhalter für alle Selektoren, die in den ersten beiden Abschnitten keinen Platz gefunden haben.
Zum großen Teil sind dies Styles, die nur auf bestimmten Seiten Anwendung finden, wie zum Beispiel das CSS zur Gestaltung eines Kontaktformulars.
======================================= */

.skiplink{
	position: absolute;
	top: -9999px;
	left: -9999px;
	width: 0;
	height: 0;
	font-size: 0;
	line-height: 0;
}


div#GallerySelectList, div#LederkundeSelectList{
	margin-top: 1.6em;
	margin-bottom: 1.2em;
	margin-right: auto;
	margin-left: auto;
	text-align:center;
	
	width: 250px;
}

div#GallerySelectList::before, div#LederkundeSelectList::before{
	content: "\25BC";
	color: #703634;
	pointer-events: none;
	position: relative;
	top: 30px;
	float: right;
}

select {
  /* ... */
  box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.3);
  border-radius: 0px;
  outline: none;
  	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: none;
	-moz-padding-start: calc(10px - 3px);
	width: 100%;
	height: 40px;
	-moz-padding-start: calc(10px - 3px);
	padding-left: 10px;
	background: #FDAA60;
	color: #703634;
	font-size: 16px;
	cursor: pointer;
}

select option {
  color: #666;
}

.bx-wrapper{
	margin-left: auto;
	margin-right: auto;	
}

#menu {
	background: #FDAA60;
	color: #703634;
	height: 35px;
	padding-left: 18px;
	border-radius: 0px;
	border: 0px solid #9C5510;
	
	display:flex;
	margin:auto;
	text-align:center;
}
#menu ul, #menu li {
	background: #FDAA60;
	margin: 0 auto;
	padding: 0;
	list-style: none
}
#menu ul {
	width: 100%;
}
#menu li {
	float: left;
	display: inline;
	position: relative;
}
#menu a {
	background: #FDAA60;
	display: block;
	line-height: 35px;
	padding: 0 14px;
	text-decoration: none;
	color: #703624;
	font-size: 16px;
}
#menu a.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}
#menu li a:hover,
#footermenu li a:hover {
	color: #FDAA60;
	background: #703624;
}

#menu li a.activeMenuItem, #footermenu li a.activeMenuItem {
	color:#FDAA60;
	background-color:#703634;
}

#menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 35px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
#menu label {
	display: none;
	line-height: 33px;
	text-align: center;
	position: absolute;
	left: 35px
}
#menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
#menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 170px;
	background: #FDAA60;
	position: absolute;
	z-index: 99;
	display: none;
}
#menu ul.sub-menus li {
	display: block;
	width: 100%;
}
#menu ul.sub-menus a {
	color: #703624;
	font-size: 16px;
}
#menu li:hover ul.sub-menus {
	display: block
}
#menu ul.sub-menus a:hover{
	background: #703624;
	color: #FDAA60;
}
@media screen and (max-width: 960px){
	#menu {position:relative}
	#menu ul {background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none}
	#menu ul.sub-menus {width:100%;position:static;}
	#menu ul.sub-menus a {padding-left:30px;}
	#menu li {display:block;float:none;width:auto;}
	#menu input, #menu label {position:absolute;top:0;left:0;display:block}
	#menu input {z-index:4}
	#menu input:checked + label {color:#703634}
	#menu input:checked + label:before {content:"\00d7"}
	#menu input:checked ~ ul {display:block}
}

#footermenu {
	background: #FDAA60;
	display: flex;
	align-items: center;
	color: #703634;
	margin: auto;

}

#footermenu ul {
	width: 100%;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}

#footermenu li {
	float: left;
	list-style-type: none;
	line-height: 35px;
	padding: 0 14px;
	text-decoration: none;
	color: #703624;
	font-size: 16px;
	position: relative;
}

#footermenu a {
	background: #FDAA60;
	line-height: 35px;
	padding: 0 14px;
	text-decoration: none;
	color: #703624;
	font-size: 16px;
}

#kontaktformular {
	margin-top: 1.8em;
}



/* Kontaktformular */
.form-container {
  width: 100%;
  max-width: 100%;
}

.form-container * {
  box-sizing: border-box;
}

.flex-outer,
.flex-inner {
  list-style-type: none;
  padding: 0;
}

.flex-outer {
  max-width: 100%;
}

.flex-outer li,
.flex-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.flex-inner {
  padding: 0 8px;
  justify-content: space-between;  
}

.flex-outer > li:not(:last-child) {
  margin-bottom: 20px;
}

.flex-outer li label,
.flex-outer li p {
	font-weight: 300;
	letter-spacing: .09em;
	align-self: flex-start;
}

.flex-outer > li > label,
.flex-outer li p {
  flex: 1 0 120px;
  max-width: 220px;
}

.flex-outer > li.radio > label + *,
.flex-inner {
  flex: unset;
}

.flex-outer > li.datenschutzerklaerung > label + *,
.flex-inner {
  flex: unset;
}

.flex-outer > li > label + *,
.flex-inner {
  flex: 1 0 220px;
}

.flex-outer li p {
  margin: 0;
}

.flex-outer li input:not([type='checkbox']),
.flex-outer li textarea {
  padding: 15px;
  border: none;
}

.flex-outer li button {
  margin-left: auto;
  padding: 8px 16px;
  border: none;
  color: #703624;
  background: #FDAA60;
  letter-spacing: .09em;
}

.flex-inner li {
  width: 100px;
}

span.spacer {
	margin-right: 0.6em;
}
/* Kontaktformular ----------------- */


.SocialMediaButtons {
	margin-top: 2vh;
	margin-bottom: 2vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.shariff .orientation-horizontal{
	flex-wrap: nowrap !important;
}

#addressContainer {
	margin-top: 2vh;
	margin-bottom: 2vh;
	display: flex;
	flex-direction: column;
	text-align: center;
	color:#703634;
}

.pinwand{
	background-color:#EBB76E;
	height:auto;
}

.postitcw{
	float:left;
	margin:25px;
	
	background:#fefabc; 
	padding:15px; 
	font-family: 'Gloria Hallelujah', cursive; 
	font-size:15px; 
	color: #000; 
	width:200px; 

	-moz-transform: rotate(7deg);
	-webkit-transform: rotate(7deg);
	-o-transform: rotate(7deg);
	-ms-transform: rotate(7deg);
	transform: rotate(7deg);

	box-shadow: 0px 4px 6px #333;
	-moz-box-shadow: 0px 4px 6px #333;
	-webkit-box-shadow: 0px 4px 6px #333;
}

.postitcw h1, .postitccw h1{
	color:#F43C3E;
}

.postitccw{
	float:left;
	margin:25px;
	
	background:#fefabc; 
	padding:15px; 
	font-family: 'Gloria Hallelujah', cursive; 
	font-size:15px; 
	color: #000; 
	width:200px; 

	-moz-transform: rotate(-7deg);
	-webkit-transform: rotate(-7deg);
	-o-transform: rotate(-7deg);
	-ms-transform: rotate(-7deg);
	transform: rotate(-7deg);

	box-shadow: 0px 4px 6px #333;
	-moz-box-shadow: 0px 4px 6px #333;
	-webkit-box-shadow: 0px 4px 6px #333;
}

.pin{
	background-color: #aaa;
	display: block;
	height: 32px;
	width: 2px;
	position: absolute;
	left: 50%;
	top: -16px;
	z-index: 1;
}

.pin:before {
  background-color: hsla(0,0%,0%,0.1);
  box-shadow: 0 0 .25em hsla(0,0%,0%,.1);
  content: '';

  height: 24px;
  width: 2px;
  left: 0;
  position: absolute;
  top: 8px;

  transform: rotate(57.5deg);
  -moz-transform: rotate(57.5deg);
  -webkit-transform: rotate(57.5deg);
  -o-transform: rotate(57.5deg);
  -ms-transform: rotate(57.5deg);

  transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
}

.pin:after {
  background-color: #A31;
  background-image: radial-gradient(25% 25%, circle, hsla(0,0%,100%,.3), hsla(0,0%,0%,.3));
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px hsla(0,0%,0%,.1),
              inset 3px 3px 3px hsla(0,0%,100%,.2),
              inset -3px -3px 3px hsla(0,0%,0%,.2),
              23px 20px 3px hsla(0,0%,0%,.15);
  content: '';
  height: 12px;
  left: -5px;
  position: absolute;
  top: -10px;
  width: 12px;
}

.map {
  position: relative;
  overflow: hidden;
  width: 100%;
}


.responsive-iframe {
  /*position: absolute;*/
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  /*height: 100%;*/
}


.back-to-top-link {
  /*`fixed` is fallback when `sticky` not supported*/
  position: fixed;
  /*preferred positioning, requires prefixing for most support, and not supported on Safari @link https://caniuse.com/#search=position%3A%20sticky */
  position: sticky;
  /*reinstate clicks*/
  pointer-events: all;
  /*achieves desired positioning within the viewport
  relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used */
  /* top: calc(100vh - 0rem); */
  left: 20px;
  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #703634;
  /* emoji don't behave like regular fonts so this helped position it correctly */
  padding: 0.25rem;
}
a.back-to-top-link:link, a.back-to-top-link:hover, a.back-to-top-link:focus{
	color: #FFE574;
	text-decoration: none;
}