.header {
        background: rgb(123,139,103);
        background: linear-gradient(90deg, rgba(240,128,128,1) 0%, rgba(255,192,192,1) 50%, rgba(255,255,255,0) 100%);
}

.footer {
        background: rgb(2,0,36);
        background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(119,9,121,1) 35%, rgba(0,212,255,1) 100%);
}

@supports (display: grid) {
  @media (min-width: 992px) {
    .site-grid {
      margin: 30px;
      grid-template-columns: [full-start] minmax(0,0fr) [main-start] minmax(0,16rem) minmax(0,110rem) minmax(0,110rem) minmax(0,16rem) [main-end] minmax(0,0fr) [full-end]
    }
  }
}

.clm {
    margin-left: 20px;
    margin-right: 20px;
}

.grid-child {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 100%;
  max-width: 10000px;
  margin-right: auto;
  margin-left: auto;
}

/* 1. Direktes Styling des umschließenden Web-Component-Containers */
joomla-field-calendar {
    display: inline-block !important;
    max-width: 300px !important;
    width: 300px !important;
}

/* 2. Den nativen HTML-Dialog zwingen, klein zu bleiben */
joomla-field-calendar dialog,
joomla-field-calendar .joomla-calendar {
    max-width: 300px !important;
    width: 300px !important;
    box-sizing: border-box !important;
    padding: 8px !important;
    font-size: 0.85rem !important;
}

/* 3. Zugriff auf die inneren Tabellen-Strukturen erzwingen */
joomla-field-calendar table,
joomla-field-calendar table * {
    all: unset !important; /* Löscht Cassiopeias Tabellen-Verzerrungen radikal */
    display: revert !important;
}

joomla-field-calendar table {
    display: table !important;
    width: 100% !important;
    border-collapse: collapse !important;
    margin: 0 !important;
}

joomla-field-calendar th, 
joomla-field-calendar td {
    display: table-cell !important;
    padding: 3px !important;
    text-align: center !important;
    width: calc(100% / 7) !important;
    box-sizing: border-box !important;
}

/* 4. Die Buttons innerhalb der Webcomponent verkleinern */
joomla-field-calendar button {
    padding: 2px 6px !important;
    font-size: 0.75rem !important;
    width: auto !important;
    height: auto !important;
    display: inline-block !important;
}