/* CSS Document */
body { text-align:left; margin-left:10px; margin-right:35px; font-family: arial, helvetica, clean, sans-serif; }
h1 { font-size:130%; color:#cc3300;}
h2 { font-size:110%; color:#8b0000;}
h3,h4,h5 {margin-top:6px; margin-bottom:2px; }
h3 { color:#cc3300;}
h4 { font-size:100%; color:#8b0000;}
a { color:blue; text-decoration:underline; }
a:visited { color:blue; text-decoration:underline; }
em { font-style:normal; font-weight:normal; }
strong, th { font-weight: bold; }
p, .links {font-size:85%; margin-top:3px; }
.balken { width:660px; height:20px; margin-top:10px; margin-bottom:5px; padding-left:5px; color: #ffffff; background-color: #671018; font-size: 12px; font-weight: bold; }
.checkboxes     { align:left; margin-left:10px; margin-top:4px; height:16px; font-size:11px; }
.buttons        { align:left; margin-left:12px; width:120px; height: 20px; font-size: 12px; }
.align-center   { align:center; text-align:center; }
.musica { background-color:rgb(218,247,166); }
.musicb { background-color:rgb(255,165,0); }
.farbverlauf { background: linear-gradient(to right, beige, brown); }
.versteckt { color:rgba(110,110,110); background: linear-gradient(to right, rgba(187,187,187), rgba(160,160,160)); } 
.zeitleiste { background: linear-gradient(to right, #E9A33C, #CE5C00); border-top: 1px solid grey; border-bottom: 1px solid grey; text-align:center; font-size:75%; margin-top:3px; }

.zeitleiste { background: linear-gradient(to right, #E9A33C, #CE5C00); border-top: 1px solid grey; border-bottom: 1px solid grey; width:400px;  text-align:center; font-color:white; font-size:75%; margin-top:3px; }
audio { style="width:400px"; height: 20px; display: block; margin:10px; color:#8b0000;controls volume="0.1"}

#zaehler { 
  position: relative; 
 top: 300px;
  left: 50px;
}	


.familie-6x6 {
  display: grid;
  grid-template-columns: repeat(6);
  grid-gap: 15px;
  grid-auto-rows: minmax(50px, auto);
}

.z2 {
  grid-column: 1;
  grid-row: 1;
  border: gray 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.z3 {
  grid-column: 3;
  grid-row: 1;
  border: grey 1px solid; 
  background-color: darkkhaki;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}

.z5 {
  grid-column: 5;
  grid-row: 1;
  border: grey 1px solid;
  background-color: darkseagreen;
  grid-column-start: 4;
  grid-column-end: 7;
  padding: 8px;
}

.z7 {
  grid-column: 1;
  grid-row: 2;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: gold;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.z10 {
  grid-column: 4;
  grid-row: 2;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: lavender;
  grid-column-start: 2;
  grid-column-end: 5;
  padding: 8px;
}

.z14 {
  grid-column: 2;
  grid-row: 3;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: wheat;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.z17 {
  grid-column: 5;
  grid-row: 3;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: wheat;  
  grid-column-start: 2;
  grid-column-end: 5;
  padding: 8px;
}
.z19 {
  grid-column: 1;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: paleturquoise; 
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.z21 {
  grid-column: 3;
  grid-row: 4;
  column-gap: 50px;
  border: green 1px solid;
  background-color: tan; 
  grid-column-start: 2;
  grid-column-end: 5;
  padding: 8px;
}
.z25 {
  grid-column: 1;
  grid-row: 5;
  border: grey 1px solid;
  background-color: wheat; 
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.z28 {
  grid-column: 4;
  grid-row: 5;
  border: grey 1px solid;
  background-color: paleturquoise; 
  grid-column-start: 2;
  grid-column-end: 5;
  padding: 8px;
}
.z31 {
  grid-column: 1;
  grid-row: 6;
  border: grey 1px solid;
  background-color: lavender; 
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.z33 {
  grid-column: 3;
  grid-row: 6;
  border: grey 1px solid;
  background-color: darkkhaki; 
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}
.z35 {
  grid-column: 5;
  grid-row: 6;
  border: grey 1px solid;
  background-color: wheat; 
  grid-column-start: 4;
  grid-column-end: 5;
  padding: 8px;
}

.tiere {
  display: grid;
  grid-template-columns: repeat(3);
  grid-gap: 15px;
  grid-auto-rows: minmax(50px, auto);
}

.u1 {
  grid-column: 1;
  grid-row: 1;
  border: gray 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.u4 {
  grid-column: 1;
  grid-row: 2;
  border: black 1px solid; 
  background-color: darkkhaki;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}

.u7 {
  grid-column: 1;
  grid-row: 3;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: gold;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.u10 {
  grid-column: 1;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: red;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}


.u11 {
  grid-column: 2;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: darkkhaki;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.u12 {
  grid-column: 3;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: gold;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}

.u13 {
  grid-column: 3;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: red;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.u14 {
  grid-column: 3;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: green;
  grid-column-start: 3;
  grid-column-end: 3;
  padding: 8px;
}

.fahrzeuge {
  display: grid;
  grid-template-columns: repeat(3);
  grid-gap: 15px;
  grid-auto-rows: minmax(50px, auto);
}

.fz2 {
  grid-column: 1;
  grid-row: 1;
  border: black 1px solid;
  background-color: paleturquoise;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fz3 {
  grid-column: 2;
  grid-row: 1;
  border: gray 1px solid;
  background-color:beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fz4 {
  grid-column: 1;
  grid-row: 2;
  border: black 1px solid; 
  background-color: lavender;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fz5 {
  grid-column: 2;
  grid-row: 2;
  border: black 1px solid; 
  background-color: paletur;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fz6 {
  grid-column: 1;
  grid-row: 3;
  border: black 1px solid; 
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fz7 {
  grid-column: 2;
  grid-row: 3;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fz10 {
  grid-column: 1;
  grid-row: 4;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fz11 {
  grid-column: 2;
  grid-row: 4;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fz13 {
  grid-column: 1;
  grid-row: 5;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fotografie {
  display: grid;
  grid-template-columns: repeat(3);
  grid-gap: 15px;
  grid-auto-rows: minmax(50px, auto);
}

.fo2 {
  grid-column: 1;
  grid-row: 1;
  border: black 1px solid;
  background-color: paleturquoise;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fo3 {
  grid-column: 2;
  grid-row: 1;
  border: gray 1px solid;
  background-color:beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fo4 {
  grid-column: 1;
  grid-row: 2;
  border: black 1px solid; 
  background-color: lavender;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fo5 {
  grid-column: 2;
  grid-row: 2;
  border: black 1px solid; 
  background-color: paletur;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fo6 {
  grid-column: 1;
  grid-row: 3;
  border: black 1px solid; 
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fo7 {
  grid-column: 2;
  grid-row: 3;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fo8 {
  grid-column: 1;
  grid-row: 4;
  border: black 1px solid; 
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fo9 {
  grid-column: 2;
  grid-row: 4;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fo10 {
  grid-column: 1;
  grid-row: 4;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.fo11 {
  grid-column: 2;
  grid-row: 4;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 2;
  grid-column-end: 3;
  padding: 8px;
}

.fo13 {
  grid-column: 1;
  grid-row: 5;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.unternehmungen {
  display: grid;
  grid-template-columns: repeat(6);
  grid-gap: 15px;
  grid-auto-rows: minmax(50px, auto);
}

.u2 {
  grid-column: 2;
  grid-row: 1;
  border: gray 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}
.u4 {
  grid-column: 4;
  grid-row: 1;
  border: black 1px solid; 
  background-color: darkkhaki;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}
.u7 {
  grid-column: 1;
  grid-row: 2;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: gold;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.u10 {
  grid-column: 4;
  grid-row: 2;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: lavender;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}
.u13 {
  grid-column: 1;
  grid-row: 3;
  column-gap: 25px;
  border: grey 1px solid;
  background-color: paleturquoise;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.u16 {
  grid-column: 4;
  grid-row: 3;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: lavender;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}

.u18 {
  grid-column: 1;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 1;
  grid-column-end: 2;
  padding: 8px;
}

.u21 {
  grid-column: 2;
  grid-row: 4;
  column-gap: 50px;
  border: grey 1px solid;
  background-color: beige;
  grid-column-start: 2;
  grid-column-end: 4;
  padding: 8px;
}

.grid {
   display: table;
   padding-left:10px;
   padding-right:50px;
   padding-bottom:25px;
   max-width: 1300px;
   width: 30%
   margin:0 auto;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(6);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 2;
  grid-row: 1;
  border: grey 1px solid;
}
.two { 
  grid-column: 3 / 4;
  grid-row: 1;
  border: grey 1px solid;
}
.three {
  grid-column: 5 / 6;
  grid-row: 1;
  border: grey 1px solid;
}
.four {
  grid-column: 2 / 5;
  grid-row: 2;
  border: blue 1px solid;
}
.five {
  grid-column: 1 / 3;
  grid-row: 3;
  border: grey 1px solid;
}
.six {
  grid-column: 4 / 6;
  grid-row: 3;
  border: grey 1px solid;
}

.familie {
  display: grid;
  grid-template-columns: repeat(13);
  grid-gap: 15px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1;
  grid-row: 1;
  border: grey 1px solid;
}
.two { 
  grid-column: 2;
  grid-row: 1;
  border: grey 1px solid;
}
.three {
  grid-column: 3;
  grid-row: 1;
  border: grey 1px solid;
}
.four {
  grid-column: 1;
  grid-row: 2;
  border: blue 1px solid;
}
.five {
  grid-column: 2;
  grid-row: 2;
  border: grey 0px solid;
}
.six {
  grid-column: 3;
  grid-row: 2;
  border: grey 1px solid;
  }
.seven {
  grid-column: 1;
  grid-row: 3;
  border: grey 1px solid;
  align-items: center
}
.eight {
  grid-column: 1;
  grid-row: 4;
  border: grey 1px solid;
}
.nine{
  grid-column: 2;
  grid-row: 4;
  border: grey 1px solid;
}
.ten {
  grid-column: 3;
  grid-row: 4;
  border: grey 1px solid;
}
.eleven {
  grid-column: 1;
  grid-row: 5;
  border: grey 1px solid;
}
.twelve {
  grid-column: 2;
  grid-row: 5;
  border: grey 1px solid;
}
.thirteen {
  grid-column: 3;
  grid-row: 5;
  border: grey 1px solid;
}