/*stylesheet for index.html NATURPUR CHORIN website
basic styles for all pages
color scheme: background: gainsborow,#c6d9f1,*/
p.color_scheme {
  background-color: midnightblue; /*HEAD*/
  color: #558ed5;
  color: #a70b10;
  font-family: "Berlin";
  font-family: "consolas";

  background-color: #ffffcd;      /*BODY*/
  color: black;
  font-family: "consolas";

  background-color: #99cdff;      /*NAV*/
  color: midnightblue;
  border-color: #a6b6d1;
  font-family: "consolas";
  color: wheat;                   /*not used but also nice*/
}
/*@import url(report_style.css);
***************************************************************************************************************************************-->
***************************************************************************************************************************************-->
***************************************************************************************************************************************-->
***************************************************************************************************************************************-->

/***************************************************
*****  properties for the whoole document  *****
****************************************************/
html {
    scroll-behavior: smooth;
    font-size: clamp(8px,1vw,16px);
    *,
    *::before,
    *::after {
    box-sizing: border-box;
    }
}
/***************************************************
*************  for all visible parts  **************
****************************************************/
main {
  display: grid;
  /**grid-template-columns: 1fr 6fr 1fr;*/
  grid-gap: 2rem;
  margin: 0cm;
  max-width: 100%;
  padding-top: 2rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
  padding-bottom: 1rem;
}
body {
    background-color: #ffffcd;
    color: black;
    display: flex;
    flex-direction: column;
    font-family: "consolas";
    font-weight: 12;
    margin: 0cm;
    min-height: 100vh;
 }
h1, h2, h3, h4, h5, h6, p, ul, ol, blockquote {
    margin-top: 0; /*to avoid collapsing margins*/
}
a {
  color: #558ed5;
}
    /*font-family: "lucida handwriting";*/
h1 {
    font-size: 2.5rem;
    font-family: "Berlin";
    margin: 0;
    margin-block-start: 1rem;
    margin-block-end: 1rem;
    text-align: center;
}
div.buchung p {
  font-weight: bold;
}

/***************************************************
************  properties for the header  ***********
****************************************************/
              
.site_header {
    background-color: midnightblue;
    color: #ffc000;
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    padding: 0rem;
    width: 100%;
  }
header p {                /*Kontakt oben rechts im header*/
  font-size: 1.5rem;
  color: #558ed5;
  text-align: right;
  font-weight: bold;
  font-family: "consolas";
}
header > div {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
.site_header img{         /*Naturpur-Logo*/
    justify-self: center;
    width: 11rem;
    height: auto;
}
.site_header h1 {
    /*for all h1 in the header*/
    justify-self: center;
    padding-top: 1rem;
}
.site_header div.middle {
    justify-content: center;
}
.site_header div.right {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-end;
    padding: 2rem;
}
.site_header div.left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 0.5rem;
}

/***************************************************
*******  properties for the navigation area  *******
****************************************************/

.site_nav {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #99cdff;
    color: midnightblue;
    font-weight: bold;
    margin: 0;
    padding: 0.8rem;
    padding-bottom: 0.5rem;
    max-width: 14vw;
}
.site_nav ul.first_level {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    max-width: 13vw;
}
li.second_level {
    background-color: #99cdff;
    border-width: 2px;
    display: inline;
    grid-column: 2;
    padding-left: 0.4em;
    text-align: center;
    border-color: #a6b6d1;
    border-bottom-style: ridge;
    padding: 0.9rem;
}
.site_nav a, .site_nav_entry {
    color: midnightblue;
    font-size: 1.3rem;
    text-decoration: none;
}
address {               /*Adresse rechter Rand*/
    font-style: normal;
    font-size: 1rem;
    line-height: 120%;
    margin-top: 3rem;
    text-align: center;
}
              
/***************************************************
*********  properties for the sticky menue  ********
****************************************************/

#sticky_menue {
    overflow: hidden;
  }
#sticky_menue ul {
    float: left;
}
  
 /* The sticky class is added to the navbar with JS when it reaches its scroll position */
 .sticky {
    position: fixed;
    top: 0;
   /* width: 100%;*/
}
  
 /* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
/*.sticky + .content {
    padding-top: 60px;
  }*/ 

              
/***************************************************
**************  properties for footer  *************
****************************************************/
.site_footer {
    background-color: midnightblue;
    display: flex;
    justify-content: space-around;
    font-weight: bold;
    padding: 0.1rem;
}
.site_footer p {
    border-right: 1px solid #558ed5;
    color: #558ed5;
    display: inline;
    flex: 1;
    text-align: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}
.site_footer p:last-child {
    border-right: none;
}

@import url(main.css);


div.headline {
	display: flex;
	align-content: center;
	margin-top: 2rem;
}
article div p a {
  color: #558ed5;
}
/***************************************************
************* hidden and disabled objects **********
****************************************************/
/*
.hidden_object{
  position: absolute;
  clip: rect(0 0 0 0);
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  overflow: hidden;
}

li a.disabled_link {
  color: gray;
  cursor: default;
  pointer-events: none;
}
*/
.gallery {
  --size: 10em; /* control the size */
  --gap: 1em;  /* control the gap */
  --zoom: 2;   /* control the scale factor */
  
  display: grid;
  gap: var(--gap);
  grid-template-columns: repeat(4,auto);
  width: calc(4*var(--size) + 3*var(--gap));
  aspect-ratio: 1;

}
.gallery figure {
  margin: 0;
  padding: 0;
  position: relative;
}
.gallery > figure img {
  width: 0;
  height: 0;
  min-height: 100%;
  min-width: 100%;
  object-fit: cover;
  cursor: pointer;
  filter: grayscale(80%);
  transition: .35s linear;
}

.gallery > figure:hover img,
.gallery > figure:focus img{
  filter: grayscale(0);
  width:  calc(var(--size)*var(--zoom));
  height: calc(var(--size)*var(--zoom));
}

.gallery figcaption {
	position: absolute;
  	bottom: 0;
	left: 0;
	text-align: center;
	width: 100%;
  	opacity: 0;
	color: white;
	background: rgb(0 0 0 / 0.3);	
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
  opacity: 1;
}:where