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


@charset "utf-8";
@import url("kalenderformfelder.css");
@import url("kalendericons.css");

body {
 overflow-anchor: none;
}

/* Hauptfarben */
:root {
 --color: #555555 !important;
 --bgcolor-even: rgba(245,245,245,0.1);
 --bgcolor-odd: rgba(165, 165, 165,0.1);
 --highlight-color: rgb(34,132,230);
 --highlight-bgcolor: rgba(222,238,252,0.80);
 --highlight-outlinecolor: rgba(134, 201, 255,0.95);
}

/* Kalender */
div#kalender {
 -webkit-hyphens: Auto;
 hyphens: Auto; /* FF */
 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: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
 color: var(--color);
 background-color: #FFFFFF;
 border-collapse: Separate;
 border-spacing: 1px;
 table-layout: Auto;
 width: 100%;
 z-index: 500;
 opacity: 0.85;
 cursor: Default;
}

/* Tabelle Beschriftung */
table#tafel caption {
 color: var(--highlight-color);
 font-size: 1.1rem;
 font-weight: Bold;
 letter-spacing: 2px;
 background: 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: 1.10rem;
 font-weight: Bold;
 letter-spacing: 2px;
 text-align: Center !important;
 background: 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: linear-gradient(to right, #FFFFFF 1%, #EFEFEF 50%, #FFFFFF);
}

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

/* 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;
 hyphens: Auto; /* FF */
 -webkit-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;
}

/* 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);
 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: Verdana, 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);
}

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-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-size: 0.85rem;
 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);
}

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, Verdana, Sans-Serif;
 font-size: 0.95rem;
 color: #009900;
 white-space: Nowrap;
}

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

span#nachOben {
 font-family: Verdana, 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: 20px;
}

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

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

table#tafel table#tableNavigation th {
 border: 0;
 background: Transparent;
 vertical-align: Middle;
}

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 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: 1.3rem;
 font-variant: Small-Caps;
 background-color: Transparent;
 color: var(--highlight-color);
 text-shadow: 1px 1px 3px rgba(123, 184, 244,0.5);
}

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

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

table#tafel div#blatt {
 font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;;
 font-size: 5rem;
 text-shadow: 1px 1px 4px #9C9C9C;
 color: #156BC1;
 text-align: Center;
 vertical-align: Middle;
 hyphens: None;
 -webkit-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: 415px;
 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;
 hyphens: None; /* FF */
}

/* Überschrift (Wochentag, Monat, Kalenderwoche und Zähler)  */
table#tafel div.abschnitt {
 font-size: 1.3rem;
 font-variant: Small-Caps;
 letter-spacing: 1px;
 color: var(--highlight-color);
 margin-top: 30px;
 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);
}

/* 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 1s;
}

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

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%;
}

/* 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 5px 0px rgba(0, 105, 191,1.0), inset 0px 0px 10px 10px rgba(255, 255, 255,0.4);
}

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: 8px;
 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: 50px 15% 50px 15%;
}

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;
}

div#tastaturbelegung {
 column-count: 2;
 column-gap: 50px;
 column-fill: Balance;
 width: 100%;
 column-rule: 1px Solid #BBBBBB;
}

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

span.keyTastatur {
 color: var(--highlight-color);
 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;
}

 /* 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*/
}

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

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

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

table#tafel details > summary:focus { /* Chromium */
 border:0;
 outline:0;
}

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

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;
 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 */
span.papierkorb {
 display: Block;
 width: 200px;
 height: 28px;
 margin: 10px Auto 10px Auto;
 color: var(--highlight-color);
 font-variant: Small-Caps;
 letter-spacing: 2px;
 line-height: 30px;
 text-align: Center;
 background-image: repeating-linear-gradient(135deg, Transparent, Transparent 1px, rgba(130, 188, 247, 0.5) 3px, Transparent 7px) !important;
 border: Solid 1px rgb(130, 188, 247);
 border-radius: 5px;
}

/* 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;
}

/* An.- und Abmeldung (Schriftzug: "Event-Kalender") */
span.anmeldungOK {
 font-size: 1.125rem;
 letter-spacing: 2px;
 font-variant: Small-Caps;
 color: #529EEA;
 white-space: Nowrap;
 transition: background-color 0.4s;
}
span.anmeldungOK:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
 cursor: Pointer;
}

span.anmeldungKO {
 font-size: 1.125rem;
 letter-spacing: 2px;
 font-variant: Small-Caps;
 white-space: Nowrap;
 transition: background-color 0.4s;
}
span.anmeldungKO:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
 cursor: Pointer;
}

/* Statusbox */
div#kalender .statusBox {
 font-family: Verdana, Tahoma, Arial, Helvetica, Sans-Serif;
 font-size: 0.90rem;
 color: #FFFFFF;
 background-color: rgba(100, 100, 100, 0.6);
 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: Verdana, 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);
}

/* 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: 340px;
  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;
 }
}

/* 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;
 }
}


/* 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;
 }
}
