/* Photobox CMS - Erweiterungen zur Basis in style.css */

.cms-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.cms-banner-warning {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.cms-banner-warning strong {
    display: block;
}

.cms-banner .btn {
    flex: 0 0 auto;
    padding: 10px 16px;
    font-size: 14px;
}

.cms-logout {
    margin-left: auto;
    border-color: var(--border);
    color: var(--text-secondary);
}

.cms-logout:hover {
    border-color: #fca5a5;
    background: #fef2f2;
    color: #b91c1c;
}

.cms-global-status {
    margin: 0;
}

/* Box Live-Status */

.cms-panel-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.cms-panel-head h2 {
    margin: 0;
    font-size: 22px;
}

.cms-panel-head .booking-help {
    margin: 4px 0 0;
}

.cms-boxstatus-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

.cms-boxstatus-grid article {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-boxstatus-grid span {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cms-boxstatus-grid strong {
    display: block;
    margin-top: 6px;
    font-size: 20px;
    line-height: 1.2;
    word-break: break-word;
}

.cms-boxstatus-meta {
    margin-top: 12px;
    font-size: 13px;
    font-weight: 700;
}

.cms-boxstatus-meta.is-ok {
    color: #047857;
}

.cms-boxstatus-meta.is-error {
    color: #b91c1c;
}

.cms-boxstatus-loading {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-secondary);
    font-weight: 700;
}

/* Spinner */

.cms-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(0, 102, 255, 0.25);
    border-top-color: var(--primary);
    border-radius: 50%;
    vertical-align: -3px;
    animation: cms-spin 0.8s linear infinite;
}

@keyframes cms-spin {
    to { transform: rotate(360deg); }
}

/* Workflow im Buchungs-Card */

.cms-workflow {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-workflow h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.cms-pipeline {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-pipeline li {
    padding: 6px 13px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 800;
}

.cms-pipeline li:not(:last-child)::after {
    content: '→';
    margin-left: 10px;
    margin-right: -4px;
    color: var(--text-tertiary);
}

.cms-pipeline li.is-done {
    border-color: #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.cms-pipeline li.is-current {
    border-color: rgba(0, 102, 255, 0.3);
    background: rgba(0, 102, 255, 0.08);
    color: var(--primary);
}

.cms-pipeline-offtrack {
    padding: 10px 14px;
    border: 1px solid #fcd34d;
    border-radius: var(--radius-sm);
    background: #fffbeb;
    color: #92400e;
    font-size: 13px;
    font-weight: 700;
}

.cms-workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1280px) {
    .cms-workflow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.cms-step {
    display: grid;
    align-content: start;
    gap: 8px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}

.cms-step.needs-attention {
    border-color: #fcd34d;
    background: #fffbeb;
}

.cms-step h4 {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
}

.cms-step .btn {
    margin-top: auto;
    justify-content: center;
    padding: 10px 14px;
    font-size: 14px;
}

.cms-step-meta {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.cms-step-warning {
    color: #b45309;
    font-size: 13px;
    font-weight: 800;
}

.cms-step-ok {
    color: #047857;
    font-size: 13px;
    font-weight: 800;
}

.cms-step-link {
    color: var(--primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

.cms-step-link:hover {
    text-decoration: underline;
}

/* Live-Galerie-Schritt */

.cms-step.is-live {
    border-color: #a7f3d0;
    background: #ecfdf5;
}

.cms-live-active {
    color: #047857;
    font-size: 13px;
    font-weight: 800;
}

.cms-live-active::first-letter {
    animation: cms-live-pulse 1.6s ease-in-out infinite;
}

@keyframes cms-live-pulse {
    50% { opacity: 0.35; }
}

/* Gesichtserkennung im Foto-Schritt */

.cms-faces {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.cms-step .cms-faces .btn {
    margin-top: 0;
    padding: 8px 14px;
    font-size: 13px;
}

.cms-faces-consent {
    font-size: 13px;
    font-weight: 800;
}

.cms-faces-consent.is-allowed {
    color: #047857;
}

.cms-faces-consent.is-denied {
    color: var(--text-tertiary);
}

/* DSGVO-Aufbewahrung im Foto-Schritt */

.cms-retention {
    display: grid;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px dashed var(--border);
}

.cms-step .cms-retention .btn {
    margin-top: 0;
    padding: 8px 14px;
    font-size: 13px;
}

.cms-step-deleted {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

/* Produktanzeige in der Buchungskarte */

.cms-product-badge {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    margin: 0 0 16px;
    padding: 10px 14px;
    border: 1px solid rgba(0, 102, 255, 0.22);
    border-radius: var(--radius-md);
    background: rgba(0, 102, 255, 0.06);
}

.cms-product-badge.is-guestbook-only {
    border-color: #c7d2fe;
    background: #eef2ff;
}

.cms-product-label {
    font-size: 15px;
    font-weight: 800;
    color: var(--text-primary);
}

.cms-product-chip {
    padding: 3px 11px;
    border-radius: 999px;
    background: #4338ca;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.cms-product-breakdown {
    margin-left: auto;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.cms-guestbook-note {
    margin: 0;
}

/* Gast-Link (Gäste-Galerie) */

.cms-share-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 18px 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-share-info {
    min-width: 0;
}

/* Ansage-Zeile des Audio-Gästebuchs, gleiche Optik wie die Share-Zeile */
.cms-audio-greeting {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 18px 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-share-label {
    display: block;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cms-share-url {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-primary);
    word-break: break-all;
}

.cms-share-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cms-share-actions .btn {
    padding: 8px 14px;
    font-size: 13px;
}

/* Feature-Toggles & Card-Aktionen */

.cms-feature-toggles {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
}

.cms-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.cms-check input {
    width: 17px;
    height: 17px;
    accent-color: var(--primary);
    cursor: pointer;
}

.cms-card-actions {
    margin-top: 16px;
}

.cms-btn-danger {
    color: #b91c1c;
    border-color: #fecaca;
}

.cms-btn-danger:hover {
    border-color: #ef4444;
    background: #fef2f2;
    color: #991b1b;
}

.cms-card-status {
    margin-top: 12px;
}

/* Responsive */

@media (max-width: 980px) {
    .cms-workflow-steps,
    .cms-boxstatus-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .cms-banner,
    .cms-panel-head {
        flex-direction: column;
        align-items: stretch;
    }

    .cms-workflow-steps,
    .cms-boxstatus-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .cms-logout {
        margin-left: 0;
    }

    .cms-pipeline li:not(:last-child)::after {
        content: '';
        margin: 0;
    }
}

/* Telemetrie-Zustände im Box-Status-Widget */
.cms-boxstatus-grid em {
    display: block;
    margin-top: 2px;
    font-size: 0.72rem;
    font-style: normal;
    color: var(--text-secondary, #6b7280);
}

.cms-boxstatus-grid article.is-ok strong {
    color: #15803d;
}

.cms-boxstatus-grid article.is-warn {
    border-color: #f59e0b;
    background: #fffbeb;
}

.cms-boxstatus-grid article.is-warn strong {
    color: #b45309;
}

.cms-boxstatus-grid article.is-danger {
    border-color: #dc2626;
    background: #fef2f2;
}

.cms-boxstatus-grid article.is-danger strong {
    color: #b91c1c;
}

/* Mehrere Collagen-Vorschauen in der Buchungskarte */

.cms-design-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.cms-design-previews img {
    width: 96px;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.admin-design-preview [data-action="design"] {
    margin-top: 10px;
    padding: 8px 14px;
    font-size: 13px;
}

/* Design-Editor (eingeklappter Bereich pro Buchung) */

.cms-design-editor {
    display: grid;
    gap: 14px;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-design-editor h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.cms-design-mount {
    min-height: 220px;
}

/* Feld-Hilfetexte */

.cms-field-help {
    display: block;
    margin-top: 4px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
}

/* Einzel-Box: Live-Status */

.cms-box-live {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-box-live h4 {
    margin: 0 0 4px;
    font-size: 15px;
}

.cms-box-live .booking-help {
    margin: 0;
}

.cms-box-live .cms-panel-head {
    align-items: start;
    gap: 12px;
}

.cms-box-live .btn {
    flex: 0 0 auto;
    padding: 9px 16px;
    font-size: 14px;
}

/* Box-Service (Fix-Panel) */

.cms-box-service {
    display: grid;
    gap: 12px;
    margin-top: 14px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-box-service h4 {
    margin: 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.cms-box-service .booking-help {
    margin: 0;
}

.cms-service-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.cms-service-action {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.cms-service-action .btn {
    justify-self: start;
    padding: 8px 14px;
    font-size: 13px;
}

.cms-service-action span {
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
}

.cms-service-action.is-danger {
    border-color: #fecaca;
    background: #fef2f2;
}

.cms-service-result:not(:empty) {
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.cms-service-ok {
    margin: 0;
    color: #047857;
    font-size: 13px;
    font-weight: 800;
}

.cms-service-warn {
    margin: 8px 0 0;
    color: #b45309;
    font-size: 13px;
    font-weight: 800;
}

.cms-service-error {
    margin: 0;
    color: #b91c1c;
    font-size: 13px;
    font-weight: 800;
}

.cms-service-meta {
    margin: 8px 0 0;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
}

.cms-service-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin: 10px 0 0;
}

.cms-service-data div {
    display: flex;
    gap: 6px;
}

.cms-service-data dt {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.cms-service-data dd {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.cms-service-pre {
    margin: 10px 0 0;
    padding: 10px 12px;
    max-height: 220px;
    overflow: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-light);
    font-size: 12px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Firmendaten-Panel (Einstellungen) */

.cms-form-group-title {
    margin: 22px 0 10px;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

#cmsCompanyPanel .cms-form-group-title:first-of-type {
    margin-top: 14px;
}

/* Rechnungs-Panel in der Buchungskarte */

.cms-invoice-panel {
    display: grid;
    gap: 12px;
    margin: 18px 0;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-invoice-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cms-invoice-head h3 {
    margin: 0;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
}

.cms-invoice-pill {
    padding: 5px 13px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.cms-invoice-pill.is-open {
    border: 1px solid #fcd34d;
    background: #fffbeb;
    color: #92400e;
}

.cms-invoice-pill.is-paid {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.cms-invoice-pill.is-none {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-tertiary);
}

.cms-invoice-data {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin: 0;
}

.cms-invoice-data div {
    display: flex;
    gap: 6px;
}

.cms-invoice-data dt {
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 700;
}

.cms-invoice-data dd {
    margin: 0;
    font-size: 13px;
    font-weight: 800;
}

.cms-invoice-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cms-invoice-actions .btn {
    padding: 9px 16px;
    font-size: 14px;
}

.cms-invoice-payment {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
}

.cms-invoice-payment strong {
    color: var(--text-primary);
    font-weight: 800;
}

.cms-payment-none {
    color: var(--text-tertiary);
    font-style: italic;
}

.cms-payment-meta {
    color: var(--text-tertiary);
    font-weight: 600;
}

.cms-payments-summary .is-zuviel {
    color: #b91c1c;
}

/* Offener Aenderungswunsch: eine Aufgabe, keine Angabe - deshalb auffaellig
   und ganz oben in der Karte. */

.cms-wunsch {
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #fcd34d;
    border-left: 4px solid #f59e0b;
    border-radius: var(--radius-sm, 8px);
    background: #fffbeb;
}

.cms-wunsch-kopf {
    margin: 0 0 4px;
    font-size: 14px;
}

.cms-wunsch-grund {
    margin: 0 0 10px;
    font-size: 13px;
    color: #92400e;
}

.cms-wunsch-aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Mailverlauf einer Buchung */

.cms-mailverlauf {
    margin-top: 4px;
}

.cms-mailverlauf-schalter {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary);
    text-decoration: underline;
    cursor: pointer;
}

.cms-mailverlauf-inhalt {
    margin-top: 8px;
}

.cms-mail-zeile {
    border-bottom: 1px solid var(--border-subtle, #e5e7eb);
    font-size: 12px;
}

.cms-mail-zeile summary {
    display: grid;
    grid-template-columns: 14px 96px 1fr auto;
    gap: 8px;
    align-items: baseline;
    padding: 5px 0;
    cursor: pointer;
}

.cms-mail-betreff {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-mail-an,
.cms-mail-zeit {
    color: var(--text-tertiary);
    white-space: nowrap;
}

.cms-mail-marke {
    color: #047857;
    font-weight: 700;
}

/* Ein Fehlschlag ist der Grund, aus dem es dieses Protokoll gibt - er muss
   beim Ueberfliegen auffallen. */
.cms-mail-zeile.is-fehler .cms-mail-marke {
    color: #b91c1c;
}

.cms-mail-zeile.is-rein {
    border-left: 3px solid var(--accent, #06f);
    padding-left: 8px;
}

.cms-mail-zeile.is-rein .cms-mail-marke {
    color: var(--accent, #06f);
}

/* .admin-booking-card pre in style.css faerbt jedes pre in der Karte dunkel -
   das ist der Stil fuer Rohdaten, nicht fuer einen Mailtext. Zwei Klassen, um
   diese Spezifitaet zu schlagen. */
.admin-booking-card .cms-mail-text {
    max-height: 22rem;
    margin: 4px 0 8px;
    padding: 8px 10px;
    overflow: auto;
    border-radius: 6px;
    background: var(--bg-gray, #f8fafc);
    color: var(--text-primary, #0f172a);
    font-size: 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Innerhalb einer Protokollzeile sind Meldung und Knopf Beiwerk, nicht der
   Hauptinhalt - in Normalgroesse ueberragen sie den Mailtext. */
.cms-mail-zeile .form-status {
    margin-top: 6px;
    padding: 6px 10px;
    font-size: 12px;
}

.cms-mail-wieder {
    margin-bottom: 8px;
    padding: 4px 10px;
    font-size: 12px;
}

.cms-mail-senden {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 10px;
}

.cms-mail-auswahl {
    flex: 1 1 200px;
    min-width: 0;
}

.cms-mail-vorschau {
    margin-top: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border-subtle, #e5e7eb);
    border-radius: 8px;
}

.cms-mail-vorschau-kopf {
    margin: 0 0 6px;
    font-size: 12px;
}

@media (max-width: 640px) {
    .cms-mail-zeile summary {
        grid-template-columns: 14px 1fr;
    }

    .cms-mail-zeit,
    .cms-mail-an {
        grid-column: 2;
    }
}

/* Gutschein-Zeile in der Rechnung */

.cms-invoice-voucher {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid #c7d2fe;
    border-radius: var(--radius-sm);
    background: #eef2ff;
    color: #3730a3;
    font-size: 13px;
    font-weight: 700;
}

.cms-invoice-voucher strong {
    font-weight: 900;
}

/* Bezahlt-Markierung */

.cms-btn-success {
    border-color: #6ee7b7;
    background: #059669;
    color: #fff;
}

.cms-btn-success:hover {
    background: #047857;
    border-color: #34d399;
    color: #fff;
}

.btn.cms-markpaid-toggle {
    justify-self: start;
    padding: 9px 16px;
    font-size: 14px;
}

.cms-invoice-paidline {
    margin: 0;
    padding: 9px 14px;
    border: 1px solid #a7f3d0;
    border-radius: var(--radius-sm);
    background: #ecfdf5;
    color: #047857;
    font-size: 14px;
    font-weight: 800;
}

.cms-markpaid {
    display: grid;
    grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
}

.cms-markpaid-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cms-markpaid-actions .btn {
    padding: 9px 16px;
    font-size: 14px;
}

/* Gutschein-Verwaltung */

.cms-voucher-active-create {
    margin: 12px 0 0;
}

.cms-audiobook-active {
    margin: 4px 0 14px;
}

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

.cms-voucher-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.cms-voucher-table th,
.cms-voucher-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}

.cms-voucher-table th {
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}

.cms-voucher-table tbody tr:hover {
    background: var(--bg-light);
}

.cms-voucher-code {
    font-size: 13px;
    font-weight: 900;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

.cms-voucher-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.cms-voucher-badge.is-active {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.cms-voucher-badge.is-inactive {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-tertiary);
}

.cms-voucher-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cms-voucher-actions .btn {
    padding: 7px 13px;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .cms-service-actions {
        grid-template-columns: minmax(0, 1fr);
    }

    .cms-design-previews img {
        width: 72px;
    }

    .cms-invoice-actions .btn {
        flex: 1 1 auto;
        justify-content: center;
    }

    .cms-markpaid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Identität & Rollen

   Die Kennung sass frueher als eigener Kasten ueber der Navigation. Sie steht
   jetzt in der Navigationszeile selbst; die Gestaltung dafuer haengt in
   style.css bei der Navigation. */

/* Mitarbeiter */

.cms-staff-info {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    border: 1px solid #bfdbfe;
    background: #eff6ff;
    color: #1e40af;
    font-size: 13px;
    line-height: 1.5;
}

.cms-role-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.cms-role-badge.is-owner {
    border: 1px solid #c7d2fe;
    background: #eef2ff;
    color: #4338ca;
}

.cms-role-badge.is-staff {
    border: 1px solid var(--border);
    background: #fff;
    color: var(--text-secondary);
}

.cms-staff-self {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #1e293b;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    vertical-align: middle;
}

.cms-staff-flag {
    display: inline-block;
    margin-left: 8px;
    font-size: 10px;
    font-weight: 800;
    color: #b45309;
}

/* Lager / Verbrauchsmaterial */

.cms-stock-badge {
    display: inline-block;
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
    white-space: nowrap;
}

.cms-stock-badge.is-ok {
    border: 1px solid #a7f3d0;
    background: #ecfdf5;
    color: #047857;
}

.cms-stock-badge.is-low {
    border: 1px solid #fde68a;
    background: #fffbeb;
    color: #b45309;
}

.cms-stock-badge.is-out {
    border: 1px solid #fecaca;
    background: #fef2f2;
    color: #b91c1c;
}

.cms-movement-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.cms-movement-item {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--border);
    font-size: 13px;
}

.cms-movement-item:last-child {
    border-bottom: none;
}

.cms-movement-delta {
    flex: 0 0 auto;
    min-width: 52px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.cms-movement-delta.is-in {
    color: #047857;
}

.cms-movement-delta.is-out {
    color: #b91c1c;
}

.cms-movement-name {
    font-weight: 700;
    color: var(--text-primary);
}

.cms-movement-meta {
    color: var(--text-secondary);
    font-size: 12px;
}

/* Ruecknahme ist weder Zugang noch Abgang, sondern die Korrektur eines Abgangs */
.cms-movement-delta.is-fix {
    color: #b45309;
}

.cms-movement-art {
    flex: 0 0 auto;
    min-width: 84px;
    font-weight: 700;
    color: var(--text-secondary);
}

.cms-movement-summary {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cms-movement-summary li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 18px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface-muted, #f8fafc);
    font-size: 13px;
}

.cms-movement-summary strong {
    min-width: 140px;
}

.cms-movement-summary em {
    color: var(--text-secondary);
    font-size: 12px;
    font-style: normal;
}

/* Vorlagen-Editor: der Kunden-Designer als Popup ueber der Seite */

.cms-vorlage-editor {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .55);
}

.cms-vorlage-editor[hidden] {
    display: none;
}

/* Die Seite darunter darf nicht mitscrollen, sonst verliert man beim Ziehen
   im Designer die Buehne unter dem Finger. */
body.cms-modal-offen {
    overflow: hidden;
}

.cms-vorlage-editor-kasten {
    display: flex;
    flex-direction: column;
    width: min(1100px, 100%);
    max-height: 100%;
    padding: 18px 20px 20px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}

.cms-vorlage-editor-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.cms-vorlage-editor-kopf h2 {
    margin: 0 0 4px;
    font-size: 17px;
}

.cms-vorlage-editor-kopf .booking-help {
    margin: 0;
}

.cms-vorlage-editor-knoepfe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
}

.cms-vorlage-ebene {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    white-space: nowrap;
}

/* Der Designer bringt eigene Hoehen mit; hier bekommt er den Rest des Kastens
   und scrollt in sich, statt den Kasten aus dem Bild zu schieben. */
.cms-vorlage-editor-buehne {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 700px) {
    .cms-vorlage-editor {
        padding: 0;
    }

    .cms-vorlage-editor-kasten {
        width: 100%;
        height: 100%;
        max-height: none;
        border-radius: 0;
        padding: 14px;
    }
}

/* Ausgeblendete Vorlage: erkennbar, aber nicht versteckt */

.cms-vorlage-karte.ist-inaktiv {
    opacity: .62;
}

.cms-vorlage-karte.ist-inaktiv .cms-vorlage-bild {
    filter: grayscale(1);
}

.cms-vorlage-karte .cms-voucher-badge {
    /* Die Karte ist ein Grid - justify-self, sonst zieht sich das Abzeichen
       ueber die ganze Spaltenbreite. */
    justify-self: start;
    margin: 2px 0;
}

/* Bewertungsbitte an der Buchungskarte */

.cms-review-ask {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.cms-review-ask h3 {
    margin: 0 0 6px;
    font-size: 14px;
}

/* Verkleidungen */

.cms-costume-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 16px;
}

.cms-costume {
    display: flex;
    gap: 14px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
}

.cms-costume.is-low {
    border-color: #fed7aa;
    background: #fffbeb;
}

.cms-costume.is-out {
    border-color: #fecaca;
    background: #fef2f2;
}

.cms-costume-bild {
    position: relative;
    flex: 0 0 110px;
    width: 110px;
    height: 130px;
    border-radius: 10px;
    overflow: hidden;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cms-costume-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cms-costume-kein-bild {
    color: var(--text-secondary);
    font-size: 12px;
}

.cms-costume-text {
    flex: 1 1 auto;
    min-width: 0;
}

.cms-costume-text h3 {
    margin: 0 0 8px;
    font-size: 15px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
}

.cms-costume-bestand {
    flex: 0 0 auto;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.cms-costume-text dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 10px;
    margin: 0 0 8px;
    font-size: 13px;
}

.cms-costume-text dt {
    color: var(--text-secondary);
}

.cms-costume-text dd {
    margin: 0;
}

.cms-costume-notiz {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.cms-costume-form {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.cms-costume-form h3 {
    margin: 0 0 12px;
    font-size: 15px;
}

.cms-costume-photo {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 16px;
    margin-top: 14px;
}

.cms-costume-drop {
    flex: 1 1 240px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 96px;
    padding: 14px;
    border: 2px dashed var(--border);
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    font-size: 13px;
}

.cms-costume-drop.is-over {
    border-color: var(--accent, #2563eb);
    background: #eff6ff;
}

.cms-costume-drop small {
    color: var(--text-secondary);
    font-size: 12px;
}

.cms-costume-photo-preview {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.cms-costume-photo-preview img {
    width: 140px;
    height: 160px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid var(--border);
}

/* Umsatz */

.cms-product-bars {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cms-product-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
    font-size: 14px;
}

.cms-product-head strong {
    font-variant-numeric: tabular-nums;
}

.cms-bar-track {
    height: 12px;
    border-radius: 999px;
    background: var(--bg-light, #f1f5f9);
    overflow: hidden;
}

.cms-bar-fill {
    height: 100%;
    border-radius: 999px;
}

.cms-bar-fill.is-paid {
    background: #047857;
}

.cms-bar-fill.is-open {
    background: #f59e0b;
}

.cms-month-legend {
    display: flex;
    gap: 18px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.cms-month-legend span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cms-legend-dot {
    display: inline-block;
    width: 11px;
    height: 11px;
    border-radius: 3px;
}

.cms-legend-dot.is-paid {
    background: #047857;
}

.cms-legend-dot.is-open {
    background: #f59e0b;
}

.cms-month-chart {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 180px;
    padding: 8px 0 0;
    margin-bottom: 20px;
    overflow-x: auto;
}

.cms-month-col {
    flex: 1 0 38px;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.cms-month-bars {
    flex: 1 1 auto;
    width: 100%;
    max-width: 46px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
}

.cms-month-bars .cms-bar-fill {
    width: 14px;
    min-height: 2px;
    border-radius: 4px 4px 0 0;
}

.cms-month-label {
    margin-top: 6px;
    font-size: 10px;
    font-weight: 700;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cms-report-profit.is-positive strong {
    color: #047857;
}

.cms-report-profit.is-negative strong {
    color: #dc2626;
}

/* Sprachnachrichten-Abschnitt: Einlesen von der SD-Karte + Sichten */
.cms-audio-messages {
    margin: 18px 0;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-audio-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cms-audio-count {
    color: var(--text-secondary);
    font-size: 13px;
}

.cms-audio-upload {
    cursor: pointer;
}

.cms-audio-progress {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}

.cms-audio-progress:empty {
    display: none;
}

.audio-msg-list {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.audio-msg {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.audio-msg audio {
    max-width: 100%;
    height: 36px;
}

.audio-msg-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

.audio-msg.is-misfire {
    border-color: #f59e0b;
    background: #fffbeb;
}

.audio-msg-empty {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text-secondary);
}

/* Umkreis-Ergebnis in der Buchungskarte. Eine angefragte Lieferung braucht
   Aufmerksamkeit - sie wartet auf eine Entscheidung. */
.cms-delivery-note {
    margin: 8px 0 0;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-light, #fafafa);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text-secondary, #555);
}

.cms-delivery-note.is-open {
    background: #fff6e5;
    border: 1px solid #f0c674;
    color: #6b4b00;
}

/* Zubehör-Verwaltung: Texte und Fotos je Zubehör */
.cms-addon {
    padding: 18px 20px;
    margin-bottom: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.cms-addon-images {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 12px 0;
}

.cms-addon-image {
    margin: 0;
    display: grid;
    gap: 6px;
    justify-items: center;
}

.cms-addon-image img {
    width: 140px;
    height: 100px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--border);
}

/* Telefondock: Statusstreifen ueber der Buchungsliste. Bewusst ruhiger als eine
   Buchungskarte - er steht immer da, auch wenn nichts zu tun ist. */
.admin-dock:empty {
    display: none;
}

.cms-dock {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 12px 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-light);
    color: var(--text-secondary);
    font-size: 0.92rem;
}

.cms-dock strong {
    color: var(--text-primary);
}

/* Ein offener Posten ist Arbeit, kein Hinweis: eigene Zeile, damit er nicht in
   der Statuszeile untergeht. */
.cms-dock-card {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
}

/* Zugeordnet und wartet nur noch auf den naechsten Durchlauf: erledigt, also
   ohne Akzent und zurueckgenommen. */
.cms-dock-card:not(:has(.cms-dock-select)) {
    border-left-color: var(--border);
    color: var(--text-secondary);
}

.cms-dock-select {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
    color: var(--text-primary);
    font: inherit;
}

/* Der Weg von Hand bleibt als Rueckfallebene, soll aber nicht wie der Normalweg
   aussehen - sonst greift jemand danach, obwohl der Dock die Karte schon liest. */
.cms-audio-fallback {
    flex: 1 1 100%;
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--text-tertiary);
}

/* Buchungen nach Termin gruppiert: anstehend, ueberfaellig, Archiv */
.cms-booking-group + .cms-booking-group {
    margin-top: 28px;
}

.cms-booking-group-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 1rem;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.cms-booking-group-title span {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted, #eef2f7);
    font-size: 0.8rem;
    letter-spacing: 0;
    color: var(--text-tertiary);
}

.cms-booking-archive {
    padding-top: 20px;
    border-top: 1px solid var(--border);
}

.cms-archive-toggle {
    margin-bottom: 12px;
}

/* ---------- Buchungsliste: kompakte Zeile, Details auf Klick ---------- */

.cms-todo-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 18px;
    margin-bottom: 22px;
    padding: 14px 18px;
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--radius-md);
    background: var(--bg-light, #fafafa);
    font-size: 0.92rem;
}

.cms-todo-bar.is-clear {
    border-left-color: #22a06b;
    color: var(--text-secondary);
}

.cms-todo-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-tertiary);
}

.cms-todo-item strong {
    color: var(--text-primary);
}

.cms-booking-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: #fff;
    overflow: hidden;
}

.cms-booking-item + .cms-booking-item {
    margin-top: 8px;
}

.cms-booking-item.is-open {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.cms-row {
    display: block;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    background: none;
    text-align: left;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

.cms-row:hover {
    background: var(--bg-light, #fafafa);
}

.cms-row:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.cms-row-line {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto auto 16px;
    align-items: center;
    gap: 14px;
}

.cms-row-date {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.cms-row-date strong {
    font-variant-numeric: tabular-nums;
}

.cms-row-date small {
    font-size: 0.74rem;
    color: var(--text-tertiary);
}

.cms-row-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cms-row-status {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--surface-muted, #eef2f7);
    font-size: 0.76rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.cms-row-status[data-status="requested"],
.cms-row-status[data-status="waitlist"] {
    background: #fff3d6;
    color: #8a5a00;
}

.cms-row-status[data-status="paid"],
.cms-row-status[data-status="active"] {
    background: #e3f5ec;
    color: #1c6b4a;
}

.cms-row-status[data-status="cancelled"] {
    background: #f4f5f7;
    color: var(--text-tertiary);
    text-decoration: line-through;
}

.cms-row-next {
    font-size: 0.84rem;
    color: var(--primary);
    white-space: nowrap;
}

.cms-row-next::before {
    content: "\2192\00a0";
}

.cms-row-next.is-urgent {
    font-weight: 700;
    color: #b3261e;
}

.cms-row-next.is-done {
    color: var(--text-tertiary);
}

.cms-row-next.is-done::before {
    content: "\2713\00a0";
}

.cms-row-caret {
    justify-self: end;
    width: 8px;
    height: 8px;
    border-right: 2px solid var(--text-tertiary);
    border-bottom: 2px solid var(--text-tertiary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.15s ease;
}

.is-open .cms-row-caret {
    transform: rotate(225deg) translate(-2px, -2px);
}

.cms-row-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 8px 0 0 106px;
}

.cms-chip {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-muted, #eef2f7);
    font-size: 0.74rem;
    color: var(--text-secondary);
}

.cms-chip.is-muted {
    color: var(--text-tertiary);
}

.cms-chip.is-paid {
    background: #e3f5ec;
    color: #1c6b4a;
}

.cms-chip.is-open {
    background: #fdeceb;
    color: #b3261e;
    font-weight: 600;
}

/* Die Detailkarte sitzt in der Zeile, deshalb ohne eigenen Rahmen und Schatten. */
.cms-booking-item .admin-booking-card {
    border: 0;
    border-top: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
}

@media (max-width: 720px) {
    .cms-row-line {
        grid-template-columns: 76px minmax(0, 1fr) 16px;
        row-gap: 6px;
    }

    .cms-row-status,
    .cms-row-next {
        grid-column: 2 / 4;
    }

    .cms-row-status {
        justify-self: start;
    }

    /* Ohne feste Zuweisung rutscht der Pfeil unter die Aktion. */
    .cms-row-caret {
        grid-row: 1;
        grid-column: 3;
        align-self: center;
    }

    .cms-row-chips {
        margin-left: 0;
    }
}

/* Aktivitaet: nur die juengsten Eintraege, Rest auf Zuruf */

.cms-activity-more {
    justify-self: start;
    margin-top: 4px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: var(--text-secondary);
    cursor: pointer;
}

.cms-activity-more:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Zahlung zuruecknehmen: bewusst unscheinbar, es ist der seltene Weg zurueck */

.cms-unpay {
    display: grid;
    gap: 10px;
    margin-top: 10px;
}

.btn.cms-unpay-toggle {
    justify-self: start;
    padding: 7px 13px;
    font-size: 13px;
}

.cms-unpay-controls {
    display: grid;
    gap: 10px;
    padding: 14px;
    border: 1px solid #fecaca;
    border-radius: var(--radius-md);
    background: #fef7f7;
}

.cms-unpay-controls .booking-help {
    margin: 0;
}

.cms-unpay-controls .booking-page-actions {
    margin: 0;
}

/* Laufende Kosten */

.cms-costs {
    display: grid;
    gap: 18px;
}

.cms-costs-block h4 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 10px;
    font-size: 15px;
}

.cms-costs-block h4 span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.cms-costs-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.cms-costs-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 6px 14px;
    padding: 10px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.cms-costs-list li.is-expired {
    background: var(--bg-light);
    color: var(--text-secondary);
}

.cms-costs-name {
    font-weight: 600;
}

.cms-costs-name small {
    font-weight: 400;
    color: var(--text-tertiary);
}

.cms-costs-meta {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.cms-costs-list li .btn {
    padding: 5px 11px;
    font-size: 12px;
}

.cms-costs-months {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-costs-months li {
    flex: 1 1 100px;
    padding: 9px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.cms-costs-months li span {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cms-costs-months li strong {
    display: block;
    margin-top: 3px;
    font-size: 15px;
}

.cms-costs-block .cms-panel-head .btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 8px 14px;
    font-size: 13px;
}

/* Zahl der Zahlungen neben dem Betrag, damit die Monatszeile eindeutig bleibt */
.cms-voucher-table td small {
    margin-left: 4px;
    color: var(--text-tertiary);
    font-size: 11.5px;
}

/* Druckpapier: Bestand gegen die Reservierungen der bestaetigten Buchungen */

.cms-paper {
    display: grid;
    gap: 12px;
    margin-bottom: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-left: 4px solid #22a06b;
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.cms-paper.is-tight {
    border-left-color: #f59e0b;
}

.cms-paper.is-short {
    border-left-color: #dc2626;
    background: #fef7f7;
}

.cms-paper-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 10px;
}

.cms-paper-figures article {
    padding: 10px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.cms-paper-figures span {
    display: block;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.cms-paper-figures strong {
    display: block;
    margin-top: 3px;
    font-size: 18px;
    line-height: 1.2;
}

.cms-paper-figures em {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    font-style: normal;
    color: var(--text-tertiary);
}

.cms-paper.is-ok .cms-paper-free strong {
    color: #15803d;
}

.cms-paper.is-tight .cms-paper-free strong {
    color: #b45309;
}

.cms-paper.is-short .cms-paper-free strong {
    color: #b91c1c;
}

.cms-paper-note {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--text-secondary);
}

.cms-paper-note.is-error {
    color: #b91c1c;
}

.cms-paper-bookings {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 5px;
}

.cms-paper-bookings li {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr) auto auto;
    gap: 12px;
    align-items: center;
    padding: 7px 12px;
    border-radius: var(--radius-sm);
    background: #fff;
    font-size: 13.5px;
}

.cms-paper-bookings li span:first-child {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
}

@media (max-width: 720px) {
    .cms-paper-bookings li {
        grid-template-columns: 80px minmax(0, 1fr) auto;
    }

    .cms-paper-bookings li span:nth-child(3) {
        display: none;
    }
}

.cms-paper.is-setup {
    border-left-color: #f59e0b;
}

.cms-paper-how {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-tertiary);
}

.cms-paper-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.cms-paper-actions .btn {
    padding: 8px 15px;
    font-size: 13px;
    white-space: nowrap;
}

.cms-paper-actions .booking-help {
    margin: 0;
    flex: 1 1 240px;
}

/* Vorlagen hochladen */

.cms-vorlage-drop {
    display: grid;
    gap: 6px;
    justify-items: center;
    padding: 26px 18px;
    margin-bottom: 16px;
    border: 2px dashed var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}

.cms-vorlage-drop:hover,
.cms-vorlage-drop.aktiv {
    border-color: var(--accent, #0f7b9c);
    background: rgba(15, 123, 156, .06);
}

.cms-vorlage-drop-text { font-weight: 600; }

.cms-vorlage-drop-meta {
    font-size: 13px;
    color: var(--text-secondary);
}

.cms-vorlage-form { display: grid; gap: 16px; }

.cms-vorlagen-raster {
    display: grid;
    /* 190 statt 160: darunter passen die beiden Knoepfe nicht nebeneinander */
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 14px;
}

.cms-vorlage-karte {
    display: grid;
    /* Ohne minmax(0, 1fr) waechst die Spalte auf die Mindestbreite ihres
       breitesten Kindes. .booking-page-actions .btn bringt min-width: 170px mit,
       zwei Knoepfe ergaben 425 px - die Kachel lief ueber ihre Rasterspalte
       hinaus, zog das Vorschaubild mit und schob die Nachbarn beiseite. */
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}

.cms-vorlage-karte .cms-vorlage-bild {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    border: 1px solid var(--border);
    border-radius: 6px;
    background-color: #fff;
    background-size: cover;
    background-position: center;
}

.cms-vorlage-karte .cms-vorlage-bild.quer { aspect-ratio: 3 / 2; }

/* Die erkannten Fotoflaechen liegen als Kaesten ueber der Vorschau, damit auf
   einen Blick zu sehen ist, wo die Bilder spaeter sitzen. */
.cms-vorlage-karte .cms-vorlage-bild i {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    border: 2px solid rgba(214, 44, 44, .9);
    background: rgba(214, 44, 44, .12);
    color: #a81f1f;
    font: 600 11px/1 inherit;
    font-style: normal;
}

.cms-vorlage-karte h4 { margin: 4px 0 0; font-size: 14px; }

.cms-vorlage-karte p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-secondary);
}

/* In der schmalen Kachel duerfen die Knoepfe schrumpfen und umbrechen, sonst
   sprengt die 170-px-Mindestbreite aus style.css das Raster. */
.cms-vorlage-karte .booking-page-actions {
    margin: 4px 0 0;
    flex-wrap: wrap;
    gap: 8px;
}

.cms-vorlage-karte .booking-page-actions .btn {
    min-width: 0;
    flex: 1 1 auto;
    padding-left: 10px;
    padding-right: 10px;
}

.cms-vorlage-aufteilung {
    display: grid;
    gap: 3px;
    font-size: 12px;
}

.cms-vorlage-aufteilung span {
    color: var(--text-secondary);
}

.cms-vorlage-hinweis {
    margin: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.cms-vorlage-aufteilung select {
    width: 100%;
    max-width: 100%;
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
}

.cms-vorlage-titel {
    width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    font: 600 14px/1.3 inherit;
    color: inherit;
}

.cms-vorlage-titel[data-feld="anlass"] {
    font-weight: 400;
    font-size: 12.5px;
    color: var(--text-secondary);
}

.cms-vorlage-titel:hover { border-color: var(--border); }

.cms-vorlage-titel:focus {
    border-color: var(--accent, #0f7b9c);
    background: var(--bg-light);
    outline: none;
}

/* Teilzahlungen auf eine Rechnung */
.cms-payments { margin: 14px 0 4px; }
.cms-payments-summary { margin: 0 0 8px; font-size: 0.92rem; }
.cms-payment-none { margin: 0 0 8px; font-size: 0.88rem; color: var(--text-secondary, #666); }
.cms-payment-list {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: hidden;
}
.cms-payment-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 10px;
    padding: 8px 12px;
    font-size: 0.9rem;
}
.cms-payment-list li + li { border-top: 1px solid rgba(0, 0, 0, 0.06); }
.cms-payment-main { flex: 0 0 auto; }
.cms-payment-list .cms-payment-meta { flex: 1 1 auto; min-width: 0; }
.cms-payment-remove {
    flex: 0 0 auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 0.82rem;
    color: #c0392b;
    cursor: pointer;
    text-decoration: underline;
}
.cms-payment-form { margin-top: 10px; display: grid; gap: 10px; }
@media (min-width: 620px) {
    .cms-payment-form { grid-template-columns: 1fr 1fr; }
    .cms-payment-form .booking-help,
    .cms-payment-form .booking-page-actions { grid-column: 1 / -1; }
}

/* Bewertungen im CMS */
.cms-tab-badge {
    display: inline-block;
    min-width: 1.25em;
    margin-left: .4em;
    padding: 0 .35em;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: .72rem;
    line-height: 1.5;
    text-align: center;
}
.cms-review {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    margin-bottom: 1rem;
    display: grid;
    gap: .6rem;
}
.cms-review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .6rem;
}
.cms-review-stars { color: #f59e0b; font-size: 1.1rem; letter-spacing: .05em; }
.cms-review-name { font-weight: 600; }
.cms-review-status {
    margin-left: auto;
    padding: .1rem .55rem;
    border-radius: 999px;
    font-size: .78rem;
    background: #e2e8f0;
    color: #475569;
}
.cms-review-status.is-published { background: #dcfce7; color: #166534; }
.cms-review-status.is-rejected { background: #fee2e2; color: #991b1b; }
.cms-review-meta { margin: 0; font-size: .82rem; color: #64748b; }
.cms-review-flag { font-size: .82rem; font-weight: 600; }
.cms-review-flag.is-ok { color: #166534; }
.cms-review-flag.is-blocked { color: #b45309; }
.cms-review-public {
    margin: 0;
    padding: .7rem .9rem;
    border-left: 3px solid #0066FF;
    background: #f8fafc;
    font-size: .95rem;
    line-height: 1.6;
}
.cms-review-empty { margin: 0; font-size: .88rem; color: #64748b; font-style: italic; }
/* Klar abgesetzt, damit niemand den internen Text versehentlich zitiert */
.cms-review-internal {
    padding: .7rem .9rem;
    border: 1px dashed #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
    font-size: .9rem;
    line-height: 1.55;
}
.cms-review-placement {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1rem;
    font-size: .88rem;
}
.cms-review-placement label { display: flex; align-items: center; gap: .35rem; }
.cms-review-actions { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Papierverbrauch nach dem Event */
.cms-paper {
    margin-top: 1rem;
    padding: 1rem 1.1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
}
.cms-paper h3 { margin: 0 0 .6rem; font-size: 1rem; }
.cms-paper-line { margin: 0 0 .7rem; font-size: .92rem; line-height: 1.55; }
/* Auffällig, aber keine Alarmfarbe - es ist eine Erinnerung, kein Fehler */
.cms-paper-missing {
    margin: 0 0 .7rem;
    padding: .55rem .75rem;
    border-left: 3px solid #f59e0b;
    background: #fffbeb;
    font-size: .9rem;
}
.cms-paper-form { margin-top: .8rem; display: grid; gap: .7rem; max-width: 22rem; }
.cms-paper-preview {
    margin: 0;
    min-height: 1.3em;
    font-size: .88rem;
    color: #0f172a;
    font-weight: 600;
}

/* Stammdaten sitzen im selben Raster wie die Betriebsfelder, brauchen aber eine
   eigene Ueberschrift: sonst steht der Name des Kunden neben dem Drucklimit und
   niemand sieht, wo der eine Block aufhoert. */
.cms-master-data {
    border-top: 1px solid var(--border, #e2e8f0);
    padding-top: 18px;
    margin-top: 4px;
}

.cms-master-head {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--text-secondary, #64748b);
}

/* ---------- Reiter "Mails" ---------- */

/* Platzhalter-Hilfe: eine Reihe anklickbarer Marken ueber den Vorlagen. */
.cms-mail-platzhalter {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}

.cms-mail-chip {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    padding: 4px 9px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 7px;
    background: #f8fafc;
    color: #475569;
    cursor: pointer;
}

.cms-mail-chip:hover {
    border-color: #94a3b8;
    background: #f1f5f9;
}

.cms-mail-liste {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 14px 0;
}

.cms-mail {
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: #ffffff;
    overflow: hidden;
}

/* Der Kopf bleibt einzeilig, solange Platz ist; der Ausloeser rutscht auf
   schmalen Fenstern unter den Namen statt ihn zu quetschen. */
.cms-mail-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
}

.cms-mail-titel {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 700;
    color: var(--text, #0f172a);
    text-align: left;
    cursor: pointer;
}

.cms-mail-titel::before {
    content: '▸ ';
    color: #94a3b8;
}

.cms-mail-kopf:has(+ .cms-mail-rumpf:not([hidden])) .cms-mail-titel::before {
    content: '▾ ';
}

.cms-mail-ausloeser {
    margin-left: auto;
    font-size: 13px;
    color: var(--text-secondary, #64748b);
}

.cms-mail-marken {
    display: flex;
    gap: 6px;
}

.cms-mail-rumpf {
    padding: 4px 16px 16px;
    border-top: 1px solid #f1f5f9;
}

.cms-mail-rumpf textarea {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}

/* Bedingungszeile: Feld, Vergleich, Wert, Entfernen. Bricht auf dem Handy um. */
.cms-mail-bedingung {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) minmax(120px, 1fr) auto;
    gap: 8px;
    margin-bottom: 8px;
}

@media (max-width: 720px) {
    .cms-mail-bedingung {
        grid-template-columns: 1fr;
    }
}

.cms-mail-farbe input[type="color"] {
    height: 38px;
    padding: 2px;
}

.cms-mail-vorschau-kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
}

.cms-mail-vorschau-betreff {
    font-weight: 700;
}

/* Die Mail bringt eigenes HTML mit und laeuft deshalb abgeschottet im Rahmen. */
.cms-mail-vorschau {
    width: 100%;
    height: 640px;
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 12px;
    background: #f1f5f9;
}