/* CSS Document */

/* ================= SCHRIFTARTEN HOLEN =============== */
@import "https://fonts.googleapis.com/css?family=Open+Sans|Slabo+27px";

/* ================= STANDARD DEFINITIONEN =============== */
/* Clearfix */
* {
	padding:0px;
	margin:0px;
	box-sizing:border-box;	
}
html,body {
    height:100%;
    min-height:100%;
	padding:0.5rem 1rem;
}
body {
    background:rgba(103,94,94,1.00);
	
	  background-size: cover;
	background-attachment: fixed;
    font-family:"Open Sans", Calibri, Tahoma, sans-serif;
    font-size:1rem;
    color:white;
}
a {
    color:white;
    font-weight:bold;
}

h1, h2, h3, h4, h5{
    font-family:"Slabo 27px", Calbri, Tahoma, sans-serif;
    background:rgba(33,33,33,0.8);
    padding:0.5rem;
    margin:0rem 0rem 0.5rem 0rem;
}

h1{
    font-size:1.8rem;
    border-radius:0.5rem;
	color:greenyellow;

}
h2{
    font-size:1.5rem;
}
h3{
    background:orange;
    font-size:1.6rem;
    margin-bottom:1rem;
}
h4{
    font-size:1.8rem;
	color:white;
}


h5{
	padding:2rem 0.5rem;
	font-size:3rem;
	margin-bottom:1rem;
}

p { 
	display:block;
    padding:1.5rem 0.5rem;
	font-size:1.3rem;
}



hr {
	border-top:none;
	border-bottom:1px dotted white;
	margin:0.4rem 0rem;
}

input, textarea, select {
        background:rgba(222,222,222,0.8);
        border-radius:5px;
        padding:0.5rem;
        font-family:"Open Sans", Calibri, Tahoma, sans-serif;
        font-size:1rem;
        color:black;
        width:80%;
}

ul {
    padding-right:3rem;
}






  nav a{
		border: 5px solid transparent;
		border-radius: 3px;
	    color:white;
	    font-size: 50px;
		padding: 11px 11px;
		text-shadow:5px 5px 5px rgba(33,33,33,0.8);
	    margin:2.5px;
}

.buchinfos{
	display:flex;
	justify-content: space-between;
	
}


.buecherbild{
	height:6rem;
}
.filter{
        border:1px solid black;
}
.filter a{
	text-decoration:none;
	padding:0.5rem;
}

.klein{
	font-size:1.4rem;
	color:darkgoldenrod;
}

/* ================= ELEMENTE STRUKTUR =============== */
header, nav, #container, footer {
	    box-sizing:border-box;
		margin:1rem auto;	
		max-width:1200px;
        border-radius:0.5rem;
        border:1px solid black;
        box-shadow:1px 1px 4px 3px rgba(33,33,33,0.3);
        padding:0.5rem;
}
header  {
    font-size:1.6rem;
	font-weight:bold;
}
header,footer  {
        color:black;
        background:rgba(234,188,135,0.80);
}
nav {
	
}
nav a:link {
	text-decoration: none;
}
nav a:hover {
	text-decoration: underline;
}

#container {
        min-height:70%;
        background:rgba(88,88,88,0.8);
}

div {
	border-top:none;
	/*border-bottom:1px dotted white;*/
	margin:0.4rem 0rem;
}
/* ================= EIGENE KLASSENDEFINITIONEN =============== */
.klein {
    font-size:0.6rem;
}

.rot {
	color:orangered;
}
/* Bilder designen */
/* lieber mit flexbox oder grid arbeiten */
.bildergalerie {
	float:left;
	height:150px;
	margin-right:0.5rem;
	margin-bottom:0.5rem;
}
/* Hack wegen Float */
.clearfix{
	clear:both;
}



/* Fehlermeldung ausgeben */
.fehlermeldung {
	display:block;
	background:red;
	color:yellow;
	margin:1rem 0rem;
	padding:0.5rem;
}


datenschutz{
	box-shadow: 1px 1px 4px 3px rgba(33,33,33,0.3);
}

.zeile{
     display: block;
	 padding:0.5rem;
	 font-size:1.8rem;
}

tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
	margin:1.5rem;
	color:white;
}

table, th, td { 
	border: thin solid;
	font-size:1.2rem;
}
table {
	border-collapse: separate;
    text-indent: initial;
    border-spacing: 2px;
	padding:1rem;
	border-width: thin 0 0 thin;
    margin: 0 0 1rem;
    table-layout: auto;
    max-width: 100%;
	color:greenyellow;
}
th, td {
  font-weight: normal;
  text-align: center;
 
}

.pdf-icon{
  font-size: 20%;
  box-sizing: border-box;
  float:left;
  position: relative;
  width: 6em;
  height: 8.5em;
  background-color: #eee;
  background-image: url('https://i.imgur.com/lZ5SgDE.png');
  background-repeat: no-repeat;
  background-size: 85% auto;
  background-position: center 2em;
  border-radius: 1px 2em 1px 1px;
  border: 1px solid #ddd;
  margin-right:1rem;
   
}
.foto img{
       width: 50%;
        height: auto;
        border: 1px solid #000;; 
}

.object-fit { 
	width: 300px; 
	height: 300px; 
	margin: 4em auto; 
	border:1px solid green;
}
.object-fit img { 
	object-fit: cover; 
	width: 100%; 
	height: 100%;
}