* { 
  box-sizing: border-box; 
  margin: 0;
  padding: 0;
}

body { 
  font-family: sans-serif; 
  background-color: #ddd;

}


#wrapper {
  margin: 0 auto;
  max-width: 980px;
}

@media only screen and ( max-width: 980px ) {
  max-width: 100%;
}

/* ---- grid ---- */

.grid {
  /*background: #EEE;*/
  max-width: 980px;
}

/* clearfix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ---- grid-item ---- */

.grid-item {
  width: 235px;
  height: 230px;
  float: left;
  background: black;
  color: white;
  /*padding: 10px;*/
  font-size: 1.4em;
  font-weight: bold;
  /*border: 1px solid #333;*/
  /*border-color: hsla(0, 0%, 0%, 0.5);*/
}

.grid-item--width2 { width: 310px; }
.grid-item--width3 { width: 480px; }
.grid-item--width4 { width: 640px; }

.grid-item--height2 { height: 200px; }
.grid-item--height3 { height: 260px; }
.grid-item--height4 { height: 470px; }

.grid-item {
  margin-bottom: 10px;
}


#k03 {
/*  background-image: url(bilder/katerchen.jpg);
  background-size: cover;*/
}

#k02 .bild,
#k05 .bild,
#k07 .bild,
#k08 .bild 
{
  width: 235px;
}

#k13 .bild 
{
  width: 480px;

}


#k02 .bildbereich:hover .bild,
#k03 .bildbereich:hover .bild,
#k05 .bildbereich:hover .bild,
#k07 .bildbereich:hover .bild,
#k08 .bildbereich:hover .bild,
#k09 .bildbereich:hover .bild, 
#k11 .bildbereich:hover .bild, 
#k13 .bildbereich:hover .bild, 
#k14 .bildbereich:hover .bild, 
#k16 .bildbereich:hover .bild 
{
  -webkit-transform:scale(1.2);
  transform:scale(1.2);
}


.grid-item {
  overflow:hidden;
}

.bildbereich {
  overflow:hidden;
/*  width: 235px;
  height: 235px;  
*/

/*  width: 650px;
  height: 340px;
*/
  width: 100%;
  height: auto;
}


#k02 .bild,
#k03 .bild,
#k05 .bild,
#k07 .bild, 
#k08 .bild, 
#k09 .bild, 
#k11 .bild,
#k13 .bild,
#k14 .bild,
#k16 .bild 
{
  width: 100%;
  height: auto;

  -webkit-transition: all 0.9s ease;
  transition: all 0.9s ease;
}


/* 6 10 12 15 17 */
#k01 p,
#k04 p,
#k06 p, 
#k10 p,
#k12 p, 
#k15 p,
#k17 p
{
  display: inline-block;
  text-align: right;
  margin: 20px;
  width: 82% !important;
  /*background-color: #333;*/

  width: 100%;
  height: 180px;
  -webkit-transition: all 0.8s ease;
  transition: all 0.8s ease;

    -webkit-transform-origin: 92% 18px;
    -moz-transform-origin: 92% 18px;
    -ms-transform-origin: 92% 18px;
    -o-transform-origin: 92% 18px;
    transform-origin: 92% 18px;  
}


#k01 .bereichtext:hover p
{
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);  
}


#k04 p,
#k06 p, 
#k10 p

{
  display: inline-block;
  text-align: left;

  -webkit-transform-origin: 7% 15px;
  -moz-transform-origin: 7% 15px;
  -ms-transform-origin: 7% 15px;
  -o-transform-origin: 7% 15px;
  transform-origin: 7% 15px;  
}

#k12 p {
  /*background-color: #333;*/
  padding-top: 140px;
}


#k04 .bereichtext:hover p
{
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);  
}

#k06 .bereichtext:hover p,
#k10 .bereichtext:hover p,
#k12 .bereichtext:hover p,
#k15 .bereichtext:hover p,
#k17 .bereichtext:hover p
{
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -ms-transform: scale(1.4);
  -o-transform: scale(1.4);
  transform: scale(1.4);
}

#k12 .bereichtext:hover p {
  -webkit-transform-origin: 100% 100%;
  -moz-transform-origin: 100% 100%;
  -ms-transform-origin: 100% 100%;
  -o-transform-origin: 100% 100%;
  transform-origin: 100% 100%;    
}


h1 {
  margin: 50px 10px 10px 0;
  text-align: right;
  font-weight: normal;
}

.bereichtext a {
  color: white;
  text-decoration: none;
}

.bereichtext a:hover {
  color: orange;
}


footer {
  text-align: center;
  font-size: 90%;
  padding: 20px 0;
}

footer a {
  color: #333;
  text-decoration: none;
}

footer a:hover {
  color: black;
  text-decoration: underline;
}