body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #ffffff;
    color: #222;
}

.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px 16px;
    background: #ffffff;
    border-bottom: 2px solid #ccc;
}

.app-header h1 {
    margin: 0;
    font-size: 22px;
}

.app-header p {
    margin: 3px 0 0;
    color: #666;
    font-size: 14px;
}

.app-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.app-nav a,
.small-button,
.choice-clear,
.modal-close,
button {
    padding: 7px 12px;
    border: 1px solid #bbb;
    border-radius: 5px;
    background: #f5fbef;
    color: #222;
    text-decoration: none;
    cursor: pointer;
    font-size: 14px;
}

.app-nav a.active,
.small-button {
    background: #007bff;
    color: #fff;
    border-color: #007bff;
}

.page-layout {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
}

.calendar-area {
    flex: 0 1 75%;
    max-width: 65%;
    min-width: 0;
}

.table-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 8px;
}

.table-toolbar h2 {
    margin: 0;
    font-size: 18px;
}

.saison-form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.saison-form label {
    font-size: 13px;
    color: #555;
    font-weight: bold;
}

.saison-form select {
    min-height: 32px;
    padding: 4px 28px 4px 8px;
    border: 1px solid #bbb;
    border-radius: 5px;
    background: #f5fbef;
    font-size: 14px;
}

.saison-info {
    display: inline-block;
    margin-top: 6px;
    padding: 4px 8px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #555;
    font-size: 12px;
}

.table-scroll {
    width: 100%;
    max-width: 100%;
    overflow: auto;
    max-height: calc(100vh - 125px);
}

.calendar-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    border: 2px solid #000;
    background: #fff;
}

/* Kopfzeile immer gelb */
.calendar-table thead th {
    background-color: #fff3a6;
    position: sticky;
    top: 0;
    z-index: 5;
}

.calendar-table thead {
    border-bottom: 2px solid #000;
}

.calendar-table th,
.calendar-table td {
    border: 1px solid #ccc;
    border-right: 2px solid #000;
    padding: 4px;
    text-align: center;
    height: 28px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Spaltenbreiten Veranstaltung */
body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(1),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(1) {
    width: 21%;
}

body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(2),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(2) {
    width: 9%;
}

body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(3),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(3),
body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(4),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(4) {
    width: 12%;
}

body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(5),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(5),
body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(6),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(6) {
    width: 12%;
}

body[data-plan-typ="jubilaeum"] .calendar-table th:nth-child(7),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(7) {
    width: 22%;
}


/* Spaltenbreiten Saison */
body[data-plan-typ="saison"] .calendar-table th:nth-child(1),
body[data-plan-typ="saison"] .calendar-table td:nth-child(1) {
    width: 18%;
}

body[data-plan-typ="saison"] .calendar-table th:nth-child(2),
body[data-plan-typ="saison"] .calendar-table td:nth-child(2) {
    width: 8%;
}

body[data-plan-typ="saison"] .calendar-table th:nth-child(3),
body[data-plan-typ="saison"] .calendar-table td:nth-child(3),
body[data-plan-typ="saison"] .calendar-table th:nth-child(4),
body[data-plan-typ="saison"] .calendar-table td:nth-child(4) {
    width: 12%;
}

body[data-plan-typ="saison"] .calendar-table th:nth-child(5),
body[data-plan-typ="saison"] .calendar-table td:nth-child(5) {
    width: 50%;
}

.calendar-table th:first-child,
.calendar-table td:first-child {
    border-right: 2px solid #000;
}

.calendar-table th:last-child,
.calendar-table td:last-child {
    border-right: 1px solid #ccc;
}

.calendar-table th.date-column,
.calendar-table td.date-cell {
    width: auto;
    text-align: left;
}

.date-cell {
    font-weight: normal;
    background: #ffffff;
}

.date-cell span {
    color: #666;
    font-size: 12px;
}

.time-cell {
    width: auto;
    font-weight: bold;
    background: #ffffff;
}

.note-cell {
    width: auto;
    text-align: left !important;
    color: #555;
    font-size: 12px;
}

.assignment-cell {
    width: auto;
    cursor: pointer;
    background: #fff;
    user-select: none;
}

.name-cell {
    cursor: pointer;
}

.bar-cell,
.note-edit-cell {
    cursor: text;
    outline: none;
}

.bar-cell:focus,
.note-edit-cell:focus {
    background: #fff9c4 !important;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.assignment-cell.empty,
.note-edit-cell.empty {
    color: #999;
    background: #f8f8f8;
    font-weight: normal;
}

.assignment-cell.filled,
.note-edit-cell.filled {
    color: #111;
    font-weight: bold;
}

.assignment-cell.drag-over {
    background: #fff9c4 !important;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

/*
|--------------------------------------------------------------------------
| Datum/Zeit je Wochentag einfärben
|--------------------------------------------------------------------------
| Gilt NUR für Veranstaltung.
|--------------------------------------------------------------------------
*/

body[data-plan-typ="jubilaeum"] .day-friday td:nth-child(1),
body[data-plan-typ="jubilaeum"] .day-friday td:nth-child(2) {
    background-color: #b7e1a1 !important;
}

body[data-plan-typ="jubilaeum"] .day-saturday td:nth-child(1),
body[data-plan-typ="jubilaeum"] .day-saturday td:nth-child(2) {
    background-color: #9fc9f3 !important;
}

body[data-plan-typ="jubilaeum"] .day-sunday td:nth-child(1),
body[data-plan-typ="jubilaeum"] .day-sunday td:nth-child(2) {
    background-color: #e6a8d7 !important;
}

/* Saison: Datum und Zeit bleiben weiß */
body[data-plan-typ="saison"] .calendar-table td:nth-child(1),
body[data-plan-typ="saison"] .calendar-table td:nth-child(2) {
    background-color: #ffffff;
}

/*
|--------------------------------------------------------------------------
| Spaltenfarben Veranstaltung
|--------------------------------------------------------------------------
*/

body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(3),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(4) {
    background-color: #dcedc8;
}

body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(5),
body[data-plan-typ="jubilaeum"] .calendar-table td:nth-child(6) {
    background-color: #ffe0b2;
}

/*
|--------------------------------------------------------------------------
| Spaltenfarben Saison
|--------------------------------------------------------------------------
*/

body[data-plan-typ="saison"] .calendar-table td:nth-child(3) {
    background-color: #dcedc8;
}

body[data-plan-typ="saison"] .calendar-table td:nth-child(4) {
    background-color: #e0efff;
}

/*
|--------------------------------------------------------------------------
| Nächster Termin
|--------------------------------------------------------------------------
| Überschreibt alle bestehenden Zeilen- und Spaltenfarben.
|--------------------------------------------------------------------------
*/

.calendar-table tbody tr.next-appointment td {
    background-color: #ffb74d !important;
    color: #111 !important;
    font-weight: bold;
}

.calendar-table tbody tr.next-appointment td:first-child {
    border-left: 4px solid #d35400;
}

.calendar-table tbody tr.next-appointment td:last-child {
    border-right: 4px solid #d35400;
}

/* Hover soll trotz Spaltenfarben sichtbar bleiben, aber nicht beim nächsten Termin */
.calendar-table tbody tr:hover td {
    background-color: #fff9c4 !important;
}

.calendar-table tbody tr.next-appointment:hover td {
    background-color: #ffb74d !important;
}

/* Beim Bearbeiten immer gelb */
.bar-cell:focus,
.note-edit-cell:focus {
    background-color: #fff9c4 !important;
}

/* Drag & Drop immer deutlich sichtbar */
.assignment-cell.drag-over {
    background-color: #fff3a6 !important;
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.empty-state {
    border: 1px dashed #bbb;
    background: #fafafa;
    padding: 18px;
    border-radius: 6px;
}

.sidebar {
    background-color: #ffffff;
    padding: 14px;
    width: 260px;
    min-width: 230px;
    border: 1px solid #ccc;
    border-radius: 6px;
    max-height: calc(100vh - 100px);
    overflow: auto;
}

.sidebar h3 {
    margin: 0 0 8px;
}

.sidebar-stats {
    margin-bottom: 10px;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 13px;
    line-height: 1.45;
}

.stat-warning {
    color: #9a5a00;
    font-weight: bold;
}

.hint {
    margin: 0 0 10px;
    color: #666;
    font-size: 13px;
}

.mobile-hint {
    display: none;
}

.participant-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.participant {
    cursor: grab;
    border: 1px solid #000;
    background: #f5fbef;
    border-radius: 5px;
    padding: 7px 9px;
    font-size: 14px;
}

.participant:active {
    cursor: grabbing;
}

.duty-display {
    font-weight: bold;
}

.participant.target-ok,
.choice-button.target-ok {
    background: #e8f5e9;
    border-color: #81c784;
}

.participant.target-extra,
.choice-button.target-extra {
    background: #fff8e1;
    border-color: #ffca28;
}

.participant.over-target,
.choice-button.over-target {
    background: #ffecec;
    border-color: #cc9999;
    color: #8b0000;
}

.savemessage {
    width: 220px;
    color: white;
    text-align: center;
    padding: 10px;
    border-radius: 5px 0 0 0;
    font-size: 14px;
    position: fixed;
    bottom: -50px;
    right: 0;
    transition: all .35s;
    background-color: #00aa00;
    z-index: 1000;
}

.savemessage.error {
    background-color: #cc0000;
}

.savemessage.show {
    bottom: 0;
}

.choice-modal[hidden] {
    display: none !important;
}

.choice-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .35);
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.choice-dialog {
    width: min(420px, 100%);
    max-height: 80vh;
    overflow: auto;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #000;
    padding: 12px;
}

.choice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.choice-header h3 {
    margin: 0;
}

.modal-close {
    width: 38px;
    height: 38px;
    font-size: 22px;
    padding: 0;
}

.choice-list {
    display: grid;
    gap: 6px;
}

.choice-button {
    width: 100%;
    text-align: left;
    justify-content: flex-start;
    background: #f5fbef;
    border: 1px solid #aaa;
    min-height: 42px;
}

.choice-clear {
    width: 100%;
    margin-top: 10px;
    background: #ffecec;
    border-color: #cc9999;
    color: #8b0000;
}

.login-body {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 18px;
    background: #f5f5f5;
}

.login-card,
.admin-card {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 18px;
}

.login-card {
    width: min(420px, 100%);
}

.login-form,
.admin-form {
    display: grid;
    gap: 10px;
}

.login-form input,
.admin-form input,
.admin-form select,
.admin-form textarea {
    width: 100%;
    min-height: 38px;
    padding: 8px;
    border: 1px solid #bbb;
    border-radius: 5px;
    box-sizing: border-box;
}

.alert {
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.alert-success {
    background: #e6f7e6;
    border: 1px solid #93d493;
}

.alert-error {
    background: #ffecec;
    border: 1px solid #e09a9a;
}

.admin-layout {
    max-width: 1100px;
    margin: auto;
    padding: 16px;
    display: grid;
    gap: 14px;
}

.admin-form {
    grid-template-columns: repeat(4, 1fr);
    align-items: end;
}

.admin-form.simple {
    grid-template-columns: 1fr auto;
}

.admin-form .wide {
    grid-column: span 2;
}

.admin-list {
    display: grid;
    gap: 8px;
}

.admin-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border: 1px solid #ccc;
    padding: 8px;
    border-radius: 6px;
}

.row-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

@media (max-width: 900px) {
    .app-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-layout {
        flex-direction: column;
    }

    .calendar-area {
        width: 100%;
        max-width: 100%;
        flex: 1 1 auto;
    }

    .sidebar {
        display: none;
    }

    .desktop-hint {
        display: none;
    }

    .mobile-hint {
        display: block;
    }

    .table-scroll {
        max-height: none;
    }

    .calendar-table {
        min-width: 720px;
    }
}

@media (max-width: 650px) {
    .app-nav {
        width: 100%;
    }

    .app-nav a {
        flex: 1 1 45%;
        text-align: center;
    }

    .calendar-table th,
    .calendar-table td {
        font-size: 12px;
        padding: 3px;
    }

    .assignment-cell {
        height: 34px;
    }

    .admin-form,
    .admin-form.simple {
        grid-template-columns: 1fr;
    }

    .admin-form .wide {
        grid-column: span 1;
    }

    .admin-row {
        flex-direction: column;
    }
}
/* =========================================================
   Sicherheitsupdate / mobile Kartenansicht / Desktop-Scroll
   ========================================================= */

.saison-form {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    margin-right: 8px;
    vertical-align: middle;
}

.saison-info {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    margin-top: 8px;
    padding: 4px 8px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    color: #555;
    font-size: 12px;
    vertical-align: middle;
}

.mobile-schedule-cards {
    display: none;
}

@media (min-width: 901px) {
    html,
    body {
        height: 100%;
        overflow: hidden;
    }

    body {
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    .app-header {
        flex: 0 0 auto;
    }

    .page-layout {
        flex: 1 1 auto;
        min-height: 0;
        height: calc(100vh - 90px);
        overflow: hidden;
        align-items: stretch;
    }

    .calendar-area {
        display: flex;
        flex-direction: column;
        min-height: 0;
        height: 100%;
    }

    .table-toolbar {
        flex: 0 0 auto;
    }

    .table-scroll {
        flex: 1 1 auto;
        min-height: 0;
        max-height: none;
        height: 100%;
        overflow-x: auto;
        overflow-y: auto;
    }

    .sidebar {
        max-height: 100%;
        overflow-y: auto;
    }
}

@media (max-width: 900px) {
    .table-scroll {
        display: none;
    }

    .mobile-schedule-cards {
        display: grid;
        gap: 12px;
    }

    .mobile-schedule-card {
        border: 2px solid #ccc;
        border-radius: 10px;
        background: #fff;
        overflow: hidden;
    }

    .mobile-card-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 10px;
        padding: 10px;
        background: #fff3a6;
        border-bottom: 1px solid #ccc;
    }

    .mobile-card-header span {
        display: block;
        margin-top: 3px;
        font-size: 12px;
        color: #555;
    }

    .mobile-card-time {
        white-space: nowrap;
        font-weight: bold;
        font-size: 14px;
    }

    .mobile-card-body {
        display: grid;
    }

    .mobile-card-row {
        display: grid;
        grid-template-columns: 42% 58%;
        border-bottom: 1px solid #ddd;
        min-height: 42px;
    }

    .mobile-card-row:last-child {
        border-bottom: none;
    }

    .mobile-card-label {
        padding: 9px;
        font-weight: bold;
        background: #f7f7f7;
        border-right: 1px solid #ddd;
        font-size: 13px;
    }

    .mobile-card-value {
        padding: 9px;
        min-height: 42px;
        font-size: 14px;
        background: #ffffff;
        overflow: visible;
        white-space: normal;
        text-overflow: clip;
    }

    .mobile-name-row .mobile-card-value {
        background: #dcedc8;
    }

    body[data-plan-typ="saison"] .mobile-name-row:nth-of-type(2) .mobile-card-value {
        background: #e0efff;
    }

    .mobile-bar-row .mobile-card-value {
        background: #ffe0b2;
    }

    .mobile-note-row .mobile-card-value {
        background: #ffffff;
        min-height: 52px;
    }

    body[data-plan-typ="jubilaeum"] .mobile-schedule-card.day-friday .mobile-card-header {
        background: #b7e1a1;
    }

    body[data-plan-typ="jubilaeum"] .mobile-schedule-card.day-saturday .mobile-card-header {
        background: #9fc9f3;
    }

    body[data-plan-typ="jubilaeum"] .mobile-schedule-card.day-sunday .mobile-card-header {
        background: #e6a8d7;
    }

    .mobile-schedule-card.next-appointment {
        border-color: #d35400;
    }

    .mobile-schedule-card.next-appointment .mobile-card-header,
    .mobile-schedule-card.next-appointment .mobile-card-label,
    .mobile-schedule-card.next-appointment .mobile-card-value {
        background: #ffb74d !important;
        color: #111;
        font-weight: bold;
    }
}

@media (max-width: 650px) {
    .saison-form,
    .saison-info {
        display: flex;
        width: fit-content;
    }
}


/* =========================================================
   Abgelaufene Termine ausblenden / wieder anzeigen
   ========================================================= */

.past-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    margin-top: 8px;
    padding: 4px 8px;
    background: #fffdf0;
    border: 1px solid #e0d59a;
    border-radius: 5px;
    color: #555;
    font-size: 12px;
    vertical-align: middle;
    cursor: pointer;
}

.past-toggle input {
    margin: 0;
}

body.hide-past .past-appointment {
    display: none !important;
}

/* =========================================================
   Nächster Termin muss wirklich ALLE Spalten überschreiben
   auch Datum/Zeit bei Freitag, Samstag und Sonntag
   ========================================================= */

body[data-plan-typ] .calendar-table tbody tr.next-appointment > td,
body[data-plan-typ="jubilaeum"] .calendar-table tbody tr.next-appointment.day-friday > td:nth-child(1),
body[data-plan-typ="jubilaeum"] .calendar-table tbody tr.next-appointment.day-friday > td:nth-child(2),
body[data-plan-typ="jubilaeum"] .calendar-table tbody tr.next-appointment.day-saturday > td:nth-child(1),
body[data-plan-typ="jubilaeum"] .calendar-table tbody tr.next-appointment.day-saturday > td:nth-child(2),
body[data-plan-typ="jubilaeum"] .calendar-table tbody tr.next-appointment.day-sunday > td:nth-child(1),
body[data-plan-typ="jubilaeum"] .calendar-table tbody tr.next-appointment.day-sunday > td:nth-child(2),
body[data-plan-typ="saison"] .calendar-table tbody tr.next-appointment > td:nth-child(1),
body[data-plan-typ="saison"] .calendar-table tbody tr.next-appointment > td:nth-child(2) {
    background-color: #ffb74d !important;
    color: #111 !important;
    font-weight: bold;
}

body[data-plan-typ] .calendar-table tbody tr.next-appointment:hover > td {
    background-color: #ffb74d !important;
    color: #111 !important;
    font-weight: bold;
}

body[data-plan-typ] .mobile-schedule-card.next-appointment,
body[data-plan-typ] .mobile-schedule-card.next-appointment .mobile-card-header,
body[data-plan-typ] .mobile-schedule-card.next-appointment .mobile-card-label,
body[data-plan-typ] .mobile-schedule-card.next-appointment .mobile-card-value {
    background-color: #ffb74d !important;
    color: #111 !important;
    font-weight: bold;
}

@media (max-width: 650px) {
    .past-toggle {
        display: flex;
        width: fit-content;
    }
}