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


/* Hauptfarben */
:root {
  --color: #505050;
  --bgcolor-even: rgba(255,255,255,0.1);
  --bgcolor-odd: rgba(190,190,190,0.1);
  --highlight-color: rgb(34,132,230);
  --highlight-bgcolor: rgba(222,238,252,0.75);
  --highlight-outlinecolor: rgb(153,209,255);
 }

/* Kalender */
div#kalender {
 hyphens: Auto; /* FF */
 box-shadow: 1px 1px 10px rgba(178, 178, 178,0.9);
 background-image: url(hintergrundbild.jpg);
 background-repeat: No-Repeat;
 background-size: Cover;
}

/* Tabelle */
table#kalender {
 font-family: Arial, icomoon, Verdana, Tahoma,'Times New Roman', Times, serif,  sans-serif;
 background-color: #F5F5F5;
 border-collapse: Collapse;
 width: 100%;
 z-index: 1;
 opacity: 0.75;
 cursor: Default;
}

/* Tabelle Beschriftung */
table#kalender caption {
 color: var(--highlight-color);
 font-size: 1.1rem;
 font-weight: Bold;
 letter-spacing: 2px;
 background: linear-gradient(#E0E0E0, #F5F5F5);
 padding: 5px 0 5px 0;
 text-align: Center;
}

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

/* Tabelle TH */
table#kalender th {
 font-weight:normal;
 text-align: Center !important;
 border: Solid 1px #FFFFFF;
}

/* Tabelle TD */
table#kalender td {
 font-family:inherit;
 font-weight:bold;
 vertical-align: Top;
 padding: 1px;
 border: Solid 1px #FFFFFF;
 font-style: inherit;
 
}

/* Tabelle Navigation */
table#kalender th#navigation {
 font-size: 1.10rem;
 font-weight: Bold;
 letter-spacing: 2px;
 text-align: Center !important;
 background-color: #F5F5F5;
 padding: 0px;
 position: Sticky;
 top: -1px;
 z-index: 1000;
}

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

/* Auswahl (Monate, Jahre, Optionen) */
table#kalender td#auswahl {
 height: 30px;
 vertical-align: Middle;
 text-align: Center !important;
 padding: 0px;
}

/* Anzeige (Events, Formular) */
table#kalender td#anzeige {
 font-family: inherit;
  padding: 0px;
 font-size: 0.95rem;
background: linear-gradient(#EDEDED 1%, #FFFFFF 80%, #EDEDED);
}

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

/* Heute */
table#kalender td.heute {
 background-color: rgba(200, 200, 200,0.6) !important;
}

/* Ein Tag! */
table#kalender td.eintag {
 font-family: inherit;  
 height: 60px;
 cursor: Default;
 line-height: 14px;
 word-break: break-all;
 hyphens: Auto; /* FF */
 transition: background-color 0.5s;
}

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

/* Kein Tag! */
table#kalender td.keintag {
    font-family: inherit;
 height: 50px;
 color: #C5C5C5;
 padding-left: 8px;
 cursor: Pointer;
 transition: background-color 0.5s;
}

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


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

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

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

/* Uhrzeit */
table#kalender span.uhrzeit {
 font-family: Arial, Tahoma, Sans-Serif;
 font-size: 0.72rem;
 color: #000000;
}

/* Datum und Uhrzeit (Formular) */
table#kalender span#datumLokal {
 font-family: Arial, Tahoma;
 font-size: 0.92rem;
 color: #656565;
}

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

/* Navigation */
table#kalender span.navLink {
 font-family:  Arial, icomoon, sans-serif;
 font-weight: Normal;
 color: var(--color);
 padding: 1px 4px 1px 4px;
 cursor: Pointer;
 outline: Solid 1px Transparent;
 transition: background-color 0.4s;
}

table#kalender span.navLink:hover {
font-family: Arial, Tahoma, Verdana, icomoon, sans-serif;
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
}

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

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

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

table#kalender a:hover {
 font-family: inherit;
 text-decoration: Underline;
}

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

table#kalender div.eventLink {
font-family: inherit;
 font-size: 0.92rem;
 color: #F3F9FE;
 margin-top: 2px;
 padding: 2px 0 1px 2px;
 cursor: Pointer; 

}

table#kalender span.optionLink {
 font-family: Arial, icomoon, sans-serif;
 font-size: 0.85rem;
 color: var(--highlight-color);
 padding: 1px 5px 1px 5px;
 cursor: Pointer;
 outline: Solid 1px Transparent;
 transition: background-color 0.4s;
}

table#kalender span.optionLink:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 font-family: Arial, Tahoma, Verdana, icomoon, sans-serif;
}

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

table#kalender span.nowrap {
 white-space: Nowrap;
}

table#kalender span#eKmehrtage,
table#kalender span#eKdifferenz {
 font-family: Arial, Tahoma, Verdana;
 font-size: 0.90rem;
 color: #009900;
}

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

span#nachOben {
 font-family: Verdana;
 color: Transparent;
 padding: 1px 4px 1px 4px;
}

/* Tabellennavigtion */
table#kalender table#tableNavigation {
 width: 100%;
 border-collapse: Collapse;
 background-color: #E4E4E4;
 border-bottom: Solid 1px #FFFFFF;
 margin-bottom: 25px;
 position: Sticky;
 top: 24px;
 z-index: 1000;
}

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

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

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

/* user-select */
table#kalender caption,
 table#kalender td#navigation,
 table#kalender td.eintag,
 table#kalender td.keintag,
 table#kalender th.wochentag,
 table#kalender th.wochenende,
 table#kalender span.feiertag,
 table#kalender span.uhrzeit,
 table#kalender span.navLink,
 table#kalender span.eventLink,
 table#kalender span.optionLink,
 table#kalender form#eKform,
 table#kalender details > summary {
 -webkit-user-select: None;
}

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

table#kalender mark.mark {
 font-size: 1.2rem;
 font-variant: Small-Caps;
 background-color: Transparent;
 color: var(--highlight-color);
}

/* Kalenderblatt */
table#kalender div#kalenderblatt {
 background: linear-gradient(#FFFFFF 50%, #EDEDED);
 line-height: 23px;
 color: var(--color);
 padding-bottom: 25px;
}

table#kalender div#kalenderblatt > table {
 border-bottom: Solid 1px #DEDEDE;
}

table#kalender div#blatt {
 font-family: Arial, Verdana, sans-serif;
 font-size: 5rem;
 text-shadow: 1px 1px 4px #9C9C9C;
 color: #156BC1;
 text-align: Center;
 vertical-align: Middle;
 hyphens: None;
 float: Left;
 line-height: 95px;
 width: 150px;
 height: 160px;
 padding-top: 10px;
 margin: 5px 15px 0 0;
 background: linear-gradient(#F3F9FE, #FFFFFF);
 border: Solid 1px #F3F9FE;
 border-top: Dotted 4px #AED8F9;
 box-shadow: 0px -10px 0px 0px #F3F9FE;
 cursor: Pointer;
 
}

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

/* Event-Gruppe */
table#kalender div#eventgruppe {
 text-align: Right;
}

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

 /* Formular */
 table#kalender form#eKform {
  width: 500px;
  margin: Auto;
  color: var(--color);
  line-height: 21px;
 }

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

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

table#kalender span.prioritaet:hover {
    font-family: Arial, Tahoma, Verdana, icomoon, sans-serif;
 color: #FFFFFF;
}

table#kalender div#inBlock {
 display: Inline-Block;
 width: 95%;
 line-height: 30px;
 hyphens: None; /* FF */
}

/* Überschrift (Wochentag, Monat, Kalenderwoche und Zähler)  */
table#kalender div.abschnitt {
 font-size: 1.4rem;
 font-variant: Small-Caps;
 letter-spacing: 1px;
 color: var(--highlight-color);
 padding-top: 50px;
}

table#kalender div.abschnitt span:hover {
 background-color: var(--highlight-bgcolor);
 outline: Solid 1px var(--highlight-outlinecolor);
 color: var(--highlight-color);
 font-family: Arial, icomoon, sans-serif;
}

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

/* Event-Anzeige (Definitionsliste) */
table#kalender 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(109, 109, 109,0.8);
}

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

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

table#kalender dl.dl > dt:nth-child(1) {
 border-bottom: Solid 1px rgb(200, 200, 200);
 margin-bottom: 5px;
}

table#kalender dl.dl > dt:nth-child(4) {
 border-top: Solid 1px rgb(200, 200, 200);
 margin-top: 3px;
}

table#kalender dl.dl > dd {
 margin-left: 0px; /* 25px */
 max-width: 90%;
}

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

table#kalender p.formLineHeight {
 line-height: 30px;
}

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

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

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

table#kalender hr {
 border: 0;
 border-top: Dotted 2px var(--highlight-color);
 margin: 25px 15% 25px 15%;
}

table#kalender img.bild {
 display: Block;
 max-width: 100%;
 height: Auto;
 object-fit: fill;
 border: Solid 1px #202020;
}

/* Formularfelder */
form#eKsuche {
 display: Inline;
}
table#kalender input[type="text"],
table#kalender input[type="password"],
table#kalender input[type="search"],
table#kalender input[type="number"],
table#kalender input[type="date"],
table#kalender input[type="time"],
table#kalender input[type="reset"],
table#kalender input[type="button"],
table#kalender input[type="checkbox"],
table#kalender button[type="button"],
table#kalender textarea,
table#kalender select {
 border: Solid 1px #9A9A9A;
 font-family: Verdana, icomoon, Arial;
 font-size: 0.95rem;
 caret-color: #FF0000;
 transition: box-shadow 0.3s;
}

table#kalender input[type="text"]:focus,
table#kalender input[type="password"]:focus,
table#kalender input[type="search"]:focus,
table#kalender input[type="number"]:focus,
table#kalender input[type="date"]:focus,
table#kalender input[type="time"]:focus,
table#kalender input[type="button"]:focus,
table#kalender input[type="reset"]:focus,
table#kalender input[type="checkbox"]:focus,
table#kalender button[type="button"]:focus,
table#kalender textarea:focus,
table#kalender select:focus {
 border:0; outline:0; /* Chromium */
 border: Solid 1px var(--highlight-color) !important;
 box-shadow: 0px 0px 3px 0px var(--highlight-color) !important;
}

table#kalender input[type="button"],
table#kalender input[type="submit"],
table#kalender input[type="reset"],
table#kalender button[type="button"],
table#kalender button[type="reset"] {
 border: Solid 1px #9A9A9A;
 background-color: #E1E1E1;
 font-size: 0.95rem;
 transition: background-color 0.4s;
}

table#kalender input[type="button"]:hover,
table#kalender input[type="submit"]:hover,
table#kalender input[type="reset"]:hover,
table#kalender button[type="button"]:hover,
table#kalender button[type="reset"]:hover {
 border: Solid 1px #0078D7;
 background-color: #E5F1FB;
}

table#kalender button[type="button"]:disabled,
table#kalender button[type="button"]:disabled:hover {
 background-color: #E1E1E1;
 border: Solid 1px #E1E1E1;
 cursor: Not-Allowed;
}

table#kalender input[type="number"]:out-of-range {
 border: Solid 1px #0078D7;
 background-color: #FFCACA;
}

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

table#kalender input[type="text"].event {
 width: 230px;
}

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

table#kalender input[type="search"] {
 width: 250px;
 padding-left: 5px;
}

table#kalender textarea.textarea {
 width: 400px;
 min-width: 400px;
 height: 150px;
 min-height: 150px;
 resize: Both;
}

/* Anmeldung */
table#kalender input[type="text"].login,
table#kalender input[type="password"].login {
 width: 150px;
}

table#kalender input[type="number"] {
 width: 70px;
}

table#kalender input[type="time"] {
 width: 85px;
 padding-left: 5px;
 vertical-align: Middle;
}

table#kalender input[type="date"] {
 width: 150px;
 padding-left: 5px;
 vertical-align: Middle;
}

table#kalender label {
 white-space: Nowrap;
}

table#kalender label:hover {
 color: var(--highlight-color);
 font-family: Arial, icomoon, sans-serif;
}

 /* Checkbox (checked) */
table#kalender input[type="checkbox"]:checked + label {
 color: var(--highlight-color);
}

table#kalender input[type="checkbox"]:checked + label.achtung {
 color: #FF0000;
}

table#kalender input[type="checkbox"]:checked + label.markiert {
 background-color: var(--highlight-bgcolor);
 box-shadow: 0px 0px 1px 2px #FF0000;
}

table#kalender input[type="checkbox"].checkboxGruppe {
 visibility: Hidden;
 margin-right: -25px;
}

table#kalender option:nth-child(even) {
 background-color: #E1E1E1;
}

table#kalender option:nth-child(odd) {
 background-color: #FFFFFF;
}

table#kalender optgroup {
 background-color: #DEEEFC;
}

table#kalender div#buttons {
 line-height: 35px;
}

 /* Klassen hinzufügen */
table#kalender .aktivtag {
 /*outline: Solid 1px var(--highlight-outlinecolor) !important;*/
 box-shadow: Inset 0px 0px 100px 100px var(--highlight-bgcolor) !important;
}

table#kalender .aktivevent {
    font-family: Arial, Verdana, icomoon, sans-serif;
 outline: Solid 3px var(--highlight-outlinecolor) !important;
}

table#kalender .flexon {
 display: Flex;
 flex-flow: Row Wrap;
}

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

 /* Details */
table#kalender details > summary {
 color: var(--highlight-color);
 cursor: Pointer;
}

table#kalender details > summary::marker { /* Firefox 68+ */
 color: #000000;
 /*font-size: 1.2em;*/
}

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

 /* Kalenderauswahl (Tag, Woche, Monat, Jahr) */
table#kalender span.kalenderauswahl {
 background-color: #F4F4F4;
 padding: 2px;
 border-radius: 20px;
}

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

table#kalender p.vorschau {
 box-shadow: 0px 0px 3px 1px #C5C5C5;
 padding: 5px;
 background-color: #FFFFFF;
 width: 98%;
 min-width: 250px;
 height: 250px;
 min-height: 250px;
 overflow: Auto;
 resize: Both;
}

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

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

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

/* Statusmeldung */
div#kalender .statusBox {
 font-family: Verdana, Arial, icomoon;
 font-size: 0.90rem;
 color: #FFFFFF;
 background-color: rgba(100, 100, 100,0.8);
 padding: 10px;
 border-radius: 20px;
 box-shadow: 0px 0px 5px 2px rgba(100, 100, 100,0.8);
 z-index: 1000;
 cursor: Default;
}

/* Markierter Text */
::selection {
 background-color: #DEEEFC;
 color: #1A87EA;
}

/* 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#kalender .mobile {
  display: None !important;
 }

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

 /* Feiertag */
 table#kalender span.feiertag {
  font-family: Tahoma, Arial;
  font-size: 0.60rem;
 }

 /* Uhrzeit */
 table#kalender span.uhrzeit {
  font-family: Tahoma, Arial;
  font-size: 0.60rem;
  /*display: None;*/
 }

 /* Event Link */
 table#kalender span.eventLink {
  font-family: Tahoma, Arial, icomoon, sans-serif;
  font-size: 0.60rem;
 }

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

 table#kalender td.eintag div {
  font-family: Tahoma, icomoon Arial, sans-serif;
  font-size: 0.60rem;
 }

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

 /* Formular zentrieren */
 table#kalender form#eKform {
  width: 340px;
  margin: Auto;
 }

 /* Formularfelder */
 table#kalender textarea.textarea {
  width: 320px;
  min-width: 320px;
  max-width: 320px;
  height: 200px;
  min-height: 200px;
  max-height: 400px;
  resize: Vertical;
 }

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

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

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

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

}


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

 table#kalender td {
  outline: Solid 1px #888888;
 }

 table#kalender .print {
  display: None;
 }

 table#kalender span.optionLink {
  display: None;
 }
}
@font-face {
  font-family: 'icomoon';
  src:  url('fonts/icomoon.eot?yo7ixi');
  src:  url('fonts/icomoon.eot?yo7ixi#iefix') format('embedded-opentype'),
    url('c://windows/fonts/icomoon.ttf?yo7ixi') format('truetype'),
    url('fonts/icomoon.woff?yo7ixi') format('woff'),
    url('fonts/icomoon.svg?yo7ixi#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

i, .icomoon-liga {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  
  /* Enable Ligatures ================ */
  letter-spacing: 0;
  -webkit-font-feature-settings: "liga";
  -moz-font-feature-settings: "liga=1";
  -moz-font-feature-settings: "liga";
  -ms-font-feature-settings: "liga" 1;
  font-feature-settings: "liga";
  -webkit-font-variant-ligatures: discretionary-ligatures;
  font-variant-ligatures: discretionary-ligatures;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-paperplane:before {
  content: "\e904";
}
.icon-trash-can-paper:before {
  content: "\e902";
}
.icon-trash-can:before {
  content: "\e903";
}
.icon-trash-emppty-age:before {
  content: "\e900";
}
.icon-trashcan:before {
  content: "\e901";
}
.icon-garbage1:before {
  content: "\e901";
}
.icon-delete1:before {
  content: "\e901";
}
.icon-remove1:before {
  content: "\e901";
}
.icon-bin:before {
  content: "\e901";
}
.icon-uninstall:before {
  content: "\e901";
}
.icon-music:before {
  content: "\e911";
}
.icon-bullhorn:before {
  content: "\e91a";
}
.icon-eye:before {
  content: "\e9ce";
}
.icon-man-woman:before {
  content: "\e9de";
}
.icon-smile:before {
  content: "\e9e1";
}