@import url("fonts.css");

/* Seitenhintergrund */
html {
background: #D8C297 url('../images/page.png') fixed;
   background: url('../images/pageglare.png') no-repeat, linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   background: url('../images/pageglare.png') no-repeat, -webkit-linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), -webkit-linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   background: url('../images/pageglare.png') no-repeat, -moz-linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), -moz-linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   background: url('../images/pageglare.png') no-repeat, -o-linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), -o-linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   background: url('../images/pageglare.png') no-repeat, -ms-linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), -ms-linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   background: url('../images/pageglare.png') no-repeat, linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   -svg-background: url('../images/pageglare.png') no-repeat, linear-gradient(top, rgba(220, 201, 163, 0.11) 0, rgba(220, 201, 163, 0.11) 630px, rgba(193, 159, 91, 0.07) 1050px) no-repeat, url('../images/page.png'), linear-gradient(top, #D8C297 0, #D8C297 630px, #C5A667 1050px) no-repeat;
   background-attachment: fixed, fixed, fixed, fixed !important;
}

/* Verweise */
a:link {color: #865A0E; text-decoration: none;}
a:visited {color: #873b2d; text-decoration: none;} 
a:hover {color: #AF7612; text-decoration: none;}

/* Überschriften */
h2, h3 {
  font-weight: normal;
  font-family: 'Tinos', Georgia, 'Times New Roman', Times, Serif;
}
h2 { color: #484619; }
h3 { color: #818141; }

/* Hauptrahmen */
body {
  max-width: 1100px;
  margin: 0 auto;
  background: #EDE9CF;
  margin-top:1.5em;
  box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(134, 90, 14, 0.8);
}

/* Seitenkopf */
div.container-topbar {
  display:flex;
  justify-content: space-between;
  align-items: center;
}

header.container-header {
  background-image: url('../images/header-bg-buchbinder.jpg');
  padding: 0 1em;
  background-size: cover;
}

/* Seitenkopf – Name */
header.container-header #mod-custom114 a.brand-logo h1 {
  text-shadow: 0.7px 0.7px 0px rgba(0, 0, 0, 0.75);
  color: #994433;
  font-family: 'Tinos', Georgia, 'Times New Roman', Times, Serif;
  text-decoration:none;
  font-weight: bold;
  font-size: 2.5rem;
  margin-bottom:0;
}

header.container-header a.brand-logo {
  text-decoration: none;
}

header.container-header .site-description {
  color:#4E4E27;
  font-weight: bold;
}

/* Seitenkopf – Logo */
header.container-header #mod-custom111 {
padding: 1em 0;
}

header.container-header #mod-custom111 img {
opacity: 85%;
}

/* Inhaltsbereich – Hintergrund */
main {
  background-color:#EDE9CF;
}

/* Inhaltsbereich – Container */
div.container-component main {
  margin-top:0;
}

/* Inhaltsbereich – Flex-Ausrichtung – Spalten */
div.articleflexcontainer, div.contactflexcontainer  {
  display: flex;
}

div.articleflexcontainer div.com-content-article__body {
  flex-grow: 2;
}

/* Inhaltsbereich – Galerie */
div.articleflexcontainer div.sigplus-gallery ul {
display: flex;
justify-content: space-between;
flex-flow: row wrap;
align-content: space-evenly;
max-width: 420px;
}

div.articleflexcontainer div.fields-container {
flex-shrink: 0;
}

div.articleflexcontainer div.sigplus-gallery ul li {
margin-left: 1em;
margin-bottom: 1em;
}


/* Seite Anfahrt */
body.itemid-113 div.articleflexcontainer {
display: block;
}

/* Hauptnavigation – horizontales Menü – Hintergrund */
div.horznavmo {
  border:0px;
  background: #994433;
  background: linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
  background: -webkit-linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
  background: -moz-linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
  background: -o-linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
  background: -ms-linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
  background: linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
  -svg-background: linear-gradient(top, #863B2D 0, #A84B38 40%, #A84B38 50%, #A84B38 60%, #863B2D 100%) no-repeat;
}

/* Hauptnavigation – Abstände */
div.container-component>div.horznavmo {
  margin-top: 0;
  border-radius: unset;
}

div.horznavmo>div.card-body {padding:0;}

div.container-component>div.horznavmo nav.navbar {
  padding-top:0;
  padding-bottom:0;
}

/* Hauptnavigation – Menüpunkte – Schaltflächen */
.horznavmo nav a {
  color: #E6E4B7;
}

nav.navbar ul.menu-horizontal li.current, div.horznavmo nav.navbar ul.menu-horizontal li.metismenu-item:hover {
  background: #CCCC99;
  background: linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
  background: -webkit-linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
  background: -moz-linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
  background: -o-linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
  background: -ms-linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
  background: linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
  -svg-background: linear-gradient(top, #D9D9B4 0, #BEBE7E 100%) no-repeat;
}

nav.navbar ul.menu-horizontal li.metismenu-item.current > a, nav.navbar ul.menu-horizontal li.metismenu-item:hover > a {
  color:#000000;
  text-decoration: none;
}

/* Hauptnavigation – Hamburger-Icon */
button.navbar-toggler {
  color: #E6E4B7;
  margin: 10px auto;
  font-size: 2em;
}

button.navbar-toggler::before {
	content:"☛\a0\a0";
}

button.navbar-toggler::after {
	content:"\a0\a0☚";
}

body>div.site-grid {
  grid-gap: 0 0em;
}

main>div.com-contact, main>div.com-content-article {
  padding:1em;
}

/* Fusszeile */
footer.container-footer {
  background: rgba(220, 220, 188, 0.8) url('../images/footer-bg-buchbinder.png') scroll;
  color:#2A290F;
  margin-top: 0;
}

footer.container-footer>div.grid-child {padding:0.5em;}

footer div#mod-custom110 {
  margin:0 auto;
  text-align:center;
}

footer p {
  margin-bottom:0;
  font-size: small;
}

/* Einzelne Klassen bzw. Elemente */
.karte {width: 100%;}

a#kontaktbutton, form#contact-form button {
  background-color: #994433;
  color: #E6E4B7;
}

a#kontaktbutton a {
  color: #E6E4B7;
}

div.beitragsbild {
margin-left: 1em;
}

div#bild-tradition {
  border: 1px solid #ddd;
  background-color: #f3f3f3;
  width:390px;
}

div#bild-tradition p.caption-text {
 text-align: center;
 margin-bottom: 0;
 padding: 0.25em;
}

input.form-check-input:checked {
  background-color: #027302;
  border-color: #555;
  padding:0.5em;
}

body.itemid-112 div.control-group:nth-last-of-type(2) div.controls p {
  display:none;
}

/* Responsive Code */

@media (max-width: 991px) and (min-width: 768px) {
	
nav.navbar div#navbar1 ul {
	display:flex;
	justify-content: space-between;
	flex-direction: row;
	align-items: stretch;
}
}

@media (max-width: 828px) and (min-width: 600px) {
	
div.beitragsbild, div#bild-tradition {
	width: 280px;
}
}

@media (max-width: 767px) {
div.articleflexcontainer div.sigplus-gallery ul {
	flex-flow: column wrap;
}
}

@media (max-width: 599px) {
div.articleflexcontainer, div.contactflexcontainer {
	flex-flow: column wrap;
}

div.articleflexcontainer div.sigplus-gallery ul {
	max-width: inherit;
}

div.beitragsbild {
	margin: 0 auto;
}
}

@media (max-width: 460px) { 
div.beitragsbild, div#bild-tradition {
  width: fit-content;
}
}