/* Helper - Jo 2021 Jan19 */
/* 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:1px solid red;
}

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

/* Layoutvorgaben */
/* Wrapper */
.wrap{
  margin-left:auto;
  margin-right:auto;
  /* Layoutspezifisch überschreiben */
  max-width:1100px;
}
/* Spaltenbreiten / Spaltenraster */
/* [class*="col_"]{background:white;padding:2px; border:1px solid darkred} */
.col_1-4{width:25%;}
.col_2-6{width:33.3333%;}
.col_3-6, .col_2-4{width:50%;}
.col_4-6{width:66.6666%;}
.col_3-4{width:75%;}
.col_6-6, .col_4-4{width:100%;}
/* min-width:200px;  min-width:320px;  min-width:640px; adaptives verh. */
/* adptives Spaltenverhalten ausgehend von schmalster Spaltenbreite */
[class*="col_"]{min-width:160px;}

/* ggf. weitere Abstandsklassen def und nachfolgend mit Spalten verrechnen */
.pad{padding:1%;}
.mar{margin-left:1%;margin-right:1%;}
/* wenn Margin oder padding klasse an Spalte vorkommt */
.col_1-4.pad,.col_1-4.mar{width:23%;}
.col_2-6.pad,.col_2-6.mar{width:31.3333%;
  /* min-width:320px; */
}
.col_3-6.pad,.col_3-6.mar,
.col-3.pad, .col-3.mar,
.col-3_6.pad,.col-3_6.mar{width:48%;}
.col_4-6.pad,.col_4-6.mar{width:64.6666667%;
/*min-width:640px;*/
/* ggf. mindestbreiten für adaptives verhalten setzen: min-width:200px; */
}
.col_3-4.pad,.col_3-4.mar{width:73%;}
.col_6-6.pad,.col_6-6.mar{width:98%;}
/* Wenn Margin und Padding an Spalte vorkommen */
.col_1-4.pad.mar{width:21%;}
.col_2-6.pad.mar{width:29.3333%;
  /* min-width:320px; */
}
.col_3-6.pad.mar,
.col-3.pad.mar,
.col-3_6.pad.mar{width:46%;}
.col_4-6.pad.mar{width:62.6666667%;
/*min-width:640px;  ggf. mindestbreiten für adaptives verhalten setzen */
/* min-width:200px; */
}
.col_3-4.pad.mar{width:71%;}
.col_6-6.pad.mar{width:96%}

/* Spalten mit float anordnen */
.fl-l{ float: left;}
.fl-r{ float: right;}
.clear, .clearfix:after{ clear: both;}
.clearfix:after{ content: ""; display: table;}
/* Spalten mit flex anordnen */
.flex{  display:flex;}
.flex-wrap{  display:flex;  flex-wrap: wrap; } /* nowrap ist default */ 
.flex-column{  flex-direction:column;}
.grow{ flex-grow: 1;}  /* Breiten Ausdehnung für Flex-items */
/* 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 ;  Hinweis: 1200px = 75em */

/* schmalste Darstellung spätestens bei 480px 
@media screen and (max-width:30em){  */
@media screen and (max-width:760px){
  [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;} */
}

 /* sehr schon spezielle Navigation - horizontal 
.nav-h{background:#fefefe;}   
.nav-h ul li{float:left;list-style:none;} 
.nav-h ul li a{color:#060;display:block;padding:1em 1.5em;border:1px solid #666;}
.nav-h ul li a:hover,
.nav-h ul:after{content:""; display:table; clear:both;}
.active{color:#333;background:#B5C8AE}
 */