/* VARIABLEN */
:root {
  /* Farben */
  --hellgrau: #d9d9d9;
  --dunkelgrau: #4d4d4d;
  --schwarz-90: #191919;
  --schwarz-85: #262626;
  --schwarz-60: #666666;
  --schwarz-50: #9d9d9c;
  --schwarz-40: #b2b2b2;
  --schwarz-30: #c6c6c6;
  --schwarz-20: #dadada;
  --schwarz-10: #e4e4e4;
  --schwarz-5: #f1f1f1;
  --schwarz-2: #fafafa;
  --schwarz-1: #fcfcfc;
  --schwarz: #000000;
  --unifilm-rot: #ae0f0a;
  --weiss: #ffffff;
  --gelb: #ffea61;
  --hell_gelb: #fff3a3;
  --leucht_gelb: #ffff00;
  --dunkel_gelb: #dfc72a;
  --gruen: #8fbf75;
  --leucht_gruen: #83bb00;
  --hell_gruen: #c6dfb9;
  --dunkel_gruen: #597a48;
  --rot: #eb715e;
  --hell_rot: #f19b8e;
  --leucht_rot: #ff0000;
  --dunkel_rot: #af5345;
  --orange: #e5a05b;
  --hell_orange: #eebf91;
  --leucht_orange: #ff9500;
  --dunkel_orange: #be6e1e;
  --blau: #84aaba;
  --hell_blau: #adc6d1;
  --leucht_blau: #7dd9eb;
  --dunkel_blau: #455e68;
  --ty_blau: #5faccc;
  --lila: #bda5df;
  --braun: #8b4513;
  /* Font-größe */
  --base_font: calc(0.5rem + 0.6 * 1vmin);
  --font_80: calc(var(--base_font) * 0.8);
}

@import url("https://use.typekit.net/gkd1pjt.css");

* {
  box-sizing: border-box;
}

body {
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--base_font);
  background: var(--schwarz-1);
  color: var(--schwarz);
  margin: 0;
}

/* Generelle Textformatirung */
p {
  margin: 0;
}

h3 {
  font-size: 110%;
  margin: 5px 0;
}

i {
  font-size: 18px;
}

.text {
  padding-left: 1em;
  padding-right: 1em;
  margin-top: 10px;
}

.bold {
  font-weight: bold;
}

.small {
  font-size: smaller;
  font-weight: normal;
}

.klein {
  font-size: 80%;
  font-weight: normal;
}

.ty_larger {
  font-size: 120%;
}

.ty_rot {
  color: var(--unifilm-rot);
}

.ty_none {
  display: none;
}

.rot, .rot input {
  background-color: var(--rot);
  color: var(--weiss);
}

.weiss_rot {
  background-color: var(--weiss);
  color: var(--leucht_rot);
}

.gruen {
  background-color: var(--gruen);
  color: var(--weiss);
}

.rot select,
select.rot {
  color: var(--weiss);
}

.gelb, .gelb input {
  background-color: var(--gelb);
  color: var(--schwarz-90);
}

.links {
  text-decoration: none;
  color: var(--unifilm-rot);
  cursor: pointer;
}

.links:hover {
  color: var(--schwarz-40);
}

.titel {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 120%;
  margin-top: 2px;
}

.titel-bereich {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 100%;
  margin-top: 2px;
}

.center {
  text-align: center;
  font-weight: bold;
  font-size: 150%;
}

.ty_right {
  text-align: right !important;
}

.ty_left {
  text-align: left !important;
  text-align-last: left !important
}

h2 {
  color: var(--dunkelgrau);
  margin: auto;
  font-family: bebas-neue-by-fontfabric, sans-serif;
  font-size: 3em;
}

.alignright {
  float: right;
}

a {
  color: var(--unifilm-rot);
}

.link_rot {
  color: var(--weiss);
}

.link_rot:hover {
  color: var(--unifilm-rot);
}

.pad_ten {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.margin_auto {
  margin: auto !important;
}

.l_margin_0 {
  margin-bottom: 0 !important;
}

.l_margin_1 {
  margin: 1em 0;
}

.l_right {
  float: right;
}

/* Header Bereich mit den Logos */
/* Teil des Grids von body. */
#kopfzeile {
  background: var(--hellgrau);
  display: flex;
  justify-content: space-between;
  margin-bottom: 3em;
  width: 100%;
  height: 5em;
}

.logos {
  max-height: 60%;
  margin: auto 2%;
  max-width: 25%;
}

h1 {
  color: var(--unifilm-rot);
  margin: auto;
  font-family: bebas-neue-by-fontfabric, sans-serif;
  font-size: 2.5em;
}

.ty_zentriert {
  text-align: center;
}

.ty_klein {
  font-size: var(--font_80);
}

/* Inhalt */
main {
  display: grid;
  grid-template-columns: 1fr 3fr;
  margin: 0 10%;
}

.l_main_abrechnungen {
  margin: 0 10%;
}

/* Wenn Bereich gesperrt ist. */
/* Roter Kasten am Anfang der Seite */
#gesperrt {
  background-color: var(--unifilm-rot);
  text-transform: uppercase;
  font-size: 200%;
  text-align: center;
}

input:disabled, select:disabled, textarea:disabled {
  background-color: var(--schwarz-50);
  cursor: not-allowed;
}

td input:disabled, td select:disabled, td textarea:disabled {
  background-color: inherit;
}

/* Log in Bereich */
.log-logo {
  margin: auto;
  display: block;
  max-height: 150px;
  height: 100%;
  padding-top: 50px;
}

.log-in-screen {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url(../image/hintergrund_web.jpg);
  background-color: var(--schwarz);
  background-repeat: repeat-y;
  background-size: cover;
}

.log-in-inhalt {
  position: relative;
  top: 20%;
  background-color: rgba(255, 255, 255, 0.7);
  margin: auto;
  width: 50%;
  min-width: 500px;
  border-radius: 5px;
}

.log-in-bereich {
  margin: auto;
  margin-top: 50px;
  min-width: 500px;
  background: var(--hellgrau);
  border-radius: 5px;
  padding: 35px 30px 20px 30px;
}

.log-in-header {
  margin: -60px -30px 20px -30px;
  padding-left: 1em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  background: var(--dunkelgrau);
  color: var(--weiss);
  border-radius: 5px;
}

.log-in-form {
  display: block;
  padding: 10px 10px;
  margin: 15px -10px;
}

input[type="submit"] {
  cursor: pointer;
  color: var(--weiss);
  font-size: 14px;
  text-transform: uppercase;
  width: 120px;
  background-color: var(--unifilm-rot);
  border: none;
}

input[type="search"] {
  width: auto;
  height: auto;
  margin-bottom: 0.5em;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  margin: 0;
  padding-left: 0;
}

/* Navigation */
/* Teil des Grids von body. */
.navi {
  grid-column: 1 / 2;
  grid-row: 1 / 2;
}

.navi ul {
  max-width: 13.2em;
  padding: 0;
  list-style: none;
  margin-top: 0;
  position: sticky;
  top: 20px;
}

.navi li {
  border-radius: 5px;
  margin-bottom: 4px;
  margin-left: 2px;
  text-align: center;
  padding: 1.3em 1em;
  display: block;
  cursor: pointer;
  font-size: var(--base_font);
}

.navi li:hover {
  color: var(--weiss);
  background-color: var(--dunkelgrau);
}

.drop-menu {
  color: var(--schwarz);
  background-color: var(--hellgrau);
}

.drop-menu a, .hier a {
  text-decoration: none;
  color: inherit;
}

.drop-menu_dummy {
  color: var(--schwarz);
  background-color: var(--hellgrau);
}

.drop-info {
  color: var(--weiss);
  background-color: var(--unifilm-rot);
  text-align: left;
}

.hier {
  color: var(--weiss);
  background-color: var(--dunkelgrau);
}

.log-out {
  position: fixed;
  bottom: 25px;
  border: solid 1px var(--hellgrau);
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  color: var(--schwarz);
  background-color: var(--hellgrau);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 17px;
  display: block;
  width: 2.5em;
  height: 2.5em;
}

.log-out:hover {
  color: var(--weiss);
  background-color: var(--dunkelgrau);
}

/* Logout-Button des Spielplan muss anders plaziert werden, weil überdeckt wichtige Funktionen! */
.log-out-spiel, .btn_back {
  position: fixed;
  border: hidden;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  width: 2.5em;
  height: 2.5em;
  color: var(--schwarz);
  background-color: rgba(128, 128, 128, 0.2);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

.log-out-spiel {
  bottom: 25px;
  left: 25px;
}

.btn_back {
  bottom: 25px;
  left: 85px;
}

.log-out-spiel:hover, .btn_back:hover {
  color: var(--weiss);
  background-color: var(--dunkelgrau);
}

/* Navigation des Spielplans und FAQ */
.spiel-header {
  background: var(--schwarz-30);
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  color: var(--weiss);
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  border-radius: 5px;
  position: sticky;
  top: 0;
  z-index: 100;
}

.spiel-header ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

.faq-nav {
  background: var(--dunkelgrau);
  padding-left: 1em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  color: var(--weiss);
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  border-radius: 5px;
}

.faq-nav ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
  margin: auto;
  padding: 0;
}

.tab {
  flex: 1;
  margin: auto;
  text-align: center;
  border-style: hidden solid solid hidden;
  border-right-color: rgba(0, 0, 0, 0.8);
  border-bottom-color: transparent;
  cursor: pointer;
}

.tab h3 {
  font-size: 130%;
  margin: 15px 0;
}

.tab:last-child {
  flex: 1;
  margin: auto;
  text-align: center;
  border-style: hidden solid solid hidden;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

.hier2 {
  flex: 1;
  margin: auto;
  text-align: center;
  border-style: hidden solid solid hidden;
  border-right-color: rgba(0, 0, 0, 0.8);
  border-bottom-color: var(--weiss);
  background-color: var(--schwarz-85);
}

.hier2 h3 {
  font-size: 130%;
  margin: 15px 0;
}

.spielplan h3 {
  margin-top: 18px;
  margin-bottom: 15px;
}

/* Navigation Abrechnungen */
.l_nav_abrechnungen ul {
  padding: 0;
  list-style: none;
  margin: 0;
  top: 20px;
  display: flex;
}

.l_nav_abrechnungen .drop-menu {
  padding: .5em .5em;
  border-radius: 5px;
  margin-bottom: 4px;
  margin-left: 2px;
  text-align: center;
  cursor: pointer;
  font-size: var(--base_font);
}

.l_kontaktdaten {
  color: var(--weiss);
  background-color: var(--unifilm-rot);
  border-radius: 5px;
  margin-bottom: 4px;
  text-align: center;
  padding: .5em .5em;
  font-size: var(--base_font);
}

/* Kacheln auf der Startseite */
.sperr-zone {
  margin: auto;
  padding-left: 0;
  display: flex;
  flex-wrap: wrap;
}

.kachel {
  margin: 1% 5% 1% 15%;
  width: 30%;
}

.spielplan .kachel {
  margin: 1% auto;
  width: 40%;
  text-align: center;
}

.start-navi, .start-navi_dummy {
  color: var(--schwarz);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  margin: auto .5em;
  display: inline;
  vertical-align: super;
  cursor: pointer;
}

.start-navi:hover, .start-navi_dummy:hover {
  color: var(--dunkel_rot);
  text-decoration: none;
}

.sperr-button, .sperr-kein-termin {
  background: var(--hellgrau);
  background-image: url(./fontawesome/svgs/solid/lock-open-alt.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 80% 80%;
}

.sperr_intern {
  margin: auto 0 auto .5em;
}

.sperr-zone h3 {
  margin: 5px 5px 5px !important;
}

.sperr-button:hover {
  background-color: var(--unifilm-rot);
  background-image: url(./fontawesome/svgs/solid/lock-alt_white.svg);
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: center;
}

.sperr-kein-termin {
  cursor: not-allowed;
}

.gesperrt-button {
  background-color: var(--unifilm-rot);
  background-image: url(./fontawesome/svgs/solid/lock-alt_white.svg);
}

.sperr-button, .gesperrt-button, .sperr-kein-termin {
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: center;
  border: 1px solid var(--dunkelgrau);
  border-radius: 5px;
  color: var(--schwarz);
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-weight: 400;
  font-style: normal;
  transition: all 1s ease;
  height: 2.5em;
  width: 2.5em;
  cursor: pointer;
}

.check-sperren {
  color: var(--schwarz);
  text-decoration: none;
  text-align: center;
}

.fehlerkasten {
  background-color: var(--rot);
  border-radius: 5px;
  width: 100%;
  padding: 0;
  margin: auto;
}

.spielplan_grid .fehlerkasten {
  margin-top: 15px;
  width: 100%;
}

.sperr-zone .fehlerkasten {
  width: 80%;
}

.fehlerkasten td {
  padding: 7px 0 7px 1em;
  vertical-align: unset;
}

.fehlerstatut {
  color: var(--weiss);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  padding: 1em !important;
}

.tab_bereich {
  width: 50px;
}

.ty_alert {
  color: var(--weiss);
}

/* Block Formular Formatierung */
#live_data {
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.spielplan_grid, .facebook_grid {
  grid-column: 1 / 3;
  margin-bottom: 2%;
}

/* Grid für .form-header, .fragen (oder .fragen-ohne-bild) und .bilderleiste */
.block {
  display: grid;
  grid-template-columns: 60% 40%;
  /*grid-template-rows: auto auto auto auto;*/
  margin-bottom: 15px;
  background: var(--hellgrau);
  border: 1px solid var(--hellgrau);
  border-radius: 5px;
}

.facebook_grid .block {
  margin-bottom: 5px;
}

input {
  width: 99.4%;
  margin-top: 0.5em;
  border: 1px var(--schwarz-50);
  border-style: hidden;
  border-radius: 5px;
  padding-left: 0.5em;
  background-color: var(--weiss);
  height: 25px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
}

input[type="file"] {
  border: hidden;
  padding-left: 0;
  background-color: transparent;
  height: auto;
  width: auto;
}

select {
  width: 99.4%;
  margin-top: 0.5em;
  margin-bottom: 1em;
  border: 1px var(--schwarz-50);
  border-style: hidden;
  border-radius: 5px;
  padding-right: .5em;
  padding-left: .5em;
  background-color: var(--weiss);
  height: 25px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
}

input[type="checkbox"], input[type="radio"] {
  width: 15px;
  height: 15px;
  vertical-align: sub;
}

input[type="date"] {
  background-color: transparent;
  margin: 0;
  padding: 0;
  font-size: 10px;
}

fieldset {
  border: none;
  display: inline;
  margin-left: 0;
  padding-left: 0;
}

.notizen {
  width: 99.4%;
}

.link-button {
  border: hidden;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  color: var(--unifilm-rot);
  background-color: var(--hellgrau);
}

.link-button:hover {
  color: var(--schwarz);
}

/* Teil des Grids von .block */
.form-header {
  background: var(--dunkelgrau);
  padding-left: .5em;
  padding-top: .1em;
  padding-bottom: .1em;
  color: var(--weiss);
  grid-column: 1 / 3;
  grid-row: 1 / 2;
  border-radius: 5px;
}

.spielplan_grid .form-header, , .facebook_grid .form-header {
  margin-top: 15px;
  margin-bottom: 2px;
  width: 100%;
}

.form-header .sperr-zone {
  padding: 15px;
  font-size: 120%;
  flex-direction: row-reverse;
}

/* Teil des Grids von .block */
.fragen {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
  padding-left: 2em;
  padding-right: 2em;
  margin-top: 10px;
}

/* Teil des Grids von .block. Alternative zu .fragen */
.fragen-ohne-bild {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  padding-left: 2em;
  padding-right: 2em;
  margin-top: 10px;
}

.fragen-teil_2 {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
  padding-left: 2em;
  padding-right: 2em;
  margin-top: 10px;
}

.kontakt_box {
  grid-column: 1 / 3;
  grid-row: 2 / 3;
  padding-left: .5em;
  padding-right: .5em;
  margin-top: 10px;
}

/* Frage mit 2 Eingebefelder */
.textboxen {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.textbox {
  display: grid;
  grid-template-columns: 1fr;
}

textarea {
  caret-color: var(--unifilm-rot);
  border: hidden;
  border-radius: 5px;
  padding: 0.5em;
  margin-right: 5px;
  /*color: var(--schwarz-50);*/
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  min-height: 150px;
  resize: vertical;
}

.nurlesen {
  background-color: var(--schwarz-10);
  color: var(--schwarz-50);
  cursor: not-allowed;
}

.zuviel {
  background: var(--rot);
  color: var(--weiss);
}

table {
  margin-top: -2px;
  margin-bottom: 15px;
  padding: 0;
  border-collapse: collapse;
}

.ubernehmen-tab {
  width: 25%;
  padding: 5px;
  text-align: left;
  font-weight: normal;
  font-size: smaller;
}

.ubernehm {
  width: 35%;
}

.rechtsbuendig {
  text-align: right;
  padding: 2px;
  width: 15%;
}

#adressenbeta, #teamaktiv, #teaminaktiv {
  table-layout: auto;
}

/* Bilder auf der Seite <aside> */
/* Teil des Grids von .block */
.bilderleiste {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

.bilder {
  max-width: 400px;
  padding-right: 10px;
  width: 100%;
  display: block;
}

.icon {
  width: 50%;
  height: auto;
}

.plus {
  width: 18px;
  margin-left: 5px;
  margin-right: 10px;
  z-index: 10;
}

.team_hinzufuegen {
  display: flex;
  position: relative;
  top: 30px;
  font-size: var(--font_80);
  align-items: center;
}

.minus {
  width: 18px;
  z-index: 12;
  vertical-align: middle;
}

.tab-icon {
  width: 20px;
  margin: 2px;
  vertical-align: middle;
  cursor: pointer;
}

.bild-tabelle {
  /*max-width: 270px;*/
  width: 100%;
}

.karte {
  height: 450px;
  width: 100%;
}

.fa-info {
  color: var(--rot);
  font-size: xx-small;
  vertical-align: text-top;
}

.info_icon_gross {
  font-size: 100%;
  vertical-align: text-top;
}

/* Ausklapbare Bereiche <details> <summary> */
details {
  /*padding-left: 1em;
  padding-bottom: 1em;*/
  color: var(--weiss);
  background-color: var(--schwarz-50);
  padding: 5px 10px;
  border-radius: 5px;
  width: 99.4%;
}

details:hover {
  color: var(--schwarz);
}

details[open] {
  background: var(--schwarz-50);
  color: var(--schwarz-85);
  /*margin: 2px;*/
  padding-top: 10px;
}

.kontakt_box details {
  background-color: transparent;
  color: var(--schwarz);
  padding: 0;
}

.kontakt_box details summary {
  margin-bottom: 10px;
}

/* Infokasten */
.info_kasten {
  margin: auto;
  padding: 10px;
  color: var(--schwarz-60);
  background-color: var(--schwarz-10);
  border-radius: 5px;
  font-size: smaller;
  text-align: left !important;
}

.info_kasten p {
  font-size: large;
  color: var(--schwarz);
}

/* Kontaktformulare */
.team input {
  border-color: var(--weiss);
  caret-color: var(--unifilm-rot);
}

.team select {
  background-color: var(--schwarz-20);
}

.team select {
  border-color: var(--weiss);
  caret-color: var(--unifilm-rot);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

.team {
  background-color: var(--schwarz-40) !important;
  color: var(--schwarz-90) !important;
}

.team_alt {
  background-color: var(--schwarz-30) !important;
  color: var(--schwarz-90);
}

.spielplan details {
  width: 1155px;
  margin: auto;
}

.aktuel-button {
  background-color: var(--weiss);
  color: var(--schwarz);
  border-style: solid;
  border-radius: 5px;
  border-color: var(--weiss);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

.details-breit {
  width: 90% !important;
}

/* Spielplan */
#live_data_spiel {
  grid-column: 1 / 3;
  grid-row: 3 / 4;
}

.spielplan {
  margin-top: 15px;
  margin-bottom: 2px;
  padding: 5px;
  background: var(--hellgrau);
  border: 1px solid var(--hellgrau);
  border-radius: 5px;
  width: 100%;
}

/* Legende */
.legende-tabelle {
  border: hidden;
  table-layout: fixed;
  margin: auto;
}

.leg-semester {
  text-align: center;
  width: 18%;
  font-weight: 700;
  color: var(--schwarz-60);
}

.leg-termine {
  text-align: center;
  width: 15%;
  font-weight: 700;
  color: var(--schwarz-60);
}

.leg-termine-2 {
  text-align: center;
  width: 25%;
  font-weight: 700;
  color: var(--schwarz-60);
}

.erklaetext {
  margin: auto;
  text-align: justify;
}

/* Tabelle  für Spielplan */
.ueber-spiel {
  text-align: center;
}

table {
  width: 100%;
}

table, th, td {
  border-collapse: collapse;
  padding: 1px 1px;
}

/* <table class="hauptuebersicht"> */
.hauptuebersicht, .fehlertabelle {
  table-layout: fixed;
  width: auto;
  margin: 0;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font_80);
}

/* <tr class="spiel"> */
.spiel th {
  height: 30px;
  cursor: default;
}

.spiel td {
  height: 30px;
  padding: 3px 10px;
  border-bottom: 1px solid var(--schwarz-50);
  border-left: 1px solid var(--schwarz-50);
}

.hauptuebersicht thead,
.fehlertabelle thead {
  cursor: default;
}

.hauptuebersicht thead th:first-child,
.hauptuebersicht thead td:first-child,
.fehlertabelle thead th:first-child,
.fehlertabelle thead td:first-child {
  border-left: none;
}

.hauptuebersicht thead th:active,
.hauptuebersicht thead td:active,
.fehlertabelle thead th:active,
.fehlertabelle thead td:active {
  outline: none;
}

/* Größe (Padding) der Zelle */
.hauptuebersicht th, .hauptuebersicht td,
.fehlertabelle th, .fehlertabelle td {
  padding: 3px 2px;
}

.hauptuebersicht th,
.fehlertabelle th {
  background-color: var(--hellgrau);
}

.hauptuebersicht th, .hauptuebersicht td,
.fehlertabelle th, .fehlertabelle td {
  border-top: 1px solid var(--schwarz-5);
  border-left: 1px solid var(--schwarz-30);
}

.hauptuebersicht td:first-child,
.fehlertabelle td:first-child {
  border-left: none !important;
}

.hauptuebersicht tr:first-child th,
.hauptuebersicht tr:first-child td,
.fehlertabelle tr:first-child th,
.fehlertabelle tr:first-child td {
  border-top: none;
}

.hauptuebersicht tr:last-child td,
.fehlertabelle tr:last-child td {
  border-bottom: 1px solid var(--schwarz-5);
}

/* Zebra-Streifen */
.hauptuebersicht tbody tr:nth-child(odd),
.fehlertabelle tbody tr:nth-child(odd) {
  background-color: var(--schwarz-2);
}

.hauptuebersicht tbody tr:nth-child(even),
.fehlertabelle tbody tr:nth-child(even) {
  background-color: var(--schwarz-10);
}

.hauptuebersicht td:nth-of-type(1),
.fehlertabelle td:nth-of-type(1) {
  border-left-style: hidden;
}

.hauptuebersicht td:last-child,
.fehlertabelle td:last-child {
  border-right-style: hidden;
}

td select {
  border: none;
  width: 100%;
  margin: auto;
  font-size: var(--base_font);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  color: var(--schwarz);
  background-color: transparent;
  padding: 0;
  overflow: auto;
}

td select option {
  color: var(--schwarz);
  font-size: 14px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.termin-neu {
  background-color: var(--hellgrau) !important;
}

/* letzte Spalte mit "neuer Termin" */
.termin-neu td {
  font-size: 16px;
  height: 30px;
  border: hidden;
}

/* Einzelne Zeile im Spielplan */
.sp-nz-kino, .sp-nz-unifilm {
  width: 150px;
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  text-align: center;
}

.sp-nz-unifilm {
  cursor: not-allowed;
}

.sp-tag {
  width: 45px;
  text-align: center;
}

.sp-st-tag {
  width: 60px;
  text-align: center;
}

.sp-datum {
  width: 105px;
  text-align: center;
}

.sp-vo-termin {
  width: 105px;
  text-align: center;
}

.sp-uhr {
  width: 75px;
  text-align: center;
}

.sp-lzeit {
  width: 50px;
  text-align: center;
}

.sp-ftitel, .sp-alt-ftitel, .sp-ersatz {
  width: 145px;
  text-align: center;
}

.sp-haupt-ftitel {
  width: 250px;
  text-align: center;
}

.sp-aft, .sp-tm {
  width: 140px;
  text-align: center;
}

.sp-lizenz {
  width: 55px;
  text-align: center;
}

.sp-s {
  width: 80px;
  text-align: center;
}

.sp-medium {
  width: 90px;
  text-align: center;
}

.sp-us {
  width: 45px;
  text-align: center;
}

.sp-titel {
  width: 450px;
  text-align: center;
}

.sp-titel-z {
  width: 275px;
  text-align: center;
}

.sp-titel_2 {
  padding-left: 5px;
}

.sp-ov {
  width: 190px;
  text-align: center;
}

.sp-v-titel, .sp-v-trailer, .sp-v-plakat {
  width: 245px;
  text-align: center;
}

.sp-abw-einlass {
  width: 103px;
  text-align: center;
}

.sp-einlass {
  width: 80px;
  text-align: center;
}

.sp-abw-preis {
  width: 105px;
  text-align: center;
}

.sp-preis {
  width: 80px;
  text-align: center;
}

.sp-semesterbeitrag {
  width: 145px;
  text-align: center;
}

.sp-abw-text-eintritt, .sp-abw-raum, .sp-text-klammer, .sp-thh {
  width: 185px;
  text-align: center;
}

.sp-raum {
  width: 150px;
  text-align: center;
}

.sp-z-heft, .sp-z-poster, .sp-z-flyer, .sp-z-fb, .sp-z-vp, .sp-z-hp {
  /* hyphens */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: 182px;
  padding-left: 5px;
}

.sp-icon {
  width: 30px;
  text-align: center;
  cursor: pointer;
  vertical-align: middle;
}

.sp-neu {
  background-color: var(--schwarz-40);
  color: var(--weiss);
  font-weight: 700;
  text-align: left;
  padding-left: 7px;
}

.sp-neu img {
  padding: 1px;
  background-color: var(--weiss);
  border-radius: 1px;
}

.sp-z-alle-fl {
  /* hyphens */
  -moz-hyphens: auto;
  -o-hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  width: 700px;
  padding-left: 5px;
  text-align: center;
}

.sp-zentriert {
  text-align: center;
}

.losch-zeile {
  cursor: default;
}

.festgelegt {
  cursor: not-allowed;
}

/* Zeichenlängen-Tabelle */
.zeichenlaengen {
  margin: auto;
  background-color: var(--schwarz-30);
  color: var(--schwarz);
}

.zeichenlaengen td {
  color: var(--schwarz);
  background-color: var(--hellgrau);
  height: 30px;
  border: 1px solid var(--schwarz-30);
  padding-left: 5px;
}

.zeichenlaengen th {
  padding-left: 5px;
  border-right: .1em solid var(--schwarz-50);
  border-bottom: .1em solid var(--schwarz-50);
}

.zeichenlaengen th:last-child {
  border-right: hidden;
}

.link-faq {
  text-decoration: underline;
  color: var(--unifilm-rot);
}

.link-faq:hover {
  text-decoration: none;
  color: var(--schwarz);
}

/* Fehlermeldungstabelle */
.fehlertabelle {
  table-layout: fixed;
  width: 100%;
  margin: 0;
  clear: both;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--font_80);
}

.sp-reiter-fehler {
  width: 100px;
  padding-left: 5px;
}

.sp-spalte-fehler {
  width: 150px;
  padding-left: 5px;
}

.sp-rote-fehlermeldung {
  width: 460px;
  padding-left: 5px;
}

.sp-gelbe-fehlermeldung {
  width: 370px;
  padding-left: 5px;
}

.sp-isok {
  width: 90px;
  text-align: center;
}

.leg-fehler {
  text-align: right;
}

.kritische_fehler {
  border-color: var(--unifilm-rot);
  border-style: solid;
  border-width: 5px;
  padding-left: 1px;
  padding-right: 1px;
}

.warnhinweise {
  border-color: var(--gelb);
  border-style: solid;
  border-width: 5px;
  padding-left: 1px;
  padding-right: 1px;
}

/* Fehlermedlungen im Spielplantool (Färbung der Zelle) */
.roter-kasten {
  background-color: var(--unifilm-rot);
  color: var(--weiss);
}

.gelber-kasten {
  background-color: var(--gelb);
}

/*  Plakatauswahl */
.Auswahl-Programm-Plakat {
  text-align: center;
  margin: auto;
}

.plakate-programm {
  width: 140px;
  padding-right: 10px;
}

.plakate {
  width: 200px;
}

/* Plakat zum Auswählen */
.posterauswahl {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
}

.poster {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  width: 200px;
  margin: 1%;
}

.poster label {
  background-color: var(--schwarz-5);
  border: 2px solid var(--schwarz-50);
  border-radius: 5px;
  color: var(--schwarz-50);
  font-size: 1.15em;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  margin: 3px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all 0.25s ease-in-out;
  padding: 8px 12px;
  cursor: pointer;
}

.poster label::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  padding: 2px 6px 2px 2px;
  content: url(image/plus-solid.png);
  transition: transform .3s ease-in-out;
}

.poster input[type="checkbox"]:checked+label::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: url(image/check-solid.png);
  padding: 2px 6px 2px 2px;
  transition: transform .3s ease-in-out;
}

.poster input[type="checkbox"]:checked+label {
  border: 2px solid var(--schwarz-50);
  border-radius: 5px;
  background-color: var(--schwarz-50);
  color: var(--schwarz-5);
  transition: all .2s;
}

.poster input[type="checkbox"] {
  position: absolute;
  opacity: 0;
}

.poster input[type="checkbox"]:focus+label {
  border: 2px solid var(--schwarz-50);
}

.poster p {
  padding: .2em;
  text-align: center;
  font-size: 100%;
  min-height: 34px;
}

.poster select {
  margin-top: 0;
}

/* FAQ-Gallerie */
.fotoblock {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-content: space-around;
  margin: 0;
  padding: 50px 0 50px 0;
  background: var(--hellgrau);
  border: 1px solid var(--hellgrau);
  border-radius: 5px;
}

.produkt {
  border: 1px solid #a8a9a9;
  border-radius: 5px;
  background: #a8a9a9;
  flex-basis: 28%;
  margin-bottom: 50px;
  z-index: 100;
}

.produkt_leer {
  border: hidden;
  border-radius: 5px;
  background: transparent;
  flex-basis: 28%;
  max-height: 360px;
  margin-bottom: 50px;
  z-index: 100;
}

.produkt a {
  text-decoration: none;
}

.produkt-bild {
  width: 100%;
  margin: 0;
  padding: 0;
}

.produkt-name {
  background: var(--dunkelgrau);
  color: var(--weiss);
  padding: 15px;
  border-radius: 5px;
  position: relative;
  width: inherit;
}

.produkt-name h3 {
  margin: 0;
  padding: 0;
  text-align: center;
}

.produkt-erklaerung {
  width: 200%;
  padding: 2em 0;
  margin: auto;
  position: relative;
  float: left;
  opacity: 0;
  height: 0;
  font-size: 0;
  z-index: -1;
  display: none;
  justify-content: space-between;
}

.produkt-erklaerung:target {
  height: auto;
  font-size: 100%;
  opacity: 1;
  flex-basis: 90%;
  z-index: 101;
  display: flex;
  margin-bottom: 50px;
}

.produkt-erklaerung img {
  width: 100%;
}

.faq-bilder-leiste {
  list-style: none;
  flex-basis: 45%;
  margin: 0;
  padding: 0;
}

.faq-bilder-leiste li {
  padding: 10px;
}

.description {
  flex-basis: 45%;
}

.description-spalte {
  flex-basis: 45%;
}

/* Erklärungsseiten */
.erklaerung {
  padding: 2em 0;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 1280px;
  grid-column: 1 / 3;
  grid-row: 2 / 3;
}

.erklaerung img {
  width: 100%;
}

.grosse-spalte {
  flex-basis: 100%;
  padding-bottom: 25px;
}

.zweite-spalte {
  list-style: none;
  flex-basis: 45%;
  margin: 0;
  padding: 0;
}

.under-con {
  width: 100%;
  margin: auto;
  background-color: #d3e1f5;
}

.fa-lock-open-alt, .fa-lock-alt {
  width: 1em !important;
  float: right;
}

.td_edit {
  background-color: var(--weiss);
  border-radius: 5px;
  border: hidden;
  height: 26px;
  align-self: center;
  font-size: var(--font_80);
  padding: 5px;
  word-break: break-word;
  width: 80%;
}

.spalte_8 {
  width: 8% !important;
}

.spalte_10 {
  width: 10% !important;
}

.spalte_12 {
  width: 12% !important;
}

.spalte_14 {
  width: 14% !important;
}

.spalte_20 {
  width: 20% !important;
}

.spalte_24 {
  width: 24% !important;
}

.versteckt {
  background-color: var(--schwarz-50) !important;
  color: var(--schwarz-50) !important;
  border-color: var(--schwarz-50) !important;
  display: none;
}

.ty_weiss {
  color: var(--weiss);
}

.bg_grau {
  background: var(--schwarz-50);
  padding: 1% 0;
  margin: 10px -5px;
}

.nav_2 {
  margin: auto;
  padding: 2px 2.5%;
  background-color: var(--schwarz-50);
  border-radius: 5px;
  text-align: center;
  color: var(--schwarz-10);
  border-collapse: collapse;
}

.nav_2 td {
  border-left: 1px solid var(--schwarz-30);
  padding: 0 2%;
}

.nav_link {
  position: relative;
  top: -70px;
  visibility: hidden;
}

.nav_ki td {
  width: 14%;
  padding: 5px;
}

.nav_km td {
  width: 11%;
  padding: 5px;
}

.nav_km tr:first-child {
  border-bottom: 1px solid var(--schwarz-30);
}

.nav_2 td a {
  color: var(--schwarz-05);
  text-decoration: none;
  display: block;
}

.nav_2 td a:hover {
  color: var(--schwarz-60);
  text-decoration: none;
}

.nav_2 td:first-child {
  border-left: hidden;
}

.nav_sticky {
  position: sticky;
  top: 0px;
  margin-bottom: 15px;
}

/* TOOLTIP */
.tooltip {
  position: relative;
  cursor: help;
  z-index: 1;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 150px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px;
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
  font-size: var(--font_80);
  hyphens: none;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  transition: visibility 0s linear 1.5s;
}

.tooltiptext:hover {
  visibility: hidden !important;
}

.sp_voreinstellung {
  background-color: var(--hellgrau);
  border: hidden !important;
  font-size: var(--base_font);
}

summary.ueber-spiel {
  font-size: calc(var(--base_font) * 1.2);
  color: var(--schwarz);
  font-weight: bold;
  margin-top: 18px;
  margin-bottom: 15px;
}

details[open].spielplan {
  margin-top: 15px;
  margin-bottom: 2px;
  padding: 20px;
  background: var(--hellgrau);
  color: var(--schwarz);
}

/* ----- Fehlermeldung Startseite ----*/
.tab_linie {
  border-bottom: 1px solid;
}

.tab_linie_2 {
  border-bottom: 1px #ffffff45 solid;
}

td.fehlerstatut {
  padding: 0 1em !important;
}

.fehlerstatut table {
  margin: 0;
}

.tab_middle {
  vertical-align: middle !important;
}

/* ---- Facebook-tool ---- */
/* -- Button -- */
.button_fb:hover, .button_next:hover {
  background-color: var(--schwarz-60);
  color: var(--schwarz-5);
}

.button_fb, .button_next {
  border: 1px solid;
  border-color: var(--schwarz-30);
  border-radius: 5px;
  background-color: var(--schwarz-10);
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font_80);
  padding: 5px;
  display: inline-block;
  text-align: center;
  color: var(--schwarz);
  text-decoration: none;
}

.button_next {
  width: 120px;
}

.select_fb {
  border: 1px solid;
  border-color: var(--schwarz-30);
  border-radius: 5px;
  background-color: var(--schwarz-10);
  padding: 5px;
  width: 130px;
  font-family: aller, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: var(--font_80);
  color: var(--schwarz);
  margin: 0;
  height: auto;
}

.button_fb:active {
  background-color: var(--leucht_gruen);
}

.l_cmd_leiste {
  display: flow-root;
}

.btn_fb_copy {
  color: var(--schwarz-50);
  padding-left: 1px;
}

.btn_fb_copy:hover {
  color: var(--schwarz-85);
}

.btn_fb_copy:active {
  color: var(--leucht_gruen);
}

.ausgegraut {
  background-color: var(--schwarz-10);
  color: var(--schwarz-30);
  border: hidden;
}

.ausgegraut:hover {
  background-color: var(--schwarz-10);
  color: var(--schwarz-30);
  border: hidden;
}

.chck_kinder {}

/* Slide-Button (Radiobutton) */
.btn_switch-field {
  overflow: hidden;
}

button:focus {
  outline: none;
}

.btn_switch-field input {
  position: absolute !important;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  border: 0;
  overflow: hidden;
}

.btn_switch-field label {
  background-color: var(--schwarz-10);
  color: var(--schwarz);
  font-size: var(--font_80);
  font-family: aller, sans-serif;
  text-align: center;
  padding: 5px 8px;
  margin-right: -7px;
  border: 1px solid;
  border-color: var(--schwarz-30);
  transition: all 0.5s ease-in-out;
  vertical-align: .3em;
  display: inline-block;
  min-width: 50px;
}

td .btn_switch-field label {
  border: solid 0.2px var(--schwarz-30);
}

.btn_switch-field label:hover {
  cursor: pointer;
}

.btn_switch-field input:checked+label {
  background-color: var(--gruen);
}

.btn_switch-field label:first-of-type {
  border-radius: 5px 0 0 5px;
}

.btn_switch-field label:last-of-type {
  border-radius: 0 5px 5px 0;
  margin-right: 0;
}

.btn_switch-field label:only-of-type {
  border-radius: 5px 5px 5px 5px;
}

.button_br_9 {
  width: 9em;
}

/* -- layout -- */
.l_block_table {
  display: block;
  border-radius: 5px;
  padding: 20px 10px 10px 10px;
  background-color: var(--hellgrau);
  margin-bottom: 5px;
}

.l_main_60 {
  transition: margin-left .8s;
  /* padding: 20px 150px 20px 150px; */
  padding: 1% 5%;
  grid-column: 1 / 4;
  grid-row: 2 / 3;
  margin: 0 auto;
  min-width: 60%;
}

@media (min-device-width: 1150px) {
  .l_main_60 {
    width: 60%;
  }
}

.l_padding_6 {
  padding: 6px !important;
}

option {
  font-size: var(--font_80);
  color: var(--schwarz);
}

.l_tab_form_fb {
  border-spacing: 5px;
  border-collapse: separate;
}

.td_edit {
  background-color: var(--weiss);
  border-radius: 5px;
  border: hidden;
  height: 26px;
  align-self: center;
  font-size: var(--font_80);
  padding: 5px;
  word-break: break-word;
}

.td_edit ul {
  padding-inline-start: 20px;
  margin-block-start: 0;
  margin-block-end: 0;
  font-family: "Font Awesome 5 Pro", aller, sans-serif;
  font-weight: 400;
  list-style-type: '\f0c8   ';
  text-align: left;
  float: right;
}

.ty_fehlertext {
  width: 50%;
  max-width: 750px;
  margin: auto;
  margin-top: 1.5em;
  color: var(--dunkel_rot);
  font-weight: 800;
}

.fa-spinner {
  display: block;
  margin: 10px auto 30px auto;
  font-size: 2.5em;
}

.l_achtung {
  background-color: var(--rot);
  color: var(--weiss);
  border-radius: 5px;
  padding: 5px;
  margin: 2px .5%;
  /*margin-left: 15px;*/
}

.l_achtung_details {
  background: var(--rot);
  border-radius: 5px;
  margin: .5%;
  padding: 10px;
  width: 99%;
}

/*.l_achtung_details:hover {
  color: var(--braun);
}

.l_achtung_details:hover section {
  color: var(--weiss);
}*/
.l_achtung_details[open] {
  background: var(--schwarz-10);
  border-radius: 5px;
  border: solid 5px var(--rot);
}

/* -- Checkbox Disable aber nicht ausgegraut -- */
.ck_kinder:disabled {
  display: none;
}

.ck_kinder:checked+label:before {
  content: '✓';
  color: var(--schwarz);
}

.ck_kinder+label:before {
  content: '✓';
  color: var(--weiss);
  background: var(--weiss);
  border-color: var(--schwarz-30);
  font-size: 20px;
  text-align: center;
  border-radius: 5px;
  padding: 0 5px;
}

/* ---- Online Werbe-beschrenkung --- */
.fb_online li {
  margin-bottom: 40px;
}

.icon_online_werb {
  border-radius: 2px;
  padding: 1px;
  font-size: 120%;
}

.erlaubt, .n_erlaubt {
  padding: 0;
}

.erlaubt li, .n_erlaubt li {
  list-style: none;
  margin-bottom: 1px;
}

.erlaubt li:before {
  content: '\f00c';
  font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS', Arial, sans-serif;
  padding: 1px;
  color: var(--weiss);
  background-color: var(--gruen);
  margin-right: 5px;
  border-radius: 2px;
}

.n_erlaubt li:before {
  content: '\f00d';
  font-family: 'Font Awesome 5 Pro', 'Arial Unicode MS', Arial, sans-serif;
  padding: 1px;
  color: var(--leucht_rot);
  background-color: var(--weiss);
  margin-right: 5px;
  border-radius: 2px;
}

.flex_display {
  display: flex;
  justify-content: space-around;
}

.l_achtung_details a {
  color: var(--unifilm-rot);
}

.l_achtung_details a:hover {
  color: var(--blau);
}

.button_online_regeln {
  width: 150px;
  padding: 20px 0;
  font-size: 150%;
  background-color: var(--schwarz-30);
  color: var(--schwarz) !important;
}

.ausklapp_regeln {
  opacity: 0;
  height: 0;
  display: none;
  z-index: -1;
  margin-top: 10px;
}

.regle {
  border: solid var(--schwarz-50);
  background-color: var(--schwarz-2);
  border-radius: 5px;
  padding: 10px;
}

.ausklapp_regeln:target {
  opacity: 1;
  height: auto;
  display: block;
  z-index: 101;
}

.l_achtung_details li {
  margin-bottom: 8px;
}

/* ---- FARBEN ----*/
.gruen, .gruen label {
  background-color: var(--gruen);
}

.gruen:checked+label {
  background-color: var(--gruen) !important;
}

.gelb label,
.gelb {
  background-color: var(--gelb);
}

.gelb:checked+label {
  background-color: var(--hell_gelb) !important;
  color: var(--schwarz);
}

.blau:checked+label {
  background-color: var(--blau) !important;
}

.blau {
  background-color: var(--hell_blau);
}

/* ---- Dropdown ----*/
.gruen option:not(:checked) {
  background-color: var(--weiss);
  color: var(--schwarz);
}

.gruen option:checked {
  background-color: inherit;
}

.rot option:not(:checked) {
  background-color: var(--weiss);
  color: var(--schwarz);
}

.rot option:checked {
  background-color: inherit;
}

/* ----- RESPONSIVE DESIGN ------ */
@media (max-device-width: 800px) {
  main {
    margin: 0;
  }

  .sperr-button, .gesperrt-button, .sperr-kein-termin {
    height: 1.5em;
    width: 1.5em;
  }

  .kachel {
    margin: 1% 5% 1% 5%;
    width: 40%;
  }

  .spielplan_grid .fehlerkasten {
    margin-left: 0;
  }
}

.logo_beispiel {
  margin: auto 0;
  position: absolute;
  top: 1em;
  left: 1em;
  height: 3em;
}

.l_grid_1_2 {
  display: grid;
  grid-template-columns: 33% 33% 32%;
  gap: 0px 1%;
}

.l_grid_area2 {
  grid-column: span 2;
}

.l_grid_area3 {
  grid-column: span 3;
}

.tab_kartensorten {
  table-layout: fixed;
}

.tab_kartensorten td,
.tab_kartensorten th {
  border: 1px solid var(--schwarz-30);
}

.l_margin_top {
  margin-top: .5em;
}

.width_100 {
  width: 100%
}