/**** FLEX-EIGENSCHAFTEN: Container und Elemente in beliebiger Reihenfolge ****/
main                { display:-webkit-box; display:-ms-flexbox; display:flex; -ms-flex-flow:row wrap; flex-flow:row wrap; }
header              { -webkit-box-flex:1; -ms-flex:1 1 100%; flex:1 1 100%; -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; }
nav                 { -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; -webkit-box-ordinal-group:6; -ms-flex-order:5; order:5; }
article             { -webkit-box-flex:1; -ms-flex:1 1 auto; flex:1 1 auto; -webkit-box-ordinal-group:3; -ms-flex-order:2; order:2; }

/**** HAUPT-ELEMENTE: Schriften, Maße und Abstände ****/
body                { font:1.4em Helvetica; color:#444444; background:#f9f9f9; max-width:58em; margin:auto; }
header              { max-width:1080px; }
nav                 { min-width:10em; padding:0.2em; }
article             { min-width:10em; padding:0.2em; }

/**** HEADER ****/
h1                  { position:absolute; margin:12% 0% 0% 12%; font-size:0.8em; }
h1 a                { text-decoration:none; font-weight:bold; }
h1 a:link           { color:#ffefc2; }
h1 a:visited        { color:#ffefc2; }
h1 a:hover          { color:#ffdf85; }
h1 a:active         { color:#ffefc2; }
header img          { width:100%; height:100%; }

/**** MAIN / nav ****/

/* Navigationslink als absolut platzierte Hamburger-Menü-CSS-Grafik */
a#navlink           { position:fixed; display:inline-block; overflow:hidden; top:0em; right:0em; width:1px; padding-left:1em; margin-right:0.3em; font-size:2em; text-decoration:none; }
a#navlink::before   { content:""; position:absolute; top:0.2em; left:0em; width:1em; height:0.2em; border-top:0.6em double #ff0000; border-bottom:0.2em solid #ff0000; }

/* Navigationslinks der ersten Ebene */
ul#navigation           { width:14em; margin:auto; padding-top:1em; border-top:solid 1px #808080; }

/* Dropdown-Menüs */
nav ul                  { margin:0em; padding:0em; overflow:hidden; z-index:999; }
nav ul li               { display:block; line-height:1.6em; }
nav ul li a             { display:inline-block; padding:0em; text-decoration:none; }
nav ul li.dropdown      { display:inline-block; }
ul.dropdown-content     { position:relative; display:block; padding-left:1em; }
ul.dropdown-content a   { padding:0em; text-decoration:none; text-align:left; color:white; }

nav a               { text-decoration:none; font-weight:bold; }
nav a:link          { color:#444444; }
nav a:visited       { color:#444444; }
nav a:hover         { color:#ffc03d; }
nav a:active        { color:#444444; }
nav a.aktiv         { color:#ffc03d; }

/**** MAIN / article ****/
h2, h3, h4, h5      { margin:0.4em 0em 0em 0em; font-size:1.1em; }
p                   { margin:0.4em 0em 0.8em 0em; }
br                  { display:block; margin:0.5em 0em 0.5em 0em; }
hr                  { margin:1em 0em 1em 0em; }
blockquote          { font-style:italic; }

a.ext               { background:no-repeat left center; padding-left:0.6em; background-image: url(ext.gif); }

article a           { text-decoration:underline; font-weight:bold; }
article a:link      { color:#444444; }
article a:visited   { color:#444444; }
article a:hover     { color:#ffc03d; }
article a:active    { color:#444444; }

.sau                { display:none; }
.feld               { top:-0.4em; width:98%; margin:0.4em 0em 0em 0em; float:none; font-size:1em; background-color:#ffffff; }
.feld:focus         { background-color:#fff0cf; }
textarea.feld       { font-size:1.3em; }

div#galerie div			{ text-align:center; }
div#galerie img			{ width:100%; height:100%; }

div#totop           { position:fixed; bottom:0em; right:0.4em; }
div#totop a         { font-size:2em; font-weight:bold; text-decoration:none; color:#ff0000; }

/**** LIGHTBOX, pures css ohne javascript, inspiriert durch Gregory Schier http://codepen.io/gschier/pen/HCoqh ****/

a.link2lb           { cursor:zoom-in; }
img.lb              { width:100%; height:auto; }
a.lb                { position:fixed; display:none; top:0px; left:0px; width:100%; height:100%; overflow:scroll; cursor:zoom-out; text-align:center; background:rgba(60,60,60,0.99); z-index:999; }
a.lb h3,div         { color:#ffffff; font-size:1em; margin:0.8em auto 0.8em auto; }
a.lb:target         { display:block; outline:none; }

/* Alle Lightbox-Inhalte stehen in den Lightbox-Ankern. */
/* Deswegen wird alles zu einem einzigen Link (der gesamte Viewport sowie darin angezeigten alle Elemente). */
/* Entsprechend bedarf es ein wenig css, um das Erscheinungsbild der Elemente bedarfsweise anzupassen. */

a.lb:link           { color:#000000; text-decoration:none; }
a.lb:visited        { color:#000000; }
a.lb:focus          { color:#000000; }
a.lb:hover          { color:#000000; }
a.lb:active         { color:#000000; }

/**** RESPONSIVITIY media queries ****/

@media all and (min-width:480px)
{
  nav, article      { padding:0.4em; }
  h1                { font-size:1.3em; }
  br                { display:inline; margin:0em; }
  div#galerie img		{ width:auto; height:auto; }

}

@media all and (min-width:1080px)
{
  main              { -ms-flex-flow:column nowrap; flex-flow:column nowrap; }
  header            { position:fixed; max-width:400px; }
  a#navlink         { display:none; }                                                     /* Hamburger-Menügrafik ausblenden */
  nav               { -webkit-box-ordinal-group:2; -ms-flex-order:1; order:1; }           /* Navigation hinter section einordnen */
  nav, article      { margin-left:20em; }
  header img        { width:400px; max-height:100%; }
  h1                { margin-top:1.2em; margin-left:1.2em; font-size:1.1em; }
  h1 a:link         { color:#ffc03d; }
  h1 a:visited      { color:#ffc03d; }
  h1 a:hover        { color:#ffb00a; }
  h1 a:active       { color:#ffc03d; }

  /* Navigationslinks der ersten Ebene */
  ul#navigation                             { width:auto; margin:0.7em 0em 0.7em 0em; padding:0em; font-size:1.1em; border-top:none 0px; }
  ul#navigation li                          { margin-right:7%; }
  ul#navigation li:nth-last-child(1)        { margin-right:0em; }

  /* Dropdown-Menüs in breiter Darstellung */
  nav ul li                                 { display:inline; }
  ul.dropdown-content                       { position:absolute; display:none; min-width:6.6em; margin:0em; padding:0em; background-color:#f9f9f9; border:solid 1px #c0c0c0; box-shadow:10px 10px 16px 0px rgba(0,0,0,0.4); }
  .dropdown:hover .dropdown-content         { display:block; }
  ul.dropdown-content li                    { display:block; width:100%; }
  ul.dropdown-content li:nth-child(1)       { padding-top:0.2em; }
  ul.dropdown-content li:nth-last-child(1)  { padding-bottom:0.2em; }
  ul.dropdown-content a                     { display:block; padding:0.1em 0.6em 0.1em 0.6em; }
  ul.dropdown-content a:hover               { background-color:#fffee0; }

  article           { padding-top:1em; border-top:solid 1px #c0c0c0; }
  h2, h3, h4, h5    { margin-bottom:1em; }
  .feld             { position:relative; width:70%; float:right; }
  div#totop         { display:none; }
}

@media all and (min-width:1280px)
{
  ul#navigation li  { margin-right:13%; }
}