/* TODO css überarbeiten */
/* ----------------STEINBAUM-GRUNDFARBEN----------------------- */
:root {
  --color-1: #5c821a;	/* plants */
  --color-2: #86ac41; 	/* new grass */
  --color-3: #2e4600; 	/* forest green */
  --color-4: #aebd38;	/* moss */
  --color-5: #ffffff; /* weiss */
  --color-6: #000000; /* schwarz */
  --color-7: #ddd;    /* grau */
  --color-8: #f2f2f2;  /* hellgrau */

  --color-a: #68829e;  /* #68829e; waterfall */
  --color-b: #505160; /* #505160; thundercloud */
  --color-c: #7d4427;   /* #7d4427; earth	*/
  
  --color-v:  #0f1b07; /* #0f1b07;	deep green */
  --color-w:  #c6d166; /* #c6d166; new growth	*/
  --color-x:  #598234; /* #598234;	meadow*/
  --color-y:  #486b00; /* #486b00;	grass	*/
  --color-z:  #a2c523; /* #a2c523; lime	 	*/
}

/* -----------------GRUNDEINSTELLUNGEN------------ */
* {
  box-sizing: border-box;
  font-family: Verdana, Helvetica, Arial, sans-serif;
  font-size: small;
}
body {
  margin: 0;
}
form {        /* damit Formularteile nebeneinander stehen! */
  display: inline;
}

/* class floatleft/floatright/right wird (u.a.) gebraucht für die Gedicht-Navigation */
.floatleft { float: left; }
.floatright { float: right; }
.right { text-align: right; }

.textlarger{font-size: larger;}
.textsmaller{font-size: smaller;}
.textxxlarge{font-size: xx-large;}
/* .textklein { font-size: 9px; } */
/* .textgross { font-size: 12px;} */

.kontaktlink{text-decoration: none;} 


/*--------überprüfen und allenfalls überarbeiten---------*/
.adminlink::before{content:'⚿'}    /* edit: ✎🖫 NULL: ∅ 🚪*/
.extlink::before{content:''}       /*⇗ 🔗🖇 */
.farblink::before{content:'🌈🎨'}
.gallerielink::before{content:'📷'}  /* 📷📸 🖻 🖼 🖽 🖾 */
.maillink::before{content:'✉'}     /* 📧 */
.statuslink::before{content:'🔖'}  /* 🏷 verkauft:💰 verschenkt:🎁  ✘ 🚥 🚦 🟠 🟡	🟢 🟣 🟤☑	☒ 🛑 ✅❌✘❎*/
.steinlink::before{content:'♢'}
.suchlink::before{content:'🔍'}    /* ⌕⍰⯑ */
.werklink::before{content:'♧'}     /* № 🌱🌲🌳🌴 */

.extlink{color: var(--color-6)}
.maillink{color: var(--color-3)}
.steinlink{color: var(--color-1)}
.werklink{color: var(--color-1)}

/*----------------*/





/* -----------------SEITEN-HEADER------------------------------- */
body>header {
  display: flex;
  align-items: center;
  padding: 15px 10px 5px 10px;
  height: 80px;
  background-color: var(--color-1);
  color: var(--color-3);
  font-size: 23px;
}
body>header>a { 
  display: flex;
  float: left;
  align-items: center;
  padding: 12px;
  line-height: 25px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--color-6);
  font-size: 25px;
}
body>header>a:hover { 
  background-color: var(--color-2);
}
body>header>a.logo>img {
    height: 40px;
    width: auto;
}

/* -------------------NAVIGATION---------------------------------*/
body>nav {
  height: 50px;
  justify-content: center;
  background-color: var(--color-3);
}
body>nav ul {           /*Strip the ul of padding and list styling*/
  list-style-type:none;
  margin:0;
  padding:0;
  position: absolute;
}
body>nav>ul>li {            /*Create a horizontal list with spacing*/
  display:inline-block;
  float: left;
  margin-right: 1px;
}
body>nav>ul li>a {          /*Style for menu links*/
  display:block;
  z-index: 100;
  position: relative;
  min-width:140px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  background: var(--color-3);
  color: var(--color-5);
  text-decoration: none;
}
body>nav>ul>li:hover>a {    /*Hover state for top level links*/
  background: var(--color-4);
  color: var(--color-6);
}
body>nav>ul>li:hover>ul>li>a { /*Style for dropdown links*/
  height: 40px;
  line-height: 40px;
  text-align:left;
  background: var(--color-4);
  color: var(--color-6);
}
body>nav>ul>li:hover>ul>li>a:hover { /*Hover state for dropdown links*/
  background: var(--color-7);
  color: var(--color-6);
}
body>nav>ul>li>ul {         /*Hide dropdown links until they are needed*/
  display: none;
}
body>nav>ul>li>ul>li {      /*Make dropdown links vertical*/
  display: block;
  float: none;
}
body>nav>ul>li>ul>li>a {    /*Prevent text wrapping*/
  width: auto;
  min-width: 140px;
  padding: 0 20px;
  white-space: nowrap;
}
body>nav>ul>li a:hover + .hidden, body>nav .hidden:hover { /*Display the dropdown on hover*/
  display: block;
}
body>nav>.show-menu {    /*Style 'show menu' label button and hide it by default*/
  text-decoration: none;
  color: var(--color-5);
  background: var(--color-1);
  text-align: center;
  padding: 10px 0;
  display: none;
  cursor: pointer;
}
body>nav>input[type=checkbox]{ /*Hide checkbox*/
  display: none;
}
body>nav>input[type=checkbox]:checked ~ #menu{ /*Show menu when invisible checkbox is checked*/
  display: block;
}
@media screen and (max-width: 760px){  /*Responsive Styles*/
  body>nav ul {  /*Make dropdown links appear inline*/
      position: static;
      display: none;
  }
  body>nav li {  /*Create vertical spacing*/
      margin-bottom: 1px;
  }
  body>nav ul>li, body>nav li a {  /*Make all menu links full width*/
      width: 100%;
  }
  body>nav>.show-menu {  /*Display 'show menu' link*/
      display:block;
  }
}
/* --------------------SEITEN-FOOTER--------------------------- */
body>footer {
  background-color: var(--color-1);
  padding: 10px;
}
body>footer a {
  color: var(--color-3);
  padding: 12px;
}
body>footer>div.footer-right {
  float: right;
}

/* --------------------ARTIKEL------------------------ */
article {               /* Artikel-Grundstyle */
    clear: left;
    padding-left: 20px;
    padding-right: 10px;
    background-color: var(--color-5);
}
@media screen and (max-width: 760px){  /*Responsive Styles*/
  article {               /* Artikel-Grundstyle */
    padding-left: 10px;
    padding-right: 10px;
  }
  article .content {      /* Artikel-Inhalt-Grundstyle */
    display: block;
    padding-top: 10px;
  }
}
article>header {        /* Artikel-Header */
    display:block;
    background-color: var(--color-5);
    padding: 0px;
    height: auto;
}
article header h1 {     /* Artikel-Header H1 */
    color: var(--color-1);
    padding: 0px;
}
article header img {    /* Artikel-Header IMG */ /* wird das irgendwo benutzt? */
    margin-left: auto;
    margin-right: auto;
    width: 50%;
    border-radius: 0%;
    float: left;
    padding-right: 10px;
}
article .content {      /* Artikel-Inhalt-Grundstyle */
    display: block;
    padding-top: 10px;
}
article a {
    color: var(--color-3);
}
article h1,h2,h3 {
    color: var(--color-1);
}
article h4 {
    color: var(--color-3);
}
article>footer {
  clear: both;
  text-align: right;
  font-size: smaller;
  background-color: var(--color-5);
  padding: 0px;
}
article>footer a {
  color: var(--color-1);
  padding: 0px;
}

/* ---------- Tafel-Layout (steinbaum.php; 1 Werk, horizontal/vertikal anpassend) ------------------------- */
.tafel {
  display: flex;
  padding: 10px;
  margin: auto;
  margin-bottom: 10px;
  width: 85%; 
  background-color: var(--color-5);
  border: 1px solid #f1f1f1;
  border-radius: 5px; /* 5px rounded corners */
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
}
.tafel .tafel-bild {
  flex-shrink: 0;
  flex-basis: 40%
}
.tafel-bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
}
.tafel h1 {
  margin: 0;
  margin-bottom: 20px;
  color: var(--color-3);
}
.tafel p {
  color: var(--color-6);
  display: inline;
}
.tafel-text{
  margin-left: 20px;
  /*padding: 2px 16px;*/
  position: relative;
  width: inherit;
}
.tafel-schild{
  flex-wrap: wrap;
  position: absolute;
  bottom: 0;
  background-color: var(--color-8);
  border: 1px solid #f1f1f1;
  border-radius: 5px; /* 5px rounded corners */
  padding: 5px;
}
.tafel-wertung{
  position: relative;
  padding: 5px;
}
.checked {
  /* color: orange; */
  color: var(--color-4);
  font-size: larger;
}
.tafel-wertung select, 
.tafel-wertung input.button {
  background-color:var(--color-2);
  border-radius: 5px;
  padding: 8px 12px;
  cursor: pointer;
  color: var(--color-6);
  outline-style: outset; 
  outline-color: var(--color-1);
  outline-width: medium;
  border-width: 0px;
  border-color: var(--color-3);
}
.tafel-wertung select:hover,
.tafel-wertung select:focus,
.tafel-wertung select:active {
  background-color: var(--color-1);
  color: var(--color-5);
}
.tafel-wertung option {
  background-color: var(--color-4);
  color: var(--color-3);
}
@media screen and (max-width: 760px) {
  .tafel {
    flex-direction: column;
  }
  .tafel-text {
    margin-left: 0;
    position:unset;
    width: auto;
  }
  .tafel-schild{
    position: unset;
  }
}

/* ---------- Card-Layout (Quadratisch, verlinkt; mehrere Werke pro Page ------------------------- */
 .card {
  background-color: transparent;
  width: 150px;
  height: 150px;
  border: 1px solid #f1f1f1;
  border-radius: 5px; 
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  padding: 8px;
  margin: 8px;
}
.card:hover {
  box-shadow: 0 4px 8px 0 rgba(94, 114, 21,0.9);
}
.card-unhover:hover{
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
}
.card img {      
  border-radius: 5px ;
  max-width: 100%;
}
/* ---------- Card-Layout (Startseite,...) ------------------------- */
.card-img {
  background-color: transparent;
  width: 250px;
  height: 250px;
  border: 1px solid #f1f1f1;
  border-radius: 5px; 
  float: left;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); 
  padding: 8px;
  /* margin: auto; */
  margin-right: 13px;
  margin-bottom: 13px;
  clear: left;
}
.card-img img {      
  border-radius: 5px ;
  max-width: 100%;
}

/* ---------- Zitat-Layout------------------------- */
.zitatmappe{ /* ganzer Zitatbehälter; gesamte Hintergrundfarbe,... */
	color: var(--color-5);
	width:100%;
  overflow: auto;
	max-width:680px;
	min-height:390px;
	margin:20px auto 50px;;
	position:relative;
	box-shadow:0 16px 28px 0 rgba(0,0,0,.22),0 25px 55px 0 rgba(0,0,0,.21);
  border-radius: 10px; /* Xpx rounded corners */
}
.fotozitat{  /* Zitat&Foto-Behälter */
	display:block;
  top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
}
/* Foto-Bereich */
.foto-bereich{ /* breite und positionierung*/
	height:100%;
	position:relative;
  /* width:140px; */
  width:160px;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	quotes:'\201C''\201D''\2018''\2019';
  margin-right: 15px;
}
.foto-bereich:before{  /* überlagert foto mit transparenter farbe */
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
  content:'';            
	background:rgba(92,130,26,.5);
}
.foto-bereich:after{   /* das Anführungszeichen überlagert auf dem Foto*/
	top:15px;
	left:60px;
	font-size:72px;
	line-height:72px;
	position:absolute;
	font-family:serif;
	content:open-quote;
}
/* Zitat-Navigations-Behälter */
.zitat-nav{
	left:15px;
	z-index:10;
	right:15px;
	bottom:15px;
	position:absolute;
	text-align:center;
  border: none;
  background-color: transparent;
}
.zitat-nav input[type=submit],.zitat-nav a{
	width:20px;
	height:35px;
	cursor:pointer;
	position:relative;
	display:inline-block;
  border: none;
  background-color: transparent;
  color: var(--color-5);
  font-size: x-large;
  font-weight: bolder;
  text-decoration: none;
}
.zitat-nav input[type=submit]:hover,
.zitat-nav a:hover{
  color: var(--color-3);
}
/* den "previous-Link" positionieren */
 .zitat-nav input[type=submit].left{
	left:-30px;
}
/* den "next-Link" positionieren */
 .zitat-nav input[type=submit].right{
	right:-30px;
}
/* Zitat-Bereich */
.zitat-bereich{ 
	height:100%;
	position:relative;
  display: contents;
  padding:15px;
  width:calc(680px - 160px);
}
blockquote {  /* blockquote-aussehen */
  margin-left:0px;
  margin-right:0px;
  color: var(--color-3);
}
.zitat-autor{ /* Autorangaben-style*/
	bottom:15px;
	position:absolute;
  right: 30px;
  font-style: italic;
  color: var(--color-1);
}
/* ---------- Suchnav-Layout ------------------------- */
.suchnav {             
	margin: 2px; 
	padding:5px; 
	border: solid thin var(--color-3); 
	background-color: var(--color-4);
	white-space:nowrap;
}

/* ---------- Buttons-Layout------------------------- */
/* Button-1 für: Auswahl/Such-Dropdowns,... */
.button-1 {
  background-color:var(--color-2);
  border-radius: 5px;
  padding: 12px 16px;
  cursor: pointer;
  color: var(--color-6);
  outline-style: outset; /* outline-style: outset; */
  outline-color: var(--color-1);
  outline-width: medium;
  border-width: 0px;
  border-color: var(--color-3);
}
.button-1.back{ /* für Back-Buttons*/
  margin-bottom: 10px;
  float: left;
}
.button-1:hover,
.button-1:focus {
  background-color: var(--color-1);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
  color: var(--color-5);
}
.button-1:active {
  background-color: var(--color-4);
  color: var(--color-6);
  border-color: rgba(0, 0, 0, 0.15);
  box-shadow: rgba(0, 0, 0, 0.06) 0 2px 4px;
}
.button-1.aktiv {
  background-color: var(--color-1);
  color: var(--color-5);
}
#myInput {
    box-sizing: border-box;
    font-size: 16px;
    padding: 14px 20px 12px 45px;
    border: none;
    border-bottom: 1px solid var(--color-7);
  }
#myInput:focus {outline: 3px solid var(--color-7);}
  .dropdown { /* The container <div> - needed to position the dropdown content */
    position: relative;
    display: inline-block;
    text-align: left;
  }
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--color-4);
    min-width: 230px;
    border: 1px solid var(--color-7);
    z-index: 1;
    border-radius: 5px;
    border-color: var(--color-1);
  }
  .dropdown-content a {
    color: var(--color-6);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    border-radius: 5px;
  }
.dropdown-content a:hover {background-color:var(--color-7);}

/*--- Filter-buttons etc ----------------------------------------*/
.filtered-container {
  overflow: hidden; 
}
.filterDiv {
  float: left;
  display: none; /* Hidden by default */
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
/* The "show" class is added to the filtered elements */
.show {
display: block;
}
 /* Style the buttons */
.button-filter {
background-color:var(--color-2);
border-radius: 5px;
padding: 10px 14px;
cursor: pointer;
color: var(--color-6);
outline-style: outset; 
outline-color: var(--color-1);
outline-width: medium;
border-width: 0px; 
border-color: var(--color-3);
margin-right: 2px;
margin-bottom: 1px;
}
.button-filter:hover {
background-color: var(--color-1);
}
.button-filter.active {
background-color: var(--color-1);
color: white;
}
/* ----------------- Kontaktformular --------------------------- */
form.kontakt { max-width:420px; margin:50px auto; }
form.kontakt .kontakt-input {
  color:black;
  border-radius: 5px;
  background-color: transparent;
  border:2px solid var(--color-1);
  transition: all 0.3s;
  padding: 10px;
  margin-bottom: 10px;
  width:100%;
  box-sizing: border-box;
  outline:0;
}
form.kontakt .kontakt-input:focus { border:2px solid var(--color-4); }
form.kontakt textarea.kontakt-input {
  height: 150px;
  line-height: 150%;
  resize:vertical;
}
form.kontakt [type="submit"] {
  width: 100%;
}
/* ----------------------------------------------------------------- */