/*
Standard-Absatz- und Zeichenformate
fuer WEB-Site der Altertumsfreunde Darmstadt
mit tags fuer das Flexible Box Layout Module
===================================================
*/

/* Standardbreiten fuer Geraeteklassen:  */
/* Mini devices (phones, 480px and down) */
/* (nach Mozilla)                        */
/* Extra small devices (phones, 600px and down) */
/* Small devices (portrait tablets and large phones, 600px and up) */
/* Medium devices (landscape tablets, 768px and up) */
/* Large devices (laptops/desktops, 992px and up)   */
/* Extra large devices (large laptops and desktops, 1200px and up) */



/* Ausdrucke immer im Querformat und ohne Umbruch in Bildern  */
@page { size:landscape; }


/* Anzeige im Monitor/display bei Start */
@viewport { min-zoom: 1;
            zoom: 1;
          }

 * {box-sizing:border-box; }


/* Einstellung Kopf + Navigationsleiste kurz oder lang -------------------- */
@media only screen and (min-width: 200px) {
 div.monitor { display:none; }        /* Keine langen Koepfe und Navizeilen */
   div.mobil { display:block; }       /* Kurze Koepfe und Navizeilen        */
}
@media only screen and (min-width: 481px) {
 div.monitor { display:block; }       /* Lange Koepfe und Navizeilen fuer Fenster > 480px         */
   div.mobil { display:none; }        /* Keine kurzen Koepfe und Navi-Zeilen fuer Fenster < 480px */
}



/* Voreinstellung: alle Standard-checkbox-Symbole verstecken:   */
  input[type="checkbox"] { display:none; } 






/* VOREINSTELLUNGEN
   ================================================================================ */

/* fuer Rumpf --------------------------------------------------- */

/* Verweise auf phones und kleinen Medien in blau     */
#rumpf         a {color:#000099; text-decoration:underline; }
#rumpf    a:link {color:#000099; text-decoration:underline; }
#rumpf a:visited {color:#000099; text-decoration:underline; }

@media only screen and (min-width:600px)
{ /* Verweise in dunkelgrau, dem Layout ab 600px optisch angepasst     */
#rumpf         a {color:#666666; text-decoration:underline; }
#rumpf    a:link {color:#666666; text-decoration:underline; }
#rumpf a:visited {color:#666666; text-decoration:underline; }
} /* Ende @media */




/* =========== Grundeinstellungen von Absatz- und Zeichenformaten ================ */
 body { display:block;
        position: relative;
        margin: 0 0 0 0;   padding: 0 0 0 0;
        font-family: Arial, sans-serif; 
        font-size:1em; line-height:1.5em; 
        color:black; font-style:normal; font-weight:normal;
        text-align:left;
        border-collapse:separate; border-spacing:0; border:0;
      }

      /* Standardabsatzformat */
    p { margin: 0 0 0 0;   padding: 0 0 0 0;
        font-family: Arial, Helvetica, sans-serif; 
        font-size: 1em;
        line-height:1.5em;
        font-weight:normal;
        font-style:normal; 
        color:black;
        border:0;
        text-align:left;
      }

      /* Bilder ohne Umrandung */
  img { margin: 0 0 0 0;   padding: 0 0 0 0;
        border:0; 
      }


/* Absatzformate */
/* =============                                                                */
        p.titel { margin: 0; padding: 0;
                  font-size:1.2em;
                  color:#000099;          /* = dieselbe Farbe wie boxkopf-Hintergrund  */
                }

        p.textB { text-align:justify;     /* Blocksatz */ }
        p.textL { text-align:left;        /* Text links */ }
        p.textR { text-align:right;       /* Text rechts */ }
        p.textZ { text-align:center;      /* Text zentriert */}




/* ==================== Textauszeichnungen ============================================== */
          .af-blau { color:#000099; }
       .af_bgcolor { background-color:#000066; }
             .blau { color:#000099; }
       .box-bgcolor { color:#f0f5f5; }
         .hellblau { color:#f0f5f5; }
       .blau_hfett { color:#000099; font-weight:bold; }
      .weiss_hfett { color:#ffffff; font-weight:bold; }
    .schwarz_hfett { color:#000000; font-weight:bold; }
            .weiss { color:#ffffff; }
          .schwarz { color:#000000; }
       .dunkelgrau { color:#666666; }
             .grau { color:#999999; }
         .hellgrau { color:#cccccc; }
            .hfett { font-weight:bold; }

      .nav_bgcolor { background-color:#e6e6e6; }
   .leiste_bgcolor { background-color:hsl(60, 22%, 90%); }
      .box-bgcolor { color:#f0f5f5; }

       span.bullet { font-size:1em; font-weight:bold; color:black; }

    span.WikiW { font-family:"Times New Roman,Times,serif"; }




  p.rechts_Zu-TOP { margin:5px 0 0 0;                   /* fuer Pikto "zurueck zum Seitenanfang" */
                    padding:0;
                    text-align:right; }
 



/* Einstellungen fuer flexContainer und Flexboxen im Rumpf */
/* ======================================================= */

/* flexContainer fuer 'rumpf':    ------------- */

  .flex_rumpf { display:flex;
                width:100%;
                flex-direction:column;
                flex-wrap: nowrap;
                align-items:flex-start;
                margin: 0;   padding: 0 2vw 0 2vw;   /* links und rechts etwas Rand */
                border:0;
              }
/* ---------- flex-item in 'flex-rumpf' = Fliesstextblock --------- */
div.textblock { width: 100%;
                margin: 0; padding: 30px 0 0 0;
              }




/* flexContainer fuer einen Fliesstext-Block  --------------------------------- */
/* =============                                                                */

  div.flex_text { display: flex;
                  flex-direction: column;
                  flex-wrap: wrap;
                  margin: 30px 0 3px 0; 
                  padding: 0 0 0 0;
                }

/* ---------- flex-item in 'flex_text' = Marginaltitel --------- */
 div.text-titel { display:block;
                  margin: 0; padding: 0;
                  align-text:left;
                }




/* flexContainer fuer Boxen  --------------------------------------------------- */
/* =============                                                                 */

         div.box_cont { display: block;                /* Container mit Boxen in einer Spalte */
                        flex-direction:column;
                        flex-wrap: nowrap;
                        justify-content: center;       /* zentrieren */
                        margin: 5px auto 0 auto; padding: 0;
                        border:0;
                      }
           div.topbox { display:block;
                        width: 100%;                    /* keine Beschraenkung der Breite    */
                        height: auto;                   /* keine Beschraenkung der Hoehe */
                        flex-direction: column;
                        margin: 0 0 20px 0;  padding: 0;
                        background-color:rgb(249, 249, 228);   
                        border: 2px solid #CCCCCC; 
                        border-radius: 8px;
                      }
              div.box { display:block;
                        width: 100%;                   /* bei Mobiltelefonen volle Breite nutzen */
                        height: auto;                  /* Hoehe unbegrenzt */
                        flex-direction: column;
                        margin: 0 0 20px 0;  padding: 0;
                        background-color:rgb(249, 249, 228);   
                        border: 2px solid #CCCCCC;     /* Umrandung: hellgrau */ 
                        border-radius: 8px;
                      }
          div.boxkopf { display:block;
                        width: 100%;
                        margin: 0;  padding: 0px 10px 0px 10px;
                        background-color:#000099; 
                        border: 2px solid white; 
                        border-radius: 8px 8px 0 0;
                      }
         div.boxrumpf { display:block;
                        width: 100%;
                        height:auto;
                        margin: 0; padding: 10px 10px 15px 10px;
                        border: 2px solid white; 
                        border-radius: 0 0 8px 8px;
                      }


/* Boxen zeilenweise anordnen, wenn Fenster breiter als 40em (= 2 x box) geworden ist --------------------------- */
@media only screen and (min-width:40em)  
{        /* Gruppe von Boxen in Zeilen geordnet */
         div.box_cont { display:flex;
                        flex-direction:row;
                        flex-wrap: wrap;
                        justify-content: center; 
                        margin: 1px auto 0 auto; padding: 0;
                      }
              div.box { display:inline-block;    /* Breite und Hoehe der Boxen beschraenken */
                        width: 20em;
                        height: 16em;
                        margin: 0 2px 20px 2px; padding: 0 0 0 0; 
                      }
} /* Ende @media */


/* Absatzformate fuer eine Box ------------------------------------------------ */
/* =============                                                                */
           p.boxtitel { margin:0 0 0 0; padding: 12px 0 3px 0;
                        font-size:1.1em; line-height:1.5em; color:white; 
                      }
            p.boxtext { font-size:1em; line-height:1.25em;
                        text-align:center;
                      } 
                .mehr { font-family:Arial, sans-serif; font-style:italic;
                        font-size:1em; line.height:1.25em;
                      }




/* Top-Box im Kopf einer Seite                                                      */
/* ---------------------------                                                      */
        div.topbox2sp { display: block;                 /* item von 'topboxrumpf' und flex-container */
                        flex-direction: column;
                        margin: 0; padding: 0px 2px 0px 2px;
                        border:0; 
                      }

     div.veranstalter { display: block;                /* item in 'topboxtermin' = linker Teil */
                        flex-direction: flex-start;
                        width: 100%;
                        margin: 0; padding: 0;
                      } 

    div.veranstaltung { display: block;                /* item in 'topboxtermin' = rechter Teil */
                        flex-direction: flex-start;
                        width: 100%;
                        margin: 0; padding: 0;
                      }

@media only screen and (min-width:650px) {
        div.topbox2sp { display: inline-flex;                 /* item von 'topboxrumpf' und flex-container */
                        flex-direction: row;
                        flex-wrap: nowrap;
                        justify-content: space-between;
                      }
     div.veranstalter { display: inline-block;
                        width: 45%;         /* item in 'topboxtermin' = linker Teil */
                      } 
    div.veranstaltung { display: inline-block;
                        width: 45%;        /* item in 'topboxtermin' = rechter Teil */
                      }
} /* Ende @media */



/* Textabsatzformate fuer Kopf der Topbox =================================================== */
        p.topboxtitel { margin: 0 0 0 0; padding: 1px 0 3px 0;
                        font-family: Arial, sans-serif;  font-weight:normal;
                        font-size:1.1em; line-height:1.5em; color:white; 
                      }
         p.topboxtext { margin: 0 0 0 0;   padding: 0 0 0 0;
                        font-size:1em; line-height:1.5em; font-weight:normal;
                        font-family: Arial, sans-serif;
                      } 
             p.termin { margin: 0 0 5px 0;   padding: 0 0 0 0;
                        font-size:1em; line-height:1.2em; font-weight:bold;
                        font-family: Arial, sans-serif;
                      } 
       p.veranstalter { margin: 0 0 5px 0;   padding: 0;
                        font-size:1em; line-height:1.2em; font-weight:normal;
                        font-family: Arial, sans-serif;
                        width: 100%;
                        text-align: left;
                      }
      p.veranstaltung { margin: 0 0 10px 0; padding: 0;
                        font-size:1em; line-height:1.2em; font-weight:bold;
                        font-family: Arial, sans-serif;
                        text-align:left;
                        color:#000099; /* AF-Blau */
                      } 
     span.topbox_mehr { font-family:Arial sans-serif; font-style:italic;
                        font-size:1em; line-height:1em;
                      }

@media only screen and (min-width:400px) {
       p.veranstalter { width: 400px; 
                      }
} /* Ende @media */



        
/* flexContainer fuer Bilder  -------------------------------------------------- */
/* =============                                                                 */

/* ----- flex fuer Bildleiste im laufenden Text ------- */
      div.bild_leiste { display: flex;
                        width:100%;
                        margin: 5px 0 0 0;
                        padding: 0 0 0 0 ;
                        flex-direction: row;
                        flex-wrap: wrap;
                        justify-content: center;
                        border:0;
                        font-style:normal; color:#666666; 
                      }
 
/* ----- Einzelbild in einer 'bild_leiste.'  ----------- */
          .Einzelbild { display: block;
                        border-top: 1px solid transparent;
                        border-right: 10px solid transparent;
                      }
       .Einzelbild img{ width:100%; height:auto; border:0; 
                      }


/* -------------- Formate fuer die Anzeige von Einzelbildern einer Bildleiste  ------------------ */ 

       .details { position:absolute;
                  top:0; right:0; bottom:0; left:0; 
                  padding: 0 0 0 0;
                  margin: 0;
                  height: 0;
                  max-height: 0px;
                  text-align: center;
                  vertical-align:middle;
                  background-color: #F1F3F4;
                  text-decoration:none;
                  text-shadow:none;
                  overflow: hidden;
                  transition: max-height 1s ease-in-out; }
.details:target { max-height: 100%;
                  height: auto; }

   .details img { width:100%;
                  height:auto;
/*                entscheidender Parameter:      */
/*                =========================      */
                  max-width:600px;
                  border:0; }

       p.Epoche { margin: 0 auto;
                  padding: 0 0 5px 0;
                  font: bold 1em/1.25em Arial, Helvetica, sans-serif;
                /* dunkelbraune Schrift  */
                  color:#663300;
                  text-align:center;
                  border:0; }
      p.Legende { margin: 0 auto;
                  padding: 0 0 0.2em 0;
                  font: normal 1em/1.25em Arial, Helvetica, sans-serif;
                /* dunkelbraune Schrift  */
                  color:#663300;
                  text-align:center;
                  border:0; }
         p.Foto { margin:0;
                  padding: 0 5px 0 5px;
                  font-size:8pt; line-height:9pt; text-align:left; }
        p.close { margin: 0 0 0 0 ;
                  padding: 0 0.25em 0 0 ;
                  font: normal 1.75em/1.5em Arial, Helvetica, sans-serif;
                  text-align:right;
                  border:0; }
#rumpf p.close a{ text-decoration:none;
                  color:#aaaaaa;  }





/* =============== FlexBox fuer Leiste mit Spender-Logos =============================================== */
.flex_donors { display: flex;
                 flex-direction: row;
                 flex-wrap: wrap;
                 justify-content: center;
                 align-items: center;
                 border:0;
             }