#TürchenKlickenZurKrippeBlicken

{source}<style>
#calendar {
max-width: 1000px;
}

#calendar ol {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
max-width: 120rem;
}

@media (min-width: 800px) { /* 3x8 */
#calendar ol {
grid-template-columns: repeat(3, 1fr);
}
}

@media (min-width: 1001px) { /* 4x6 */
#calendar ol {
grid-template-columns: repeat(4, 1fr);
}
}

html {
--bgcolor: #e6f2f7;
--linkcolor: #6f0303;
--bordercolor: #6f0303;
}

#calendar ol {
counter-reset: advents-counter;
list-style: none;
padding: 0;
background-image: url(/images/stories/kirchspiel/bilder/2020/adventskalender/background-adventskalender.jpg);
background-position: center;
background-size: cover;
}

@media (max-width: 629px) {
#calendar ol {
background-image: url(/images/stories/kirchspiel/bilder/2020/adventskalender/background_adventskalender_mobile.jpg);
background-position: top;
background-size: 150%;
background-repeat: repeat-y;
}
}

#calendar li {
border: thin solid var(--bordercolor);
counter-increment: advents-counter;
position: relative;
height: 160px;
margin: 20px;
background-color: inherit;
transition: background-color 0.5s linear;
}

@media (min-width: 1000px) {
#calendar li {
height: 180px;
}
}

#calendar li:hover, #calendar li:focus {
background-color: rgba(255, 255, 255, 0.8);
transition: background-color 0.5s linear;
}

#calendar li > * {
opacity: 0;
transition: opacity 0.5s linear;
}

#calendar li:hover > *, #calendar li:focus > * {
opacity: 1;
transition: opacity 0.5s linear;
}

#calendar li::after {
--size: 2rem;
content: counter(advents-counter);
position: absolute;
color: var(--bgcolor);
font-size: calc(var(--size) * .75);
font-weight: bold;
right: calc(var(--size) * .25);
top: calc(var(--size) * .25);
line-height: var(--size);
width: var(--size);
height: var(--size);
padding: calc(var(--size) * .2);
transform: rotate(-10deg);
background-color: var(--bordercolor);
border-radius: 50%;
text-align: center;
box-shadow: calc(var(--size) * .05) calc(var(--size) * .05) 0 #999;
}

#calendar ol a {
text-decoration: none;
color: var(--linkcolor);
padding: 10px;
display: table;
overflow: hidden;
height: calc(100% - 20px);
width: calc(100% - 20px);
font-family: "Open Sans Condensed";
font-size: 20px;
}

#calendar .day-content{
text-shadow: 0 0 2px white, 0 0 4px white;
text-align: center;
display: table-cell;
vertical-align: middle;
}
<?php
$order = array();
for ($i = 1; $i <= 24; $i++) {
array_push($order, $i);
}

shuffle($order);

for ($i = 0; $i < 24; $i++) {
echo "#calendar li:nth-of-type(" . ($i + 1) . ") { order: " . $order[$i] . "; }\n";
}
?>
</style>

<div id="calendar">
<?php

$calendar = '{
"adventCalendar" : [
{
"day" : 1,
"text" : "Sind die Lichter angezündet",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=503:erstes-tuerchen&catid=113:adventskalender"
}, {
"day" : 2,
"text" : "Zauberhafte Weihnacht",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=507:zweites-tuerchen-zauberhafte-weihnacht&catid=113:adventskalender"
}, {
"day" : 3,
"text" : "Spekulatius",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=509:drittes-tuerchen-spekulatius&catid=113:adventskalender"
}, {
"day" : 4,
"text" : "Alle Jahre wieder",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=514:viertes-tuerchen-alle-jahre-wieder&catid=113:adventskalender"
}, {
"day" : 5,
"text" : "Haferplätzchen",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=508:fuenftes-tuerchen-haferplaetzchen&catid=113:adventskalender"
}, {
"day" : 6,
"text" : "Lasst uns froh und munter sein",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=511:sechstes-tuerchen-lasst-uns-froh-und-munter-sein&catid=113:adventskalender"
}, {
"day" : 7,
"text" : "Gebet",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=516:siebentes-tuerchen-gebet&catid=113:adventskalender"
}, {
"day" : 8,
"text" : "s\' Raachermannl",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=520:achtes-tuerchen-raachermannl&catid=113:adventskalender"
}, {
"day" : 9,
"text" : "Wichteltraum",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=513:neuntes-tuerchen-wichteltraum&catid=113:adventskalender"
}, {
"day" : 10,
"text" : "Nascherei auf dem Weihnachtsmarkt",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=518:zehntes-tuerchen-gebrannte-mandeln&catid=113:adventskalender"
}, {
"day" : 11,
"text" : "Comic zur Geburt Johnnes des Täufers",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=524:elftes-tuerchen-bouree&catid=113:adventskalender"
}, {
"day" : 12,
"text" : "Unterwegs mit Maria und den drei Weisen",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=522:zwoelftes-tuerchen-unterwegs-mit-maria-und-den-drei-weisen&catid=113:adventskalender"
}, {
"day" : 13,
"text" : "Maria durch ein Dornwald ging",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=525:dreizehntes-tuerchen-maria-durch-ein-dornwald-ging&catid=113:adventskalender"
}, {
"day" : 14,
"text" : "Adventslied",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=515:vierzehntes-tuerchen-adventslied&catid=113:adventskalender"
}, {
"day" : 15,
"text" : "Weihnachten is stille Nacht",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=526:fuenfzehntes-tuerchen-weihnachten-is-stille-nacht&catid=113:adventskalender"
}, {
"day" : 16,
"text" : "Hoffnungsleuchten",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=527:sechzehntes-tuerchen-gedicht&catid=113:adventskalender"
}, {
"day" : 17,
"text" : "Licht des Himmels",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=523:siebzehntes-tuerchen-licht-des-himmels&catid=113:adventskalender"
}, {
"day" : 18,
"text" : "Vom Himmel hoch da komm ich her",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=528:achtzehntes-tuerchen-vom-himmel-hoch-da-komm-ich-her&catid=113:adventskalender"
}, {
"day" : 19,
"text" : "Die Tradition der Kaufmannsläden",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=529:neunzehntes-tuerchen-die-tradition-der-kaufmannslaeden&catid=113:adventskalender"
}, {
"day" : 20,
"text" : "Macht hoch die Tür",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=531:zwanzigstes-tuerchen-macht-hoch-die-tuer&catid=113:adventskalender"
}, {
"day" : 21,
"text" : "Oh du schöner Tannenbaum",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=536:einundzwanzigstes-tuerchen-oh-du-schoener-tannenbaum&catid=113:adventskalender"
}, {
"day" : 22,
"text" : "Moosmann-Sage",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=532:zweiundzwanzigstes-tuerchen-moosmann-sage&catid=113:adventskalender"
}, {
"day" : 23,
"text" : "Weihnachten steht vor der Tür",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=535:dreiundzwanzigstes-tuerchen-weihnachten-steht-vor-der-tuer&catid=113:adventskalender"
}, {
"day" : 24,
"text" : "Stille Nacht",
"picture" : null,
"link" : "index.php?option=com_content&view=article&id=533:vierundzwanzigstes-tuerchen-stille-nacht&catid=113:adventskalender"
}
]
}';

function CreateCalendar($calendar) {
echo "<ol>";
$days = json_decode($calendar)->adventCalendar;
foreach ($days as $day) {
CreateDayElement($day);
}
echo "</ol>";
}

function CreateDayElement($day) {
if (((new DateTime())->setTime(0, 0, 0)) < ((new DateTime())->setDate(2020, 12, $day->day)->setTime(0, 0, 0))) {
echo '<li><a><p class="day-content">Neugierig? Da müssen Sie sich wohl noch gedulden (:</p></a></li>';
} else {
echo '<li><a href="' . $day->link . '"><p class="day-content">' . $day->text . '</p></a></li>';
}
//echo "<a";
//echo ($day->day > intval(date("d"))) ? "" : " href=\"{$day->link}\"";
//echo "><li><p class=\"day-content\">{$day->text}</p><img src=\"{$day->picture}\" /></li></a>";
//echo "<li><a";
//echo ($day->day > intval(date("d"))) ? "" : " href=\"{$day->link}\"";
//echo "><p class=\"day-content\">{$day->text}</p></a></li>";
return;
}

CreateCalendar($calendar);
?>
</div>{/source}