/* /////////////////////////////////////////////////////////////////////////// */
/* // Nornenthal - CSS3-Stylesheet | Copyright 2025 by Mag. Markus W. Benes // */
/* /////////////////////////////////////////////////////////////////////////// */

#mainbox-formular div.formular-navigation {
    width: 674px;
    height: 27px;
    text-align: right;
    float: left;
    margin: 0px 0px 0px 0px;
    padding: 0px 10px 0px 0px;
}

#mainbox-formular div.formular-navigation a {
    font-family: Tahoma, Arial, Tahoma;
    font-size: 13px;
    text-decoration: underline;
    color: #9d8677;
    margin: 0px 0px 0px 10px;
    padding: 0px 0px 0px 0px;
}

/* Kalender-Container */
.calendar {
    display: block;
    width: 100%;
    max-width: 680px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
}

/* Kopfzeile mit Wochentagen und Kalenderwoche */
.calendar-header, .calendar-row {
    display: grid;
    grid-template-columns: var(--kw-breite, 40px) repeat(7, 1fr); /* KW-Breite anpassbar */
    padding: 5px 0;
}

/* CSS-Variablen für das Border */
.calendar-header {
    border-bottom: var(--border-header, 2px solid #E3E3E3); /* Border für Kopfzeile */
}

.calendar-row {
    border-bottom: var(--border-row, 1px solid #ddd); /* Border für Kalenderzeilen */
    height: 115px;
}

.calendar-column {
    text-align: center;
    font-weight: bold;
    padding: 5px;
    border-right: var(--border-kategorie, 1px solid #ccc); /* Border für KW und Wochentage */
}

.calendar-field {
    text-align: left;
    padding: 0px;
    background-color: #fff; /* Weißer Hintergrund für die Kalendertage */
    border: var(--border-tag, 1px solid #ccc); /* Border für Kalendertage */
    position: relative;
}

.calendar-field-bright {
    text-align: left;
    padding: 0px;
    background-color: #FFFFFF; /* Weißer Hintergrund für die Kalendertage */
    border: var(--border-tag, 1px solid #E8E8E8); /* Border für Kalendertage */
    position: relative;
}

/* Kalendertag: Hellgrauer Hintergrund oben links */
.calendar-field div.calendar-field-header {
    background-color: #f0f0f0; /* Hellgrauer Hintergrund für den Kalendertag oben links */
    font-weight: bold;
    padding: 3px 3px 3px 5px;
    margin: 5px 5px 5px 5px;
}

.calendar-field-bright div.calendar-field-header-bright {
    background-color: #F5F5F5; /* Hellgrauer Hintergrund für den Kalendertag oben links */
    color: #E3E3E3;
    font-weight: bold;
    padding: 3px 3px 3px 5px;
    margin: 5px 5px 5px 5px;
}

/* Zusätzliche Zeile im Kalendertag */
.calendar-field-entry-1 {
    border-radius: 2px;
    background-color: #FFCCCC;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    word-wrap: break-word;
    overflow: hidden;
    color: #FF5C5C;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    width: 67px;
    height: 25px;
    /* border-bottom: 1px dashed #ccc;*/
}

.calendar-field-entry-1:hover {
    border-radius: 2px;
    background-color: #FFE0E0;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    word-wrap: break-word;
    overflow: hidden;
    color: #FF9494;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    width: 67px;
    height: 25px;
    /* border-bottom: 1px dashed #ccc;*/
}

.calendar-field-entry-2 {
    border-radius: 2px;
    background-color: #CCFFCC;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    word-wrap: break-word;
    overflow: hidden;
    color: #009966;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    width: 67px;
    height: 25px;
    /* border-bottom: 1px dashed #ccc;*/
}

.calendar-field-entry-2:hover {
    border-radius: 2px;
    background-color: #E0FFE0;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    word-wrap: break-word;
    overflow: hidden;
    color: #00AD74;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    width: 67px;
    height: 25px;
    /* border-bottom: 1px dashed #ccc;*/
}

.calendar-field-entry-3 {
    border-radius: 2px;
    background-color: #D1E8FF;
    text-align: center;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    word-wrap: break-word;
    overflow: hidden;
    overflow: hidden;
    color: #6699CC;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    width: 67px;
    height: 25px;
    /* border-bottom: 1px dashed #ccc;*/
}

.calendar-field-entry-3:hover {
    border-radius: 2px;
    background-color: #E5F2FF;
    margin-top: 2px;
    margin-bottom: 2px;
    text-align: center;
    font-family: Tahoma, Verdana, Arial;
    font-size: 10px;
    font-weight: bold;
    text-decoration: none;
    word-wrap: break-word;
    overflow: hidden;
    color: #85ADD6;
    padding: 5px 5px 5px 5px;
    margin: 5px 5px 5px 5px;
    width: 67px;
    height: 25px;
    /* border-bottom: 1px dashed #ccc;*/
}

.inactive{
    border-radius: 2px;
    background-color: #F0F0F0;
    word-wrap: break-word;
    overflow: hidden;
    color: #9C9C9C;
    width: 67px;
    height: 25px;
    border: 1px dashed #E3E3E3 !important; /* 1 ist die normale Helligkeit, 1.2 ist 20% heller */
}

/* Header der Kalenderwoche */
.calendar-header .calendar-column-week {
    background-color: var(--background-kw, #e0e0e0); /* Hintergrundfarbe für KW im Header */
    border-right: var(--border-kW-header, 1px solid #ccc); /* Border rechts für KW im Header */
}

/* Spezifische Border für KW-Spalte */
.calendar-row > .calendar-field-week-1 {
    border-left: var(--border-kw, 2px solid #E3E3E3); /* Border links für Kalenderwoche */
    background-color: #FFCCCC; /* Hellblauer Hintergrund für Kalenderwoche */
    text-align: center;
    font-weight: bold;
    color: #FF7575;
    padding: 9px 5px 5px 5px;
}

.calendar-row > .calendar-field-week-2 {
    border-left: var(--border-kw, 2px solid #E3E3E3); /* Border links für Kalenderwoche */
    background-color: #CCFFCC; /* Hellblauer Hintergrund für Kalenderwoche */
    text-align: center;
    font-weight: bold;
    color: #00AD74;
    padding: 9px 5px 5px 5px;
}

.calendar-row > .calendar-field-week-3 {
    border-left: var(--border-kw, 2px solid #E3E3E3); /* Border links für Kalenderwoche */
    background-color: #cce5ff; /* Hellblauer Hintergrund für Kalenderwoche */
    text-align: center;
    font-weight: bold;
    color: #6699CC;
    padding: 9px 5px 5px 5px;
}

.calendar-row > .calendar-field-week-4 {
    border-left: var(--border-kw, 2px solid #E3E3E3); /* Border links für Kalenderwoche */
    background-color: #E1DBD5; /* Hellblauer Hintergrund für Kalenderwoche */
    text-align: center;
    font-weight: bold;
    color: #B9AA9D;
    padding: 9px 5px 5px 5px;
}

/* Monat Navigation */
.calendar-navigation {
    margin-bottom: 20px;
    text-align: center;
    padding: 10px 0px 8px 0px;
}

.calendar-navigation a {
    font-family: Tahoma, Verdana, Arial;
    font-size: 15px;
    font-weight: bold;
    text-decoration: none;
    color: #B9AA9D;
    padding: 0 10px;
}

.calendar-navigation a:hover {
    text-decoration: underline;
}

/* Monat Auswahl */
.navigation-selection {
    margin-top: 20px;
    text-align: center;
}

.navigation-selection label {
    font-family: Tahoma, Verdana, Arial;
    font-size: 15px;
    font-weight: normal;
    text-decoration: none;
    margin-left: 0px;
    margin-right: 8px;
}

.navigation-selection select {
    padding: 5px;
    font-size: 14px;
    margin-right: 15px;
}

.navigation-selection input {
    padding: 5px;
    font-size: 14px;
    width: 80px;
    margin-right: 15px;
}

.navigation-selection button {
    padding: 5px 10px;
    font-size: 14px;
    margin-left: 0px;
    cursor: pointer;
}

.market-head {
    background-color: #D1E8FF;
    border-top: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    font-family: Verdana, Arial, Tahoma;
    font-size: 15px;
    font-weight: bold;
    display: flex;
    justify-content: center;  /* Horizontale Zentrierung */
    align-items: center;
    color: #85ADD6;
    width: 100%;
    height: 30px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    float: left;
}

.container {
    background-color: #FFFFFF;
    display: flex;
    justify-content: center;  /* Horizontal zentrieren */
    align-items: center;      /* Vertikal zentrieren */
    width: 240px;
    padding: 10px 0px 10px 0px;
}

img.container {
    width: 170px;          /* Bildgröße an den Container anpassen */
}

        .iframe-container {
            position: relative;
            width: 685px;
            height: 525px;
        }

        .iframe-placeholder {
            width: 100%;
            height: 100%;
            background-size: 200px;
            z-index:0;
            top: 0;
            left: 0;
            position: absolute;
            background:
        repeating-linear-gradient(
            -45deg,   /* Negativer Winkel für diagonale Balken */
            #f0f0f0,  /* Hellgrau */
            #f0f0f0 20px,
            white 20px,
            white 40px
        ),
        url("/images/navigation/loading.gif"); /* Bild als Hintergrund */

    background-size: auto, 150px; /* Balken unverändert, Bild skaliert */
    background-repeat: no-repeat;
    background-position: center;
    background-blend-mode: multiply; /* Optional für bessere Farbwirkung */
        }

        iframe {
            width: 100%;
            height: 100%;
            border: 0;
            z-index:1;
            position: absolute;
        }

        /* Platzhalterbild entfernen, sobald das iframe geladen wird */
       iframe[loading="lazy"] + .iframe-placeholder {
            display: none;
        }