/*
 *  Event-Kalender - kalenderstyle.css (utf-8)
 * - https://werner-zenk.de
 */


@charset "utf-8";
@import url("kalenderformfelder.css");
@import url("kalendericons.css");
/* font-family: 'Stick No Bills' */
@import url('https://fonts.googleapis.com/css2?family=Stick+No+Bills:wght@500&display=swap');
/* font-family: 'Oxygen' */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500&family=Oxygen&family=Stick+No+Bills:wght@500&display=swap');

body {
  overflow-anchor: none;
}

/* Hauptfarben */
:root {
  --color: navy !important;
  /*#555555 !important;*/
  --bgcolor-even: rgba(0, 0, 255, 0.1);
  /*(245, 245, 245, 0.1);*/
  --bgcolor-odd: rgba(0, 0, 139, 0.1);
  /*(165, 165, 165, 0.1);*/
  --highlight-color: rgb(34, 132, 230);
  --highlight-bgcolor: rgba(222, 238, 252, 0.30);
  --highlight-outlinecolor: rgba(134, 201, 255, 0.45);
  color-scheme: light dark;
  /*light dark*/
}

/* Kalender */
div#kalender {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  box-shadow: 0px 0px 8px 1px rgb(210, 210, 210);
  border: Solid 1px rgba(184, 184, 184, 0.9);
  /*background-image: url("hintergrundbild.jpg");
 background-repeat: No-Repeat;
 background-size: Cover;*/
}

/* Tabelle */
table#tafel {
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  font-optical-sizing: auto;
  color: var(--color);
  background-color: transparent;
  /*#fff*/
  border-collapse: separate;
  border-spacing: 1px;
  table-layout: auto;
  width: 100%;
  z-index: 500;
opacity: 0.6;
  cursor: default;
}

/* Tabelle Beschriftung */
table#tafel caption {
  color: navy;
  /*var(--highlight-color);*/
  font-family: 'Stick No Bills';
  font-size: 1.4rem;
  font-weight: bolder;
  letter-spacing: 2px;
  background: none;/*linear-gradient(#E0E0E0, #F5F5F5);*/
  text-align: center;
}

/* Tabelle Beschriftung (Bild) */
table#tafel caption img {
  max-width: 100%;
  height: auto;
}

/* Monatsbilder */
table#tafel #monatsbilder {
  height: 175px;
  background-size: cover;
  box-shadow: inset 0px 0px 15px 0px #fff;
}

/* Tabelle TH */
table#tafel th {
  font-weight: normal;
  text-align: center !important;
}

/* Tabelle TD */
table#tafel td {
  vertical-align: Top;
  padding: 1px;
}

/* Tabelle Navigation */
table#tafel th#navigation {
  font-size: clamp(1.20rem, 1.2vw, 1.4rem);
  font-weight: Bold;
  letter-spacing: 2px;
  text-align: Center !important;
  background: transparent;
  /*linear-gradient(to right, #EFEFEF 1%, #FFFFFF 50%, #EFEFEF);*/
  padding: 0px;
  position: Sticky;
  top: -1px;
  /*Firefox / Chromium*/
  z-index: 1000;
}

table#tafel td#navigation span {
  white-space: Nowrap;
}

/* Auswahl (Monate, Jahre, Optionen) */
table#tafel td#auswahl {
  height: 30px;
  vertical-align: Middle;
  text-align: Center !important;
  padding: 0px;
  background: transparent;
  /*linear-gradient(to right, #FFFFFF 1%, #EFEFEF 50%, #FFFFFF);*/
}

/* Anzeige (Events, Formular) */
table#tafel td#anzeige {
  padding: 0px;
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  font-optical-sizing: auto;
  font-size: 0.95rem;
  scroll-margin-top: 20px;
  background: transparent;
  /*linear-gradient(to right, #EFEFEF 1%, #FFFFFF 50%, #EFEFEF);*/

  /* Hintergrund-Animation*/
  background-image: radial-gradient(circle at 16% 47%, hsla(197, 0%, 52%, 0.03) 0%, hsla(197, 0%, 52%, 0.03) 11%, transparent 11%, transparent 56%, transparent 56%, transparent 100%), radial-gradient(circle at 86% 9%, hsla(197, 0%, 52%, 0.03) 0%, hsla(197, 0%, 52%, 0.03) 27%, transparent 27%, transparent 68%, transparent 68%, transparent 100%), radial-gradient(circle at 26% 50%, hsla(197, 0%, 52%, 0.03) 0%, hsla(197, 0%, 52%, 0.03) 32%, transparent 32%, transparent 82%, transparent 82%, transparent 100%), radial-gradient(circle at 55% 18%, hsla(197, 0%, 52%, 0.03) 0%, hsla(197, 0%, 52%, 0.03) 44%, transparent 44%, transparent 49%, transparent 49%, transparent 100%), radial-gradient(circle at 42% 50%, hsla(197, 0%, 52%, 0.03) 0%, hsla(197, 0%, 52%, 0.03) 38%, transparent 38%, transparent 55%, transparent 55%, transparent 100%), linear-gradient(90deg, hsl(206, 0%, 96%), hsl(206, 0%, 96%));
  background-size: 115% 115%;
  animation: moveBG 20s infinite alternate;
}

@keyframes moveBG {
  from {
    background-position: 0% 50%;
  }

  to {
    background-position: 50% 100%;
  }
}

/* Tabelle (child even/odd) */
table#tafel th:nth-child(even) {
  background-color: var(--bgcolor-odd);
}

table#tafel th:nth-child(odd) {
  background-color: var(--bgcolor-even);
}

table#tafel td:nth-child(even) {
  background-color: var(--bgcolor-even);
}

table#tafel td:nth-child(odd) {
  background-color: var(--bgcolor-odd);
}

/* Woche */
table#tafel th.woche {
  transition: box-shadow 0.5s;
}

table#tafel th.woche:hover {
  box-shadow: inset 0px 0px 0px 100px #EEEEEE;
}

/* Resize (Links) */
table#tafel td#colResizeLeft {
  padding-left: 1.5px;
  background: linear-gradient(to bottom, #FFFFFF, #C0C0C0 50%, #FFFFFF);
}

table#tafel td#colResizeLeft:hover {
  cursor: w-resize;
  animation: vertical 0.5s both running;
}

@keyframes vertical {
  to {
    background: linear-gradient(to top, var(--highlight-bgcolor), var(--highlight-color) 50%, var(--highlight-bgcolor));
  }
}

/* Resize (Mitte) */
table#tafel td#rowResize {
  padding-top: 1px;
  background: linear-gradient(to right, #FFFFFF, #C0C0C0 50%, #FFFFFF);
}

table#tafel td#rowResize:hover {
  cursor: n-resize;
  animation: horizontal 0.5s both running;
}

@keyframes horizontal {
  to {
    background: linear-gradient(to right, var(--highlight-bgcolor), var(--highlight-color) 50%, var(--highlight-bgcolor));
  }
}

/* Resize (Rechts) */
table#tafel td#colResizeRight {
  padding-right: 1.5px;
  background: linear-gradient(to bottom, #FFFFFF, #C0C0C0 50%, #FFFFFF);
}

table#tafel td#colResizeRight:hover {
  animation: vertical 0.5s both running;
}

/* Heute */
table#tafel td.heute {
  border: Solid 2px var(--highlight-outlinecolor);
  border-radius: 4px;
}

/* Ein Tag! */
table#tafel td.eintag {
  height: 70px;
  cursor: Default;
  line-height: 14px;
  box-sizing: content-box;
  /* Bootstrap */
  word-break: break-all;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
  transition: all 0.5s;
}

table#tafel td.eintag:hover {
  background-color: rgba(227, 227, 227, 0.6) !important;
}

/* Kein Tag! */
table#tafel td.keintag {
  height: 70px;
  color: #C5C5C5;
  padding-left: 8px;
  box-sizing: content-box;
  cursor: Pointer;
  transition: all 0.5s;
}

table#tafel td.keintag:hover {
  color: var(--highlight-color);
  background-color: rgba(227, 227, 227, 0.6);
}

/* Wochentag (Mo. - Fr.) */
table#tafel th.wochentag {
  transition: background-color 0.5s;
}

/* Wochenende (Sa.+ So.) */
table#tafel th.wochenende {
  background-color: #E2E2E2;
  transition: background-color 0.5s;
}

table#tafel th.wochentag:hover,
table#tafel th.wochenende:hover {
  background-color: #E8E8E8;
}

/* Uhrzeit */
table#tafel span.uhrzeit {
  font-family: Arial, Tahoma, Sans-Serif;
  font-size: 0.70rem;
  color: #000000 !important;
  text-shadow: 0px 0px 3px #FFFFFF;
}

/* Datum und Uhrzeit (Formular) */
table#tafel span#datumLokal {
  font-family: Arial, Tahoma, Sans-Serif;
  font-size: 0.90rem;
  color: #505050;
  cursor: Pointer;
  outline: Solid 1px Transparent;
  transition: all 0.4s;
}

table#tafel span#datumLokal:hover {
  background-color: var(--highlight-bgcolor);
  box-shadow: inset 0px -10px 5px #FFFFFF;
  outline: Solid 1px var(--highlight-outlinecolor);
  color: var(--highlight-color);
}

/* Feiertag */
table#tafel span.feiertag {
  font-family: Arial, Tahoma, Sans-Serif;
  font-size: 0.72rem;
  color: #FA0000;
}

/* Navigation */
table#tafel span.navLink {
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  font-weight: Normal;
  color: var(--color);
  padding: 1px 4px 1px 4px;
  cursor: Pointer;
  outline: Solid 1px Transparent;
  transition: all 0.4s;
}

table#tafel span.navLink:hover {
  background-color: var(--highlight-bgcolor);
  outline: Solid 1px var(--highlight-outlinecolor);
  color: var(--highlight-color);
  box-shadow: inset 0px -10px 5px #FFFFFF;
}

table#tafel span.steigend {
  font-size: clamp(1rem, 1.10vw, 1.2rem);
}

table#tafel span.navBlock {
  min-width: 115px;
  display: Inline-Block;
}

table#tafel span.navBlock2 {
  min-width: 55px;
  display: Inline-Block;
}

/* Link */
table#tafel a:link,
table#tafel a:visited,
table#tafel a:active {
  color: var(--highlight-color);
  text-decoration: None;
}

table#tafel a:hover {
  text-decoration: Underline;
}

table#tafel a[target^='_blank']::after {
  content: "\2B67";
  font-size: 0.90rem;
  color: #858585;
  white-space: Nowrap;
  vertical-align: Bottom;
}

table#tafel div.eventLink {
  font-family: Arial, Sans-Serif;
  font-optical-sizing: auto;
  font-size: 0.72rem;
  color: #FFFFFF;
  margin-top: 2px;
  padding: 2px 0 1px 2px;
  cursor: Pointer;
}

table#tafel span.optionLink {
  font-family: Arial, Sans-Serif;
  font-optical-sizing: auto;
  font-size: clamp(0.85rem, 1vw, 1.1rem);
  color: var(--highlight-color);
  padding: 1px 5px 1px 5px;
  cursor: Pointer;
  outline: Solid 1px Transparent;
  transition: all 0.4s;
}

table#tafel span.optionLink:hover {
  background-color: var(--highlight-bgcolor);
  outline: Solid 1px var(--highlight-outlinecolor);
  box-shadow: inset 0px -10px 5px #FFFFFF;
}

table#tafel span.suchenLink {
  font-family: Arial, Sans-Serif;
  color: var(--highlight-color);
  cursor: Pointer;
}

table#tafel span.nowrap {
  white-space: Nowrap;
  font-weight: Normal;
  /* Bootstrap */
}

table#tafel span#eKmehrtage,
table#tafel span#eKdifferenz {
  font-family: Arial, Tahoma, 'Oxygen', Sans-Serif;
  font-size: 0.95rem;
  color: #009900;
  white-space: Nowrap;
}

table#tafel span#awstatus {
  font-family: Arial, Tahoma, 'Oxygen', Sans-Serif;
  font-size: 0.90rem;
  color: #EE0000;
}

span#nachOben {
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  color: Transparent;
  padding: 1px 4px 1px 4px;
}

table#tafel span#apps {
  background: linear-gradient(to top, #EFEFEF, #FFFFFF);
  border-radius: 2px;
  padding-left: 5px;
  padding-right: 5px;
}

/* Tabellennavigtion */
table#tafel table#tableNavigation {
  width: 100%;
  border-collapse: Collapse;
  margin-bottom: 25px;
  position: Sticky;
  top: 23px;
  z-index: 1000;
  border-top: Solid 0.5px #BBBBBB;
  border-bottom: Solid 0.5px #BBBBBB;
  background: linear-gradient(to right, #FFFFFF 1%, #EFEFEF 50%, #FFFFFF);
}

table#tafel table#tableNavigation th,
table#tafel table#tableNavigation td {
  border: 0;
  background-color: Transparent;
  white-space: Nowrap;
  vertical-align: Middle;
}

table#tafel table#tableNavigation th {
  text-align: Right;
}

table#tafel table#tableNavigation td span.navLink {
  font-size: 1.1rem;
}

/* user-select */
table#tafel caption,
table#tafel td#navigation,
table#tafel td.eintag,
table#tafel td.keintag,
table#tafel th.wochentag,
table#tafel th.wochenende,
table#tafel span.feiertag,
table#tafel span.uhrzeit,
table#tafel span.navLink,
table#tafel span.eventLink,
table#tafel span.optionLink,
table#tafel span.papierkorb,
table#tafel .statusBox,
table#tafel form#eKform,
table#tafel form#eKMenue,
table#tafel form#eKbenutzerdetails,
table#tafel th#navigation,
table#tafel table#tableNavigation,
table#tafel div#blatt,
table#tafel div#jahreBlock,
table#tafel div#eventgruppe,
table#tafel table#journal,
table#tafel .noselect,
table#tafel details>summary {
  -webkit-user-select: None;
  user-select: None;
}

table#tafel span.selLink {
  -ms-user-select: Text;
  -webkit-user-select: Text;
  user-select: Text;
}

table#tafel mark.mark {
  font-size: clamp(1.1rem, 1.4vw, 1.5rem);
  font-variant: Small-Caps;
  background-color: Transparent;
  color: var(--highlight-color);
  text-shadow: 1px 1px 3px rgba(123, 184, 244, 0.5);
}

table#tafel span.mark {
  color: var(--highlight-color);
}

/* Kalenderblatt */
table#tafel div#kalenderblatt {
  line-height: 23px;
  color: var(--color);
  padding-bottom: 25px;
}

table#tafel div#kalenderblatt>table {
  background: linear-gradient(to right, #FFFFFF 1%, #EFEFEF 50%, #FFFFFF);
}

table#tafel div#blatt {
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 5rem;
  text-shadow: 1px 1px 4px #9C9C9C;
  color: #156BC1;
  text-align: Center;
  vertical-align: Middle;
  -webkit-hyphens: None;
  -ms-hyphens: None;
  hyphens: None;
  float: Left;
  line-height: 98px;
  width: 150px;
  height: 170px;
  padding-top: 10px;
  margin: 5px 15px 0 0;
  box-sizing: content-box;
  /* Bootstrap */
  background: linear-gradient(#F3F9FE, #FFFFFF);
  border: Solid 1px #F3F9FE;
  border-top: Dotted 4px #AED8F9;
  border-left: Double 6px #AED8F9;
  border-bottom: Double 4px #AED8F9;
  box-shadow: 0px -10px 0px 0px #F3F9FE, 0px 0px 12px 0px #919191;
  cursor: Pointer;
  transition: all 0.5s;
}

table#tafel div#blatt:hover {
  transform: rotate(-5deg);
}

table#tafel div.blatttext {
  font-size: 1.2rem;
  letter-spacing: 2px;
  line-height: 15px;
}

/* Event-Gruppe */
table#tafel div#eventgruppe {
  margin-top: 10px;
  text-align: Right;
}

/* Anzeige */
table#tafel div#aktevents {
  color: var(--color);
  padding: 0 10px 25px 10px;
  line-height: 21px;
}

/* Formular */
table#tafel form#eKform {
  width: 425px;
  margin: auto;
  color: var(--color);
  line-height: 21px;
}

table#tafel div#anzeigeOptionenBeenden {
  font-size: 0.95rem;
  display: Inline-Block;
  float: Right;
  margin: 10px 3px 3px 0;
}

/* Priorität */
table#tafel span.prioritaet {
  padding: 0px 5px 0px 5px;
  font-size: 12px;
  color: var(--color);
  cursor: Pointer;
  transition: color 0.3s;
}

table#tafel span.prioritaet:hover {
  color: #FFFFFF;
}

table#tafel div#inBlock,
table#tafel div#monateBlock,
table#tafel div#jahreBlock {
  display: Inline-Block;
  width: 95%;
  line-height: 30px;
  word-spacing: 6px;
  -webkit-hyphens: None;
  -ms-hyphens: None;
  hyphens: None;
}

/* Überschrift (Wochentag, Monat, Kalenderwoche und Zähler)  */
table#tafel div.abschnitt {
  font-size: clamp(1.3rem, 1.4vw, 1.6rem);
  font-variant: Small-Caps;
  letter-spacing: 1px;
  color: var(--highlight-color);
  margin-top: 30px;
  transition: all 0.4s;
  scroll-margin-top: 60px;
}

table#tafel div.abschnitt span:hover {
  background-color: var(--highlight-bgcolor);
  outline: Solid 1px var(--highlight-outlinecolor);
  color: var(--highlight-color);
  box-shadow: inset 0px -10px 5px #FFFFFF;
}

/* Interner Anker */
table#tafel span.anker::before {
  content: "\25BE";
  color: #888888;
  white-space: Nowrap;
}

/* Tastaturbelegung Maus-Icon */
table#tafel span.maus {
  font-size: 1.5rem;
  vertical-align: Middle;
}

/* Event-Anzeige (Definitionsliste) */
table#tafel dl.dl {
  flex: 1 1 auto;
  display: Block;
  padding: 5px;
  margin: 10px 5px 5px 5px;
  border-radius: 4px;
  box-shadow: 0px 0px 5px 0px rgba(70, 70, 70, 0.8);
  transition: all 0.5s;
}

table#tafel dl.dl:hover {
  box-shadow: 0px 0px 3px 0px rgba(70, 70, 70, 0.8), inset 0px 0px 10px 5px rgba(255, 255, 255, 0.3);
}

table#tafel dl.dl:nth-child(even) {
  background: linear-gradient(to top, rgba(180, 180, 180, 0.15), rgba(255, 255, 255, 0.15));
}

table#tafel dl.dl:nth-child(odd) {
  background: linear-gradient(to top, rgba(100, 100, 100, 0.15), rgba(255, 255, 255, 0.15));
}

table#tafel dl.dl>dt:nth-child(1) {
  border-bottom: Groove 2px rgb(256, 256, 256);
  margin-bottom: 5px;
}

table#tafel dl.dl>dd {
  margin-top: 10px;
  margin-left: 5px;
  /* 25px */
  max-width: 90%;
  user-select: auto;
}

/* Heute */
table#tafel dl.heute {
  box-shadow: 0px 0px 5px 0px rgba(0, 105, 191, 1.0);
  transition: all .5s;
}

table#tafel dl.heute:hover {
  box-shadow: 0px 0px 3px 0px rgba(0, 105, 191, 1.0), inset 0px 0px 10px 5px rgba(255, 255, 255, 0.3);
}

table#tafel p.formLineHeight,
table#tafel div.formLineHeight {
  line-height: 30px;
  margin: 5px 0 5px 0 !important;
}

table#tafel span.eventText {
  font-size: 0.95rem;
  cursor: Pointer;
}

table#tafel span.info {
  display: Inline-Block;
  margin-right: 5px;
  padding: 0 5px 0 5px;
  float: Right;
  cursor: Help;
}

table#tafel span.verschieben {
  width: 12px;
  margin-left: 10px;
  float: Right;
  background-image: repeating-linear-gradient(0deg, #707070, #707070 1px, Transparent 1px, Transparent 3px) !important;
  cursor: Move;
}

table#tafel span.verschieben:hover {
  background-image: repeating-linear-gradient(0deg, var(--highlight-color), var(--highlight-color) 1px, Transparent 1px, Transparent 3px) !important;
}

table#tafel span.wordbreak {
  word-break: break-all;
}

table#tafel div.kalenderinfo {
  font-size: 0.85rem;
}

table#tafel details.event_loeschen {
  font-family: Arial, Sans-Serif;
  font-size: 0.85rem;
}

table#tafel details.event_loeschen>div {
  border: Solid 1px #C0C0C0;
  background-color: #FFFFFF;
  padding: 5px;
}

table#tafel label.eventMarkierung {
  border-radius: 3px;
}

table#tafel hr {
  border: 0;
  margin: 20px 5% 20px 5%;
}

table#tafel img.bild {
  display: Block;
  max-width: 100%;
  height: auto;
  object-fit: fill;
  margin: 10px;
  border: Solid 1px #202020;
  box-shadow: 0px 0px 5px 1px #808080;
}

/* Tastaturbelegung */
table#tafel kbd {
  background-color: var(--highlight-bgcolor);
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .2), 0 7px 3px 0 rgba(185, 223, 255, 0.95) inset;
  color: #333;
  display: Inline-Block;
  font-family: Arial, Consolas, Courier, Monospace;
  font-size: .85em;
  font-weight: 600;
  line-height: 1;
  padding: 2px 4px;
  margin-top: 7px;
  margin-left: 2px;
  margin-right: 3px;
  white-space: Nowrap;
  transition: backgroundr 0.3s;
}

div#tastaturbelegung {
  column-count: 2;
  column-gap: 25px;
  column-fill: Balance;
  width: 100%;
  column-width: 18ch;
}

div#tastaturbelegung u {
  color: var(--highlight-color);
}

span.keyTastatur {
  color: #EE0000;
  cursor: Help;
}

/* Permalink */
table#tafel span.permalink {
  float: Right;
  margin-right: 10px;
}

table#tafel input[type="text"]#permacopy {
  width: 75%;
  padding-left: 8px;
}

/* Zeilen hervorheben */
table#tafel div.zeile {
  color: #878787;
  border-top: Solid 1px #BBBBBB;
}

table#tafel div.zeile:hover {
  background: linear-gradient(#FFFFFF, Transparent);
}

/* Auswahl der Uhrzeit */
span.uhrZeitenAuswahl>span.zeit {
  display: none;
}

span.uhrZeitenAuswahl:hover>span.zeit {
  display: inline;
  margin-left: 5px;
}

/* Mehrere Tage auswählen */
table#tafel div.tageZeile:nth-child(even) {
  background-color: var(--highlight-bgcolor);
}

table#tafel div.tageZeile:nth-child(odd) {
  background-color: #FFFFFF;
}

table#tafel .tageZeilen {
  border: Solid 1px #9A9A9A;
}

/* Pfeil nach Oben */
span#nachOben {
  font-size: 1.1rem;
}

/* Klassen hinzufügen */
table#tafel .aktivtag {
  box-shadow: Inset 0px 0px 100px 100px var(--highlight-bgcolor);
}

table#tafel .aktivevent {
  background-color: var(--highlight-bgcolor);
  border-radius: 3px;
  animation: keyAnim 0.5s ease-in-out infinite alternate;
}

table#tafel .flexon {
  display: Flex;
  flex-flow: Row Wrap;
  align-content: space-around;
  align-items: Center;
  /*Stretch, Center*/
  gap: 0.5rem;
}

/* Akt. Farbe der Uhrzeit */
table#tafel .heutefarbe {
  color: var(--highlight-color) !important;
}

/* Details */
table#tafel details.wiederholung {
  line-height: 30px;
}

table#tafel details>summary {
  cursor: Pointer;
}

table#tafel details>summary:hover {
  color: var(--highlight-color);
}

table#tafel details>summary::marker {
  color: var(--highlight-color);
}

/* Kalenderauswahl (Tag, Woche, Monat, Jahr) */
table#tafel span.kalenderauswahl {
  background: linear-gradient(to bottom, #EFEFEF, #FFFFFF);
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
}

table#tafel span.kalenderauswahl span {
  font-size: 0.90rem !important;
}

/* Vorschau */
table#tafel div.vorschau {
  box-shadow: 0px 0px 3px 1px #C5C5C5;
  padding: 5px;
  background-color: #FFFFFF;
  background-image: repeating-linear-gradient(90deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(196, 0%, 79%, 0.06) 0px, hsla(196, 0%, 79%, 0.06) 1px, transparent 1px, transparent 96px), repeating-linear-gradient(0deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), repeating-linear-gradient(90deg, hsla(196, 0%, 79%, 0.09) 0px, hsla(196, 0%, 79%, 0.09) 1px, transparent 1px, transparent 12px), linear-gradient(90deg, rgb(255, 255, 255), rgb(255, 255, 255));
  width: 98%;
  min-width: 325px;
  height: 250px;
  min-height: 250px;
  margin: 10px 0 10px 0;
  overflow: auto;
  resize: Both;
  scrollbar-width: thin;
}

span.vorschautitel {
  display: Inline-block;
  font-weight: Bold;
  font-size: 0.80rem;
  width: 98.5%;
  padding-right: 5px;
  background-color: #F5F5F5;
}

/* Papierkorb */
div.papierkorb {
  width: 200px;
  height: 22px;
  margin: 10px auto 10px auto;
  color: var(--highlight-color);
  font-variant: Small-Caps;
  font-family: Arial, Tahoma, Sans-Serif;
  font-size: 1rem;
  letter-spacing: 1px;
  line-height: 24px;
  text-align: Center;
  background-image: repeating-linear-gradient(135deg, Transparent, Transparent 1px, rgba(130, 188, 247, 0.4) 3px, Transparent 7px) !important;
  border: Solid 1px rgb(23, 132, 240);
  border-radius: 0.2rem;
  box-shadow: 0px 0px 2px 1px rgba(130, 188, 247, 0.6);
  cursor: Help;
}

/* Wecker */
span.wecken {
  float: Right;
}

/* Berechtigung Event bearbeiten/löschen */
table#tafel p#berechtigung {
  font-family: Tahoma, Arial, Sans-Serif;
  font-size: 0.90rem;
  color: #EE0000;
}

/* Menü und Benutzer-Optionen */
table#tafel form#eKMenue {
  width: 230px;
  padding-left: 5px;
}

/* Menueoptionen */
table#tafel div#menueoptionen {
  background-color: #F0F0F0;
  height: 210px;
  min-height: 210px;
  max-height: 350px;
  overflow: auto;
  margin-top: 10px;
  margin-bottom: 10px;
  resize: Vertical;
  line-height: 25px;
  scrollbar-width: thin;
}

/* Suche und Filter-Optionen */
.filtercss {
  box-shadow: Inset 0px 0px 100px 100px #DEEEFC;
  outline: Solid 1px var(--highlight-color) !important;
  transition: all 0.4s;
}

.filtercss:hover {
  box-shadow: inset 0px -10px 5px #FFFFFF;
}

/* An.- und Abmeldung (Schriftzug: "Event-Kalender") */
span.anmeldungOK {
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  letter-spacing: 3px;
  font-variant: Small-Caps;
  color: #529EEA;
  white-space: Nowrap;
  transition: all 0.4s;
}

span.anmeldungOK:hover {
  background-color: var(--highlight-bgcolor);
  box-shadow: inset 0px -10px 5px #FFFFFF;
  outline: Solid 1px var(--highlight-outlinecolor);
  color: var(--highlight-color);
  cursor: Pointer;
}

span.anmeldungKO {
  font-size: clamp(1.125rem, 1.4vw, 1.5rem);
  letter-spacing: 3px;
  font-variant: Small-Caps;
  white-space: Nowrap;
  transition: background-color 0.4s;
}

span.anmeldungKO:hover {
  background-color: var(--highlight-bgcolor);
  box-shadow: inset 0px -10px 5px #FFFFFF;
  outline: Solid 1px var(--highlight-outlinecolor);
  color: var(--highlight-color);
  cursor: Pointer;
}

/* Statusbox */
div#kalender .statusBox {
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  font-size: 0.90rem;
  color: #FFFFFF;
  background-color: rgba(100, 100, 100, 0.75);
  padding: 10px;
  border-radius: 20px;
  position: Fixed;
  z-index: 10000;
  cursor: Default;
  animation: keyAnim 0.5s ease-in-out infinite alternate;
}

/* Drucken */
div.overLay {
  background-color: rgba(0, 0, 0, 0.50);
  position: Fixed;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 1000;
}

div.overBox {
  width: 75%;
  height: 75%;
  overflow: auto;
  resize: Both;
  z-index: 1100;
  margin-top: 10%;
  margin-left: 10%;
  background-color: #FFFFFF;
  padding: 15px 15px 15px 25px;
  border-radius: 5px;
  font-family: 'Oxygen', Tahoma, Arial, Helvetica, Sans-Serif;
  /*scrollbar-color: gray transparent;*/
  /*scrollbar-width: thin;*/
}

/* Markierter Text */
::selection {
  background-color: var(--highlight-color);
  color: #FFFFFF;
}

/* lazy loading */
div#lazyLoading {
  border: 5px solid #DADADA;
  border-top: 5px solid #2284E6;
  border-radius: 50%;
  width: 10px;
  height: 10px;
  line-height: 10px;
  animation: lazyLoadingSpin 0.4s linear infinite;
}

@keyframes lazyLoadingSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Counter */
form.counter {
  counter-reset: platz;
}

form.counter dl {
  counter-increment: platz;
}

form.counter dl>dt::before {
  content: counter(platz) ". ";
  color: var(--highlight-color);
}

/* Kontextmenü */
table#tafel .context_menu {
  position: Absolute;
  list-style-type: None;
  margin: 0;
  padding: 0;
  line-height: 5px;
  text-align: Left;
  font-weight: Normal;
  border: 1px Solid rgba(184, 184, 184, 0.9);
  border-radius: 0.2rem;
  /* backdrop-filter: blur(25px);*/
  background: linear-gradient(to right, #FFFFFF 1%, #EFEFEF 50%, #FFFFFF);
  -moz-background: Whitesmoke;
  box-shadow: 0px 0px 4px 1px #C6C6C6;
  z-index: 2500;
}

table#tafel .context_menu--hidden {
  display: none;
}

table#tafel .context_item {
  padding: .5rem;
  white-space: nowrap;
}

table#tafel .context_divider {
  border-bottom: 0.5px Solid rgba(174, 174, 174, 0.9);
  height: 1px;
}

/* Anpassung an mobile Kleingeräte */
@media screen and (max-width: 37rem) {

  table#tafel .mobile {
    display: None !important;
  }

  /* Tabelle TH/TD */
  table#tafel th,
  table#tafel td {
    padding: 0px;
    border: 0px;
  }

  /* Feiertag */
  table#tafel span.feiertag {
    font-size: 0.60rem;
  }

  /* Uhrzeit */
  table#tafel span.uhrzeit {
    font-size: 0.60rem;
    /*display: None;*/
  }

  /* Event Link */
  table#tafel span.eventLink {
    font-size: 0.60rem;
  }

  /* Ein Tag! */
  table#tafel td.eintag {
    height: 55px;
    line-height: 8px;
  }

  table#tafel td.eintag div {
    font-size: 0.60rem;
  }

  table#tafel td.eintag span {
    display: Inline-Block;
    margin-top: 3px;
    margin-bottom: 3px;
  }

  /* Formular zentrieren */
  table#tafel form#eKform {
    width: 350px;
    margin: auto;
  }

  /* Formularfelder */
  table#tafel textarea.textarea {
    color: #000000 !important;
    width: 320px;
    min-width: 320px;
    max-width: 320px;
    height: 200px;
    min-height: 200px;
    max-height: 400px;
    resize: Vertical;
  }

  table#tafel input[type="text"]#event {
    width: 200px;
  }

  table#tafel input[type="text"]#ort {
    width: 300px;
  }

  table#tafel input[type="text"]#name {
    width: 120px;
  }

  table#tafel input[type="password"]#passwort {
    width: 80px;
  }

}

@media screen and (max-width: 50rem) {

  table#tafel .mobilePlus {
    display: None !important;
  }
}

/* Anpassung an große Bildschirme */
@media screen and (min-width: 90rem) {

  /* Ein Tag! */
  table#tafel td.eintag {
    height: 85px;
    line-height: 18px;
  }

  /* Event Link */
  table#tafel div.eventLink {
    font-family: Tahoma, Arial, Sans-Serif;
    font-size: 0.80rem;
  }

  /* Uhrzeit */
  table#tafel span.uhrzeit {
    font-size: 0.80rem;
  }

  /* Feiertag */
  table#tafel span.feiertag {
    font-size: 0.80rem;
  }
}

@media screen and (min-width: 135rem) {

  /* Ein Tag! */
  table#tafel td.eintag {
    height: 110px;
    line-height: 20px;
  }

  /* Event Link */
  table#tafel div.eventLink {
    font-size: 0.90rem;
  }

  /* Uhrzeit */
  table#tafel span.uhrzeit {
    font-size: 0.90rem;
  }

  /* Feiertag */
  table#tafel span.feiertag {
    font-size: 0.90rem;
  }
}

@media screen and (min-width: 156rem) {

  /* Ein Tag! */
  table#tafel td.eintag {
    height: 135px;
    line-height: 22px;
  }

  /* Event Link */
  table#tafel div.eventLink {
    font-size: 1rem;
  }

  /* Uhrzeit */
  table#tafel span.uhrzeit {
    font-size: 1rem;
  }

  /* Feiertag */
  table#tafel span.feiertag {
    font-size: 1rem;
  }
}

@media screen and (max-width: 55rem) {
  span.wochentageAbkuerzung {
    display: None;
  }
}

/* Dunkler Modus - je nach Browser / Betriebsystem Einstellung! */
@media (prefers-color-scheme: dark) {
  table#tafel {
    background-color: #CACACA;
  }

  table#tafel td#anzeige {
    background: linear-gradient(to right, #BDBDBD 1%, #E3E3E3 50%, #BDBDBD);
  }

  table#tafel table#tableNavigation {
    background: linear-gradient(to right, #E3E3E3 1%, #BDBDBD 50%, #E3E3E3);
  }

  table#tafel div.zeile:hover {
    background: linear-gradient(#d1d1d1, Transparent);
  }

  table#tafel th#navigation {
    background: linear-gradient(to right, #BDBDBD 1%, #E3E3E3 50%, #BDBDBD);
  }

  table#tafel td#auswahl {
    background: linear-gradient(to right, #E3E3E3 1%, #BDBDBD 50%, #E3E3E3);
  }

  table#tafel span#apps {
    background: linear-gradient(to top, #BDBDBD, #E3E3E3);
  }

  table#tafel span.kalenderauswahl {
    background: linear-gradient(to bottom, #BDBDBD, #E3E3E3);
  }

  table#tafel td.keintag {
    color: #E5E5E5;
  }

  table#tafel .context_menu {
    background: linear-gradient(to right, rgba(189, 189, 189, 0.95) 1%, rgba(239, 239, 239, 0.95) 50%, rgba(189, 189, 189, 0.95));
  }
}


/* Für den Ausdruck optimieren */
@media print {
  div#kalender {
    box-shadow: none;
  }

  table#tafel td {
    border: Solid 0.5px #DDDDDD;
  }

  table#tafel .print {
    display: None;
  }

  table#tafel span.optionLink {
    display: None;
  }

  table#tafel td#colResizeLeft,
  table#tafel td#rowResize,
  table#tafel td#colResizeRight {
    display: None;
  }

  div.overBox {
    width: 100%;
    height: 100%;
    margin: 0%;
    padding: 0px;
    font-size: 0.90rem;
  }
}