﻿
@import url("//hello.myfonts.net/count/3d71d6");

/*#region Webfonts -----------------------------------------------------------------*/

@font-face {
  font-family: "Calibri";
  src: url('../../fonts/Calibri/font.woff2') format('woff2'), url('../../fonts/Calibri/font.woff') format('woff');
}

@font-face {
  font-family: "Calibri-BoldItalic";
  src: url('../../fonts/CalibriBoldItalic/font.woff2') format('woff2'), url('../../fonts/CalibriBoldItalic/font.woff') format('woff');
}

@font-face {
  font-family: "Calibri-Bold";
  src: url('../../fonts/CalibriBold/font.woff2') format('woff2'), url('../../fonts/CalibriBold/font.woff') format('woff');
}

@font-face {
  font-family: "Calibri-Italic";
  src: url('../../fonts/CalibriItalic/font.woff2') format('woff2'), url('../../fonts/CalibriItalic/font.woff') format('woff');
}

/*#endregion */

/*#region Grundeinstellungen -----------------------------------------------------------------*/

.Calibri {
  font-family: Calibri;
}

.CalibriItalic {
  font-family: "Calibri-Italic";
}

.CalibriBoldItalic {
  font-family: "Calibri-BoldItalic";
}

.CalibriBold {
  font-family: "Calibri-Bold";
}

html { /* allgemeine Einstellungen */
  width: 100%;
  height: 100%;
  font-family: Calibri;
  font-size: 10vw;
}

body { /*Seitenhintergrund*/
  margin: 1vw;
  background-color: black;
}

mark {
  background-color: transparent;
  color: #FF671B;
  font-family: Calibri-Bold;
}

/*#endregion */

/*#region Strukturierungs-Elemenete ----------------------------------------------------------*/

hr { /* horizontale Linie */
  border-color: black;
  border-width: 1px;
  height: 0;
}

header { /* Kopfzeile */
  height: 10vw;
  width: 100%;
  padding: 0;
  margin: -0.1rem;
  background: black;
  position: fixed;
  z-index: 98;
}

  header table {
    width: 100%;
  }

    header table tr td {
      text-align: left;
      white-space: nowrap;
    }

.Indikator {
  background-color: yellow;
  color: red;
  font-size: 0.3rem;
  font-family: Calibri-Bold;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 0.4rem;
  position: fixed;
  text-align: center;
  margin-top: -0.1rem;
  margin-left: 0.5rem;
  z-index: 99;
}

footer {
  top: 90vh;
  position: fixed;
}

article {
  margin: 1vw;
  padding-top: 10vw;
}

table {
  color: white;
  font-size: 4vw;
  border: none;
}

tr {
  vertical-align: top;
}

td {
  padding: 5px;
  border: none;
}

/*
  #endregion */

/*#region Überschrift- und Textabsätze ------------------------------------------------------ */

h1 { /* Seitenüberschrift */
  font-size: 0.7rem;
  color: #FF671B;
  margin-top: 0rem;
  margin-bottom: 0;
  margin-left: 0;
  position: fixed;
  white-space: nowrap;
}

h2, .h2 { /* Zwischenüberschrift */
  font-size: 0.55rem;
  color: #FF671B;
  margin-top: 2vw;
  margin-bottom: 0;
}

h3, .h3 { /* Unterüberschrift */
  font-size: 0.5rem;
  font-weight: normal;
  color: yellow;
  margin-top: 0;
  margin-bottom: 0;
}

p, .Absatz { /* Fließtext-Absatz */
  font-size: 0.4rem;
  color: white;
  margin-top: 2vw;
  margin-bottom: 0;
}

ul { /* Liste für Aufzählungen */
  margin: -0.1rem;
  margin-left: -0.4rem;
}

li { /* Absatz mit Aufzählungen */
  font-size: 0.4rem;
  color: white;
  border: none;
  padding: 0.1rem;
  list-style: square;
}

a {
  color: white;
}


/*#endregion */

/*#region Daten-Tabellen ---------------------------------------------------------------- */

.Datentabelle { /* der äußere Rahmen der Tabelle*/
  margin-top: 0;
  font-size: 0.4rem;
}

.Datentabelle-Kopfzeile { /* die Kopfzeile der Tabelle / Spalten-Überschriften */
  background-color: #FF671B;
  color: white;
  font-family: Calibri-Bold;
  border: 0.5vw solid black;
  text-align: left;
}

.Datentabelle-Datenzeile {
  background-color: peachpuff;
  color: black;
  text-align: left;
}

.Datentabelle-Spalte { /* Spalte für gebundene Datenfelder */
  border: 0.5vw solid black;
  padding: 1vw;
  text-align: left;
}

.Datentabelle-Kopfzeile-blind { /* die Kopfzeile der Tabelle / Spalten-Überschriften für Hiddenfields */
  background-color: #FF671B;
  padding: 0vw;
  border: 0.5vw solid black;
}

.Datentabelle-Spalte-blind { /* Spalte für Hiddenfields */
  padding: 0vw;
  border: 0.5vw solid black;
}

.Datentabelle-Bezeichnungsfeld {
  font-size: 0.4rem;
  color: black;
}

.Datentabelle-Button {
  -webkit-appearance: none;
  border-radius: 0;
  background-color: #FF671B;
  border: solid #FF671B;
}

.Datentabelle-Pagerzeile { /* die Fußzeile der Tabelle mit Blättern-Funktion */
  background-color: #868686;
  border: 0.5vw solid black;
}

/*#endregion */

/*#region Detailtabelle ---------------------------------------------------------------- */

.Formulartabelle { /* der äußere Rahmen der Tabelle*/
  margin-top: 0;
  font-size: 0.4rem;
  border: none;
}

.Formulartabelle-Datenzeile {
  background-color: transparent;
  border: none;
}

.Formulartabelle-Bezeichnungsfeld {
  font-size: 0.4rem;
  color: white;
  border: none;
}

.Formulartabelle-Mengentextfeld {
  font: inherit;
  border-style: groove;
  border-radius: 0;
}

.Formulartabelle-Textfeld {
  font-size: 0.35rem;
  background-color: white;
  border-style: groove;
  border-radius: 0;
}

.Formulartabelle-Kombinationsfeld { /* Fläche hinter dem gesamten Kombinationsfeld */
}

  .Formulartabelle-Kombinationsfeld .ajax__combobox_inputcontainer { /* Rahmen des gesamten Kombinationsfelds */
    padding: 0;
  }

    .Formulartabelle-Kombinationsfeld .ajax__combobox_inputcontainer td { /* Raster für nebeneinander liegenden Elemenet */
      padding: 0;
      font-size: 0;
      background-color: orange;
    }

  .Formulartabelle-Kombinationsfeld .ajax__combobox_textboxcontainer input { /* Text-Eingabe-Feld */
    font-size: 0.35rem;
    background-color: white;
    border-style: groove;
  }

  .Formulartabelle-Kombinationsfeld .ajax__combobox_buttoncontainer button { /* Dropdown-Schaltfläche */
    margin-top: 0px;
    border-style: outset;
  }

  .Formulartabelle-Kombinationsfeld .ajax__combobox_itemlist { /* Fläche des Dropdown-Menüs */
    background-color: white;
  }

    .Formulartabelle-Kombinationsfeld .ajax__combobox_itemlist li { /* Text im Dropdown-Menü */
      color: black;
      font-size: 0.35rem;
      width: 100%;
    }

.Button {
  -webkit-appearance: none;
  border-radius: 0;
  width: 0.6rem;
  margin-left: 0.8vw;
  vertical-align: middle;
}

.Kontrollkästchen {
  font-size: 20px;
}

/*#endregion */

/*#region Formular und Formularfelder ---------------------------------------------------------------- */

.Formular {
  font-size: 0.4rem;
}

.Formular-Bezeichnungsfeld {
  font-size: 0.4rem;
  color: white;
  border: none;
}

.Formular-Textfeld {
  font-family: Calibri;
  font-size: 0.4rem;
  background-color: white;
  padding: 0;
}

.Formular-Textfeld-deakiviert {
  border-radius: 0;
  font-family: Calibri;
  font-size: 0.4rem;
  color: black;
  background-color: transparent;
  border-style: none;
}

.Formular-Button {
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 0.4rem;
  height: 0.7rem;
  background-color: #FF671B;
  border: solid #FF671B;
  text-align: center;
  text-decoration: none;
  tab-size: 2rem;
  -moz-tab-size: 2rem;
  -ms-tab-size: 2rem;
  white-space: nowrap;
}

/*#endregion */

/*#region Kalender-Steuerelement */

.Kalender { /* das Kalender-Steuerelement als Container (inkl. Rahmen) */
  font-size: 0.4rem;
  background-color: white;
  border: 0.1rem solid #FF671B !important;
  border-top: 0px !important;
}

  .Kalender a { /* Hyperlinks in Kalender */
    text-decoration: none;
  }

  .Kalender .Titelzeile { /* Titelzeile, die den Monat enthält */
    font-weight: bold;
    height: 7vw;
    background-color: #FF671B;
    margin-bottom: -0.2rem;
    color: white;
  }

  .Kalender .VorZurückMonat { /* Fläche der vor- und zurück-Schaltflächen für Monat in der Titelzeile */
    text-align: center;
    height: 3vw;
    width: 3vw;
    padding: 0.1rem 0rem 0.0rem 0rem;
  }

    .Kalender .VorZurückMonat a { /* Texte der vor- und zurück-Schaltflächen für Monat in der Titelzeile */
      font-size: 5vw;
      color: white !important;
    }

    .Kalender .VorZurückMonat:nth-child(1) a { /*  (die Unterelemente der vor- und zurück-Schaltflächen) */
      color: blue;
    }

    .Kalender .VorZurückMonat:nth-child(3) a { /*  (die Unterelemente der vor- und zurück-Schaltflächen) */
      color: blue;
    }

      .Kalender .VorZurückMonat:nth-child(1) a:hover,
      .Kalender .VorZurückMonat:nth-child(3) a:hover { /*  */
        background-color: transparent;
      }

  .Kalender th.ÜberschriftenWochentage { /* Überschriftenzeilen mit Wochentagen */
    Color: white;
    background-color: #FF671B;
    border: outset 0.05rem #fbfbfb;
    border-right: outset 0.05rem #fbfbfb;
  }

  .Kalender td { /* Tabellen-Spalten  */
    line-height: 0.3rem;
    padding: 0.09rem;
  }

    .Kalender td.Tage { /* die Tage im Allgemeinen */
      border: outset 0.05rem #fbfbfb;
    }

    .Kalender td.TageAndererMonat { /* Tage des vorherigen und des nachfolgenden Monats */
      background-color: gray;
      border: outset 0.05rem #fbfbfb;
    }

    .Kalender td.Heute { /* der heutige Tag  */
      border-color: red !important;
      border-style: solid !important;
      border-width: 0.1rem !important;
    }
     
     .Kalender td.MonatUndWoche { /*  Spalte "Woche" und "Monat" für die Datumsauswahl */
      background-color: green;
    }

    .Kalender td.GewählterTag { /* der ausgewälte Tag */
      background-color: #FF671B !important;
    }

    .Kalender td.Wochenende { /* Wochenend-Tage  */
      background-color: peachpuff;
      border: outset 0.05rem #fbfbfb;
    }

    .Kalender td.Feiertag { /* Feiertage */
      background-color: lightseagreen;
      border: outset 0.05rem #fbfbfb;
    }

    .Kalender td.Schulferien { /* Schulferien */
      background-color: lightskyblue;
      border: outset 0.05rem #fbfbfb;
    }
        
  .Kalender .ÜberschriftenWochentage a,
  .Kalender .Tage a,
  .Kalender .MonatUndWoche a,
  .Kalender .VorZurückMonat a { /*  */
    display: block;
  }

    .Kalender .Tage a:hover,
    .Kalender .MonatUndWoche a:hover { /* Zahlen der Tage beim darüberfahren */
      background-color: orange;
    }

/*#endregion */

/*#region Dialog-Fenster ---------------------------------------------------------------- */

.Dialogfenster {
  width: 75vw;
  background-color: white;
  padding: 4vw;
  border-style: solid;
  border-color: #FF671B;
  border-radius: 1vw;
  line-height: 3vw;
  text-align: left;
}

.Dialogfenster-Hintergrund {
  background-color: white;
  opacity: 0.75;
}

.Dialogfenster-Text {
  font-size: 4vw;
  color: black;
  line-height: 1.25;
}

.Dialogfenster_groß {
  width: 90vw;
  padding-left: 2vw;
  padding-right: 2vw;
  text-align: left;
  height: 73vh;
  margin-top: 1vh;
  padding-top: 6.4vh;
  padding-bottom: 2vh;
  line-height: 3vw;
  background-color: white;
  border-style: solid;
  border-color: #FF671B;
  border-radius: 0;
}

.Dialogfenster-Kopfzeile {
  width: 90vw;
  padding: 2vw;
  margin-left: -2vw;
  height: 12vw;
  margin-top: -6.4vh;
  line-height: 1.25;
  background-color: peachpuff;
}

.Dialogfenster-Fußzeile {
  width: 90vw;
  padding-left: 2vw;
  padding-right: 2vw;
  margin-left: -2vw;
  height: 5vh;
  margin-top: -10vh;
  padding-top: 1vh;
  font-size: 4vw;
  color: black;
  background-color: peachpuff;
}

.Betreff {
  font-size: 4vw;
  color: black;
  font-family: Calibri-Bold;
}

.Zusatzinfos {
  font-size: 3vw;
  color: black;
}

.Dialogfenster-Inhalt {
  font-size: 4vw;
  color: black;
  line-height: 1.25;
  padding-top: 3vh;
  padding-bottom: 15vh;
  margin: 0vw;
}

.Dialogfenster-Buttons,
input[type="button"] {
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 4vw;
  background-color: #FF671B;
  color: white;
  border: none;
  width: 12vw;
  height: 6vw;
  margin-right: 5vw;
  margin-top: 5vw;
}

.Dialogfenster-Buttons_2,
input[type="button"] {
  -webkit-appearance: none;
  border-radius: 0;
  font-size: 3.5vw;
  background-color: #FF671B;
  color: white;
  border: none;
  width: 25vw;
  height: 6vw;
  margin-right: 0vw;
  margin-top: 0vw;
}

  .Dialogfenster-Buttons_2:active,
  .Dialogfenster-Buttons_2:hover,
  .Dialogfenster-Buttons:active,
  .Dialogfenster-Buttons:hover { /* Fokuserhalt, Mouseover und Klicken an den Dialogfenster-Buttons */
    background-color: black;
    -webkit-user-select: none;
    -webkit-touch-callout: none
  }

/*#endregion */
