/* === #ToDo Entrümpeln / konsolidieren mit style_procreativ_general === */

/* aside,article,footer,section,div,header,nav{ 
   border:1px solid gray;margin:5px; padding:10px; } */

/* body{ background:var(--color-neutral) } */

/* body>header{ position:relative; } #*/ 

/* body>header p a{ text-align:center; } */ 


/* ----------------------------- Kopfbereich ------------------------------ */

/* ... */

/* --------------------------- Hauptnavigation: --------------------------- */

/* ... */

/* ------------------------- Hauptbereich genrell ------------------------- */ 

/* main{
   \* margin-top:0;
   padding-top:1.5em;} #ToCheck *\
   margin: auto; 
}   

.intro{ 
   text-align: center;
   padding-top:1.5em;
   padding-bottom:1.5em;
} 

.intro p{font-style: italic;} */


/* -------------------------- Spalten / Raster: --------------------------- */

.wrap{
   /* max-width:100%; */
   margin-left:auto;
   margin-right:auto;
 }
 
.flex, .flex_w{
   display:flex;
}
 
.flex_w{
   flex-wrap:wrap;
}

/* Spaltenaufbau: */
 
/* Breiten / Anteile: */

/* .width_div_1{ 
   --col: calc( 100% / 1 ); 
   width:var(--col); 
} */  

/* .width_div_1{ 
   --width-divider:1;
   --width-flex:100%;
   width: var(--width-flex); 
} */ 

/* .width_div_half{ 
   --width-divider:2;
   --width-flex: calc( 100% / var(--width-divider) );
   width: var(--width-flex); 
} */
 
/* .width_div_half{ 
   --col: calc( 100% / 2 );
   width:var(--col);  
} */

/* .width_div_third{ 
   --width-divider:3;
   --width-flex: calc( 100% / var(--width-divider) );
   width: var(--width-flex); 
} */

/* .width-div-third{ 
   --col: calc( 100% / 3 );
   width:var(--col);  
} */

/* .width_div_2third{ 
   --width-divider:1.5;
   --width-flex: calc( 100% / var(--width-divider) );
   width: var(--width-flex); 
} */
 
/* .width-div-2third{ 
   --col: calc( 100% / 1.5 );
   width:var(--col);  
} */

/* .width_div_quarter{ 
   --width-divider:4;
   --width-flex: calc( 100% / var(--width-divider) );
   width: var(--width-flex); 
} */ 
 
/* .width-div-quarter{ 
   --col: calc( 100% / 4 );
   width:var(--col);  
} */


/* Breiten Berechnung: */

/* Achtung: Variablen können nicht von einer Klasse an eine andere weitergegeben werden; 
*           Es muss Kombination von Klassen angegeben werden beim Selektor:  .classA.classB{ }
*           #ToDo gemaess nachfolgenden Rwgeln (bisher noch feste Breiten-Angaben) 

/* .col_with_space_fix{ 
  width: calc( var(--width-net-fix) - ( var(--space_stdrd) * 2 ) );
  margin-left:var(--space_stdrd);
  margin-right:var(--space_stdrd)
} */ 
 
/*.col_with_space_var{ 
  \* width: calc( ( 100% / var(--width-divider) ) - ( var(--space_stdrd) * 2 ) ) ; *\
  width: calc( var(--width-flex) - var(--space_stdrd) * 2  ) ; 
  margin-left:var(--space_stdrd);
  margin-right:var(--space_stdrd);
} */
 
/* [class*="width_div-"].mar-r
   [class*="width_div-"].mar-l */
   

/* --- Abstände - hier vereinfacht i.V.m. Box Sizing Border Box: --- */  
    
/* Abstandsklassen: */

/* .pad_l{padding-left:var(--pad_l);}
   .pad_r{padding-right:var(--pad_r);} */ 
/* .mar_l{margin-left:var(--mar_l)}
   .mar_r{margin-right:var(--mar_r)} */ 
    
/* Abstandsberechnung: */
/* #ToDo Noch wirksam machen! */

/* [class*="width_div_"].mar-r {width: calc(var(--col) - var(--mar_r));}
   [class*="width_div_"].mar-l {width: calc(var(--col) - var(--mar_l));} 
\* [class*="width_div_"].pad-r {width: calc(var(--col) - var(--pad_r));} 
   [class*="width_div_"].pad-l {width: calc(var(--col) - var(--pad_l));} *\ */
    
/* [class*="width_div_"].pad_r.pad_l{width: calc(var(--col) - var(--pad_l) - var(--pad_r) );}
   
\* [class*="width_div_"].mar_r.mar_l{width: calc(var(--col) - var(--mar_l) - var(--mar_r) );}
   [class*="width_div_"].mar_r.pad_r{width: calc(var(--col) - var(--mar_r) - var(--pad_r) );}
   [class*="width_div_"].mar_l.pad_l{width: calc(var(--col) - var(--mar_l) - var(--pad_l) );}
   [class*="width_div_"].mar_l.pad_r{width: calc(var(--col) - var(--mar_l) - var(--pad_r) );}
   [class*="width_div_"].mar_r.pad_l{width: calc(var(--col) - var(--mar_r) - var(--pad_l) );} *\
    
\* [class*="width_div_"].mar_r.pad_l.pad_r{width: calc(var(--col) - var(--mar_r) - var(--pad_r) - var(--pad_l));}
   [class*="width_div_"].mar_l.pad_l.pad_r{width: calc(var(--col) - var(--mar_l) - var(--pad_l) - var(--pad_r));}
   [class*="width_div_"].mar_l.mar_r.pad_r{width: calc(var(--col) - var(--mar_l) - var(--mar_r) - var(--pad_r) );}
   [class*="width_div_"].mar_l.mar_r.pad_l{width: calc(var(--col) - var(--mar_l) - var(--mar_r) - var(--pad_l) );} *\
    
\* [class*="width_div_"].pad_l.pad_r.mar_l.mar_r {width: calc(var(--col) - var(--mar_l) - var(--mar_r)  - var(--pad_l) - var(--pad_r));} *\ */

/* Hilfsklassen: */
 
/* .scale, .img-scale{
   width:100%;
   height:auto; } #ToCheck */
 
/* .content_center{ text-align:center; } */


/* --- Weitere Gestaltung des Hauptbereichs: --- */ 

/* ... */

/* ------------------------ ENDE Spalten / Raster ------------------------- */