@page {
    size: A4 landscape; /* Using landscape results in .calendar not being printed at all */
}

* {
    background-color: white;
    font-size: x-large;
    font-size: large;
}

#idWeek,
#idInput,
#idFilter {
    display: none;
}

html,
body {
    /* prevents an empty page at the end */
    height: 99%;
}

#print-output {
    display: grid;
    grid-template-columns: 14cm 14cm;
    gap: 1cm;
    width: 29cm;
}

.day {
    flex-direction: row;
    background-color: red !important;
}
.date {
    flex-direction: column;
    border-right: 1pt solid black;
    flex-basis: 0;
    flex-grow: 2;
}
.schedule {
    flex-basis: 0;
    flex-grow: 5;
    padding-bottom: 1cm;
}

/* for some reason the event styles (border and margin bottom) do not work, therefore I need teh schedule padding bottom */

.event {
    padding: 5px;
    border-bottom: 1pt dotted black;
}
.event:last-child {
    margin-bottom: 1cm;
}
.filler {
    display: none;
}

/* 
 * Die folgenden beiden Regeln should make it "work;" 
 * Falls alternativ unterschiedliche Teile gedruckt werden soll, kann die zweite Regel z.B. ".screen-show .printable" lauten. 
 * 1. Rule:  if it neither is an ancestor nor a descendant of "printable", it should not be printed 
 * 2. Rule: since the previous rule excludes "printable", it needs to be defined subsequently as important
 * 
 * Some of the previous rules are not needed anymore.
 */

/* NOT WORKING YET

*:not(:has(.printable)):not(.printable *) {
    background-color: azure;
    display: none;
}

.printable {
    display: block !important;
}

*/