/* ---------------------------------------------------------------- */
/*        Projekt:  stephanbuchholz.de                              */                    
/*        File:     style.css                                       */                    
/*        Autor:    Stephan Buchholz                                */
/*        Datum:    24.01.2019                                      */
/* ---------------------------------------------------------------- */

/* ---------------------------------------------------------------- */
      .left    { text-align: left; }
      .right   { text-align: right; }
      .center  { text-align: center; }
      .justify { text-align: justify; }
      .start   { text-align: start; }
      .end     { text-align: end; }
/* ---------------------------------------------------------------- */
/* ---------------------------------------------------------------- */
/*    Small - Mobile First */
/* ---------------------------------------------------------------- */
@font-face { font-family: 'DejaVuSans';
             src: url('../fonts/DejaVuSans.ttf') format('truetype'); }

/* ---------------------------------------------------------------- */
/* Variablen: Deklarationen für das gesamte HTML-Dokument */
/*:root
 {
  --hauptfarbe: #666;
  --hintergrundfarbe: #ccc;
  --akzentfarbe: #c32e04;
  --linkfarbe: #09c;
}
var(--akzentfarbe) */
/* ---------------------------------------------------------------- */
/* Die Eigenschaft box-sizing wird nur für html eingestellt und alle
   Elemente erben den Wert ihres Elternelements. Hierdurch wird eine
   Änderung bei einem Element auf dessen Kindelemente weitervererbt. */
html
{
   box-sizing: border-box;
}

*, ::before, ::after
{
   box-sizing: inherit;
}
/* ---------------------------------------------------------------- */

/* Universalselektor */
*
{
   -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
   -moz-box-sizing:    border-box; /* Firefox, other Gecko */
   box-sizing:         border-box; /* Opera/IE 8+ */
  /* border: 1px solid #FFFF80;*/ /* debug - gelber Rahmen um alle Objekte */
}

/* ---------------------------------------------------------------- */

html 
{
}

body 
{
   display: flex;
   flex-flow: column nowrap; /* flex-flow (flex-direction) (flex-wrap) */ 
   justify-content:flex-start;
   align-items: stretch;
   /* minimale Breite -  mindestens iPhone 1 */
   min-width: 320px;
   margin: 5px auto 0px auto;
   padding: 5px auto;
 font-size: 100%;/*  font-size: 20px;  */
 font-family: DejaVuSans, sans-serif;
/*  font-family: Arial, Helvetica, sans-serif;*/
   color: #535353;
   background: #E0FFE0; 
max-width: 50em;
}

/* ---------------------------------------------------------------- */
/* Hauptebene */

/* main - (Haupt-)Inhalt der Webseite */
main
{
   flex: 1 1 0%;
   order: 20;
   margin: 0.5em 0.5em 0.5em 0.5em;
   padding: 0.5em 0.5em 0.5em 0.5em;
   background: #00E0E0;
/*   background-color:#FFFFC0;*/
   /* Rahmen */
/*   border: 1px solid grey;*/
/*   border-radius: 0.3em;*/
   box-shadow: 0.1em 0.1em 0.3em white inset, 0.2em 0.2em 0.2em grey;
   /* sub-flex-container */
   display: flex;
   flex-flow: column wrap;  
   /* automatischer Zeilenumbruch */
   -ms-hyphens: auto;
   -webkit-hyphens: auto;
   hyphens: auto;
}


/* ---------------------------------------------------------------- */

main section.spalte
{
   flex: 1 1 0%;
   margin: 0.2em auto 0.2em auto;
   padding: 0.2em 1.0em 0.2em 1.0em;
   background: #E0E0E0;
/*   border: 1px solid grey;
   border-radius: 0.3em;
   box-shadow: 0.1em 0.1em 0.3em white inset, 0.2em 0.2em 0.2em grey;*/
max-width: 35em;
}

main section.spalte img
{
   margin: 0;
   padding: 0 ;
   background: #E0E0E0;
width: 10em;
}
/* ---------------------------------------------------------------- */
main section.spalte h1
{
   background: #AFAFFF;
   text-align: center;
}
main section.spalte h2
{
   background: #AFFFAF;
   text-align: center;
}

/* ---------------------------------------------------------------- */
#under-construction
{
   flex: 1 1 100%;
   margin: 0.5em 1em 1.0em 1em;
   padding: 0.2em;
   font-size: 1.5em;
   font-weight: bold;
   text-align: center; 
   line-height: 2.0em; 
   background: RebeccaPurple; /* #663399 */
   color: hotpink;            /* #FF69B4 */
 /* border: 1px solid grey;*/
   border-radius: 0.3em;
   box-shadow: 0.1em 0.1em 0.3em pink inset, 0.2em 0.2em 0.2em grey; /* pink #FFC0CB */
}
/* ---------------------------------------------------------------- */