/* thedb.css von Julius Steinberg */

* { box-sizing: border-box; padding: 0; margin: 0; }
[hidden] { display: none !important; }

/* #region Farben */

:root {
  --brombeerrot:        hsl(340,  35%, 30%);
  --brombeerrot2:       hsl(340,  35%, 50%);
  --Sand_dunkler:       hsl( 50,  30%, 60%);
  --Sand:               hsl( 50,  30%, 80%);
  --Sand_hell:          hsl( 50,  30%, 90%);
  --Problem_dunkler:    hsl( 30,  80%, 70%);
  --Problem:            hsl( 30,  80%, 80%);
  --Problem_hell:       hsl( 30, 100%, 90%);
  --Hintergrund0:       hsl(  0,   0%, 97%);

  --gutter-width: 10px;
  --gutter-hit: 24px; /* für bessere Fiddability */
  --min-pane: 240px;
  --gutter-bg: rgba(0,0,0,0.08);
  --gutter-hover: rgba(0,0,0,0.12);  

  --LV:         hsl(100, 50%, 70%);
  --LV_dunkler: hsl(100, 50%, 60%);
  --LV_blasser: hsl(100, 50%, 90%);

  --Sitzung_BA:            hsl(120, 50%, 83%);
  --Sitzung_BA_Akzent:     hsl(120, 50%, 70%);
  --Sitzung_BA_blasser:    hsl(120, 50%, 95%);
  --Sitzung_MA:            hsl(200, 50%, 83%);
  --Sitzung_MA_Akzent:     hsl(200, 50%, 70%);
  --Sitzung_MA_blasser:    hsl(200, 50%, 95%);

  --faellt_aus_blasser: hsl(10, 80%, 90%);
  --faellt_aus:         hsl(10, 80%, 80%);
  --faellt_aus_Akzent:  hsl(10, 80%, 70%);

  --unentschieden:       hsl(50, 80%, 80%);
  --unentschieden_hover: hsl(50, 80%, 70%);

  --toolbar:         hsl( 30,  80%, 80%);
  --toolbar_hover:   hsl( 30, 100%, 90%);

  /* --Stundenplan1:    hsl( 50,  30%,  75%); */
  /* --Stundenplan2:    hsl( 50,  30%,  80%); */
  /* --Stundenplan3:    hsl( 50,  30%,  85%); */
  --Stundenplan4:    hsl( 50,  30%,  90%);
  --extracurricular: hsl( 50, 100%, 60%);
}

.Stundenplan {
  --Hintergrund:           hsl( 50, 40%, 90%);
  --Hintergrund_dunkler:   hsl( 50, 40%, 70%);
  --Loch:                  hsl( 50, 40%, 95%);
  --Tag_Kopf:              hsl( 50, 40%, 85%);
  --Kopf:                  hsl( 50, 40%, 85%);
  --Kopf_BA:               hsl( 50, 40%, 85%);
  --Kopf_MA:               hsl( 50, 40%, 85%);
  --Kopf_EvGmp:            hsl( 50, 40%, 85%);
  --Sitzung_BA:            hsl(120, 60%, 83%);
  --Sitzung_BA_Akzent:     hsl(120, 60%, 70%);
  --Sitzung_BA_blasser:    hsl(120, 60%, 95%);
  --Sitzung_MA:            hsl(200, 60%, 83%);
  --Sitzung_MA_Akzent:     hsl(200, 60%, 70%);
  --Sitzung_MA_blasser:    hsl(200, 60%, 95%);
  --Sitzung_EvGmp:         hsl(200, 50%, 83%);
  --Sitzung_extracurricular:hsl( 50, 100%, 80%);
  --Sitzung_extracurricular_Akzent:hsl( 50, 100%, 70%);
  --Sitzung_extracurricular_blasser:hsl( 50, 100%, 90%);
  --Sonderveranstaltung:  hsl(220, 60%, 40%);
}

.Stundenplan .heute {
  --Tag_Kopf:              hsl( 50, 90%, 70%);
}

.Stundenplan.Stundenplan_generale {
  --Hintergrund:           hsl( 50,  0%, 93%);
  --Hintergrund_dunkler:   hsl( 50,  0%, 70%);
  --Loch:                  hsl( 50,  0%, 100%);
  --Tag_Kopf:              hsl( 50,  0%, 85%);
  --Kopf:                  hsl( 50,  0%, 85%);
  --Kopf_BA:               hsl(120, 50%, 80%);
  --Kopf_MA:               hsl(200, 50%, 80%);
  --Kopf_EvGmp:            hsl(200, 50%, 80%);
  --Sitzung_BA:            white;
  --Sitzung_MA:            white;
  --Sitzung_EvGmp:         white;
  --Sitzung_extracurricular: hsl( 50, 100%, 90%);
}

.Stundenplan .vergangen {
  --Hintergrund:           hsl( 50, 0%, 90%);
  --Hintergrund_dunkler:   hsl( 50, 0%, 70%);
  --Loch:                  hsl( 50, 0%, 95%);
  --Tag_Kopf:              hsl( 50, 0%, 85%);
  --Kopf:                  hsl( 50, 0%, 85%);
  --Kopf_BA:               hsl( 50, 0%, 85%);
  --Kopf_MA:               hsl( 50, 0%, 85%);
  --Kopf_EvGmp:            hsl( 50, 0%, 85%);
  --Sitzung_BA:            hsl(120, 0%, 83%);
  --Sitzung_BA_Akzent:     hsl(120, 0%, 70%);
  --Sitzung_BA_blasser:    hsl(120, 0%, 95%);
  --Sitzung_MA:            hsl(200, 0%, 83%);
  --Sitzung_MA_Akzent:     hsl(200, 0%, 70%);
  --Sitzung_MA_blasser:    hsl(200, 0%, 95%);
  --Sitzung_EvGmp:         hsl(200, 0%, 83%);
  --Sitzung_extracurricular:hsl( 50, 0%, 80%);
  --Sitzung_extracurricular_Akzent:hsl( 50, 0%, 70%);
  --Sitzung_extracurricular_blasser:hsl( 50, 0%, 90%);

  --Sonderveranstaltung:  hsl(220, 0%, 40%);
}


/* #endregion */
/* #region grundlegend */


html { 
  height: 100%; 
  overflow: hidden;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
  font-size: 90%;
  /* font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;  */
  --nav_Breite: clamp(13em, 20vw, 24em);
}

body {
  height: 100%;
  overflow: hidden; 
}

p {
  line-height: 150%;
}

p.hervorgehoben {
  font-weight: bold;
  margin-top: 10px;
  margin-bottom: 10px;
}

.unterstrichen {
  text-decoration: underline;
}

h1 {
  font-size: 200%;
  font-weight: bold;
  margin-top: 0em;
  margin-bottom: 1em;
}

h2 {
  font-size: 150%;
  font-weight: bold;
  margin-top: 2em;
  margin-bottom: 1em;
}

h3 {
  font-size: 120%;
  font-weight: bold;
  margin: 0;
  padding: 0;
}

.flex {
  display: flex;
  gap: 0.3em;
}

/* #endregion */ 
/* #region Navigation */


#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    z-index: 9999;

    background: transparent;
    pointer-events: none;
}

#loading-progress {
    width: 0%;
    height: 100%;

    background: #3b82f6;
    transition: width 150ms ease-out;
}


#thedbNavigation {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  bottom: 0;
  width: var(--nav_Breite);
  transition: left 0.5s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  row-gap: 2em;
  overflow-x: hidden; 
  overflow-y: auto; 
  border-right: 1px solid hsl(0, 0%, 94%);
  background-color: hsl(0, 0%, 94%);
  padding:1rem;
}

#thedbNavigation.inaktiv {
  background-color: var(--Hintergrund0);
  border: transparent;
}

#button-menu {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 200%;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--Hintergrund0);
}

#Navigation_Fuss {
  color: var(--brombeerrot);
  font-size: 80%;
}

#thedbMain {
  margin-left: var(--nav_Breite);
  height: 100%;
  overflow-x: hidden; 
  overflow-y: auto; 
  background-color: var(--Hintergrund0);
  padding: 1rem;
  container-type: inline-size;
}

#thedbMain_inner {
  margin-bottom: 10em;
}

/* @media (max-width: 720px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(8rem, auto) 1fr;
  }

  #thedbNavigation {
    border-right: none;
    border-bottom: 1px solid #ccc;
    font-size: 0.7rem;
  }

  .media_gross { display: none; }
} */

.nav-zurueck {
  margin-bottom: 10px;
  padding: 5px 10px;
}

.nav-zurueck:hover {
  background-color: white;
  cursor: pointer;
}

/* .nav-welcome {
  margin-bottom: 0.3em;
} */

.nav-name {
  font-size: 120%;
  font-weight: bold;
  /* margin-top: 0.3em; */
  margin-bottom: 1em;
}


.Einstellungen1_inner {
  font-weight: bold;
  color: #444;
  display: flex;
}

.Einstellungen_Zeile {
  display: flex;
}

.Semesterwoche_mehrzeilig {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  column-gap: 0.3em;
}

/* .Semesterwoche_mehrzeilig div {
  text-align: center;
} */

button {
  font-size: 120%;
  padding: 0.5em 2em;
  color: #444;
  border-radius: 0.4em;
  background-color: hsl(0, 0%, 90%);
  border: none;
}

button.fa {
  width: 3em;
  height: 3em;
  padding: 0;
  font-size: 120%;
  border-radius: 0.3em;
}

button:hover {
  background-color: hsl(0, 0%, 80%);
  color: #222;
  cursor: pointer;
}

button:disabled {
  opacity: 0.35;
  pointer-events: none;
}

button.gross {
  font-size: 140%;
  border-radius: 0.2em;
}

button.fa.gross {
  font-size: 160%;
}

button.klein {
  font-size: 100%;
  border-radius: 0.5em;
  padding: 0.2em 0.7em;
}

button.im_Text {
  margin: 1.5em 0;
}

.ui2 {
  height: 1.8em;
}

button.ui2 {
  margin: 0;
  padding: 0;
  width: 3em;
  border: none;
  text-align: center;
}

button.ui2.Suche {
  width: 30px;
}

input.ui2 {
  height: 2.2em;
}

button.Wahl {
  width: 100%;
  background-color: #eee;
  margin: 0;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #ccc;
  height: 2.3em;
  font-size: 100%;
  font-weight: bold;
}

button.Wahl:hover {
  background-color: #ddd;
}

button.Wahl.aktiv {
  background-color: #ccc;
}


/* #endregion */
/*************************************** Seiten ******************************************/
/* #region Seiten */


.Seite {
  height: 100%;
  padding: 0;
}

/* .Seite_Kopf {
} */

.Seite_Kopf_mit_Bild {
  width: 100%;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1rem;
}

.Seite_Kopf_mit_Bild img {
  width: 6rem;  
  height: 6rem;
}

.Seite_Kopf_mit_Bild.mittelgross img {
  width:  7.2rem;  
  height: 7.2rem;
}
.Seite_Kopf_mit_Bild.gross img {
  width: 10rem;  
  height: 10rem;
}

.Stundenplan-nav-wrapper { /* hier weil es um den Seitenkopf geht */
  display:flex; 
  gap: 1rem; 
  margin: 1rem 0;
  justify-content: space-between;
}

/* .einspaltig_zentriert {
  padding: 10px;
  /* width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 20px;
  align-items: center;
}

.space_between {
  justify-content: space-between;
}

.einzeilig {
  display: flex;
  column-gap: 15px;
} */

.einspaltig_linksbuendig {
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1rem;
  align-items: start;
}

/* .Formular {
  display: none;
} */

.Seite p {
  margin: 0.5em 0;
}

.Seite_Abschnitt {
  /* width: 80%; */
  padding: 20px 5px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  /* align-items: center; */
  border-radius: 5px;
}

.Seite_Abschnitt p {
  margin-bottom: 10px;
}

.Seite_Unterabschnitt {
  display: flex;
  flex-direction: column;
  row-gap: 10px;
}

details {
  padding: 0.5em 0;
  max-width: 900px;
  font-size: 100%;
}

summary {
  color: var(--Sand_dunkler);
  cursor: pointer;
}

details p {
  padding: 0 0 10px 0;
}

/* .Seite_Abschnitt.Kasten500 {
  margin: 40px;
  width: 500px;
  padding: 30px 30px;
  background-color: var(--Sand_hell);
}

.Seite_Abschnitt.Kasten500.Problem {
  background-color: var(--Problem_hell);
}

.Kasten500 h2 {
  text-align: center;
  padding: 10px 0;
  margin-bottom: 20px;
  border-bottom: 1px solid #333;
}

.Kasten500 button {
  margin: 40px 0;
  background-color: var(--Sand);
}

.Kasten500.Problem button {
  background-color: var(--Problem);
}

.Kasten500 button.klein {
  margin: 20px 70px;
}

.Kasten500 button:hover {
  background-color: var(--Sand_dunkler);
}

.Kasten500.Problem button:hover {
  background-color: var(--Problem_dunkler);
}

.Kasten500 button.Passwoerter_sichtbar {
  width: 3em;
  align-self: end;
  margin:0;
  padding:0.3em 0;
} */


.Reiter_container {
  display: flex;
  column-gap: 0.4em;
  margin-bottom: 3em;
}

button.Reiter {
  margin: 0;
  margin-top: 10px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: var(--Sand);
}

button.Reiter.aktiviert {
  background-color: var(--Sand_hell);
  margin-top: 0;
}



/* #endregion */
/*************************************************** Dialoge ***************************************************/
/* #region Dialoge */


dialog {
  margin: auto;
  /* border-radius: 10px; */
  border: none;
  background: transparent;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

dialog h1 {
  font-size: 140%;
  margin: 0;
  padding: 0;
}

dialog label {
  padding: 5px 0;
}

dialog label.disabled {
  color: #888;
}

dialog input[type="text"],
dialog input[type="time"]
{
  font-size: 100%;
  padding: 5px;
}

dialog input[type="checkbox"]
{
  justify-self: start;
  width: 2em;
}

dialog select {
  font-size: 100%;
  padding: 5px;
}

dialog .statisch {
  font-size: 100%;
  padding: 5px;
  margin: 0;
}

dialog button {
  font-size: 100%;
  border: none;
  border-radius: 5px;
  background-color: var(--Sand);
  margin: 0;
  padding: 0.6em 2.5em;
}

dialog button:hover {
  cursor: pointer;
  background-color: var(--Sand_dunkler);
}

.Dialog_Kopf {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  background-color: var(--Sand_dunkler);
  padding: 0.7em 3em;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.Dialog_Koerper {
  background-color: var(--Sand_hell);
  padding: 3em;
}

.Dialog_Koerper2 {
  background-color: var(--Sand_hell);
  padding: 0 3em;
  min-height: 1.5em;
}

.Dialog_Liste_Rahmen {
  height: 30em; 
  overflow: auto;
}

dialog .Abstand {
  height: 2em;
}

.Dialog_zweispaltig {
  display: grid;
  grid-template-columns: 150px 400px;
  gap: 10px;
}

.Dialog_Hinweise {
  color: hsl(10, 80%, 60%);
}

.Dialog_Fuss {
  background-color: var(--Sand_hell);
  border-bottom-left-radius: 0.5em;
  border-bottom-right-radius: 0.5em;
  padding: 1.5em 3em;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  column-gap: 3em;
}


/* #endregion */
/* #region Testbereich */


#thedbTestbereich_oeffnen {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 100px;
  height: 40px;
  border-radius: 10px;
  background-color: hsl(50, 80%, 70%);
  border: none;  
  color: black;
  padding: 0.1em;
  font-size: 100%;
}

#thedbTestbereich_Kopf {
  position: absolute;
  right: 20px;
  top: 20px;
  height: 210px;
  width: 400px;
  border-radius: 10px;
  background-color: hsl(50, 80%, 70%);

  /* display: flex; */
  justify-content: space-between;
  padding: 20px;

}

#thedbZahnrad {
  transform-origin: center;
}

#thedbTestbereich {
  position: absolute;
  right: 20px;
  top: 250px;
  bottom: 20px;
  width: 400px;
  border-radius: 10px;
  background-color: hsl(50, 80%, 70%);
  padding: 20px;
  overflow-y: scroll;
}

#thedbTestbereich h3 {
  color: black;
  font-weight: bold;
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}

#thedbTestbereich p {
  color: black;
}

#thedbTestbereich p.Fehler {
  color: red;
  font-weight: bold;
}


/* #endregion */
/* #region responsiv */

html {
  font-size: clamp(70%, min(1.5vw, 1.5vh), 90%);
}


/* Umschaltung mit/ohne Menüleiste */

@media (width <= 50rem) {
  #thedbMain { margin-left: 0; }
  #thedbNavigation { width: 20rem; left: -20rem; box-shadow: 1px 0 4px #ccc; }
  #thedbNavigation.aktiv {left: 0; }
  #button-menu { display: block; }
}

@media print {
  html { height: auto; overflow: auto; }
  body { height: auto; overflow: auto; }
  #thedbMain { margin-left: 0; }
  #thedbNavigation { display: none; }
  #button-menu { display: none; }
}

/* breitenabhängige Einstellungen */

@media (width > 70rem)            {  #thedbMain { padding-left: 2rem;   padding-right: 2rem; }     }
@media (50rem >= width >= 30rem)  {  #thedbMain { padding-left: 0.5rem; padding-right: 0.5rem; } }
@media (width < 30rem)            {  #thedbMain { padding-left: 0.2rem; padding-right: 0.2rem; } }

/* höhenabhängige Einstellungen */

@media (height > 70rem)           {  #thedbNavigation { padding-top: 2rem;   padding-bottom: 2rem;   }  #thedbMain { padding-top: 2rem; padding-bottom: 2rem; }  }
@media (50rem >= height >= 30rem) {  #thedbNavigation { padding-top: 0.5rem; padding-bottom: 0.5rem; }  #thedbMain { padding-top: 0.5rem; padding-bottom: 0.5rem; }  }
@media (height < 30rem)           {  #thedbNavigation { padding-top: 0.2rem; padding-bottom: 0.2rem; }  #thedbMain { padding-top: 0.2rem; padding-bottom: 0.2rem; }  }

/* breiten- und höhenabhängig */

@media (height <= 50rem) or (width <= 50rem) {
  .Seite_Kopf_mit_Bild img             { width: 4rem; height: 4rem; }
  .Seite_Kopf_mit_Bild.mittelgross img { width: 6rem; height: 6rem; }
  .Seite_Kopf_mit_Bild.gross img       { width: 6rem; height: 6rem; }
  .Seite_Kopf_mit_Bild h1              { font-size: 160%; margin-bottom: 0.5em; }
  .Stundenplan-nav-wrapper             { margin: 0.3rem; }
}

@media (height < 30rem) or (width <= 30rem) {
  .Seite { height: auto }
  .Seite_Kopf_mit_Bild img             { width: 3rem; height: 3rem; }
  .Seite_Kopf_mit_Bild.mittelgross img { width: 4.5rem; height: 4.5rem; }
  .Seite_Kopf_mit_Bild.gross img       { width: 4.5rem; height: 4.5rem; }
  .Seite_Kopf_mit_Bild h1              { font-size: 140%; margin-bottom: 0;}
  .Stundenplan-nav-wrapper             { margin: 0.2rem; }
}

/* #endregion */