/* margin => außen */
    /* padding => innen */

    .post {box-sizing:border-box; width: 306px; float:left; border: 1px solid black; margin:5px; padding:2px}

    /* Fotobox Seitenverhältnis 3:2 */

    /* Boxen: Fotobox 1 Foto  => 10
              Fotobox 2 Fotos => 20
              Fotobox 3 Fotos => 30 */

    /* Textbox */
    .textbox  {width: 950px; padding: 10px; box-sizing: border-box; background-color:#FFFFFF; text-align: left; margin-bottom: 20px;}

    .textbox1 {width: 474px; padding: 5px; box-sizing: border-box; background-color:#FFFFFF; text-align: center;  float: left }
    .textbox2 {width: 474px; padding: 5px; box-sizing: border-box; background-color:#FFFFFF; text-align: center;  float: right }

    .textbox3 {width: 609px; padding: 5px; box-sizing: border-box; background-color:#FFFFFF; text-align: center;  float: left }
    .textbox4 {width: 339px; padding: 5px; box-sizing: border-box; background-color:#FFFFFF; text-align: center;  float: right; overflow: auto; }

    .gridtext {padding: 5px; background-color:#FFFFFF; text-align: center; float: left; margin-bottom: 20px}

    /* 10 Fotoboxen für 1 Foto **********************************************************************************************************************************************/

    /* 1x quer - ganze Breite */
    .box-10  {width:950px; height:653px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto-10 {width:950px; height:633px; position:absolute; left:0px; top:0px;}
    .text-10 {width:950px; height:20px;  position:absolute; left:0px; top:634px; text-align: center;}


    /* 1x quer - ganze Breite */
    .foto-11 {width:950px;}
    .text-11 {width:950px; height:20px; text-align: center; background-color:#FFFFFF; margin-bottom: 20px;}

    /* Panorama - ganze Breite - ohne Text */
    .foto-12 {width:950px; margin-bottom: 20px;}

    /* 1x quer - Kachelfoto mit Text */
    .box-13  {width:201px; height:154px; position:relative; background-color:#FFFFFF;}
    .foto-13 {width:201px; height:134px; position:absolute; left:0px; top:0px;}
    .text-13 {width:201px; height:134px; position:absolute; left:0px; top:134px; text-align: center;}

    /* 1x quer - Shopfoto mit Text rechts */
    .box-14  {width:950px; height:300px; position:relative; background-color:#FFFFFF; border: 1px solid black;}
    .foto-14 {width:450px; height:300px; position:absolute; left:0px; top:0px; border: 1px solid black;}
    .text-14 {width:475px; height:280px; position:absolute; left:450px; top:0px; border: 1px solid black;}

    /* Kachelfoto 2-3-4-5-6 */
    .foto-15 {width:474px; float: left;}
    .foto-16 {width:316px; float: left;}
    .foto-17 {width:237px; float: left;}
    .foto-18 {width:189px; float: left;}
    .foto-19 {width:158px; float: left;}

    /* 20 Fotoboxen für 2 Foto **********************************************************************************************************************************************/

    /* 2x quer */
    .box-20   {width:950px; height:334px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-20 {width:471px; height:314px; position:absolute; left:0px;   top:0px;}
    .foto2-20 {width:471px; height:314px; position:absolute; left:479px; top:0px;}
    .text1-20 {width:471px; height:20px;  position:absolute; left:0px;   top:314px; text-align: center;}
    .text2-20 {width:471px; height:20px;  position:absolute; left:479px; top:314px; text-align: center;}

    /* 1x quer 1x hoch */
    .box-21   {width:950px; height:459px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-21 {width:657px; height:438px; position:absolute; left:0px;   top:0px;}
    .foto2-21 {width:292px; height:438px; position:absolute; left:659px; top:0px;}
    .text1-21 {width:657px; height:20px;  position:absolute; left:0px;   top:439px; text-align: center;}
    .text2-21 {width:292px; height:20px;  position:absolute; left:659px; top:439px; text-align: center;}

    /* 2x quer mit großem Textfeld */
    .box-22   {width:950px; height:435px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-22 {width:471px; height:314px; position:absolute; left:0px;   top:0px;}
    .foto2-22 {width:471px; height:314px; position:absolute; left:479px; top:0px;}
    .text1-22 {width:471px; height:120px; position:absolute; left:0px;   top:314px; text-align: center;}
    .text2-22 {width:471px; height:120px; position:absolute; left:479px; top:314px; text-align: center;}

    /* 2x hoch */
    .box-23   {width:950px; height:725px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-23 {width:470px; height:705px; position:absolute; left:0px;   top:0px;}
    .foto2-23 {width:470px; height:705px; position:absolute; left:480px; top:0px;}
    .text1-23 {width:470px; height:20px;  position:absolute; left:0px;   top:705px; text-align: center;}
    .text2-23 {width:470px; height:20px;  position:absolute; left:480px; top:705px; text-align: center;}

    /* 2x quer mit grossem Textfeld + Button */
    .box-24   {width:950px; height:435px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-24 {width:471px; height:314px; position:absolute; left:0px;   top:0px; z-index: 1;}
    .foto2-24 {width:471px; height:314px; position:absolute; left:479px; top:0px; z-index: 1;}
    .text1-24 {width:471px; height:120px; position:absolute; left:0px;   top:314px; text-align: center;}
    .text2-24 {width:471px; height:120px; position:absolute; left:479px; top:314px; text-align: center;}
    .butt1-24 {                           position:absolute; left:371px; top:0px; z-index: 2; outline: none;}
    .butt2-24 {                           position:absolute; left:850px; top:0px; z-index: 2; outline: none;}

    /* 30 Fotoboxen für 3 Foto **********************************************************************************************************************************************/

    /* 1 hoch 2 quer */
    .box-30   {width:950px; height:698px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-30 {width:452px; height:678px; position:absolute; left:0px;   top:0px;}
    .foto2-30 {width:493px; height:329px; position:absolute; left:457px; top:0px;}
    .foto3-30 {width:493px; height:329px; position:absolute; left:457px; top:349px;}
    .text1-30 {width:452px; height:20px;  position:absolute; left:0px;   top:678px; text-align: center;}
    .text2-30 {width:493px; height:20px;  position:absolute; left:457px; top:329px; text-align: center;}
    .text3-30 {width:493px; height:20px;  position:absolute; left:457px; top:678px; text-align: center;}

    /* 3x quer */
    .box-31   {width:950px; height:228px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-31 {width:312px; height:208px; position:absolute; left:0px;   top:0px;}
    .foto2-31 {width:312px; height:208px; position:absolute; left:319px; top:0px;}
    .foto3-31 {width:312px; height:208px; position:absolute; left:638px; top:0px;}
    .text1-31 {width:312px; height:20px;  position:absolute; left:0px;   top:209px; text-align: center;}
    .text2-31 {width:312px; height:20px;  position:absolute; left:319px; top:209px; text-align: center;}
    .text3-31 {width:312px; height:20px;  position:absolute; left:638px; top:209px; text-align: center;}

    /* 3x hoch */
    .box-32   {width:950px; height:494px; position:relative; background-color:#FFFFFF; margin-bottom: 20px;}
    .foto1-32 {width:312px; height:474px; position:absolute; left:0px;   top:0px;}
    .foto2-32 {width:312px; height:474px; position:absolute; left:319px; top:0px;}
    .foto3-32 {width:312px; height:474px; position:absolute; left:638px; top:0px;}
    .text1-32 {width:312px; height:20px;  position:absolute; left:0px;   top:475px; text-align: center;}
    .text2-32 {width:312px; height:20px;  position:absolute; left:319px; top:475px; text-align: center;}
    .text3-32 {width:312px; height:20px;  position:absolute; left:638px; top:475px; text-align: center;}