/* proCreativ Style - speziell auf der Hauptseite */

/* #Later: Themencontainer als Ganzes anklicken lassen - jetzt erstmal nur anklickbare Fotos 
   section a { text-decoration: none; }  */

/* Testweise #ToDo deaktivieren nach Test: */

/* #main_on_mainpage{ outline: 2px solid black; } 

.subjects_grouped{ outline: 2px solid blue; } 

.duo{ outline: 2px solid lightgray; } 

.subject_odd,
.subject_even{ 
   outline: 2px solid orange; }  

.subject_detail{ outline: 2px solid green; } */

/* ENDE Testweise #ToDo deaktivieren nach Test */


:root{   /* #ToCheck: Ist bereits in general css */
      box-sizing: border-box; 
   
      --space_stdrd:1em; 
}
 
header,
#nav_main{ 
   margin-left: auto;
   margin-right: auto;
}  

#main_on_mainpage h3 {
   /* color:darkgoldenrod; */
   color: var(--color-evening);
}

/* #ToCheck: Provisorisch: */
.force_c{ text-align: center; }    

.force_r{ text-align: right; }

.force_l{ text-align: left; }

.force_r,
.force_l{
   padding-left: 10px ;
   padding-right: 10px ;
}    

/* --- Hauptbereich Boxen --- */

/* #main_content, */
#main_on_mainpage{
   margin-left: auto;
   margin-right: auto;      
}

.subjects_grouped,
.subjects_single,
.duo,
.subject_odd, 
.subject_even{ 
/* .subject_detail{ */
   /* margin-right: var(--space_stdrd);      
   margin-left: var(--space_stdrd); #ToCheck */
   margin-right: 1em;      
   margin-left: 1em;
}      

.subjects_grouped{
   margin-left: auto;
   margin-right: auto;  
   /* width: 98%; */
   /* width: calc( 100% - ( 1em * 2 ) ); */ 
   /* width: calc( 100% - ( var(--space_stdrd) * 2 ) ); #ToCheck */
   width: calc( 100% - ( 1em * 2 ) );  
}

.subjects_single,
.duo{
   /* margin-left: auto;
   margin-right: auto; */ 
   /* width: 98%; */
   width: calc( 100% - ( 1em * 2 ) ); 
   /* width: calc( 100% - ( var(--space_stdrd) * 2 ) ); #ToCheck */
}

.subjects_grouped{}


.subjects_grouped > h4{ 
   text-align: center; 
}

.subjects_single{}

.duo{ 
   display: flex; 
   flex-wrap: wrap; 
   flex-direction: row; 
}

.subjects_grouped .duo{ 
   background-color: var(--color-morning-light); } 

.subject_odd, 
.subject_even{
   /* width: calc( 50% - ( var(--space_stdrd) * 1,5 ) ); #ToCheck */
   width: calc( 50% - 2em );  
   /* width: 48%; */
   /* min-width: 20em; */
   min-width: 340px;
   /* background-color: var(--color-morning-light); */
}


.subject_odd{}


.subject_even{}


.subject_detail {
   width: 96%; 
   /* width: calc( 100% - ( 1em * 2 ) ); #ToCheck */
   /* padding: 0.5em 1em 0.5em 1em; */
}

.subjects_grouped  .subject_detail{
   background-color: inherit; 
}

.subjects_single   .subject_detail{
   background-color: var(--color-morning-light); 
}


.subject_odd  h4,
.subject_odd  h5,
.subject_odd  li,
.subject_odd  p{
   text-align: right;
}

.subject_odd  h4{
   padding-right: 0.5em;
}

.subject_even  h4{
   padding-left: 0.5em;
}

.subjects_single  .subject_odd  h4{
   margin: 1em;
 }
 
.subject_odd  h5{
   margin: 1em;
}

.subjects_single  .subject_even  h4{
  margin: 1em;
}

.width_4subject_photo{ width: 12em; } 

/* .img_space_l{ */
.img_space_odd{ 
   margin-left: 1em;
}

/* .img_space_r{ */
.img_space_even{
   margin-right: 1em;
}   

.subject_detail, 
.float_text2photo_space{ 
   /* margin:0.5em; */
   padding: 0.5em 1em 0.5em 1em; 
}
        
.float_l_cond {
   float: left;
   /* margin-right: 15px */
}

.float_r_cond {
   float: right;
   /* margin-right: 15px */
}

/* .cont-4photo{ width: 250px; } */

.width_4foto {
   width: 220px;
   margin: 10px;
   /* #ToCheck: Trotzdem rückt der fliessende Test direkt ans Bild ran */
        }

.width_4text {
   min-width: 100px;
   /* max-width: 75%; */
   /* padding: 10px; */
   /* padding-left: 10px;  #ToCheck: Warum funktioniert das nicht? */
   margin-left: 10px;
}

/* Provisorisch #ToCheck:
.col_25 { width: calc(253% - 20px); } */

/* #Later: Abstände genauer berechnen, damit symmetrisches Bild im Browser; 
   am besten dann mit Varialen und Abfragen Klassenkombinatioonen .classA.classB{ }  
   siehe externe CSS-Datei, dort begonnene Regeln für Abstände */ 


@media screen and (max-width:860px) {

/* Ganze Breite für Box, weil übereinander gestapelt */ 
.subject_odd, 
.subject_even{
   width: calc( 100% - 2em );  
   min-width: 340px;
}   

.img_space_odd{
   margin-left: 0;
   margin-right: 1em;
}


/* Bilder links, Text rechts: */
/* .float_r_cond {
   float: left; 
   \* margin-right: 10px *\
} */

/* ToCheck! 
float_r_cond, 
img_space_odd, 
float_l_cond, 
img_space_even{
   margin: 0 auto; 
} */

.subject_odd  h4,
.subject_odd  h5,
.subject_odd  li,
.subject_odd  p{
/* text-align: left; */
   text-align: center
}

/* #ToDo: Smartphone: @media screen and (max-width:400px) */
   
/* Inhalte komprimieren in Übersicht */
.subject_detail  li,
.subject_detail  p{
   display: none;
}

/* Nicht umfliessen, sondern untereinander */
/* #ToCheck: Oder besser via Mindestbreite steuern? */
/*   .float_l_cond {
      float: right;
      margin-right: 10px
   }

   .width_4foto {
      width: 150px;
   } */

}


@media screen and (max-width:0px) {  /* 400 */ 

   /* #ToDo: Smartphone: @media screen and (max-width:400px) */
      
   /* Inhalte komprimieren in Übersicht */
      section ul,
      section .detail {
         display: none;
      }
   
      /* Nicht umfliessen, sondern untereinander */
      /* #ToCheck: Oder besser via Mindestbreite steuern? */
      .float_r_cond {
         float: left;
         /* margin-right: 10px */
      }
   
      .subject_odd  h4,
      .subject_odd  li,
      .subject_odd  p
      {
         text-align: left;
      }

      .width_4foto {
         width: 150px;
      }

   }