/* =========================================================
   KALENDER – GRUNDLAYOUT
========================================================= */

.calendar-app {
    --calendar-primary: #0877c9;
    --calendar-primary-dark: #005b9f;
    --calendar-heading: #002f58;
    --calendar-text: #15283a;
    --calendar-muted: #748392;
    --calendar-border: #d9e2ea;
    --calendar-background: #ffffff;
    --calendar-soft-background: #f4f7fa;
    --calendar-weekend: #f8fafc;
    --calendar-today: #e1f2ff;
    --calendar-selected: #0877c9;

    width: 100%;

    margin: 0 auto;
    padding: clamp(14px, 2.5vw, 28px);

    color: var(--calendar-text);
    background: var(--calendar-background);

    border: 1px solid var(--calendar-border);
    border-radius: 18px;

    box-shadow:
        0 14px 38px rgba(0, 43, 78, 0.10),
        0 3px 10px rgba(0, 43, 78, 0.05);

    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   KOPFBEREICH
========================================================= */

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;

    margin-bottom: 22px;
}

.calendar-heading {
    min-width: 0;
}

.calendar-heading-small {
    display: block;

    margin-bottom: 4px;

    color: var(--calendar-primary);

    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-heading h1 {
    margin: 0;

    color: var(--calendar-heading);

    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.1;
}


/* Heute-Schaltfläche */

.calendar-today-button {
    flex: 0 0 auto;

    min-height: 44px;

    padding: 10px 18px;

    border: 1px solid var(--calendar-primary);
    border-radius: 10px;

    background: #ffffff;
    color: var(--calendar-primary);

    font: inherit;
    font-size: 0.95rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.calendar-today-button:hover {
    color: #ffffff;
    background: var(--calendar-primary);

    box-shadow:
        0 6px 15px rgba(8, 119, 201, 0.25);
}

.calendar-today-button:active {
    transform: scale(0.97);
}


/* =========================================================
   MONATSNAVIGATION
========================================================= */

.calendar-navigation {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    align-items: center;
    gap: 12px;

    margin-bottom: 16px;
}

.calendar-current-month {
    min-width: 0;

    color: var(--calendar-heading);

    font-size: clamp(1.25rem, 3vw, 1.75rem);
    font-weight: 800;
    text-align: center;
}

.calendar-navigation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 44px;

    margin: 0;
    padding: 0;

    border: 1px solid var(--calendar-border);
    border-radius: 10px;

    background: var(--calendar-soft-background);
    color: var(--calendar-heading);

    font-size: 1.35rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.calendar-navigation-button:hover {
    border-color: var(--calendar-primary);

    background: var(--calendar-primary);
    color: #ffffff;
}

.calendar-navigation-button:active {
    transform: scale(0.94);
}


/* =========================================================
   WOCHENTAGE
========================================================= */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    border: 1px solid var(--calendar-border);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;

    overflow: hidden;
}

.calendar-weekdays > div {
    min-width: 0;

    padding: 11px 5px;

    color: var(--calendar-heading);
    background: #eaf1f7;

    border-right: 1px solid var(--calendar-border);

    font-size: 0.88rem;
    font-weight: 800;
    text-align: center;
}

.calendar-weekdays > div:last-child {
    border-right: 0;
}


/* Samstag und Sonntag */

.calendar-weekdays > div:nth-child(6),
.calendar-weekdays > div:nth-child(7) {
    color: #b03939;
}


/* =========================================================
   KALENDERRASTER
========================================================= */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    border-top: 1px solid var(--calendar-border);
    border-left: 1px solid var(--calendar-border);
}


/* Einzelner Kalendertag */

.calendar-day {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 105px;

    margin: 0;
    padding: 9px;

    overflow: hidden;

    border: 0;
    border-right: 1px solid var(--calendar-border);
    border-bottom: 1px solid var(--calendar-border);
    border-radius: 0;

    background: #ffffff;
    color: var(--calendar-text);

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        box-shadow 0.18s ease;
}

.calendar-day:hover {
    z-index: 2;

    background: #f0f8fe;

    box-shadow:
        inset 0 0 0 2px rgba(8, 119, 201, 0.35);
}


/* Samstag und Sonntag */

.calendar-day:nth-child(7n + 6),
.calendar-day:nth-child(7n + 7) {
    background: var(--calendar-weekend);
}


/* Tagesnummer */

.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    border-radius: 50%;

    font-size: 0.92rem;
    font-weight: 800;
}


/* Platz für spätere Termine */

.calendar-day-appointments {
    display: block;
    flex: 1 1 auto;

    width: 100%;
    min-height: 30px;

    margin-top: 6px;
}


/* Tage aus anderem Monat */

.calendar-day-other-month {
    color: #a9b3bd;
    background: #fafbfd;
}

.calendar-day-other-month:nth-child(7n + 6),
.calendar-day-other-month:nth-child(7n + 7) {
    background: #f5f7f9;
}


/* Heutiger Tag */

.calendar-day-today {
    background: var(--calendar-today);
}

.calendar-day-today:nth-child(7n + 6),
.calendar-day-today:nth-child(7n + 7) {
    background: var(--calendar-today);
}

.calendar-day-today .calendar-day-number {
    background: var(--calendar-primary);
    color: #ffffff;

    box-shadow:
        0 4px 10px rgba(8, 119, 201, 0.3);
}


/* Manuell ausgewählter Tag */

.calendar-day-selected {
    z-index: 3;

    background: #edf8ff;

    box-shadow:
        inset 0 0 0 3px var(--calendar-selected);
}

.calendar-day-selected:hover {
    box-shadow:
        inset 0 0 0 3px var(--calendar-selected);
}


/* Tastaturfokus */

.calendar-day:focus-visible,
.calendar-navigation-button:focus-visible,
.calendar-today-button:focus-visible {
    z-index: 4;

    outline: 3px solid rgba(8, 119, 201, 0.35);
    outline-offset: 2px;
}


/* Untere Ecken des Rasters */

.calendar-day:nth-last-child(7) {
    border-bottom-left-radius: 12px;
}

.calendar-day:last-child {
    border-bottom-right-radius: 12px;
}


/* =========================================================
   KALENDER-FUSSZEILE
========================================================= */

.calendar-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin-top: 16px;
}

.calendar-legend {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
}

.calendar-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    color: var(--calendar-muted);

    font-size: 0.82rem;
    font-weight: 700;
}

.calendar-legend-marker {
    display: inline-block;

    width: 13px;
    height: 13px;

    border: 1px solid var(--calendar-border);
    border-radius: 4px;
}

.calendar-legend-today {
    border-color: var(--calendar-primary);
    background: var(--calendar-primary);
}

.calendar-legend-other-month {
    background: #f1f3f5;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .calendar-app {
        padding: 16px;
        border-radius: 14px;
    }

    .calendar-day {
        min-height: 90px;
        padding: 7px;
    }

}


/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    .calendar-app {
        padding: 12px;

        border-left: 0;
        border-right: 0;
        border-radius: 0;

        box-shadow: none;
    }

    .calendar-header {
        align-items: flex-end;
        gap: 10px;

        margin-bottom: 16px;
    }

    .calendar-heading-small {
        font-size: 0.67rem;
    }

    .calendar-today-button {
        min-height: 40px;
        padding: 8px 13px;
    }

    .calendar-navigation {
        grid-template-columns: 42px minmax(0, 1fr) 42px;
        gap: 7px;
    }

    .calendar-navigation-button {
        width: 42px;
        height: 40px;
    }

    .calendar-weekdays > div {
        padding: 9px 2px;
        font-size: 0.75rem;
    }

    .calendar-day {
        min-height: 66px;
        padding: 5px;
    }

    .calendar-day-number {
        width: 27px;
        height: 27px;

        font-size: 0.8rem;
    }

    .calendar-day-appointments {
        min-height: 18px;
        margin-top: 2px;
    }

    .calendar-footer {
        justify-content: flex-start;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 400px) {

    .calendar-app {
        padding: 8px;
    }

    .calendar-heading h1 {
        font-size: 1.55rem;
    }

    .calendar-current-month {
        font-size: 1.05rem;
    }

    .calendar-weekdays > div {
        font-size: 0.68rem;
    }

    .calendar-day {
        min-height: 58px;
        padding: 3px;
    }

    .calendar-day-number {
        width: 24px;
        height: 24px;

        font-size: 0.75rem;
    }

}

/* =========================================================
   LIEFERUNG 2 – TERMINFENSTER
========================================================= */

body.calendar-modal-body-open {
    overflow: hidden;
}


/* Gesamter Modalbereich */

.calendar-modal {
    position: fixed;
    inset: 0;
    z-index: 3000;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.2s ease,
        visibility 0.2s ease;
}

.calendar-modal.calendar-modal-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* Dunkler Hintergrund */

.calendar-modal-backdrop {
    position: absolute;
    inset: 0;

    background: rgba(0, 25, 45, 0.65);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}


/* Fenster */

.calendar-modal-dialog {
    position: relative;
    z-index: 1;

    width: min(100%, 680px);
    max-height: calc(100dvh - 40px);

    padding: 24px;
    overflow-y: auto;

    color: #15283a;
    background: #ffffff;

    border: 1px solid #d9e2ea;
    border-radius: 18px;

    box-shadow:
        0 25px 70px rgba(0, 25, 45, 0.35),
        0 5px 18px rgba(0, 25, 45, 0.15);

    transform: translateY(20px) scale(0.98);

    transition: transform 0.25s ease;
}

.calendar-modal-open .calendar-modal-dialog {
    transform: translateY(0) scale(1);
}


/* =========================================================
   MODALKOPF
========================================================= */

.calendar-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    margin-bottom: 18px;
}

.calendar-modal-label {
    display: block;

    margin-bottom: 4px;

    color: #0877c9;

    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.calendar-modal-header h2 {
    margin: 0;

    color: #002f58;

    font-size: clamp(1.45rem, 4vw, 2rem);
    line-height: 1.15;
}


/* Schließen-Schaltfläche */

.calendar-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 1px solid #d9e2ea;
    border-radius: 10px;

    background: #f4f7fa;
    color: #34495e;

    font-family: Arial, sans-serif;
    font-size: 1.7rem;
    line-height: 1;

    cursor: pointer;

    transition:
        color 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.calendar-modal-close:hover {
    border-color: #dc3545;

    background: #dc3545;
    color: #ffffff;
}

.calendar-modal-close:active {
    transform: scale(0.94);
}


/* =========================================================
   AUSGEWÄHLTES DATUM
========================================================= */

.calendar-selected-date-box {
    display: flex;
    align-items: center;
    gap: 13px;

    margin-bottom: 22px;
    padding: 13px 15px;

    border: 1px solid #cbe4f7;
    border-radius: 12px;

    background: #edf8ff;
}

.calendar-selected-date-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    border-radius: 10px;

    background: #0877c9;

    font-size: 1.25rem;
}

.calendar-selected-date-label {
    display: block;

    margin-bottom: 3px;

    color: #5d7182;

    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
}

#calendar-selected-date-text {
    display: block;
    font-size: 1rem;
    line-height: 1.35;
}


/* =========================================================
   FORMULAR
========================================================= */

.calendar-appointment-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.calendar-form-group {
    min-width: 0;
}

.calendar-form-group-full {
    grid-column: 1 / -1;
}

.calendar-form-group label {
    display: block;

    margin-bottom: 7px;

    color: #20384e;

    font-size: 0.9rem;
    font-weight: 800;
}

.calendar-required {
    color: #dc3545;
}


/* Eingabefelder */

.calendar-form-group input,
.calendar-form-group select,
.calendar-form-group textarea {
    display: block;

    width: 100%;
    min-width: 0;

    margin: 0;
    padding: 11px 13px;

    border: 1px solid #cbd6df;
    border-radius: 10px;

    background: #ffffff;
    color: #15283a;

    font-family: Arial, Helvetica, sans-serif;
    font-size: 1rem;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.calendar-form-group input,
.calendar-form-group select {
    min-height: 46px;
}

.calendar-form-group textarea {
    min-height: 120px;

    resize: vertical;
}

.calendar-form-group input:hover,
.calendar-form-group select:hover,
.calendar-form-group textarea:hover {
    border-color: #91a8ba;
}

.calendar-form-group input:focus,
.calendar-form-group select:focus,
.calendar-form-group textarea:focus {
    border-color: #0877c9;

    box-shadow:
        0 0 0 3px rgba(8, 119, 201, 0.14);
}


/* Zeichenzähler */

.calendar-character-counter {
    margin-top: 5px;

    color: #7a8996;

    font-size: 0.75rem;
    text-align: right;
}


/* =========================================================
   FORMULARMELDUNGEN
========================================================= */

.calendar-form-message {
    display: none;
    grid-column: 1 / -1;

    padding: 12px 14px;

    border-radius: 10px;

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.45;
}

.calendar-form-message:not(:empty) {
    display: block;
}

.calendar-form-message-error {
    border: 1px solid #f1b8bd;

    background: #fdebed;
    color: #8c1d28;
}

.calendar-form-message-success {
    border: 1px solid #acd7bc;

    background: #e9f7ee;
    color: #176438;
}

/* =========================================================
   Telegram Terminbestätigung
========================================================= */

.calendar-reminder-group{
    padding:14px;
    border:1px solid rgba(0,0,0,.12);
    border-radius:10px;
    background:rgba(0,0,0,.03);
}

.calendar-checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;
    margin:0;
    cursor:pointer;
    font-weight:600;
}

.calendar-checkbox-label input{
    width:18px;
    height:18px;
    margin:0;
    cursor:pointer;
}

#calendar-reminder-options{
    margin-top:14px;
}

#calendar-reminder-options label{
    display:block;
    margin-bottom:6px;
}

#calendar-reminder-minutes{
    width:100%;
}



/* =========================================================
   FORMULARSCHALTFLÄCHEN
========================================================= */

.calendar-form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    grid-column: 1 / -1;

    margin-top: 4px;
    padding-top: 18px;

    border-top: 1px solid #e2e8ee;
}

.calendar-cancel-button,
.calendar-save-button {
    min-height: 46px;

    margin: 0;
    padding: 10px 18px;

    border-radius: 10px;

    font-family: Arial, sans-serif;
    font-size: 0.95rem;
    font-weight: 800;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Abbrechen */

.calendar-cancel-button {
    border: 1px solid #cbd6df;

    background: #f4f7fa;
    color: #34495e;
}

.calendar-cancel-button:hover {
    border-color: #9eabb7;

    background: #e6ebef;
}


/* Speichern */

.calendar-save-button {
    border: 1px solid #0877c9;

    background: #0877c9;
    color: #ffffff;
}

.calendar-save-button:hover {
    border-color: #005b9f;

    background: #005b9f;

    box-shadow:
        0 7px 17px rgba(8, 119, 201, 0.25);
}

.calendar-cancel-button:active,
.calendar-save-button:active {
    transform: scale(0.97);
}

.calendar-modal-close:focus-visible,
.calendar-cancel-button:focus-visible,
.calendar-save-button:focus-visible {
    outline: 3px solid rgba(8, 119, 201, 0.3);
    outline-offset: 2px;
}

/* =========================================================
   LIEFERUNG 4 – BEARBEITEN UND LÖSCHEN
========================================================= */

.calendar-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;

    width: 100%;
    margin-top: 18px;
}

.calendar-form-actions-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* Löschen */

.calendar-delete-button {
    padding: 10px 16px;

    border: 1px solid #bd2635;
    border-radius: 8px;

    background: #d93646;
    color: #ffffff;

    font-size: 0.92rem;
    font-weight: 700;

    cursor: pointer;

    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.calendar-delete-button:hover {
    border-color: #961c29;
    background: #b92534;

    transform: translateY(-1px);
}

.calendar-delete-button:disabled {
    cursor: wait;
    opacity: 0.65;
}


/* Abbrechen */

.calendar-cancel-button {
    padding: 10px 16px;

    border: 1px solid #b7c1c9;
    border-radius: 8px;

    background: #ffffff;
    color: #344450;

    font-size: 0.92rem;
    font-weight: 700;

    cursor: pointer;
}

.calendar-cancel-button:hover {
    background: #f1f4f6;
}


/* Termin deutlicher anklickbar */

.calendar-appointment {
    position: relative;
}

.calendar-appointment::after {
    content: "✎";

    position: absolute;
    top: 50%;
    right: 5px;

    transform: translateY(-50%);

    font-size: 0.72rem;
    opacity: 0;

    transition: opacity 0.18s ease;
}

.calendar-appointment:hover::after {
    opacity: 0.9;
}


/* Platz für Bearbeiten-Symbol */

.calendar-appointment {
    padding-right: 20px;
}


/* Mobile */

@media (max-width: 650px) {

    .calendar-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .calendar-form-actions-right {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .calendar-delete-button,
    .calendar-cancel-button,
    .calendar-save-button {
        width: 100%;
    }

}

/* =========================================================
   LIEFERUNG 3 – SICHTBARE TERMINE
========================================================= */

.calendar-day-appointments {
    display: flex;
    flex-direction: column;
    gap: 4px;

    overflow: hidden;
}


/* Einzelner Termin */

.calendar-appointment {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 5px 7px;
    overflow: hidden;
    border-left: 4px solid #005b9f;
    border-radius: 6px;
    background: #0877c9;
    color: #ffffff;
    font-size: 0.76rem;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 59, 105, 0.16);

    transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; 
	}

.calendar-appointment:hover {
    background: #005b9f;

    transform: translateY(-1px);

    box-shadow:
        0 4px 8px rgba(0, 59, 105, 0.22);
}


/* Mehrtägiger Termin */

.calendar-appointment-multiday {
    border-left-color: #7048a8;
    background: #8b63bf;
}

.calendar-appointment-multiday:hover {
    background: #7048a8;
}

.calendar-appointment-start {
    border-radius: 6px 2px 2px 6px;
}

.calendar-appointment-end {
    border-radius: 2px 6px 6px 2px;
}


/* Deaktivierter Speichern-Button */

.calendar-save-button:disabled {
    border-color: #8da5b7;

    background: #8da5b7;
    color: #ffffff;

    cursor: wait;

    box-shadow: none;
    opacity: 0.8;
}

/* =========================================================
   MOBILE ANSICHT
========================================================= */

@media (max-width: 650px) {

    .calendar-modal {
        align-items: flex-end;

        padding: 0;
    }
	
	.calendar-day-appointments {
        gap: 2px;
    }

    .calendar-appointment {
        padding: 3px 4px;

        border-left-width: 3px;

        font-size: 0.62rem;
    }

    .calendar-modal-dialog {
        width: 100%;
        max-height: 92dvh;

        padding: 19px 15px 16px;

        border: 0;
        border-radius: 18px 18px 0 0;

        transform: translateY(100%);
    }

    .calendar-modal-open .calendar-modal-dialog {
        transform: translateY(0);
    }

    .calendar-appointment-form {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .calendar-form-group,
    .calendar-form-group-full {
        grid-column: 1;
    }

    .calendar-form-actions {
        flex-direction: column-reverse;
    }

    .calendar-cancel-button,
    .calendar-save-button {
        width: 100%;
    }

}


/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 400px) {
	
	 .calendar-appointment {
        padding: 2px 3px;

        font-size: 0.56rem;
    }

    .calendar-modal-dialog {
        padding: 16px 11px 13px;
    }

    .calendar-selected-date-box {
        padding: 11px;
    }

    .calendar-selected-date-icon {
        flex-basis: 38px;

        width: 38px;
        height: 38px;
    }

}

/* =========================================================
   KALENDER VERSION 2.0
   GOOGLE-KALENDER-STIL – DARK MODE
   Diesen Block ganz unten in kalender.css einfügen
========================================================= */

/* =========================================================
   FARBEN UND GRUNDVARIABLEN
========================================================= */

.calendar-app {
    --gcal-background: #202124;
    --gcal-surface: #292a2d;
    --gcal-surface-light: #303134;
    --gcal-surface-hover: #35363a;
    --gcal-border: #3c4043;
    --gcal-border-light: #45494d;
    --gcal-text: #e8eaed;
    --gcal-text-secondary: #9aa0a6;
    --gcal-text-disabled: #6f7378;
    --gcal-blue: #8ab4f8;
    --gcal-blue-strong: #1a73e8;
    --gcal-event: #39a9df;
    --gcal-event-hover: #55b8e7;
    --gcal-danger: #f28b82;
    --gcal-success: #81c995;
    --gcal-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);

    width: 100%;
    max-width: none;
    min-height: 720px;

    margin: 0;
    padding: 0;

    color: var(--gcal-text);
    background: var(--gcal-background);

    border: 0;
    border-radius: 0;
    box-shadow: none;

    font-family:
        Inter,
        Roboto,
        Arial,
        Helvetica,
        sans-serif;
}

/*
 * Der Inhaltsbereich der Bürosoftware wird dunkel,
 * sobald sich der Kalender darin befindet.
 */

#inhalt:has(#calendar-app) {
    padding: 0;
    overflow: hidden;

    background: #202124;
    border-color: #3c4043;
}

/* =========================================================
   KALENDERKOPF
========================================================= */

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 18px;

    min-height: 72px;
    margin: 0;
    padding: 12px 20px;

    background: var(--gcal-surface-light);
    border-bottom: 1px solid var(--gcal-border);
}

.calendar-header-title {
    display: flex;
    align-items: center;

    flex: 0 0 auto;
}

.calendar-header-title h1 {
    margin: 0;

    color: var(--gcal-text);

    font-size: 1.35rem;
    font-weight: 500;
    letter-spacing: -0.01em;
}

/* =========================================================
   MONATSNAVIGATION
========================================================= */

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 0;
}

.calendar-navigation-button,
.calendar-today-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 44px;
    height: 44px;
    min-height: 44px;

    margin: 0;
    padding: 0;

    color: var(--gcal-text);
    background: transparent;

    border: 0;
    border-radius: 50%;
    box-shadow: none;

    font: inherit;
    font-size: 1.4rem;
    font-weight: 400;

    cursor: pointer;

    transition:
        background-color 160ms ease,
        color 160ms ease,
        transform 160ms ease;
}

.calendar-navigation-button:hover {
    color: var(--gcal-text);
    background: var(--gcal-surface-hover);

    box-shadow: none;
    transform: none;
}

.calendar-navigation-button:active {
    background: #44464a;
    transform: scale(0.94);
}

.calendar-today-button {
    width: auto;
    min-width: 76px;

    padding: 0 18px;

    border: 1px solid var(--gcal-border-light);
    border-radius: 22px;

    font-size: 0.92rem;
    font-weight: 600;
}

.calendar-today-button:hover {
    color: var(--gcal-text);
    background: var(--gcal-surface-hover);
    border-color: #5f6368;

    box-shadow: none;
    transform: none;
}

/* =========================================================
   AKTUELLER MONAT
========================================================= */

.calendar-month-header {
    display: flex;
    align-items: center;

    min-height: 58px;
    margin: 0;
    padding: 6px 20px;

    background: var(--gcal-surface-light);
    border-bottom: 1px solid var(--gcal-border);
}

.calendar-month-header h2,
.calendar-current-month {
    margin: 0;

    color: var(--gcal-text);

    font-size: 1.45rem;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-align: left;
}

/* =========================================================
   WOCHENTAGE
========================================================= */

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));

    margin: 0;

    background: var(--gcal-background);

    border: 0;
    border-bottom: 1px solid var(--gcal-border);
    border-radius: 0;

    overflow: visible;
}

.calendar-weekdays > div,
.calendar-weekday {
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 42px;

    padding: 0 4px;

    color: var(--gcal-text-secondary);
    background: var(--gcal-background);

    border: 0;
    border-right: 1px solid var(--gcal-border);

    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-align: center;
    text-transform: uppercase;
}

.calendar-weekdays > div:last-child {
    border-right: 0;
}

.calendar-weekdays > div:nth-child(6),
.calendar-weekdays > div:nth-child(7) {
    color: var(--gcal-text-secondary);
}

/* =========================================================
   KALENDERRASTER
========================================================= */

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(118px, 1fr));

    min-height: 708px;

    margin: 0;

    background: var(--gcal-background);

    border: 0;
}

/* =========================================================
   EINZELNER TAG
========================================================= */

.calendar-day {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 118px;

    margin: 0;
    padding: 6px 7px;

    overflow: hidden;

    color: var(--gcal-text);
    background: var(--gcal-background);

    border: 0;
    border-right: 1px solid var(--gcal-border);
    border-bottom: 1px solid var(--gcal-border);
    border-radius: 0;

    font: inherit;
    text-align: left;

    cursor: pointer;

    transition:
        background-color 140ms ease,
        box-shadow 140ms ease;
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day:hover {
    z-index: 1;

    background: #26272a;

    box-shadow: none;
}

.calendar-day:focus-visible {
    z-index: 2;

    outline: 2px solid var(--gcal-blue);
    outline-offset: -2px;
}

/* Alte Wochenendfarben deaktivieren */

.calendar-day:nth-child(7n + 6),
.calendar-day:nth-child(7n + 7),
.calendar-day-weekend {
    background: var(--gcal-background);
}

.calendar-day:nth-child(7n + 6):hover,
.calendar-day:nth-child(7n + 7):hover,
.calendar-day-weekend:hover {
    background: #26272a;
}

/* =========================================================
   TAGESKOPF
========================================================= */

.calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    min-height: 30px;
    margin-bottom: 3px;
}

.calendar-day-header{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;

    gap:2px;
}

.calendar-day-weekday{
    display:block;

    color:#9aa0a6;

    font-size:11px;
    font-weight:500;

    line-height:1;
}

.calendar-day-number{
    margin:0;
}

.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 28px;
    height: 28px;

    margin: 0;

    color: var(--gcal-text);
    background: transparent;

    border-radius: 50%;

    font-size: 0.88rem;
    font-weight: 400;
    line-height: 1;
}

/* =========================================================
   HEUTIGER TAG
========================================================= */

.calendar-day-today {
    background: var(--gcal-background);
}

.calendar-day-today:hover {
    background: #26272a;
}

.calendar-day-today:nth-child(7n + 6),
.calendar-day-today:nth-child(7n + 7) {
    background: var(--gcal-background);
}

.calendar-day-today .calendar-day-number {
    color: #202124;
    background: var(--gcal-blue);

    box-shadow: none;

    font-weight: 600;
}

/* =========================================================
   TAGE AUS ANDEREN MONATEN
========================================================= */

.calendar-day-outside,
.calendar-day-other-month,
.calendar-day-previous-month,
.calendar-day-next-month {
    color: var(--gcal-text-disabled);
    background: #1f2023;
}

.calendar-day-outside:hover,
.calendar-day-other-month:hover,
.calendar-day-previous-month:hover,
.calendar-day-next-month:hover {
    background: #242528;
}

.calendar-day-outside .calendar-day-number,
.calendar-day-other-month .calendar-day-number,
.calendar-day-previous-month .calendar-day-number,
.calendar-day-next-month .calendar-day-number {
    color: var(--gcal-text-disabled);
}

/* =========================================================
   AUSGEWÄHLTER TAG
========================================================= */

.calendar-day-selected {
    z-index: 2;

    background: rgba(138, 180, 248, 0.08);

    box-shadow:
        inset 0 0 0 2px
        rgba(138, 180, 248, 0.75);
}

.calendar-day-selected:hover {
    background: rgba(138, 180, 248, 0.12);

    box-shadow:
        inset 0 0 0 2px
        rgba(138, 180, 248, 0.85);
}

/* =========================================================
   TERMINBEREICH EINES TAGES
========================================================= */

.calendar-day-appointments {
    display: flex;
    flex-direction: column;
    gap: 3px;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    margin-top: 0;

    overflow: hidden;
}

/* =========================================================
   TERMINBALKEN
========================================================= */

.calendar-appointment {
    display: flex;
    align-items: center;
    gap: 5px;

    width: 100%;
    min-width: 0;
    min-height: 24px;
    height: 24px;

    margin: 0;
    padding: 2px 7px;

    overflow: hidden;

    color: #10212b;
    background: var(--gcal-event);

    border: 0;
    border-radius: 4px;
    box-shadow: none;

    font: inherit;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 20px;
    text-align: left;
    white-space: nowrap;

    cursor: pointer;

    transition:
        background-color 140ms ease,
        filter 140ms ease;
}

.calendar-appointment:hover {
    color: #07151d;
    background: var(--gcal-event-hover);

    box-shadow: none;
    filter: brightness(1.04);
    transform: none;
}

.calendar-appointment:active {
    transform: none;
    filter: brightness(0.94);
}

.calendar-appointment-time {
    flex: 0 0 auto;

    font-size: 0.7rem;
    font-weight: 700;
}

.calendar-appointment-title {
    display: block;

    min-width: 0;
    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Kundentermine */

.calendar-appointment-customer {
    color: #08202e;
    background: #39a9df;
}

.calendar-appointment-customer:hover {
    background: #55b8e7;
}

/* Private Termine */

.calendar-appointment-private {
    color: #172014;
    background: #81c995;
}

.calendar-appointment-private:hover {
    background: #98d7a8;
}

/* =========================================================
   MODAL-HINTERGRUND
========================================================= */

.calendar-modal {
    z-index: 5000;

    padding: 20px;
}

.calendar-modal-backdrop {
    background: rgba(0, 0, 0, 0.72);

    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

/* =========================================================
   TERMINFENSTER
========================================================= */

.calendar-modal-dialog {
    width: min(100%, 680px);
    max-height: calc(100dvh - 40px);

    padding: 0;
    overflow-y: auto;

    color: var(--gcal-text);
    background: var(--gcal-surface);

    border: 1px solid var(--gcal-border-light);
    border-radius: 18px;

    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55);
}

.calendar-modal-header {
    position: sticky;
    top: 0;
    z-index: 5;

    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;

    padding: 20px 22px;

    background: var(--gcal-surface-light);
    border-bottom: 1px solid var(--gcal-border);
}

.calendar-modal-heading h2 {
    margin: 0 0 4px;

    color: var(--gcal-text);

    font-size: 1.35rem;
    font-weight: 500;
}

.calendar-modal-heading p {
    margin: 0;

    color: var(--gcal-text-secondary);

    font-size: 0.88rem;
}

.calendar-modal-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 42px;
    height: 42px;
    min-height: 42px;

    margin: 0;
    padding: 0;

    color: var(--gcal-text-secondary);
    background: transparent;

    border: 0;
    border-radius: 50%;
    box-shadow: none;

    font-size: 1.7rem;
    font-weight: 300;

    cursor: pointer;
}

.calendar-modal-close:hover {
    color: var(--gcal-text);
    background: var(--gcal-surface-hover);

    box-shadow: none;
    transform: none;
}

/* =========================================================
   FORMULAR
========================================================= */

#calendar-appointment-form {
    padding: 22px;
}

.calendar-form-grid {
    gap: 18px;
}

.calendar-form-group label,
.calendar-form-label-row label,
.calendar-checkbox-label {
    color: var(--gcal-text);

    font-weight: 500;
}

.calendar-form-hint,
.calendar-description-counter {
    color: var(--gcal-text-secondary);
}

#calendar-appointment-form input:not([type="checkbox"]),
#calendar-appointment-form select,
#calendar-appointment-form textarea {
    color: var(--gcal-text);
    background: var(--gcal-surface-light);

    border: 1px solid var(--gcal-border-light);
    border-radius: 8px;

    box-shadow: none;
}

#calendar-appointment-form input::placeholder,
#calendar-appointment-form textarea::placeholder {
    color: #80868b;
}

#calendar-appointment-form input:focus,
#calendar-appointment-form select:focus,
#calendar-appointment-form textarea:focus {
    border-color: var(--gcal-blue);

    box-shadow:
        0 0 0 2px
        rgba(138, 180, 248, 0.18);

    outline: 0;
}

#calendar-appointment-form select {
    color-scheme: dark;
}

#calendar-appointment-form input[type="time"] {
    color-scheme: dark;
}

/* =========================================================
   ERINNERUNG
========================================================= */

.calendar-reminder-group {
    margin-bottom: 20px;
    padding: 14px 16px;

    background: var(--gcal-surface-light);

    border: 1px solid var(--gcal-border);
    border-radius: 10px;
}

.calendar-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;

    margin: 0;

    cursor: pointer;
}

.calendar-checkbox-label input {
    width: 18px;
    height: 18px;

    accent-color: var(--gcal-blue-strong);
}

/* =========================================================
   KUNDENSUCHE
========================================================= */

.calendar-customer-results {
    background: var(--gcal-surface-light);

    border: 1px solid var(--gcal-border-light);
    border-radius: 8px;

    box-shadow: var(--gcal-shadow);
}

.calendar-customer-result-item {
    color: var(--gcal-text);
    background: transparent;

    border-bottom-color: var(--gcal-border);
}

.calendar-customer-result-item:hover,
.calendar-customer-result-item:focus {
    background: var(--gcal-surface-hover);
}

.calendar-customer-clear {
    color: var(--gcal-text-secondary);
    background: transparent;

    box-shadow: none;
}

.calendar-customer-clear:hover {
    color: var(--gcal-text);
    background: var(--gcal-surface-hover);

    box-shadow: none;
}

/* =========================================================
   KUNDENINFORMATION
========================================================= */

.calendar-customer-info {
    color: var(--gcal-text);
    background: rgba(138, 180, 248, 0.08);

    border: 1px solid rgba(138, 180, 248, 0.28);
    border-radius: 10px;
}

.calendar-customer-info-header {
    border-bottom-color: rgba(138, 180, 248, 0.22);
}

.calendar-customer-info-header h3,
.calendar-customer-info-value {
    color: var(--gcal-text);
}

.calendar-customer-info-number {
    color: var(--gcal-blue);
}

.calendar-customer-info-label {
    color: var(--gcal-text-secondary);
}

/* =========================================================
   FORMULARMELDUNGEN
========================================================= */

.calendar-form-message-success {
    color: #b7e4c2;
    background: rgba(129, 201, 149, 0.14);

    border-color: rgba(129, 201, 149, 0.35);
}

.calendar-form-message-error {
    color: #f6b4ae;
    background: rgba(242, 139, 130, 0.14);

    border-color: rgba(242, 139, 130, 0.35);
}

.calendar-form-message-info {
    color: #aecbfa;
    background: rgba(138, 180, 248, 0.12);

    border-color: rgba(138, 180, 248, 0.3);
}

/* =========================================================
   FORMULARAKTIONEN
========================================================= */

.calendar-form-actions {
    margin-top: 24px;
    padding-top: 18px;

    border-top: 1px solid var(--gcal-border);
}

.calendar-save-button,
.calendar-cancel-button,
.calendar-delete-button {
    min-height: 42px;

    padding: 9px 18px;

    border-radius: 8px;
    box-shadow: none;

    font-size: 0.92rem;
    font-weight: 600;
}

.calendar-save-button {
    color: #202124;
    background: var(--gcal-blue);
}

.calendar-save-button:hover {
    color: #202124;
    background: #aecbfa;

    box-shadow: none;
    transform: none;
}

.calendar-cancel-button {
    color: var(--gcal-blue);
    background: transparent;

    border: 1px solid var(--gcal-border-light);
}

.calendar-cancel-button:hover {
    color: #aecbfa;
    background: var(--gcal-surface-hover);

    box-shadow: none;
    transform: none;
}

.calendar-delete-button {
    color: var(--gcal-danger);
    background: transparent;

    border: 1px solid rgba(242, 139, 130, 0.35);
}

.calendar-delete-button:hover {
    color: #202124;
    background: var(--gcal-danger);

    box-shadow: none;
    transform: none;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.calendar-modal-dialog,
.calendar-customer-results {
    scrollbar-width: thin;
    scrollbar-color: #5f6368 #292a2d;
}

.calendar-modal-dialog::-webkit-scrollbar,
.calendar-customer-results::-webkit-scrollbar {
    width: 10px;
}

.calendar-modal-dialog::-webkit-scrollbar-track,
.calendar-customer-results::-webkit-scrollbar-track {
    background: #292a2d;
}

.calendar-modal-dialog::-webkit-scrollbar-thumb,
.calendar-customer-results::-webkit-scrollbar-thumb {
    background: #5f6368;

    border: 2px solid #292a2d;
    border-radius: 10px;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    #inhalt:has(#calendar-app) {
        padding: 0;
    }

    .calendar-app {
        min-height: 100dvh;
    }

    .calendar-grid {
        grid-template-rows:
            repeat(
                6,
                minmax(105px, 1fr)
            );

        min-height: 630px;
    }

    .calendar-day {
        min-height: 105px;
        padding: 5px;
    }

    .calendar-appointment {
        min-height: 22px;
        height: 22px;

        padding: 1px 5px;

        font-size: 0.72rem;
        line-height: 20px;
    }

}

/* =========================================================
   SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    #wrapper {
        width: 100%;
        padding-bottom: 0;
    }

    #inhalt:has(#calendar-app) {
        width: 100%;
        min-height: 100dvh;

        padding: 0;

        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .calendar-app {
        min-height: 100dvh;

        border-radius: 0;
    }

    .calendar-header {
        min-height: 64px;

        gap: 8px;

        padding:
            max(10px, env(safe-area-inset-top))
            10px
            8px;
    }

    .calendar-header-title h1 {
        display: none;
    }

    .calendar-navigation {
        width: 100%;
    }

    .calendar-navigation-button {
        width: 44px;
        min-width: 44px;
        height: 44px;
    }

    .calendar-today-button {
        min-width: 70px;

        padding: 0 14px;
    }

    .calendar-month-header {
        min-height: 48px;

        padding: 4px 14px;
    }

    .calendar-month-header h2,
    .calendar-current-month {
        font-size: 1.22rem;
    }

    .calendar-weekdays > div,
    .calendar-weekday {
        height: 36px;

        padding: 0 1px;

        font-size: 0;
    }

    .calendar-weekdays > div::first-letter,
    .calendar-weekday::first-letter {
        font-size: 0.72rem;
    }

    .calendar-grid {
        grid-template-rows:
            repeat(
                6,
                minmax(92px, 1fr)
            );

        min-height:
            calc(
                100dvh -
                148px
            );
    }

    .calendar-day {
        min-height: 92px;

        padding: 3px 2px;
    }

    .calendar-day-header {
        min-height: 27px;
        margin-bottom: 2px;
    }

    .calendar-day-number {
        width: 25px;
        height: 25px;

        font-size: 0.78rem;
    }

    .calendar-day-appointments {
        gap: 2px;
    }

    .calendar-appointment {
        min-height: 20px;
        height: 20px;

        padding: 1px 4px;

        border-radius: 3px;

        font-size: 0.67rem;
        line-height: 18px;
    }

    .calendar-appointment-time {
        display: none;
    }

    .calendar-modal {
        align-items: flex-end;

        padding: 0;
    }

    .calendar-modal-dialog {
        width: 100%;
        max-height: 94dvh;

        border-right: 0;
        border-bottom: 0;
        border-left: 0;
        border-radius: 22px 22px 0 0;
    }

    .calendar-modal-header {
        padding:
            16px
            16px
            14px;
    }

    #calendar-appointment-form {
        padding:
            18px
            16px
            max(
                20px,
                env(safe-area-inset-bottom)
            );
    }

    .calendar-form-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .calendar-form-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 10px;
    }

    .calendar-form-actions-right {
        display: grid;
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        width: 100%;
        gap: 10px;
    }

    .calendar-delete-button {
        width: 100%;
    }

}

/* =========================================================
   SEHR KLEINE SMARTPHONES
========================================================= */

@media (max-width: 400px) {

    .calendar-header {
        padding-right: 6px;
        padding-left: 6px;
    }

    .calendar-navigation {
        gap: 3px;
    }

    .calendar-navigation-button {
        width: 40px;
        min-width: 40px;
        height: 40px;
        min-height: 40px;
    }

    .calendar-today-button {
        min-width: 62px;
        height: 40px;
        min-height: 40px;

        padding: 0 11px;

        font-size: 0.82rem;
    }

    .calendar-month-header {
        padding-right: 10px;
        padding-left: 10px;
    }

    .calendar-grid {
        grid-template-rows:
            repeat(
                6,
                minmax(82px, 1fr)
            );
    }

    .calendar-day {
        min-height: 82px;
    }

    .calendar-appointment {
        padding-right: 3px;
        padding-left: 3px;

        font-size: 0.62rem;
    }

}

/* =========================================================
   VERSION 2.0 – KORREKTUR TERMINFENSTER
========================================================= */

.calendar-modal {
    --gcal-background: #202124;
    --gcal-surface: #292a2d;
    --gcal-surface-light: #303134;
    --gcal-surface-hover: #35363a;
    --gcal-border: #3c4043;
    --gcal-border-light: #5f6368;
    --gcal-text: #e8eaed;
    --gcal-text-secondary: #bdc1c6;
    --gcal-blue: #8ab4f8;
    --gcal-blue-strong: #1a73e8;
    --gcal-danger: #f28b82;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.calendar-modal.calendar-modal-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.calendar-modal-backdrop {
    opacity: 1;
    background: rgba(0, 0, 0, 0.68);
}

.calendar-modal-dialog {
    position: relative;
    z-index: 2;

    opacity: 1;

    color: #e8eaed;
    background: #292a2d;

    border: 1px solid #5f6368;
}

.calendar-modal-header {
    color: #e8eaed;
    background: #303134;
}

.calendar-modal-heading h2 {
    color: #ffffff;
}

.calendar-modal-heading p {
    color: #bdc1c6;
}

#calendar-appointment-form {
    color: #e8eaed;
    background: #292a2d;
}

#calendar-appointment-form label,
#calendar-appointment-form .calendar-checkbox-label {
    color: #e8eaed;
}

#calendar-appointment-form input:not([type="checkbox"]),
#calendar-appointment-form select,
#calendar-appointment-form textarea {
    color: #ffffff;
    background: #202124;

    border-color: #5f6368;
}

#calendar-appointment-form input::placeholder,
#calendar-appointment-form textarea::placeholder {
    color: #9aa0a6;
    opacity: 1;
}

.calendar-form-hint,
.calendar-description-counter {
    color: #bdc1c6;
}

/* =========================================================
   VERSION 2.1 – GOOGLE-MONATSANSICHT
========================================================= */

/* =========================================================
   KALENDERKOPF KOMPAKTER
========================================================= */

.calendar-header {
    position: relative;
    z-index: 10;

    min-height: 64px;

    padding: 10px 16px;
}

.calendar-header-title {
    margin-right: 8px;
}

.calendar-header-title h1 {
    font-size: 1.25rem;
}

.calendar-navigation {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* =========================================================
   MONATSNAME
========================================================= */

.calendar-month-header {
    min-height: 52px;

    padding: 6px 16px;
}

.calendar-month-header h2,
.calendar-current-month {
    font-size: 1.35rem;
    font-weight: 400;
}

/* =========================================================
   WOCHENTAGSZEILE
========================================================= */

.calendar-weekdays {
    position: relative;
    z-index: 2;

    height: 38px;

    background: #202124;
}

.calendar-weekday,
.calendar-weekdays > div {
    height: 38px;

    padding: 0;

    color: #9aa0a6;
    background: #202124;

    border-right: 1px solid #3c4043;

    font-size: 0;
    font-weight: 500;
    text-transform: none;
}

/*
 * Nur den ersten Buchstaben des Wochentags anzeigen.
 *
 * Montag     → M
 * Dienstag   → D
 * Mittwoch   → M
 * Donnerstag → D
 * Freitag    → F
 * Samstag    → S
 * Sonntag    → S
 */

.calendar-weekday::first-letter,
.calendar-weekdays > div::first-letter {
    font-size: 0.75rem;
}

/* =========================================================
   MONATSGITTER
========================================================= */

.calendar-grid {
    display: grid;
    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    grid-template-rows:
        repeat(
            6,
            minmax(118px, 1fr)
        );

    width: 100%;
    min-height: 708px;

    background: #202124;

    border-top: 0;
    border-left: 0;
}

/* =========================================================
   EINZELNER TAG
========================================================= */

.calendar-day {
    position: relative;

    display: flex;
    flex-direction: column;

    min-width: 0;
    min-height: 118px;

    padding: 4px 4px 5px;

    overflow: hidden;

    color: #e8eaed;
    background: #202124;

    border-right: 1px solid #3c4043;
    border-bottom: 1px solid #3c4043;

    border-radius: 0;

    box-shadow: none;
}

.calendar-day:nth-child(7n) {
    border-right: 0;
}

.calendar-day:hover {
    background: #252629;

    box-shadow: none;
}

/* =========================================================
   TAGESKOPF UND TAGESNUMMER
========================================================= */

.calendar-day-header {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 100%;
    min-height: 30px;

    margin: 0 0 2px;
}

.calendar-day-weekday {
    display: none;
}

.calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 26px;
    height: 26px;

    margin: 0;

    color: #e8eaed;
    background: transparent;

    border-radius: 50%;

    font-size: 0.82rem;
    font-weight: 400;
    line-height: 1;
}

/* =========================================================
   HEUTIGER TAG
========================================================= */

.calendar-day-today,
.calendar-day-today:nth-child(7n + 6),
.calendar-day-today:nth-child(7n + 7) {
    background: #202124;
}

.calendar-day-today:hover {
    background: #252629;
}

.calendar-day-today .calendar-day-number {
    color: #202124;
    background: #8ab4f8;

    font-weight: 600;

    box-shadow: none;
}

/* =========================================================
   TAGE AUSSERHALB DES AKTUELLEN MONATS
========================================================= */

.calendar-day-outside,
.calendar-day-previous-month,
.calendar-day-next-month,
.calendar-day-other-month {
    background: #1d1e20;
}

.calendar-day-outside:hover,
.calendar-day-previous-month:hover,
.calendar-day-next-month:hover,
.calendar-day-other-month:hover {
    background: #222326;
}

.calendar-day-outside .calendar-day-number,
.calendar-day-previous-month .calendar-day-number,
.calendar-day-next-month .calendar-day-number,
.calendar-day-other-month .calendar-day-number {
    color: #666a70;
}

/*
 * Termine aus dem vorherigen oder nächsten Monat
 * werden etwas zurückhaltender dargestellt.
 */

.calendar-day-outside .calendar-appointment,
.calendar-day-previous-month .calendar-appointment,
.calendar-day-next-month .calendar-appointment {
    opacity: 0.48;
}

/* =========================================================
   TERMINCONTAINER
========================================================= */

.calendar-day-appointments {
    display: flex;
    flex-direction: column;
    gap: 2px;

    flex: 1 1 auto;

    width: 100%;
    min-width: 0;
    min-height: 0;

    margin: 0;

    overflow: hidden;
}

/* =========================================================
   GOOGLE-ÄHNLICHE TERMINBALKEN
========================================================= */

.calendar-appointment {
    position: relative;

    display: flex;
    align-items: center;
    gap: 4px;

    flex: 0 0 auto;

    width: 100%;
    min-width: 0;
    min-height: 20px;
    height: 20px;

    margin: 0;
    padding: 1px 5px;

    overflow: hidden;

    border: 0;
    border-radius: 3px;

    box-shadow: none;

    font-size: 0.69rem;
    font-weight: 600;
    line-height: 18px;
    text-align: left;
    white-space: nowrap;

    transform: none;
}

.calendar-appointment:hover {
    box-shadow: none;

    filter: brightness(1.08);
    transform: none;
}

.calendar-appointment::after {
    display: none;
}

/* Der vorhandene Punkt am Ende wird ausgeblendet */

.calendar-appointment-type {
    display: none;
}

/* Uhrzeit */

.calendar-appointment-time {
    flex: 0 0 auto;

    font-size: 0.64rem;
    font-weight: 700;
}

/* Termintext */

.calendar-appointment-title {
    display: block;

    min-width: 0;

    overflow: hidden;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   KUNDENTERMINE
========================================================= */

.calendar-appointment-customer {
    color: #10212b;
    background: #39a9df;
}

.calendar-appointment-customer:hover {
    color: #07151d;
    background: #55b8e7;
}

/* =========================================================
   PRIVATE TERMINE
========================================================= */

.calendar-appointment-private {
    color: #162017;
    background: #81c995;
}

.calendar-appointment-private:hover {
    color: #101811;
    background: #98d7a8;
}

/* =========================================================
   MEHRTÄGIGE TERMINE
========================================================= */

.calendar-appointment-multi-day {
    border-radius: 0;
}

.calendar-appointment-multi-day-start {
    border-radius: 4px 0 0 4px;
}

.calendar-appointment-multi-day-middle {
    border-radius: 0;
}

.calendar-appointment-multi-day-end {
    border-radius: 0 4px 4px 0;
}

/* =========================================================
   WEITERE TERMINE
========================================================= */

.calendar-more-appointments {
    display: block;

    flex: 0 0 auto;

    min-width: 0;
    height: 18px;

    padding: 0 4px;

    overflow: hidden;

    color: #bdc1c6;

    font-size: 0.65rem;
    font-weight: 600;
    line-height: 18px;

    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================================
   AUSGEWÄHLTER TAG
========================================================= */

.calendar-day-selected {
    background:
        rgba(
            138,
            180,
            248,
            0.08
        );

    box-shadow:
        inset 0 0 0 2px
        rgba(
            138,
            180,
            248,
            0.7
        );
}

/* =========================================================
   DESKTOP MIT GROSSER BREITE
========================================================= */

@media (min-width: 1200px) {

    .calendar-grid {
        grid-template-rows:
            repeat(
                6,
                minmax(130px, 1fr)
            );

        min-height: 780px;
    }

    .calendar-day {
        min-height: 130px;
    }

    .calendar-appointment {
        min-height: 22px;
        height: 22px;

        padding-right: 6px;
        padding-left: 6px;

        font-size: 0.74rem;
        line-height: 20px;
    }

    .calendar-appointment-time {
        font-size: 0.68rem;
    }

}

/* =========================================================
   TABLET
========================================================= */

@media (
    min-width: 651px
) and (
    max-width: 1000px
) {

    .calendar-grid {
        grid-template-rows:
            repeat(
                6,
                minmax(102px, 1fr)
            );

        min-height: 612px;
    }

    .calendar-day {
        min-height: 102px;

        padding: 3px;
    }

    .calendar-appointment {
        min-height: 19px;
        height: 19px;

        padding: 0 4px;

        font-size: 0.65rem;
        line-height: 19px;
    }

    .calendar-appointment-time {
        display: none;
    }

}

/* =========================================================
   IPHONE UND SMARTPHONE
========================================================= */

@media (max-width: 650px) {

    .calendar-header {
        min-height: 58px;

        padding:
            max(
                8px,
                env(safe-area-inset-top)
            )
            8px
            6px;
    }

    .calendar-navigation {
        justify-content: flex-start;

        width: 100%;
    }

    .calendar-month-header {
        min-height: 46px;

        padding: 4px 12px;
    }

    .calendar-month-header h2,
    .calendar-current-month {
        font-size: 1.18rem;
    }

    .calendar-weekdays {
        height: 34px;
    }

    .calendar-weekday,
    .calendar-weekdays > div {
        height: 34px;
    }

    .calendar-weekday::first-letter,
    .calendar-weekdays > div::first-letter {
        font-size: 0.7rem;
    }

    .calendar-grid {
        grid-template-columns:
            repeat(
                7,
                minmax(0, 1fr)
            );

        grid-template-rows:
            repeat(
                6,
                minmax(76px, 1fr)
            );

        min-height:
            calc(
                100dvh -
                138px
            );
    }

    .calendar-day {
        min-height: 76px;

        padding: 2px 1px 3px;
    }

    .calendar-day-header {
        min-height: 25px;

        margin-bottom: 1px;
    }

    .calendar-day-number {
        width: 23px;
        height: 23px;

        font-size: 0.74rem;
    }

    .calendar-day-appointments {
        gap: 1px;
    }

    .calendar-appointment {
        min-height: 16px;
        height: 16px;

        padding: 0 2px;

        border-radius: 2px;

        font-size: 0.55rem;
        font-weight: 600;
        line-height: 16px;
    }

    .calendar-appointment-time {
        display: none;
    }

    .calendar-more-appointments {
        height: 14px;

        padding: 0 2px;

        font-size: 0.53rem;
        line-height: 14px;
    }

}

/* =========================================================
   KLEINE IPHONES
========================================================= */

@media (max-width: 400px) {

    .calendar-grid {
        grid-template-rows:
            repeat(
                6,
                minmax(70px, 1fr)
            );
    }

    .calendar-day {
        min-height: 70px;
    }

    .calendar-day-number {
        width: 22px;
        height: 22px;

        font-size: 0.7rem;
    }

    .calendar-appointment {
        min-height: 15px;
        height: 15px;

        font-size: 0.5rem;
        line-height: 15px;
    }

    .calendar-more-appointments {
        font-size: 0.49rem;
    }

}

/* =========================================================
   VERSION 2.1 – KORREKTUR WOCHENTAGE
========================================================= */

.calendar-weekdays {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;

    width: 100%;
    height: 39px;

    background: #202124;

    border-bottom: 1px solid #3c4043;
}

.calendar-weekdays .calendar-weekday {
    position: relative;

    display: flex !important;
    align-items: center;
    justify-content: center;

    min-width: 0;
    height: 38px;

    padding: 0;

    color: transparent !important;
    background: #202124;

    border-right: 1px solid #3c4043;

    font-size: 0 !important;
    line-height: 1;
}

/* Letzte Spalte ohne rechte Linie */

.calendar-weekdays .calendar-weekday:last-child {
    border-right: 0;
}

/* Eigene sichtbare Kurzbezeichnungen */

.calendar-weekdays .calendar-weekday::before {
    display: block;

    color: #bdc1c6;

    font-size: 12px;
    font-weight: 600;
    line-height: 1;

    text-align: center;
}

/* Montag */

.calendar-weekdays .calendar-weekday:nth-child(1)::before {
    content: "MO";
}

/* Dienstag */

.calendar-weekdays .calendar-weekday:nth-child(2)::before {
    content: "DI";
}

/* Mittwoch */

.calendar-weekdays .calendar-weekday:nth-child(3)::before {
    content: "MI";
}

/* Donnerstag */

.calendar-weekdays .calendar-weekday:nth-child(4)::before {
    content: "DO";
}

/* Freitag */

.calendar-weekdays .calendar-weekday:nth-child(5)::before {
    content: "FR";
}

/* Samstag */

.calendar-weekdays .calendar-weekday:nth-child(6)::before {
    content: "SA";
}

/* Sonntag */

.calendar-weekdays .calendar-weekday:nth-child(7)::before {
    content: "SO";
}

/* Alte fehlerhafte first-letter-Regel neutralisieren */

.calendar-weekdays .calendar-weekday::first-letter,
.calendar-weekdays > div::first-letter {
    font-size: inherit;
}

/* Smartphone etwas kompakter */

@media (max-width: 650px) {

    .calendar-weekdays {
        height: 34px;
    }

    .calendar-weekdays .calendar-weekday {
        height: 34px;
    }

    .calendar-weekdays .calendar-weekday::before {
        font-size: 10px;
    }

}

.calendar-customer-result{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
	margin: 10px 0px;
    width:100%;
    padding:12px 15px;
    text-align:left;
}

.calendar-customer-result-name{
    font-size:17px;
    font-weight:700;
    margin-bottom:4px;
}

.calendar-customer-result-street{
    font-size:14px;
    color:#d0d0d0;
}

.calendar-customer-result-city{
    font-size:14px;
    color:#bcbcbc;
}

/* =========================================================
   VERSION 2.2–2.4 – TAGESANSICHT, WOCHENANSICHT, DRAG & DROP
   Konsolidierter Override-Block
========================================================= */
.calendar-view-switch{display:inline-flex;align-items:center;margin-left:auto;padding:3px;background:#202124;border:1px solid #5f6368;border-radius:22px}
.calendar-view-button{min-width:64px;min-height:36px;margin:0;padding:6px 12px;color:#bdc1c6;background:transparent;border:0;border-radius:18px;box-shadow:none;font-size:.82rem;font-weight:600}
.calendar-view-button:hover{color:#e8eaed;background:#3c4043;box-shadow:none;transform:none}
.calendar-view-button-active,.calendar-view-button-active:hover{color:#202124;background:#8ab4f8}
.calendar-day-view[hidden],.calendar-week-view[hidden],.calendar-weekdays[hidden],.calendar-grid[hidden]{display:none!important}
.calendar-day-view,.calendar-week-view{width:100%;min-height:700px;color:#e8eaed;background:#202124}
.calendar-day-view{display:flex;flex-direction:column}
.calendar-day-view-header{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:88px;padding:12px 20px;background:#292a2d;border-bottom:1px solid #3c4043}
.calendar-day-view-date{display:grid;grid-template-columns:auto auto;align-items:center;column-gap:12px}
.calendar-day-view-weekday{grid-column:1/-1;color:#9aa0a6;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.calendar-day-view-number{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;font-size:1.8rem;font-weight:400}
.calendar-day-view-today .calendar-day-view-number{color:#202124;background:#8ab4f8}
.calendar-day-view-month{font-size:1.25rem;font-weight:500}
.calendar-day-view-add{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;min-height:48px;padding:0;color:#202124;background:#8ab4f8;border:0;border-radius:50%;box-shadow:0 6px 18px rgba(0,0,0,.35);font-size:1.8rem;font-weight:300}
.calendar-day-view-add:hover{background:#aecbfa;transform:none}
.calendar-day-view-all-day{display:grid;grid-template-columns:76px minmax(0,1fr);min-height:52px;border-bottom:1px solid #3c4043}
.calendar-day-view-all-day[hidden]{display:none!important}
.calendar-day-view-all-day-label{display:flex;align-items:center;justify-content:flex-end;padding:8px 10px 8px 4px;color:#9aa0a6;border-right:1px solid #3c4043;font-size:.67rem}
.calendar-day-view-all-day-items{display:flex;flex-wrap:wrap;align-items:center;gap:5px;padding:7px 10px}
.calendar-day-view-scroll,.calendar-week-scroll{height:calc(100dvh - 240px);min-height:520px;max-height:760px;overflow-x:hidden;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#5f6368 #202124}
.calendar-day-view-timeline,.calendar-week-timeline{position:relative;min-height:1536px;background:#202124}
.calendar-day-view-hour{display:grid;grid-template-columns:76px minmax(0,1fr);height:64px}
.calendar-day-view-hour-label{padding:0 10px 0 4px;color:#9aa0a6;border-right:1px solid #3c4043;font-size:.68rem;text-align:right;transform:translateY(-7px)}
.calendar-day-view-slot{height:64px;border-top:1px solid #3c4043;background:transparent;cursor:pointer}
.calendar-day-view-slot:hover,.calendar-week-slot:hover{background:rgba(138,180,248,.06)}
.calendar-day-view-appointments-layer{position:absolute;inset:0 8px 0 76px;pointer-events:none}
.calendar-timeline-appointment{position:absolute;left:5px;right:5px;z-index:5;display:flex;flex-direction:column;align-items:flex-start;min-height:28px;margin:0;padding:5px 8px;overflow:hidden;border:0;border-left:4px solid rgba(255,255,255,.45);border-radius:5px;box-shadow:0 3px 10px rgba(0,0,0,.28);text-align:left;cursor:pointer;pointer-events:auto}
.calendar-timeline-appointment strong,.calendar-timeline-appointment span{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.calendar-timeline-appointment strong{font-size:.8rem}.calendar-timeline-appointment span{font-size:.68rem}
.calendar-timeline-customer{color:#08202e;background:#39a9df}.calendar-timeline-private{color:#142015;background:#81c995}
.calendar-current-time-line{position:absolute;z-index:20;height:2px;background:#f28b82;pointer-events:none}
.calendar-current-time-line:before{position:absolute;top:50%;left:0;width:10px;height:10px;background:#f28b82;border-radius:50%;content:"";transform:translate(-50%,-50%)}
.calendar-week-header{display:grid;grid-template-columns:56px repeat(7,minmax(0,1fr));position:sticky;top:0;z-index:10;background:#292a2d;border-bottom:1px solid #3c4043}
.calendar-week-time-spacer{border-right:1px solid #3c4043}
.calendar-week-day-header{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:64px;padding:5px;color:#bdc1c6;background:#292a2d;border:0;border-right:1px solid #3c4043;border-radius:0;box-shadow:none}
.calendar-week-day-header span{font-size:.7rem}.calendar-week-day-header strong{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;font-size:1rem}
.calendar-week-day-today strong{color:#202124;background:#8ab4f8}
.calendar-week-events-layer{position:absolute;inset:0 0 0 56px;display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.calendar-week-day-column{position:relative;min-width:0;border-right:1px solid #3c4043}
.calendar-week-slot{height:64px;border-top:1px solid #3c4043}
.calendar-week-hour-label{position:absolute;left:0;width:52px;color:#9aa0a6;font-size:.65rem;text-align:right}
.calendar-week-hour-line{position:absolute;left:56px;right:0;height:1px;background:#3c4043}
.calendar-week-all-day-appointment{position:absolute;left:3px;right:3px;z-index:6}
.calendar-more-appointments{display:block;height:18px;padding:0 4px;color:#bdc1c6;font-size:.65rem;font-weight:600;line-height:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.calendar-appointment[draggable="true"]{cursor:grab}.calendar-appointment[draggable="true"]:active,.calendar-timeline-appointment[draggable="true"]:active{cursor:grabbing}
.calendar-dragging{opacity:.4!important}.calendar-drop-active{background:rgba(138,180,248,.18)!important;outline:2px dashed #8ab4f8;outline-offset:-2px}.calendar-drag-saving{cursor:wait}.calendar-drag-saving *{pointer-events:none}
@media(max-width:900px){.calendar-view-button{min-width:56px;padding-inline:9px}.calendar-day-view-scroll,.calendar-week-scroll{max-height:none}}
@media(max-width:650px){.calendar-header{flex-wrap:wrap}.calendar-view-switch{order:3;width:100%;margin:3px 0 0}.calendar-view-button{flex:1 1 33.333%;min-width:0}.calendar-day-view-header{min-height:76px;padding:9px 12px}.calendar-day-view-number{width:40px;height:40px;font-size:1.55rem}.calendar-day-view-month{font-size:1.05rem}.calendar-day-view-all-day{grid-template-columns:54px minmax(0,1fr)}.calendar-day-view-scroll,.calendar-week-scroll{height:calc(100dvh - 230px);min-height:450px}.calendar-day-view-hour{grid-template-columns:54px minmax(0,1fr)}.calendar-day-view-hour-label{padding-right:5px;font-size:.58rem}.calendar-day-view-appointments-layer{left:54px}.calendar-week-header{grid-template-columns:42px repeat(7,minmax(0,1fr))}.calendar-week-events-layer{left:42px}.calendar-week-hour-label{width:38px;font-size:.55rem}.calendar-week-hour-line{left:42px}.calendar-week-day-header{min-height:56px;padding:2px}.calendar-week-day-header span{font-size:.55rem}.calendar-week-day-header strong{width:25px;height:25px;font-size:.75rem}.calendar-timeline-appointment{left:2px;right:2px;padding:3px 4px}.calendar-timeline-appointment strong{font-size:.62rem}.calendar-timeline-appointment span{font-size:.54rem}}