@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    --color-header: #292b2c;
    --color-accent: #1565c0;
    --color-accent-dark: #0d47a1;
    --color-bg: #f4f6f5;
    --color-card: #ffffff;
    --color-border: #dfe3e1;
    --color-text: #2c2f31;
    --color-muted: #6b7278;
    --color-error-bg: #fdecea;
    --color-error-text: #a12622;
    --color-success-bg: #e8f5ee;
    --color-success-text: #1c6b45;
    --radius: 6px;
    --footer-height: 58px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    line-height: 1.5;
    padding-bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.container {
    max-width: 1600px;
    width: 95%;
    margin: 0 auto;
    padding: 0 1rem;
}

.container.narrow {
    max-width: 460px;
}

.site-header {
    background: var(--color-header);
    color: #fff;
    padding: calc(1rem + env(safe-area-inset-top)) 0 1rem;
    position: sticky;
    top: 0;
    z-index: 500;
}

.site-header h1 {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 500;
}

.site-header .brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

.brand-logo-link {
    display: flex;
    align-items: center;
    line-height: 0;
}

.brand-logo-link:hover .site-logo {
    opacity: 0.85;
}

.header-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.site-header nav a {
    color: #fff;
    text-decoration: none;
    margin-left: 1rem;
    opacity: 0.9;
}

.site-header nav a:hover {
    opacity: 1;
    text-decoration: underline;
}

.site-header nav .muted {
    color: #cfd3d2;
    margin-left: 1rem;
}

.nav-icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.3rem;
    height: 2.3rem;
    margin-left: 0.5rem;
    color: #fff;
    opacity: 1;
    border-radius: 50%;
    vertical-align: middle;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
}

#message-bell-btn.has-unread {
    background: var(--color-accent);
}

.nav-icon-badge {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: #e53935;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35rem;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-header);
}

.access-request-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1rem 0 0;
    padding: 0.85rem 1.1rem;
    background: #fff3cd;
    color: #7a5b00;
    border: 1px solid #ffe08a;
    border-radius: var(--radius);
    font-weight: 600;
    text-decoration: none;
}

.access-request-banner:hover {
    background: #ffe9ad;
    text-decoration: none;
}

.message-bell-wrap {
    position: relative;
    display: inline-block;
}

.message-bell-dropdown {
    position: absolute;
    top: 2.6rem;
    right: 0;
    width: 320px;
    max-width: 90vw;
    max-height: 420px;
    overflow-y: auto;
    background: var(--color-card);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    z-index: 500;
    text-align: left;
}

.message-bell-dropdown-head {
    padding: 0.6rem 0.9rem;
    font-weight: 700;
    border-bottom: 1px solid var(--color-border);
}

.message-bell-empty {
    padding: 0.9rem;
    margin: 0;
}

.message-bell-list {
    display: flex;
    flex-direction: column;
}

.message-bell-item {
    padding: 0.65rem 0.9rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.message-bell-item:last-child {
    border-bottom: none;
}

.message-bell-item.is-unread {
    background: #eef4fc;
}

.message-bell-item-head {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
    flex-wrap: wrap;
}

.message-bell-item-body {
    white-space: pre-wrap;
    word-break: break-word;
}

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.4rem;
    margin: 0.4rem 0 0.75rem;
}

.checkbox-tile {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-weight: normal;
}

.link-copy-row {
    display: flex;
    gap: 0.5rem;
}

.link-copy-input {
    flex: 1;
    font-family: monospace;
}

.link-copy-btn {
    white-space: nowrap;
}

.message-bell-item-foot {
    margin-top: 0.4rem;
}

.message-bell-replied-tag {
    color: #2e7d32;
    font-weight: 600;
}

.message-bell-reply-box {
    margin-top: 0.5rem;
}

.message-bell-reply-box textarea {
    width: 100%;
    resize: vertical;
}

.message-bell-reply-box .actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 0.4rem;
}

.nav-icon-btn:hover {
    opacity: 1;
    background: rgba(255, 255, 255, 0.18);
    text-decoration: none;
}

.nav-icon-btn svg {
    width: 1.4rem;
    height: 1.4rem;
    fill: currentColor;
}

main {
    padding: 1.5rem 0 3rem;
}

.card {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}

.faq-item {
    border-bottom: 1px solid var(--color-border);
    padding: 0.75rem 0;
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: '+';
    color: var(--color-accent);
    font-weight: 700;
    width: 1.1rem;
    flex-shrink: 0;
}

.faq-item[open] summary::before {
    content: '\2212';
}

.faq-answer {
    margin: 0.6rem 0 0 1.6rem;
    color: var(--color-text);
}

.faq-answer p {
    margin: 0;
    line-height: 1.6;
}

.card h2 {
    margin-top: 0;
}

.hp-field {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.modal-support-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.modal-support-icon {
    font-size: 1.4rem;
    background: var(--color-bg);
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.modal-support-head h3 {
    margin: 0 0 0.15rem;
}

.modal-support-head p {
    margin: 0;
    font-size: 0.85rem;
}

.faq-suggestions {
    margin-top: 0.9rem;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--color-border);
    display: none;
}

.faq-suggestions.visible {
    display: block;
}

.faq-suggestions .faq-suggestions-head {
    background: var(--color-bg);
    padding: 0.5rem 0.8rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-muted);
    border-bottom: 1px solid var(--color-border);
}

.faq-suggestions ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.faq-suggestions li {
    border-bottom: 1px solid var(--color-border);
}

.faq-suggestions li:last-child {
    border-bottom: none;
}

.faq-suggestions a,
.faq-suggestions button.faq-suggestion-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.6rem 0.8rem;
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.92rem;
    background: none;
    border: none;
    text-align: left;
    font-family: inherit;
    cursor: pointer;
}

.faq-suggestions a:hover,
.faq-suggestions button.faq-suggestion-btn:hover {
    background: var(--color-bg);
}

.faq-suggestions a::before,
.faq-suggestions button.faq-suggestion-btn::before {
    content: '💡';
    flex-shrink: 0;
}

.faq-answer-modal-box {
    max-width: 480px;
    text-align: left;
}

.faq-answer-modal-box .faq-answer-body {
    line-height: 1.6;
    margin: 0.5rem 0 1rem;
}

.strength-meter {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0.4rem 0;
}

.strength-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--color-border);
    overflow: hidden;
}

.strength-bar span {
    display: block;
    height: 100%;
    width: 0;
    transition: width 0.2s, background 0.2s;
}

.strength-label {
    font-size: 0.78rem;
    font-weight: 600;
    min-width: 4rem;
}

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 1rem;
}

.modal-overlay[hidden] {
    display: none;
}

.modal-box {
    background: var(--color-card);
    border-radius: var(--radius);
    padding: 1.5rem;
    max-width: 380px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
}

.modal-box h3 {
    margin-top: 0;
}

.modal-box .actions {
    justify-content: flex-end;
    margin-top: 1rem;
    position: sticky;
    bottom: -1.5rem;
    padding: 0.75rem 0 1.5rem;
    margin-bottom: -1.5rem;
    background: var(--color-card);
}

.modal-box-wide {
    max-width: 640px;
}

.modal-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    background: #fff7e6;
    border: 1px solid #f0b429;
    border-radius: var(--radius);
    padding: 0.75rem 0.9rem;
    margin: 0.5rem 0 1rem;
}

.modal-warning-icon {
    width: 1.4rem;
    height: 1.4rem;
    flex: 0 0 auto;
    fill: #b45309;
    margin-top: 0.1rem;
}

.modal-warning-text {
    margin: 0;
    font-size: 0.9rem;
    color: #7c4a03;
    line-height: 1.4;
}

.profil-modal-iframe {
    width: 100%;
    height: 70vh;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.release-block {
    margin-bottom: 1.75rem;
}

.release-header {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    margin-bottom: 0.85rem;
    flex-wrap: wrap;
}

.release-badge {
    background: var(--color-accent);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius);
    white-space: nowrap;
}

.release-badge.is-latest {
    background: var(--color-accent-dark);
}

.release-title {
    font-size: 1.15rem;
    font-weight: 700;
}

.release-date {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.release-card {
    border-left: 3px solid var(--color-accent);
}

.changelog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.75rem;
}

.changelog-tile {
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 0.8rem 0.9rem;
}

.changelog-tile-title {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: 0.25rem;
}

.changelog-check {
    color: var(--color-accent);
    flex-shrink: 0;
}

.changelog-tile-text {
    font-size: 0.8rem;
    color: var(--color-muted);
    line-height: 1.5;
}

label {
    display: block;
    margin: 0.75rem 0 0.25rem;
    font-weight: 500;
    font-size: 0.9rem;
}

.create-user-card {
    border-top: 3px solid var(--color-accent);
}

.form-grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0 1rem;
}

.admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 1.1rem 0 0.2rem;
    padding: 0.6rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg);
    font-weight: 500;
    cursor: pointer;
    width: fit-content;
}

.admin-toggle input {
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--color-accent);
}

.admin-toggle-danger {
    border: 2px solid var(--color-error-text);
    background: var(--color-error-bg);
}

.admin-toggle-danger input {
    accent-color: var(--color-error-text);
}

.rights-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 0.9rem;
    margin-top: 0.9rem;
}

.rights-fieldset {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem 0.85rem;
    margin: 0;
    background: var(--color-bg);
}

.rights-fieldset legend {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--color-accent-dark);
    padding: 0 0.4rem;
}

.rights-fieldset label {
    margin: 0.4rem 0;
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.rights-fieldset input[type="checkbox"] {
    accent-color: var(--color-accent);
}

.module-group-box {
    grid-column: 1 / -1;
    border: 2px solid var(--color-accent);
    border-radius: var(--radius);
    padding: 0.9rem;
    background: rgba(21, 101, 192, 0.05);
}

.module-group-box-title {
    font-weight: 700;
    color: var(--color-accent-dark);
    margin-bottom: 0.7rem;
    font-size: 0.95rem;
}

.module-group-box-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.75rem;
}

.module-group-box .rights-fieldset {
    background: var(--color-card);
}

input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 1rem;
}

input:focus, select:focus, textarea:focus {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.btn {
    display: inline-block;
    -webkit-appearance: none;
    appearance: none;
    border: none;
    border-radius: var(--radius);
    padding: 0.6rem 1.1rem;
    font-size: 0.95rem;
    font-weight: 500;
    font-family: inherit;
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
}

.btn-primary {
    background: var(--color-accent);
    color: #fff;
    margin-top: 1rem;
}

.actions .btn-primary,
.actions .btn-secondary {
    margin-top: 0;
}

.btn-primary:hover {
    background: var(--color-accent-dark);
}

.btn-secondary {
    background: #eef1f0;
    color: var(--color-text);
    border: 1px solid var(--color-border);
}

.btn-danger {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid var(--color-error-text);
}

.btn-success {
    background: #2e7d32;
    color: #fff;
}

.btn-success:hover {
    background: #256428;
}

.btn-small {
    padding: 0.3rem 0.6rem;
    font-size: 0.8rem;
    background: #eef1f0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    cursor: pointer;
}

.btn-small.btn-primary {
    background: var(--color-accent);
    color: #fff;
    border: none;
}

.btn-small.btn-primary:hover {
    background: var(--color-accent-dark);
}

.login-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-size: 0.9rem;
}

.login-remember input {
    width: auto;
}

.alert {
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
}

.alert-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.alert-success {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.muted {
    color: var(--color-muted);
    font-size: 0.9rem;
}

.toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
    position: sticky;
    top: var(--header-height, 0px);
    z-index: 400;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.toolbar-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.toolbar-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0;
}

.ui-prefs-controls {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
    z-index: 20;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: 0.5rem;
    min-width: 220px;
    max-width: calc(100vw - 1rem);
    box-sizing: border-box;
}

.dropdown-menu[hidden] {
    display: none;
}

.pdf-export-panel {
    display: flex;
    flex-direction: column;
}

.pdf-export-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
}

.pdf-export-footer {
    flex: none;
    border-top: 1px solid var(--color-border);
    margin: 0.4rem -0.5rem -0.5rem;
    padding: 0.5rem;
    background: var(--color-card);
}

.pdf-export-footer .pdf-export-go {
    width: 100%;
}

.dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0.4rem;
    font-size: 0.9rem;
    cursor: pointer;
    white-space: nowrap;
}

.dropdown-item input {
    width: auto;
}

.dropdown-item:hover {
    background: var(--color-bg);
    border-radius: 4px;
}

.dropdown-item.dropdown-link {
    color: inherit;
    text-decoration: none;
}

.dropdown-separator {
    border-top: 1px solid var(--color-border);
    margin: 0.4rem 0.2rem;
}

.dropdown-section-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--color-muted);
    padding: 0.3rem 0.4rem 0.1rem;
}

.dropdown-months {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 0.25rem;
}

@media (max-width: 420px) {
    .dropdown-months {
        grid-template-columns: 1fr;
    }
}

/* Spalten-Sichtbarkeit: pro Nutzer/Gemeinde-Zugang ein-/ausblendbar (data-col auf th/td, Klasse auf body) */
body.hide-col-bemerk_text .plan-table [data-col="bemerk_text"],
body.hide-col-thema .plan-table [data-col="thema"],
body.hide-col-prediger .plan-table [data-col="prediger"],
body.hide-col-moderator .plan-table [data-col="moderator"],
body.hide-col-musik .plan-table [data-col="musik"],
body.hide-col-bistro .plan-table [data-col="bistro"],
body.hide-col-geschirr .plan-table [data-col="geschirr"],
body.hide-col-techniker .plan-table [data-col="techniker"],
body.hide-col-bemerkung .plan-table [data-col="bemerkung"],
body.hide-col-programm .plan-table [data-col="programm"],
body.hide-col-wer .plan-table [data-col="wer"],
body.hide-col-nicht_da .plan-table [data-col="nicht_da"] {
    display: none;
}

.zoom-mode-active .plan-table {
    font-size: 1.25em;
}

.zoom-mode-active .plan-table th,
.zoom-mode-active .plan-table td {
    padding: 0.85rem 0.6rem;
}

.zoom-mode-active .month-heading {
    font-size: 1.5em;
}

.year-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.year-select label {
    font-weight: 500;
}

.year-select select {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--color-border, #ccc);
    border-radius: 4px;
    font-size: 1rem;
}

.month-heading {
    color: var(--color-accent-dark);
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 0.25rem;
    margin-top: 2rem;
}

.table-wrap {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-card);
}

.plan-table th, .plan-table td {
    padding: 0.55rem 0.6rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    font-size: 0.92rem;
    vertical-align: top;
    position: relative;
    overflow-wrap: break-word;
}

/* Feste Spaltenbreiten, damit alle Monatstabellen (Predigt-/Teenkreisplan bestehen je
   Monat aus einer eigenen <table>) exakt gleich ausgerichtet sind, unabhaengig vom
   Inhalt der jeweiligen Zeilen. */
.plan-table {
    table-layout: fixed;
}

.plan-table [data-col="datum"] { width: 9%; }
.plan-table [data-col="bemerk_text"] { width: 9%; }
.plan-table [data-col="thema"] { width: 20%; }
.plan-table [data-col="prediger"] { width: 11%; }
.plan-table [data-col="moderator"] { width: 11%; }
.plan-table [data-col="musik"] { width: 8%; }
.plan-table [data-col="bistro"] { width: 8%; }
.plan-table [data-col="geschirr"] { width: 10%; }
.plan-table [data-col="techniker"] { width: 8%; }
.plan-table [data-col="bemerkung"] { width: 6%; }
.plan-table [data-col="programm"] { width: 46%; }
.plan-table [data-col="wer"] { width: 25%; }
.plan-table [data-col="nicht_da"] { width: 20%; }

/* SoSchul hat eigene Spalten (ort, themenreihe, bemerkungen, unterlagen), die oben keine
   Breite haben - bei table-layout: fixed fuehrte das zu kaputter/unvorhersehbarer
   Spaltenverteilung. Eigene, vollstaendige Breitenzuteilung fuer alle SoSchul-Spalten,
   die die generischen Regeln oben ueberschreibt (gleiche Selektor-Spezifitaet, aber
   spaeter in der Kaskade). */
.plan-table-soschul [data-col="datum"] { width: 8%; }
.plan-table-soschul [data-col="ort"] { width: 12%; }
.plan-table-soschul [data-col="themenreihe"] { width: 13%; }
.plan-table-soschul [data-col="thema"] { width: 15%; }
.plan-table-soschul [data-col="bemerkungen"] { width: 15%; }
.plan-table-soschul [data-col="wer"] { width: 12%; }
.plan-table-soschul [data-col="unterlagen"] { width: 25%; }

.ac-suggestions {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 50;
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
    max-height: 220px;
    overflow-y: auto;
    margin-top: 2px;
}

.ac-suggestion-item {
    padding: 0.6rem 0.75rem;
    font-size: 0.95rem;
    cursor: pointer;
    border-bottom: 1px solid var(--color-border);
}

.ac-suggestion-item:last-child {
    border-bottom: none;
}

.ac-suggestion-item:hover,
.ac-suggestion-item:active {
    background: #eef6f1;
}

.plan-table thead th {
    background: #eef1f0;
    font-weight: 500;
}

.plan-table th.actions-col,
.plan-table td.row-actions {
    display: none;
}

.unterlagen-cell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
}

.unterlagen-link {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 14rem;
}

.unterlagen-edit-controls {
    display: inline-flex;
    gap: 0.25rem;
}

.leave-site-url {
    word-break: break-all;
    font-weight: 600;
    background: var(--color-bg);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
}

#leave-site-countdown {
    font-weight: 700;
}

body.sort-mode-active .plan-table th.actions-col,
body.sort-mode-active .plan-table td.row-actions,
body.delete-mode-active .plan-table th.actions-col,
body.delete-mode-active .plan-table td.row-actions {
    display: table-cell;
    width: 1%;
    white-space: nowrap;
}

.note-row td {
    background: #fff7e0;
    font-style: italic;
}

.putzplan-hints {
    margin: 1rem 0 1.5rem;
    padding: 0.75rem 1rem;
    background: #fff7e0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.putzplan-hints summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text);
}

.putzplan-hints ul {
    margin: 0.6rem 0 0.1rem;
    padding-left: 1.25rem;
    color: var(--color-text);
}

.putzplan-hints li {
    margin-bottom: 0.3rem;
}

.next-event td {
    background: #4169e1; /* Königsblau, vorher: #fff59d (Gelb) */
    color: #ffffff;
}

.login-wrap {
    min-height: calc(100vh - 200px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.login-box {
    background: var(--color-card);
    border: 1px solid var(--color-border);
    border-radius: 14px;
    padding: 2.25rem 2rem;
    width: 100%;
    max-width: 420px;
    box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
}

.login-logo {
    text-align: center;
    margin-bottom: 1.75rem;
}

.login-logo img {
    height: 56px;
    margin-bottom: 0.75rem;
}

.login-logo h1 {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.2rem;
}

.login-logo p {
    font-size: 0.85rem;
    color: var(--color-muted);
    margin: 0;
}

.error-msg {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border: 1px solid #f3b8b4;
    padding: 0.65rem 0.9rem;
    border-radius: var(--radius);
    font-size: 0.88rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-msg svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.login-box .btn-primary {
    width: 100%;
    text-align: center;
    justify-content: center;
    margin-top: 1.25rem;
    padding: 0.7rem;
    font-size: 1rem;
}

.login-box label {
    font-size: 0.85rem;
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    color: var(--color-muted);
    font-size: 0.8rem;
    margin: 1.25rem 0;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-border);
}

.login-divider span {
    padding: 0 0.75rem;
}

.btn-o365 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.65rem;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    background: var(--color-surface, #fff);
    color: var(--color-text);
    text-decoration: none;
    font-size: 0.95rem;
}

.btn-o365:hover {
    background: var(--color-surface-hover, #f3f3f3);
}

.otp-hint {
    text-align: center;
    font-size: 0.88rem;
    color: var(--color-muted);
    margin-bottom: 1.25rem;
}

.otp-inputs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    margin: 0.5rem 0 1.25rem;
}

.otp-digit {
    width: 44px;
    height: 54px;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 700;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    font-family: inherit;
    transition: border-color 0.15s;
}

.otp-digit:focus {
    outline: none;
    border-color: var(--color-accent);
}

.otp-note {
    font-size: 0.78rem;
    color: var(--color-muted);
    text-align: center;
    margin-bottom: 1rem;
}

.otp-countdown {
    font-weight: 600;
    color: var(--color-accent-dark);
}

.login-back {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
}

@media (max-width: 480px) {
    .otp-digit { width: 38px; height: 48px; font-size: 1.2rem; }
    .login-box { padding: 1.75rem 1.25rem; }
}

.editable-cell {
    cursor: pointer;
}

.readonly-cell {
    color: var(--color-muted);
    font-style: italic;
}

.editable-cell:hover {
    background: #eef6f1;
    outline: 1px dashed var(--color-accent);
    outline-offset: -2px;
}

.next-event .editable-cell:hover,
.next-event .editable-cell.editing {
    background: #2f4fb0;
    color: #ffffff;
    outline: 1px dashed #ffffff;
    outline-offset: -2px;
}

.editable-cell.editing {
    padding: 0.25rem;
}

.editable-cell input {
    width: 100%;
}

.edit-hint {
    text-align: center;
    margin-top: 1rem;
}

.month-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.row-actions {
    display: flex;
    gap: 0.35rem;
    white-space: nowrap;
}

.delete-btn {
    display: none;
}

body.delete-mode-active .delete-btn {
    display: inline-block;
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: var(--color-error-text);
}

.move-btn {
    display: none;
}

body.sort-mode-active .move-btn {
    display: inline-block;
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-text);
}

.sort-mode-btn.active {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: var(--color-success-text);
}

.delete-mode-btn.active {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: #f3b8b4;
}

.inline-move-controls {
    display: inline-flex;
    gap: 0.2rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}

.inline-move-controls .btn-small {
    padding: 0.15rem 0.4rem;
    font-size: 0.75rem;
}

.table-compact th, .table-compact td {
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.88rem;
    text-align: left;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.inline-form {
    display: inline-flex;
    gap: 0.3rem;
    align-items: center;
}

.tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 1.25rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.75rem;
}

.tab-btn {
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    padding: 0.5rem 0.9rem;
    font-size: 0.9rem;
    cursor: pointer;
    color: var(--color-text);
}

.tab-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.login-tabs {
    justify-content: center;
    margin-bottom: 1.25rem;
}

.login-tabs .tab-btn {
    flex: 1;
    max-width: 220px;
    text-align: center;
}

.filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.filter-form label {
    margin: 0 0 0.25rem;
}

.filter-form input, .filter-form select {
    width: auto;
    min-width: 9rem;
}

.toggle-cell-form {
    display: inline;
}

.link-btn {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline;
    color: var(--color-accent);
}

.toggle-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    text-decoration: underline dotted;
    color: var(--color-error-text);
}

.toggle-link.is-on {
    color: var(--color-success-text);
}

.has-actions-row td {
    border-bottom: none;
}

.user-actions-row td {
    padding-top: 0;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--color-border);
}

.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.avatar-preview {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.avatar-preview-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-accent);
    color: #fff;
    font-weight: 700;
    font-size: 1.2rem;
}

.avatar-upload-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

body.is-embed {
    background: var(--color-card);
}

body.is-embed .profil-main {
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
}

.profil-embed-title {
    margin: 0 0 1rem;
    font-size: 1.3rem;
}

.profil-hero {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.profil-avatar-wrap {
    position: relative;
    flex: 0 0 auto;
}

.profil-avatar {
    width: 5.5rem;
    height: 5.5rem;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.profil-avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    color: #fff;
    font-weight: 700;
    font-size: 1.6rem;
}

.profil-avatar-edit-btn {
    position: absolute;
    right: -0.15rem;
    bottom: -0.15rem;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-card);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
}

.profil-avatar-edit-btn:hover {
    background: var(--color-accent-dark);
}

.profil-avatar-edit-btn svg {
    width: 1.05rem;
    height: 1.05rem;
    fill: currentColor;
}

.profil-avatar-o365-badge {
    position: absolute;
    left: -0.15rem;
    top: -0.15rem;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--color-card);
    border: 2px solid var(--color-card);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem;
}

.profil-avatar-o365-badge svg {
    width: 100%;
    height: 100%;
}

.profil-hero-info {
    min-width: 0;
}

.profil-hero-name {
    font-size: 1.15rem;
    font-weight: 700;
}

.profil-hero-email {
    font-size: 0.9rem;
    margin-top: 0.15rem;
}

.profil-hero-hint {
    margin-top: 0.4rem;
    font-size: 0.78rem;
}

.profil-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1rem;
}

.profil-field {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.9rem;
}

.profil-field-wide {
    grid-column: 1 / -1;
}

.profil-section-divider {
    margin-top: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-weight: 700;
    color: var(--color-accent-dark);
}

.profil-2fa-card h2 {
    margin-bottom: 0.4rem;
}

@media (max-width: 560px) {
    .profil-grid { grid-template-columns: 1fr; }
}

.modal-box-profil {
    padding: 0;
    overflow: hidden;
}

.modal-box-profil .profil-modal-iframe {
    border: none;
    border-radius: var(--radius);
    height: 78vh;
}

.user-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 0.9rem;
}

.user-card {
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 0.9rem;
    background: var(--color-card);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.user-card:hover {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}

.user-card.is-locked {
    border-color: var(--color-error-text);
}

.user-card-header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.user-avatar {
    flex: 0 0 auto;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

.user-avatar-img {
    object-fit: cover;
}

.user-card-heading {
    flex: 1 1 auto;
    min-width: 0;
}

.user-card-name {
    font-weight: 700;
    font-size: 0.98rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-username {
    color: var(--color-muted);
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.user-card-status {
    flex: 0 0 auto;
}

.user-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.user-card-tag {
    font-size: 0.75rem;
    padding: 0.15rem 0.55rem;
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-muted);
    border: 1px solid var(--color-border);
}

.user-card-tag.is-on {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: transparent;
}

.user-card-tag.is-warning {
    background: #fff4d6;
    color: #8a6100;
    border-color: transparent;
}

.user-card-tag.is-danger {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: transparent;
}

.user-card-tag.is-info {
    background: #1c4e80;
    color: #ffffff;
    border-color: transparent;
}

.user-card-tag.is-edit {
    background: #ffe3c2;
    color: #8a4300;
    border-color: transparent;
}

.user-card-creator,
.user-card-lastseen {
    background: none;
    border: none;
    padding-left: 0;
    color: var(--color-muted);
}

.user-card-actions {
    margin-top: 0.75rem;
    padding-top: 0.65rem;
    border-top: 1px solid var(--color-border);
}

.module-rights-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.7rem;
}

.module-right-toggle {
    border: 1px solid var(--color-border);
    background: var(--color-bg);
    color: var(--color-muted);
    cursor: pointer;
    font: inherit;
}

.module-right-toggle.is-on {
    background: var(--color-success-bg);
    color: var(--color-success-text);
    border-color: transparent;
}

.module-right-toggle.is-off {
    background: var(--color-error-bg);
    color: var(--color-error-text);
    border-color: transparent;
}

.user-card-tag.is-locked {
    opacity: 0.7;
    cursor: default;
}

.module-right-off-icon {
    font-weight: 700;
    margin-right: 0.3rem;
}

.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.badge-ok {
    background: var(--color-success-bg);
    color: var(--color-success-text);
}

.badge-error {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

.badge-info {
    background: var(--color-error-bg);
    color: var(--color-error-text);
}

button.badge {
    border: none;
    cursor: pointer;
    font: inherit;
}

.attempt-password {
    display: block;
    margin-top: 0.3rem;
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-error-text);
}

.site-footer {
    border-top: 1px solid var(--color-border);
    padding: 0.6rem 0 calc(0.6rem + env(safe-area-inset-bottom));
    text-align: center;
    font-size: 0.8rem;
    background: var(--color-card);
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 400;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.06);
}

.site-footer p {
    margin: 0.15rem 0;
}

.site-footer a {
    color: var(--color-accent-dark);
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.cookie-banner {
    position: fixed;
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    background: var(--color-header);
    color: #fff;
    padding: 0.85rem 0;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.2);
}

.cookie-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.cookie-banner-inner p {
    margin: 0;
    font-size: 0.85rem;
}

.cookie-banner-inner a {
    color: #fff;
    text-decoration: underline;
}

.cookie-banner-inner .btn {
    flex-shrink: 0;
    margin-top: 0;
}

@media (max-width: 640px) {
    .cookie-banner-inner { flex-direction: column; align-items: stretch; text-align: center; }
}

.install-banner {
    position: fixed;
    bottom: calc(var(--footer-height) + env(safe-area-inset-bottom));
    left: 0;
    right: 0;
    background: var(--color-card);
    border-top: 1px solid var(--color-border);
    padding: 0.7rem 0;
    z-index: 900;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.12);
}

.install-banner-inner {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.install-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    flex-shrink: 0;
}

.install-banner-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

.install-banner-text strong {
    font-size: 0.9rem;
}

.install-banner-text span {
    font-size: 0.78rem;
    color: var(--color-muted);
}

.install-banner .btn-small {
    flex-shrink: 0;
    margin-top: 0;
}

.install-banner-close {
    background: none;
    border: none;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-muted);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0.25rem;
}

@media (max-width: 640px) {
    .install-banner-text span { display: none; }
}

.install-ios-steps {
    margin: 0.75rem 0;
    padding-left: 1.2rem;
    line-height: 1.6;
}

.install-ios-steps li {
    margin-bottom: 0.4rem;
}

.impersonate-banner {
    background: #fff3cd;
    color: #6b5300;
    font-size: 0.88rem;
    padding: 0.5rem 0;
    margin-top: 0.75rem;
    margin-bottom: -1rem;
    text-align: center;
}

.impersonate-banner a {
    color: #6b5300;
    font-weight: 500;
}

.impersonate-stop-form {
    display: inline;
}

.impersonate-stop-form .link-button {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font: inherit;
    color: #6b5300;
    font-weight: 500;
    text-decoration: underline;
    cursor: pointer;
}

@media (max-width: 640px) {
    body { font-size: 17px; line-height: 1.6; }
    .container { padding: 0 0.75rem; }
    .site-header h1 { font-size: 1.15rem; }
    .site-logo { height: 30px; }
    .header-row { justify-content: flex-start; }
    .site-header nav { display: flex; flex-wrap: wrap; gap: 0.5rem 0; width: 100%; }
    .site-header nav a, .site-header nav .muted { margin-left: 0; margin-right: 1rem; font-size: 1rem; }
    .nav-icon-btn { margin-left: 0; margin-right: 0.5rem; }
    .message-bell-dropdown {
        position: fixed;
        top: 4.2rem;
        left: 0.6rem;
        right: 0.6rem;
        bottom: auto;
        width: auto;
        max-width: none;
        max-height: calc(100vh - 5rem);
    }
    .card { padding: 1rem; }
    main { padding: 1rem 0 2rem; }

    .toolbar { flex-direction: column; align-items: stretch; gap: 0.75rem; }
    .toolbar-actions { flex-direction: row; flex-wrap: wrap; gap: 0.4rem; justify-content: flex-start; }
    .toolbar-actions .btn { width: auto; text-align: center; padding: 0.5rem 0.6rem; min-height: 2.5rem; font-size: 1.1rem; }
    .toolbar-actions .btn-label { display: none; }
    .ui-prefs-controls { gap: 0.4rem; }
    .year-select { justify-content: space-between; }
    .year-select label { font-size: 1.1rem; }
    .year-select select { flex: 1; font-size: 1.1rem; padding: 0.65rem 0.7rem; }

    .month-heading { font-size: 1.3rem; margin-top: 1.75rem; }
    .plan-table th, .plan-table td { font-size: 0.95rem; padding: 0.65rem 0.5rem; }
    .plan-table thead th { font-size: 0.85rem; }

    /* Karten-Layout statt Tabelle: bessere Lesbarkeit für kleine Screens */
    .plan-table thead { display: none; }
    .plan-table, .plan-table tbody, .plan-table tr, .plan-table td { display: block; width: 100%; }
    .plan-table [data-col] { width: 100%; }
    .plan-table tr {
        border: 1px solid var(--color-border);
        border-left: 4px solid var(--color-accent);
        border-radius: 10px;
        margin-bottom: 0.85rem;
        padding: 0.85rem 0.15rem 0.6rem;
        background: var(--color-card);
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    }
    .plan-table td { border-bottom: none; padding: 0.4rem 0.6rem; }
    .plan-table td[data-label]::before { content: attr(data-label); display: block; font-weight: 500; font-size: 0.78rem; color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.02em; }

    /* Leere, nicht editierbare Felder ausblenden – keine leeren Label-Zeilen mehr */
    .plan-table td:empty:not(.editable-cell) { display: none; }

    /* Karteninhalt als Grid: Datum/Thema/Hinweis volle Breite, die drei
       Personenfelder als kompakte Dreier-Reihe statt gestapelter Blöcke.
       Nur fuer den Predigtplan (feste Spaltenzahl); andere Plaene (Teenkreis,
       Sonntagsschule, ...) mit abweichenden Spalten bleiben beim einfachen
       Block-Stapel-Layout, sonst ueberlappen sich nicht zugeordnete Spalten
       im Grid (wiederkehrender CSS-Fehler, siehe Historie). */
    .plan-table-predigtplan tr:not(.note-row) {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-areas:
            "datum    datum    datum"
            "thema    thema    thema"
            "subtitle subtitle subtitle"
            "predi    moder    tech"
            "musik    bistro   geschirr"
            "note     note     note"
            "actions  actions  actions";
        gap: 0.2rem 0.4rem;
        align-items: start;
    }

    .plan-table-predigtplan td[data-label="Datum"] {
        grid-area: datum;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--color-accent-dark);
        padding-bottom: 0.1rem;
    }
    .plan-table-predigtplan td[data-label="Datum"]::before { display: none; }

    .plan-table-predigtplan td[data-label="Thema"] {
        grid-area: thema;
        font-weight: 600;
        font-size: 1.08rem;
        color: var(--color-text);
        padding-top: 0;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--color-border);
        margin-bottom: 0.2rem;
    }
    .plan-table-predigtplan td[data-label="Thema"]::before { display: none; }
    .plan-table-predigtplan td[data-label="Thema"]:empty { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

    .plan-table-predigtplan td[data-label="Bemerk./Text"] {
        grid-area: subtitle;
        font-style: italic;
        font-size: 0.85rem;
        color: var(--color-muted);
        padding-top: 0;
    }

    /* Rollen-Kästchen: Prediger/Moderator/Techniker in einer Dreier-Reihe, darunter
       Musik/Bistro/Geschirr mitnehmen als zweite Dreier-Reihe in derselben Optik. */
    .plan-table-predigtplan td[data-label="Prediger/in"],
    .plan-table-predigtplan td[data-label="Moderator/in"],
    .plan-table-predigtplan td[data-label="Techniker/in"],
    .plan-table-predigtplan td[data-label="Musik"],
    .plan-table-predigtplan td[data-label="Bistro"],
    .plan-table-predigtplan td[data-label="Geschirr mitnehmen"] {
        background: var(--color-bg);
        border-radius: 8px;
        padding: 0.4rem 0.4rem !important;
        text-align: center;
    }
    .plan-table-predigtplan td[data-label="Prediger/in"] { grid-area: predi; }
    .plan-table-predigtplan td[data-label="Moderator/in"] { grid-area: moder; }
    .plan-table-predigtplan td[data-label="Techniker/in"] { grid-area: tech; }
    .plan-table-predigtplan td[data-label="Musik"] { grid-area: musik; }
    .plan-table-predigtplan td[data-label="Bistro"] { grid-area: bistro; }
    .plan-table-predigtplan td[data-label="Geschirr mitnehmen"] { grid-area: geschirr; }
    .plan-table-predigtplan td[data-label="Prediger/in"]::before,
    .plan-table-predigtplan td[data-label="Moderator/in"]::before,
    .plan-table-predigtplan td[data-label="Techniker/in"]::before,
    .plan-table-predigtplan td[data-label="Musik"]::before,
    .plan-table-predigtplan td[data-label="Bistro"]::before,
    .plan-table-predigtplan td[data-label="Geschirr mitnehmen"]::before {
        font-size: 0.66rem;
        margin-bottom: 0.1rem;
    }

    .plan-table-predigtplan td[data-label="Bemerkung"] {
        grid-area: note;
        font-size: 0.85rem;
        color: var(--color-muted);
        border-top: 1px dashed var(--color-border);
        margin-top: 0.15rem;
        padding-top: 0.5rem;
    }

    .plan-table tr.note-row { border-left-color: #e0a51c; }
    .plan-table tr.next-event { border-left-color: #1e3a8a; background: #4169e1; } /* Königsblau, vorher: border #f2c200 / background #fff59d (Gelb) */
    .plan-table tr.next-event td { background: transparent; color: #ffffff; }
    .plan-table tr.next-event td[data-label]::before { color: rgba(255, 255, 255, 0.8); }
    .plan-table-predigtplan tr.next-event td[data-label="Datum"] { color: #ffffff; }
    .plan-table-predigtplan tr.next-event td[data-label="Thema"] { color: #ffffff; border-bottom-color: rgba(255, 255, 255, 0.35); }
    .plan-table-predigtplan tr.next-event td[data-label="Bemerk./Text"],
    .plan-table-predigtplan tr.next-event td[data-label="Bemerkung"] { color: rgba(255, 255, 255, 0.85); }
    .plan-table-predigtplan tr.next-event td[data-label="Bemerkung"] { border-top-color: rgba(255, 255, 255, 0.35); }
    .plan-table-predigtplan tr.next-event td[data-label="Prediger/in"],
    .plan-table-predigtplan tr.next-event td[data-label="Moderator/in"],
    .plan-table-predigtplan tr.next-event td[data-label="Techniker/in"],
    .plan-table-predigtplan tr.next-event td[data-label="Musik"],
    .plan-table-predigtplan tr.next-event td[data-label="Bistro"],
    .plan-table-predigtplan tr.next-event td[data-label="Geschirr mitnehmen"] { background: rgba(255, 255, 255, 0.15); color: #ffffff; }
    .note-row td {
        border-radius: 10px;
        font-size: 0.95rem;
    }
    .row-actions::before { display: none !important; }
    .plan-table-predigtplan .row-actions { grid-area: actions; }
    .row-actions { flex-direction: row; flex-wrap: wrap; padding-top: 0.6rem; margin-top: 0.15rem; border-top: 1px solid var(--color-border); }
    .row-actions .btn-small { flex: 1; min-width: 5.5rem; }

    body.sort-mode-active .plan-table th.actions-col,
    body.sort-mode-active .plan-table td.row-actions,
    body.delete-mode-active .plan-table th.actions-col,
    body.delete-mode-active .plan-table td.row-actions {
        display: flex;
        width: auto;
    }

    .btn, .btn-small { min-height: 2.75rem; font-size: 1rem; }
    .month-actions { flex-direction: column; }
    .month-actions .btn-small { width: 100%; min-height: 3rem; }

    .actions { flex-direction: column; align-items: stretch; }
    .inline-form { width: 100%; }
    .inline-form .btn-small { width: 100%; }
    .reveal-form { flex-direction: column; align-items: stretch; }

    label { font-size: 1rem; }

    input[type=text], input[type=email], input[type=password], input[type=date], select, textarea {
        font-size: 16px; /* verhindert Auto-Zoom bei Fokus in iOS Safari */
        padding: 0.7rem 0.75rem;
    }
}

.site-footer .container {
    text-align: center;
}

.site-footer p {
    margin: 0;
    overflow-x: auto;
    white-space: nowrap;
}

.footer-compact {
    display: none;
}

@media (max-width: 640px) {
    .footer-full {
        display: none;
    }

    .footer-compact {
        display: block;
        font-size: 0.75rem;
        white-space: normal;
        overflow-x: visible;
    }
}