/* Hilfsvisualisierung -  klasse test an body oder html setzen*/
.test [class]{
  outline:1px solid blue;
}
.test [class*="col"]{
  outline:1px solid red;
}
.test [class]:before{
  content:attr(class);
  display:table;
  border:2px dotted darkred;
}

/* Hilfskonstrukte */
/* allgemeine hilfskonstrukte */
/* Simulierter Rahmen */
.border{position:relative;
  z-index:0;
 }
 /* .border>*{
   position:relative;
   z-index:2;
 } */
 .border:before{
   content:"";
   border:5px solid currentColor;
   position:absolute;
   top:0;
   bottom:0;
   left:0;
   right:0;
   z-index:-1;
 }
 
 /* Bilder Skalierbar */
 .imgscale{
   width:100%;
   height:auto;
   /* nur nötig wenn die Darstellungseigenschaft für imagetags nicht anderweitig geändert wurde */
   display:block;
 }
 

/* Layoutvorgaben */
/* Wrapper */
.wrap{
  margin-left:auto;
  margin-right:auto;
  /* Layoutspezifisch überschreiben */
  max-width:1200px;
}

/* Spaltenbreiten / Spaltenraster vordefinieren 6 /8 /10 /12 usw. ggf. klassen ergänzen*/
.col25{width:25%;}
.col33{width:33.3333%;
  /* min-width:320px; */
}
.col50-50,
.col-3,
.col-3_6{width:50%;}
.col66{width:66.6666667%;
/*min-width:640px;*/
/* ggf. mindestbreiten für adaptives verhalten setzen */
/* min-width:200px; */
}
.col75{width:75%;}
.col100{width:100%;}

/* adptives Spaltenverhalten ausgehend von schmalster Spaltenbreite */
[class*="col"]{min-width:160px;}

/* ggf. weitere Abstandsklassen definieren und nachfolgen mit den Spalten verrechnen*/
.pad{padding:1%;}
.mar{margin-left:1%;margin-right:1%;}

/* wenn Margin oder padding klasse an Spalte vorkommt */
.col25.pad,.col25.mar{width:23%;}
.col33.pad,.col33.mar{width:31.3333%;
  /* min-width:320px; */
}
.col50-50.pad,.col50-50.mar,
.col-3.pad, .col-3.mar,
.col-3_6.pad,.col-3_6.mar{width:48%;}
.col66.pad,.col66.mar{width:64.6666667%;
/*min-width:640px;*/
/* ggf. mindestbreiten für adaptives verhalten setzen */
/* min-width:200px; */
}
.col75.pad,.col75.mar{width:73%;}
.col100.pad,.col100.mar{width:98%;}

/* Wenn Margin und Padding an Spalte vorkommen */
.col25.pad.mar{width:21%;}
.col33.pad.mar{width:29.3333%;
  /* min-width:320px; */
}
.col50-50.pad.mar,
.col-3.pad.mar,
.col-3_6.pad.mar{width:46%;}
.col66.pad.mar{width:62.6666667%;
/*min-width:640px;*/
/* ggf. mindestbreiten für adaptives verhalten setzen */
/* min-width:200px; */
}
.col75.pad.mar{width:71%;}
.col100.pad.mar{width:96%}


/* Spalten mit float anordnen */
.fl-l{float:left;}
.fl-r{float:right;}
/* clears */
.clear,.clearfix:after{clear:both;}
.clearfix:after{
  content:"";
  display:table;
}

/* Spalten mit flex anordnen */
.flex,.flex-w{
  display:flex;
}

.flex-w{
  flex-wrap:wrap;
}
/* Flex-items untereinander Stellen statt nebeneinander - am flexcontainer angeben*/
.f-column{
  flex-direction:column;
}

/* Breiten Ausdehnung für Flex-items */
.grow{
  flex-grow:1;
}
/* ggf. noch weitere Klassen für Flex-Items (kinderlemente der Flexbox) setzen*/
/* verkleinern der Spalte zulassen-  flex-shrink:1 */
/* Reihenfolge ändern - order:1, order:2, usw. */

/* mindestbreite 960px) - Größere Darstellung*/
@media screen and (min-width:60em){

}
/* ggf. weitere Mediquerries für bestimmte aufeinanderfolgende Spalten */

/* schmalste Darstellung spätestens bei 480px */
@media screen and (max-width:30em){
[class*="col"]{width:100%;}
[class*="col"].pad,[class*="col"].mar{width:98%;}
[class*="col"].pad.mar{width:96%;}

/* ggf. Flex überschreiben */
/* [class*="flex"]{display:block;} */

}