@charset "utf-8";
/* CSS Document */


/*-----------------------------------------------------------------------------------*/
/*	Spalten: Gunas, Himmelsrichtungen, Vastu-Purusha-Mandala
/*-----------------------------------------------------------------------------------*/

.group, /*https://www.mediaevent.de/css/zz-float.html*/
[class*=colgroup] { zoom:1 }
.group:after,
[class*=colgroup]:after { /** Alle Elemente, deren class "colgroup" enthält **/
    content:".";
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
}
.col {position:relative;border:1px solid #F8C049;
text-align:center;line-height:0.6em;}
.col :first-child {margin-top:0
}

@media all and (min-width: 30em) and (max-width: 49.99em) {
    [class*=colgroup] .col {
        float:left;
        width:47.5%;
        margin-left:5%
    }
    [class*=colgroup] .col:nth-of-type(2n+1),
    .colspan-2+.col {
        clear:left;
        margin-left:0
    }
    .colgroup-1 .col {
        width:100%;
        float:none;
        margin-left:0
    }
    .colgroup-3 .colspan-2,
    .colgroup-3 .colspan-2+.col,
    .colgroup-3 .col.primary,
    .colgroup-3 .col.secondary {
        width:100%;
        float:none;
        margin-left:0
    }
    .colgroup-3 .col.secondary { margin:2em 0 0 0 }
}

@media all and (min-width: 50em) {
    [class*=colgroup] .col {
    margin-left:4%; /* Spaltenabstand bei jeder Anzahl*/
    float:left
    }

    [class*=colgroup] .col:first-of-type { margin-left:0 }
    .colgroup-4 .col {width:21.2%} /* Feldbreite 4-spaltig */
    .colgroup-4 .col:nth-of-type(4n+1) {
        clear:left;
        margin-left:0
    }
    .colgroup-4 .col.colspan-3 { width:73.8%}
    .colgroup-3 .col { width:30%}
    .colgroup-3 .col:nth-of-type(3n+1) {
        clear:left;
        margin-left:0
    }
    .colgroup-3 .col.colspan-2 { width:64% }
    .colgroup-3 .col.middle {
        margin:0 auto;
        float:none
    }
    .colgroup-3 .col.colspan-2>p {
        line-height:1.4;
        margin-top:0.7em
    }
    .colgroup-3 .col.primary { float:right }
    .colgroup-3 .col.secondary {
        float:left;
        margin-left:0
    }
    .colgroup-2 .col { width:47.5%;background:lightgreen;}
    .colgroup-2 .col:nth-of-type(2n+1) {
        clear:left;
        margin-left:0
    }
    .colgroup-1 .col {
        width:100%;
        margin-left:0
    }
}

/*-----------------------------------------------------------------------------------*/
.colgroup4 {text-align:center;line-height:0.6em;margin:0 auto;

	column-count:4;
	-moz-column-count:4;
	-webkit-column-count:4;
	
	column-gap:40px;
	-moz-column-gap:40px;
	-webkit-column-gap:40px;

	column-rule:1px solid lightblue;
	-moz-column-rule:1px solid lightblue;
	-webkit-column-rule:1px solid lightblue;
}
@media all and (min-width: 30em) and (max-width: 49.99em) {
.colgroup4 {
	column-count:2;
	-moz-column-count:2;
	-webkit-column-count:2;
}


/*-----------------------------------------------------------------------------------*/
.col:nth-child(1), .col:nth-child(2), .col:nth-child(3), .col:nth-child(4) {text-align:center;line-height:0.6em;border-left:1px solid #F8C049;}
.col:nth-child(4) {border-right:1px solid #F8C049;}
   .col:nth-child(1) { width: 25%; }
   .col:nth-child(2) { width: 25%; }
   .col:nth-child(3) { width: 25%; }
   .col:nth-child(4) { width: 25%; }

.col-3:nth-child(1), .col-3:nth-child(2), .col-3:nth-child(3) {text-align:center;line-height:0.6em;border-left:1px solid #F8C049;}
.col-3:nth-child(3) {border-right:1px solid #F8C049;}
   .col-3:nth-child(1) { width: 33%; background:pink;}
   .col-3:nth-child(2) { width: 34%; }
   .col-3:nth-child(3) { width: 33%; }

@media (min-width: 500px) {
   .container {
      display: table;
      border-spacing: 16px;
      width: 100%;
   }
   .col {width: 100%;
      display: table-cell;
      box-sizing: border-box; 
      cell-spacing: 0px;
      padding: 0.4em;
      vertical-align: top}
   .col-3 {width: 100%;
      display: table-cell;
      box-sizing: border-box; 
      cell-spacing: 0px;
      padding: 0.4em;
      vertical-align: top
   }

   .col:nth-child(1) { width: 25%; }
   .col:nth-child(2) { width: 25%; }
   .col:nth-child(3) { width: 25%; }
   .col:nth-child(4) { width: 25%; }
}