---

Im Format UTF-8 speichern! Ggf. im Browser - Darstellung Textcodierung auf Unicode (UTF-8) stellen

---

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

.cucu {
 cursor: grab;
}

/* Hauptfarben */
:root {
  --font-family: system-ui, -apple-system, "Segoe UI", "Roboto", "Ubuntu",
  "Cantarell", "Noto Sans", "Verdana", "Arial", sans-serif;
  --color: rgba(55, 55, 55, 0.95) !important;
  --bgcolor-even: rgba(245, 245, 245, 0.1);
  --bgcolor-odd: rgba(165, 165, 165, 0.1);
  --highlight-color: rgba(34, 132, 230, 0.9);
  --highlight-bgcolor: rgba(222, 238, 252, 0.8);
  --highlight-outlinecolor: rgba(134, 201, 255, 0.95);
  color-scheme: 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: var(--font-family);
  font-optical-sizing: Auto;
  color: var(--color);
  background-color: #ffffff;
  border-collapse: Separate;
  border-spacing: 1px;
  table-layout: Auto;
  width: 100%;
  z-index: 500;
  /* opacity: 0.90;*/
  cursor: Default;
}

/* Tabelle Beschriftung */
table#tafel caption {
  color: var(--highlight-color);
  font-size: 1.2rem;
  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;
  background-position: Center Center;
  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.3rem, 1.4vw, 1.5rem);
  font-weight: Bold;
  letter-spacing: 2px;
  text-align: Center !important;
  background: linear-gradient(
    to right,
    rgba(239, 239, 239, 0.9) 1%,
    rgba(255, 255, 255, 0.9) 50%,
    rgba(239, 239, 239, 0.9)
  );
  padding: 0px;
// modify RaHa
// position: Sticky;
 position: Fixed;
  top: -1px; /*Firefox / Chromium*/
  z-index: 1000;
}

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

/* Tabelle sortieren (foobar-table) */
table#tafel #foobar-table th,
table#tafel #foobar-table td {
 padding: 5px;
}

table#tafel th[data-type="number"]:hover,
table#tafel th[data-type="string"]:hover {
 cursor: Pointer;
 color: var(--highlight-color);
}

table#tafel #foobar-table tr:nth-child(even),
table#tafel #journal tr:nth-child(even) {
  background-color: var(--bgcolor-even);
}
table#tafel #foobar-table tr:nth-child(odd),
table#tafel #journal tr:nth-child(odd) {
  background-color: var(--bgcolor-odd);
}

/* 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: var(--font-family);
  font-optical-sizing: Auto;
  font-size: 0.95rem;
  scroll-margin-top: 20px;
  /* background: 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: 116% 116%;
  animation: HintergrundAnim 40s infinite alternate;
}

@keyframes HintergrundAnim {
  from {
    background-position: 100% 0%;
  }
  to {
    background-position: 0% 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 1.5px var(--highlight-outlinecolor);
  border-radius: 4px;
 box-shadow: inset 0px 0px 5px 0px var(--highlight-outlinecolor);
}

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

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

table#tafel tr:hover {
  background-color: rgba(227, 227, 227, 0.08);
}

/* Kein Tag! */
table#tafel td.keintag {
  font-size: clamp(1rem, 1.1vw, 1.2rem);
  color: #c5c5c5;
  padding-left: 8px;
  height: 70px;
  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 {
  position: Sticky;
  top: 30px;
  transition: background-color 0.5s;
}

/* Wochenende (Sa.+ So.) */
table#tafel th.wochenende {
/*  background-color: #e2e2e2;*/
  position: Sticky;
  top: 30px;
  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: var(--font-family);
  font-size: 0.8rem;
  color: #000000 !important;
  text-shadow: 0px 0px 3px #ffffff;
}

/* Datum und Uhrzeit (Formular) */
table#tafel span#datumLokal {
  font-family: var(--font-family);
  font-size: 1rem;
  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: var(--font-family);
  font-size: 0.82rem;
  color: #ee0000;
}

/* Navigation */
table#tafel span.navLink {
  font-family: var(--font-family);
  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 rgba(255, 255, 255, 0.9);
}

table#tafel span.steigend {
  font-size: clamp(1rem, 1.1vw, 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.9rem;
  color: #858585;
  white-space: Nowrap;
  vertical-align: Bottom;
}

table#tafel button.eventLink {
  font-family: var(--font-family);
  font-optical-sizing: Auto;
  font-size: 0.82rem;
  color: #ffffff;
  display: Block;
  width: 100%;
  text-align: Left;
  margin-top: 2px;
  padding: 0px 0px 0px 2px;
  cursor: Pointer;
}

table#tafel span.optionLink {
  font-family: var(--font-family);
  font-optical-sizing: Auto;
  font-size: clamp(0.95rem, 1vw, 1.125rem);
  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 rgba(255, 255, 255, 0.90);
}

table#tafel span.suchenLink {
  font-family: var(--font-family);
  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: var(--font-family);
  font-size: 1.05rem;
  color: #009900;
  white-space: Nowrap;
}

table#tafel span#awstatus {
  font-family: var(--font-family);
  font-size: 1rem;
  color: #ee0000;
}

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

table#tafel span#apps {
  background: linear-gradient(
    to top,
    rgba(239, 239, 239, 0.6),
    rgba(255, 255, 255, 0.6)
  );
  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;
  border-top: Solid 0.5px #bbbbbb;
  border-bottom: Solid 0.5px #bbbbbb;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0.9) 1%,
    rgba(239, 239, 239, 0.9) 50%,
    rgba(255, 255, 255, 0.9)
  );
}

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.2rem;
}

/* 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#eKAdress,
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.3rem, 1.5vw, 1.6rem);
  font-variant: Small-Caps;
  background-color: Transparent;
  color: var(--highlight-color);
/*  text-shadow: 1px 1px 4px 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: var(--font-family);
  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;
  border-radius: 4px;
  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.3rem;
  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: 445px;
  margin: Auto;
  color: var(--color);
  line-height: 21px;
}

table#tafel div#anzeigeOptionenBeenden {
  font-size: 1.05rem;
  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.4rem, 1.5vw, 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: box-shadow 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);
  transition: all 0.5s;
}

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

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

table#tafel span.eventText {
  font-size: 1.05rem;
  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.95rem;
}

table#tafel details.event_loeschen {
  font-family: var(--font-family);
  font-size: 0.95rem;
}

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, 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: 0.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: 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(rgba(255, 255, 255, 0.9), 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;
  width: 350px;
}

table#tafel .tageZeilen u {
  text-decoration: Underline Solid #ff80c0;
}

table#tafel .tageZeilen ins {
  text-decoration: Underline Solid #00c600;
}

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

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

table#tafel .aktivtag:hover {
  box-shadow: Inset 0px 0px 100px 100px rgba(215, 233, 251, 0.90);
}

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;
  transition: color 0.5s;
}

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,
    rgba(239, 239, 239, 0.6),
    rgba(255, 255, 255, 0.6)
  );
  padding: 2px 5px 2px 5px;
  border-radius: 2px;
}

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

/* Vorschau */
table#tafel div.vorschau {
  padding: 5px;
  outline: Solid 1px rgb(163, 163, 163);
  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;
}

div.vorschautitel {
  font-size: 0.95rem;
  padding: 2px 5px 2px 5px;
  background-color: rgba(232,232,232,0.6);
  outline: Solid 1px rgb(215, 215, 215);
}

/* Papierkorb */
div.papierkorb {
  width: 170px;
  height: 22px;
  margin: 10px Auto 10px 20px;
  color: var(--highlight-color);
  font-variant: Small-Caps;
  font-family: var(--font-family);
  font-size: 1.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);
  user-select: None;
  cursor: Help;
}

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

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

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

/* Menueoptionen */
table#tafel div#menueoptionen {
  background-color: #f0f0f0;
  height: 235px;
  min-height: 235px;
  max-height: 350px;
  overflow: Auto;
  margin-top: 10px;
  margin-bottom: 10px;
  resize: Vertical;
  line-height: 25px;
  outline: Solid 0.5px #ffffff;
  overscroll-behavior: contain;
  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 rgba(255, 255, 255, 0.90);
}

/* An.- und Abmeldung (Schriftzug: "Event-Kalender") */
span.anmeldungOK {
  font-size: clamp(1.225rem, 1.4vw, 1.6rem);
  letter-spacing: 3px;
  font-variant: Small-Caps;
  color: var(--highlight-color);
/*  text-shadow: 1px 1px 4px rgba(123, 184, 244, 0.5);*/
  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.225rem, 1.4vw, 1.6rem);
  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: var(--font-family);
  font-size: 1rem;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(80, 80, 80, 0.75);
  padding: 12px;
  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.5);
  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: var(--font-family);
  /*scrollbar-color: gray transparent;*/
  /*scrollbar-width: thin;*/
}

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

/* lazy loading */
div#lazyLoading {
  border: 5px Solid rgba(200, 200, 200, 0.90);
  border-top: 5px Solid rgba(34, 132, 230, 0.90);
  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,
    rgba(255, 255, 255, 0.95) 1%,
    rgba(235, 235, 235, 0.95) 50%,
    rgba(255, 255, 255, 0.95)
  );
  box-shadow: 0px 0px 4px 1px #bababa;
  z-index: 1100;
}

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

table#tafel .context_item {
  padding: 0.5rem !important;
  white-space: Nowrap;
  letter-spacing: 0px;
}

table#tafel .context_divider {
  border-top: 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.7rem;
  }

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

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

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

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

  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"]#benutzername,
  table#tafel input[type="password"]#passwort {
    width: 145px;
  }
}

@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: var(--font-family);
    font-size: 0.9rem;
  }

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

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

@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: 1rem;
  }

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

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

@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: 1.1rem;
  }

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

  /* Feiertag */
  table#tafel span.feiertag {
    font-size: 1.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: 1rem;
  }
}

Zurück zum Kalender