/* ------------------------------------------------------------- */
/* Schriftarten und Schriften                                    */
/* ------------------------------------------------------------- */

@font-face
{
  font-family: "Technical";
  src: url("/fonts/TECHNICN.TTF") format("truetype");
}

@font-face
{
  font-family: "kirchenkamp";
  src: url("/fonts/titel/Kirchenkamp.ttf") format("truetype");
}

@font-face
{
  font-family: "Automobile Contest";
  src: url("/fonts/titel/Automobile Contest.otf") format("opentype");
}

body, textarea
{
  font-family: Technical, Verdana, Arial, Helvetica, "sans serif", sans;
  font-size:   14pt;
}

/* ------------------------------------------------------------- */
/* Allgemeine Formate                                            */
/* ------------------------------------------------------------- */

body
{
  margin: 0px;
}

a:link    { text-decoration: none;      color:#000000; }
a:visited { text-decoration: none;      color:#202020; }
a:focus   { text-decoration: underline; color:#0000FF; }
a:hover   { text-decoration: underline; color:#0000FF; }
a:active  { text-decoration: none;      color:#0000FF; }

img
{
  border-style: none;
}

h1
{
  text-align: center;
  font-size: 20pt;
}

h2
{
  text-align: center;
  font-size: 16pt;
}

p, li
{
  margin-top:    12pt;
  margin-bottom: 12pt;
}

ul
{
  margin-top: 0px; margin-bottom: 0px; margin-left: 2ex;
  padding: 0pt;
  list-style-position: outside;
}

table
{
  border-style: none; border-spacing: 0pt;
  padding: 0pt;
}

table.zentriert
{
  margin-left: auto;
  margin-right: auto;
}

td
{
  vertical-align: top;
}

.zentriert
{
  text-align: center;
}

.rechts
{
  text-align: right;
}

.anklickbar
{
  cursor: pointer;
}

/* ------------------------------------------------------------- */
/* Konstanten                                                    */
/* ------------------------------------------------------------- */

:root
{
  /* Farben */
  --hintergrundfarbe:    #DFFF85;
  --seitenleistenfarbe:  #9BDA5C;
  --textfarbe:           #030;
  /* Aufteilung */
  --links: 210px;
  --oben:  280px;
  /* links */
  --links_margin:  10px;
  --links_padding: 10px;
  --logo_padding:  10px;
  --logo_height:  231px;
  /* linien */
  --linien: calc(var(--links_margin) + var(--links_padding) + var(--logo_padding) + var(--logo_height));
  --blende: calc(var(--linien) + 30px);
  /* inhalt */
  --inhalt_margin_min:  50px;
  --inhalt_margin_max:  330px;
  --inhalt_margin_1:      min(calc(100% - var(--inhalt_margin_min)), var(--max_margin));
  --inhalt_margin_2:        max(0px, var(--links));
  --inhalt_margin_links:  var(--inhalt_margin_min);
  --inhalt_margin_rechts: var(--inhalt_margin_links);
}

/* ------------------------------------------------------------- */
/* body                                                          */
/* ------------------------------------------------------------- */

body
{
  background-color: var(--hintergrundfarbe);
}

/* ------------------------------------------------------------- */
/* Seitenleiste                                                  */
/* ------------------------------------------------------------- */

#links
{
  position:         fixed;
  z-index:          0;
  top:              var(--links_margin);
  bottom:           var(--links_margin);
  left:             var(--links_margin);
  width:            calc(var(--links) - var(--links_margin) - 2 * var(--links_padding));
  background-color: var(--seitenleistenfarbe);
  padding:          var(--links_padding);
  text-align:       center;
}

#logo
{
  /*background-color: white;*/
  padding:          var(--logo_padding);
  padding-bottom:   0px;
  padding: 0px;
}

#logo img
{
  height: var(--logo_height);
}

#menue
{
  --margin:   0px;
  margin-top: var(--margin);
  height:     calc(100% - var(--linien) + var(--links_margin) + var(--links_padding) - var(--margin));
  overflow-y: auto;
}

#menue ul
{
  margin:     0px;
  list-style: none inside;
}

#menue ul li
{
  margin:     0px;
  margin-top: 32pt;
  text-align: center;
  font-size:  14pt;
}

.menue1 a:link    { font-weight: normal; color: white; text-decoration: none; }
.menue1 a:visited { font-weight: normal; color: white; text-decoration: none; }
.menue1 a:focus   { font-weight: normal; color: #30921A; text-decoration: underline; }
.menue1 a:hover   { font-weight: normal; color: #30921A; text-decoration: underline; }
.menue1 a:active  { font-weight: normal; color: #30921A; text-decoration: underline; }

/* ------------------------------------------------------------- */
/* Trennung                                                      */
/* ------------------------------------------------------------- */

#linien
{
  position: fixed;
  z-index:  2;
  top:      var(--linien);
  left:     0px;
  right:    0px;
}

#linie_1
{
  height:           3px;
  background-color: #008000;
}

#linie_2
{
  height:           3px;
  background-color: #C85400;
}

/* ------------------------------------------------------------- */
/* Titel                                                         */
/* ------------------------------------------------------------- */

#titel
{
  position:         fixed;
  z-index:          1;
  top:              0px;
  height:           var(--blende);
  left:             var(--links);
  right:            var(--links_margin);
  background-color: var(--hintergrundfarbe);
  color:            #C85400;
  font-family:      "Kirchenkamp", serif;
  font-size:        110pt;
}

#titel div
{
  --min_width: 27ex;
  --max_margin: 160px;
  --links: min(calc(100% - var(--min_width)), var(--max_margin));
  --margin_left: max(0px, var(--links));
  margin-left: var(--margin_left);
  min-width: var(--min_width);
}

#titel div p
{
  margin-top:    10px;
  margin-bottom:  0px;
}

#titel div p.untertitel
{
  margin-top: -83px;
  margin-left: 3ex;
}

/* ------------------------------------------------------------- */
/* Seite                                                         */
/* ------------------------------------------------------------- */

#seite
{
  margin-top:    calc(var(--blende) + 1px);
  margin-left:   var(--links);
  margin-right:  0;
  margin-bottom: 50px;
  overflow:      auto;
  color:         var(--textfarbe);
}

#seiteninhalt
{
  margin-left:  var(--inhalt_margin_links);
  margin-right: var(--inhalt_margin_rechts);
}

.todo
{
  font-style: italic;
}

/* ============================================================= */