/* ════════════════════════════════════════════════════════════════════════
   PLAN-FRONTEND STYLES (Material 3)
   Version: 1.0.0 – 2026-06-04
   ════════════════════════════════════════════════════════════════════════ */

/* ─── SECTION HEADER (mit Gesamtdauer) ──────────────────────────────── */
.plans-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-main);
}
.plans-section-header .plans-total-duration {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
    background: var(--bg-secondary);
    color: var(--text-light);
    font-weight: 500;
    font-size: 0.8rem;
}

/* ─── ADD-BUTTONS (Position + Lied) ─────────────────────────────────── */
.plans-add-row {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.plans-add-row button {
    flex: 1;
    padding: 0.6rem 0.75rem;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}
.plans-add-row button:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}
.plans-add-row button:active {
    transform: translateY(0);
}
.plans-add-row button.plans-add-song {
    background: linear-gradient(135deg, var(--accent), #0088c7);
    color: #fff;
    border-color: var(--accent);
}
.plans-add-row button.plans-add-song:hover {
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 166, 235, 0.3);
}

/* ─── POSITION-CONTAINER (Wrapper um Song-Card oder Text) ───────────── */
.plan-position {
    position: relative;
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.75rem;
    margin-bottom: 0.5rem;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    touch-action: pan-y;
}
.plan-position:hover {
    border-color: var(--accent);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.plan-position.dragging {
    opacity: 0.4;
    transform: scale(0.98);
    cursor: grabbing;
}
.plan-position.drag-over-top {
    border-top: 3px solid var(--accent);
    padding-top: calc(0.75rem - 2px);
}
.plan-position.drag-over-bottom {
    border-bottom: 3px solid var(--accent);
    padding-bottom: calc(0.75rem - 2px);
}
.plan-position.swiping {
    transform: translateX(var(--swipe-x, 0px));
    transition: none;
}
.plan-position.swipe-confirm {
    background: #fee2e2;
    border-color: var(--danger);
}

/* ─── DRAG-HANDLE (Hover-only) ──────────────────────────────────────── */
.plan-drag-handle {
    position: absolute;
    left: 0.4rem;
    top: 0.4rem;
    color: var(--text-light);
    cursor: grab;
    opacity: 0;
    transition: opacity 0.2s;
    padding: 0.25rem 0.4rem;
    font-size: 1.1rem;
    line-height: 1;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 6px;
    background: var(--bg-secondary);
}
.plan-position:hover .plan-drag-handle,
.plan-drag-handle:focus {
    opacity: 0.7;
}
.plan-drag-handle:hover {
    opacity: 1 !important;
    background: var(--border);
}
.plan-drag-handle:active {
    cursor: grabbing;
}

/* ─── POSITION-HEADER (Nr. + Typ + Dauer + Aktionen) ────────────────── */
.plan-position-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    padding-left: 1.6rem; /* Platz für Drag-Handle */
    flex-wrap: wrap;
}
.plan-position-nr {
    color: var(--text-light);
    font-size: 0.85rem;
    font-weight: 700;
    min-width: 1.5rem;
    flex-shrink: 0;
}

/* ─── TYPE-BADGE (Icon + Farbe pro typ_key) ─────────────────────────── */
.plan-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-pill, 999px);
    font-size: var(--pill-font-size, 0.8rem);
    font-weight: 600;
    background: var(--type-badge-bg, var(--pill-bg-light, var(--bg-secondary)));
    color: var(--type-badge-fg, var(--pill-fg-light, var(--text-main)));
    border: 1px solid var(--type-badge-border, var(--pill-border-light, transparent));
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s, transform .15s;
    user-select: none;
}
.plan-type-badge:hover {
    background: var(--type-badge-bg-hover, var(--pill-bg-light-hover, var(--bg-secondary)));
    color: var(--type-badge-fg-hover, var(--pill-fg-light-hover, var(--text-main)));
    border-color: var(--type-badge-border-hover, var(--pill-border-light-hover, var(--border)));
    transform: translateY(-1px);
}
.plan-type-badge[data-type="lied"]   { --type-badge-bg: #dbeafe; --type-badge-fg: #1e40af; }
.plan-type-badge[data-type="text"]   { --type-badge-bg: #fef3c7; --type-badge-fg: #92400e; }
.plan-type-badge[data-type="gebet"]  { --type-badge-bg: #ede9fe; --type-badge-fg: #5b21b6; }
.plan-type-badge[data-type="musik"]  { --type-badge-bg: #d1fae5; --type-badge-fg: #065f46; }
.plan-type-badge[data-type="pause"]  { --type-badge-bg: #f3f4f6; --type-badge-fg: #6b7280; }
.plan-type-badge[data-type="ansage"] { --type-badge-bg: #fee2e2; --type-badge-fg: #991b1b; }
.plan-type-badge[data-type="sonst"]  { --type-badge-bg: #f3f4f6; --type-badge-fg: #6b7280; }

[data-theme="dark"] .plan-type-badge[data-type="lied"]   { --type-badge-bg: #1e3a8a; --type-badge-fg: #bfdbfe; }
[data-theme="dark"] .plan-type-badge[data-type="text"]   { --type-badge-bg: #78350f; --type-badge-fg: #fde68a; }
[data-theme="dark"] .plan-type-badge[data-type="gebet"]  { --type-badge-bg: #4c1d95; --type-badge-fg: #ddd6fe; }
[data-theme="dark"] .plan-type-badge[data-type="musik"]  { --type-badge-bg: #064e3b; --type-badge-fg: #a7f3d0; }
[data-theme="dark"] .plan-type-badge[data-type="pause"]  { --type-badge-bg: #374151; --type-badge-fg: #d1d5db; }
[data-theme="dark"] .plan-type-badge[data-type="ansage"] { --type-badge-bg: #7f1d1d; --type-badge-fg: #fecaca; }
[data-theme="dark"] .plan-type-badge[data-type="sonst"]  { --type-badge-bg: #374151; --type-badge-fg: #d1d5db; }

/* ─── DAUER-EDITOR (Inline) ─────────────────────────────────────────── */
.plan-position-dauer {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    margin-left: auto;
    color: var(--text-light);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    background: var(--bg-secondary);
    transition: background 0.15s;
}
.plan-position-dauer:hover {
    background: var(--border);
}
.plan-position-dauer input {
    width: 2.5rem;
    border: none;
    background: transparent;
    font: inherit;
    color: inherit;
    text-align: right;
    padding: 0;
    outline: none;
    -moz-appearance: textfield;
}
.plan-position-dauer input::-webkit-outer-spin-button,
.plan-position-dauer input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ─── POSITION-ACTIONS (Status + Edit + Delete) ─────────────────────── */
.plan-position-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}
.plan-pos-btn {
    background: none;
    border: 1px solid transparent;
    color: var(--text-light);
    cursor: pointer;
    font-size: 0.95rem;
    padding: 0.25rem 0.5rem;
    border-radius: 6px;
    line-height: 1;
    transition: all 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.plan-pos-btn:hover {
    background: var(--bg-secondary);
    color: var(--text-main);
}
.plan-pos-btn.plan-pos-delete:hover {
    color: var(--danger);
    background: #fee2e2;
}
.plan-pos-btn.plan-pos-edit:hover {
    color: var(--accent);
    background: #dbeafe;
}

/* ─── MINI-SAVE-STATUS (pro Position) ──────────────────────────────── */
.plan-pos-status {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--success);
    transition: background 0.2s;
    flex-shrink: 0;
}
.plan-pos-status[data-status="saving"] {
    background: var(--accent);
    animation: plan-pulse 1s ease-in-out infinite;
}
.plan-pos-status[data-status="error"] {
    background: var(--danger);
    animation: plan-pulse 0.8s ease-in-out infinite;
}
.plan-pos-status[data-status="offline"] {
    background: var(--text-light);
}
@keyframes plan-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.85); }
}

/* ─── SONG-CARD INNER (1:1 wie User-Frontend) ───────────────────────── */
.plan-position .song-card {
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--bg-secondary);
    pointer-events: auto;
}
.plan-position .song-card:hover {
    border-color: var(--accent);
}

/* ─── TEXT-POSITION INPUT ───────────────────────────────────────────── */
.plan-text-position {
    padding-left: 1.6rem;
}
.plan-text-position .plan-text-title {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 0.95rem;
    background: var(--bg-white);
    color: var(--text-main);
    outline: none;
    transition: border-color 0.15s;
    box-sizing: border-box;
    font-family: inherit;
}
.plan-text-position .plan-text-title:focus {
    border-color: var(--accent);
}
.plan-text-position .plan-text-title::placeholder {
    color: var(--text-light);
    font-style: italic;
}

/* ─── TYPE-Selector Popup ───────────────────────────────────────────── */
.plan-type-popup {
    position: absolute;
    z-index: 1000;
    background: var(--bg-white);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    padding: 0.4rem;
    min-width: 200px;
    border: 1px solid var(--border);
    animation: plan-popup-in 0.15s ease-out;
}
@keyframes plan-popup-in {
    from { opacity: 0; transform: scale(0.95) translateY(-4px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}
.plan-type-popup-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-main);
    transition: background 0.1s;
}
.plan-type-popup-item:hover {
    background: var(--bg-secondary);
}
.plan-type-popup-item.selected {
    background: var(--bg-secondary);
    font-weight: 600;
}
.plan-type-popup-item .plan-type-icon {
    font-size: 1.1rem;
    width: 1.5rem;
    text-align: center;
}

/* ─── EMPTY-STATE (Onboarding) ──────────────────────────────────────── */
.plans-empty-state {
    padding: 2.5rem 1.5rem;
    text-align: center;
    color: var(--text-light);
    background: var(--bg-white);
    border: 2px dashed var(--border);
    border-radius: 16px;
    margin: 1rem 0;
    transition: all 0.2s;
}
.plans-empty-state:hover {
    border-color: var(--accent);
    background: linear-gradient(135deg, #f0f9ff, #fff);
}
.plans-empty-state-icon {
    font-size: 3.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.6;
}
.plans-empty-state-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.5rem;
}
.plans-empty-state-text {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.5;
}
.plans-empty-state-tip {
    font-size: 0.8rem;
    color: var(--text-light);
    font-style: italic;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

/* ─── BOTTOM-SHEET PICKER ───────────────────────────────────────────── */
.plan-picker-overlay {
    /* erbt von .doc-sheet-overlay */
}
.plan-picker-sheet {
    /* erbt von .doc-sheet */
    max-width: 600px;
    margin: 0 auto;
}
.plan-picker-search-wrap {
    padding: 0.75rem 1rem 0.5rem;
    position: relative;
}
.plan-picker-search {
    width: 100%;
    padding: 0.7rem 1rem 0.7rem 2.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 1rem;
    background: var(--bg-secondary);
    box-sizing: border-box;
    outline: none;
    color: var(--text-main);
    transition: all 0.15s;
    -webkit-appearance: none;
    appearance: none;
}
.plan-picker-search:focus {
    background: var(--bg-white);
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(0, 166, 235, 0.15);
}
.plan-picker-search-icon {
    position: absolute;
    left: 1.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-light);
    font-size: 1rem;
    pointer-events: none;
}
.plan-picker-bereich-hint {
    padding: 0 1rem 0.5rem;
    font-size: 0.8rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.plan-picker-chips {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.plan-picker-chips::-webkit-scrollbar { display: none; }
.plan-picker-chip {
    flex-shrink: 0;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    color: var(--text-main);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.plan-picker-chip:hover {
    background: var(--bg-secondary);
}
.plan-picker-chip.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}

.plan-picker-section {
    margin-top: 0.5rem;
}
.plan-picker-section-title {
    padding: 0.5rem 1rem 0.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-light);
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    position: sticky;
    top: 0;
    background: var(--bg-white);
    z-index: 1;
}
.plan-picker-section-title::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.plan-picker-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    transition: background 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.plan-picker-item:last-child {
    border-bottom: none;
}
.plan-picker-item:hover, .plan-picker-item.active {
    background: var(--bg-secondary);
}
.plan-picker-item-nr {
    flex-shrink: 0;
    width: 3rem;
    text-align: center;
    font-weight: 700;
    color: var(--accent);
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}
.plan-picker-item-info {
    flex: 1;
    min-width: 0;
}
.plan-picker-item-title {
    font-weight: 600;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.95rem;
}
.plan-picker-item-meta {
    font-size: 0.78rem;
    color: var(--text-light);
    margin-top: 0.15rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.plan-picker-item-badges {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.plan-picker-badge {
    font-size: 0.95rem;
    opacity: 0.65;
    line-height: 1;
}
.plan-picker-badge.has { opacity: 1; }
.plan-picker-empty {
    padding: 3rem 1.5rem;
    text-align: center;
    color: var(--text-light);
}
.plan-picker-empty-icon {
    font-size: 3rem;
    margin-bottom: 0.5rem;
    opacity: 0.4;
}
.plan-picker-skeleton {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}
.plan-picker-skeleton-bar {
    height: 0.8rem;
    background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--border) 50%, var(--bg-secondary) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
    animation: plan-shimmer 1.5s infinite;
}
@keyframes plan-shimmer {
    from { background-position: -200% 0; }
    to { background-position: 200% 0; }
}

/* ─── UNDO-TOAST ────────────────────────────────────────────────────── */
.plan-undo-toast {
    position: fixed;
    bottom: 5rem;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 0.75rem 1.25rem;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    z-index: 10000;
    font-size: 0.9rem;
    animation: plan-undo-in 0.2s ease-out;
}
@keyframes plan-undo-in {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}
.plan-undo-toast button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    padding: 0.3rem 0.8rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}
.plan-undo-toast button:hover {
    background: rgba(255,255,255,0.1);
}

/* ─── ANIMATIONEN ───────────────────────────────────────────────────── */
.plan-position-enter {
    animation: plan-slide-in 0.3s ease-out;
}
.plan-position-exit {
    animation: plan-fade-out 0.2s ease-in forwards;
    pointer-events: none;
}
@keyframes plan-slide-in {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
@keyframes plan-fade-out {
    to {
        opacity: 0;
        transform: scale(0.95);
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
        border-width: 0;
    }
}

/* ─── SWIPE-TO-DELETE ──────────────────────────────────────────────── */
.plan-position .plan-swipe-action {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--danger);
    color: #fff;
    font-weight: 600;
    border-radius: 0 12px 12px 0;
    pointer-events: none;
}

/* ─── DARK-MODE ANPASSUNGEN ─────────────────────────────────────────── */
[data-theme="dark"] .plan-position {
    background: #1f2937;
    border-color: #374151;
}
[data-theme="dark"] .plan-position:hover {
    border-color: var(--accent);
}
[data-theme="dark"] .plan-text-position .plan-text-title {
    background: #111827;
    border-color: #374151;
    color: var(--text-main);
}
[data-theme="dark"] .plan-type-popup {
    background: #1f2937;
    border-color: #374151;
}
[data-theme="dark"] .plan-type-popup-item:hover,
[data-theme="dark"] .plan-type-popup-item.selected {
    background: #374151;
}
[data-theme="dark"] .plan-position .song-card {
    background: #111827;
    border-color: #374151;
}
[data-theme="dark"] .plans-empty-state {
    background: #1f2937;
    border-color: #374151;
}
[data-theme="dark"] .plans-empty-state:hover {
    background: #111827;
}
[data-theme="dark"] .plan-picker-search {
    background: #111827;
    border-color: #374151;
    color: var(--text-main);
}
[data-theme="dark"] .plan-picker-search:focus {
    background: #1f2937;
}
[data-theme="dark"] .plan-picker-chip {
    background: #1f2937;
    border-color: #374151;
    color: var(--text-main);
}
[data-theme="dark"] .plan-picker-section-title {
    background: #1f2937;
}
[data-theme="dark"] .plan-picker-item:hover,
[data-theme="dark"] .plan-picker-item.active {
    background: #111827;
}
[data-theme="dark"] .plan-picker-empty {
    color: var(--text-light);
}
[data-theme="dark"] .plan-position-dauer {
    background: #111827;
    color: var(--text-light);
}
[data-theme="dark"] .plans-section-header .plans-total-duration {
    background: #111827;
    color: var(--text-light);
}
[data-theme="dark"] .plans-add-row button {
    background: #1f2937;
    border-color: #374151;
    color: var(--text-main);
}

/* ─── RESPONSIVE ───────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .plan-position {
        padding: 0.6rem;
    }
    .plan-position-header {
        gap: 0.3rem;
    }
    .plan-type-badge {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
    }
    .plan-position-dauer {
        font-size: 0.75rem;
    }
    .plan-pos-btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.85rem;
    }
}
@media (max-width: 380px) {
    .plan-position-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .plan-position-dauer {
        margin-left: 0;
    }
    .plan-position-actions {
        align-self: flex-end;
    }
}

/* ─── ACCESSIBILITY ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .plan-position,
    .plan-position-enter,
    .plan-position-exit,
    .plan-picker-item,
    .plan-type-badge,
    .plan-picker-chip {
        animation: none !important;
        transition: none !important;
    }
}
.plan-drag-handle:focus-visible,
.plan-type-badge:focus-visible,
.plan-pos-btn:focus-visible,
.plan-picker-chip:focus-visible,
.plan-picker-item:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ════════════════════════════════════════════════════════════════════════
   v6.8.0 – READ-ONLY-VIEW + NOTIZ-EDITOR
   ════════════════════════════════════════════════════════════════════════ */

/* ─── VIEW-MODE (read-only) ────────────────────────────────────────── */
.plan-view-mode {
    animation: plan-view-fade 0.18s ease-out;
}
@keyframes plan-view-fade {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.plan-edit-btn {
    transition: background 0.15s, transform 0.1s;
}
.plan-edit-btn:hover {
    background: var(--accent-hover, #0090d0) !important;
}
.plan-edit-btn:active {
    transform: scale(0.97);
}

.plans-finish-btn {
    transition: background 0.15s, transform 0.1s, opacity 0.15s;
}
.plans-finish-btn:hover:not(:disabled) {
    background: var(--success-hover, #0d9668) !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.18);
}
.plans-finish-btn:active:not(:disabled) {
    transform: scale(0.97);
}
.plans-finish-btn:disabled {
    opacity: 0.7;
    cursor: wait;
}

.plan-view-note-public,
.plan-view-note-internal {
    animation: plan-note-fade 0.2s ease-out;
}
@keyframes plan-note-fade {
    from { opacity: 0; transform: translateY(-2px); }
    to   { opacity: 1; transform: translateY(0); }
}

.plan-type-badge-readonly {
    cursor: default !important;
}
.plan-type-badge-readonly:hover {
    background: var(--bg-secondary) !important;
}

/* ─── POSITION NOTE – Read-Only (sichtbar wenn Inhalt) ─────────────── */
.plan-position-note-view {
    margin-top: 0.6rem;
    padding: 0.6rem 0.85rem;
    background: var(--bg-light, #f8fafc);
    border-left: 3px solid var(--accent, #00a6eb);
    border-radius: 6px;
    font-size: 0.88rem;
    color: var(--text-main);
    word-wrap: break-word;
}
.plan-position-note-internal {
    border-left-color: var(--warning, #f59e0b);
    background: #fef3c7;
}
.plan-position-note-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-light, #94a3b8);
    margin-bottom: 0.3rem;
    letter-spacing: 0.04em;
}
.plan-position-note-internal .plan-position-note-label {
    color: #92400e;
}
.plan-position-note-content {
    white-space: pre-wrap;
    line-height: 1.4;
}

/* ─── POSITION NOTE – Editor (inline, kollabierbar) ────────────────── */
.plan-pos-notes {
    margin-top: 0.7rem;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--border);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.plan-pos-note-toggle {
    align-self: flex-start;
    background: none;
    border: 1px dashed var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.7rem;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--text-light);
    font-family: inherit;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.plan-pos-note-toggle:hover {
    border-color: var(--accent, #00a6eb);
    color: var(--accent, #00a6eb);
    background: rgba(0, 166, 235, 0.05);
}
.plan-pos-note-toggle:active {
    transform: scale(0.97);
}

.plan-pos-note-edit {
    animation: plan-note-fade 0.18s ease-out;
}
.plan-pos-note-edit label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.3rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.plan-pos-note-textarea {
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid var(--border);
    font-size: 0.88rem;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    min-height: 3rem;
    resize: vertical;
    background: var(--bg-white);
    color: var(--text-main);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.plan-pos-note-textarea:focus {
    outline: none;
    border-color: var(--accent, #00a6eb);
    box-shadow: 0 0 0 3px rgba(0, 166, 235, 0.12);
}

.plan-pos-note-block.collapsed {
    margin: 0;
}

/* ─── EDIT-MODE Header (Plan-bearbeiten → View zurück) ─────────────── */
.plan-view-mode .plan-position-header {
    margin-bottom: 0.4rem;
}

/* ═══════════════════════════════════════════════════════════════════════
   DATEIANHAENGE (NEU v6.9.0)
   ═══════════════════════════════════════════════════════════════════════ */

.plan-attachments-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin: 0.5rem 0;
}

.plan-attachment-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.7rem;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-white);
    transition: background 0.15s;
}

.plan-attachment-item:hover {
    background: var(--bg-light, #f8fafc);
}

.plan-attachment-icon {
    font-size: 1.2rem;
    flex-shrink: 0;
    width: 1.6rem;
    text-align: center;
}

.plan-attachment-name {
    flex: 1;
    font-size: 0.85rem;
    color: var(--text-main);
    word-break: break-all;
    min-width: 0;
}

.plan-attachment-size {
    font-size: 0.78rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.plan-attachment-user {
    font-size: 0.78rem;
    color: var(--text-light);
    white-space: nowrap;
    flex-shrink: 0;
    display: none;
}

@media (min-width: 600px) {
    .plan-attachment-user {
        display: inline;
    }
}

.plan-attachment-download {
    text-decoration: none;
    font-size: 1rem;
    color: var(--accent, #00a6eb);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0.2rem;
    line-height: 1;
}

.plan-attachment-delete {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.1rem;
    color: var(--danger, #ef4444);
    padding: 0.2rem;
    line-height: 1;
    flex-shrink: 0;
}

.plan-attachments-editor {
    margin-top: 0.5rem;
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    .plan-attachment-item {
        border-color: var(--border, #3f3f46);
        background: var(--bg-secondary, #27272a);
    }
    .plan-attachment-item:hover {
        background: var(--bg-light, #2d2d30);
    }
}

/* ════════════════════════════════════════════════════════════════════════
   PZ INTEGRATION STYLES
   Version: 1.0.0 – Unified Calendar + Sidebar + Layout
   ════════════════════════════════════════════════════════════════════════ */

/* ─── Theme: PZ Event Type Colors ─────────────────────────────────── */
.pz-event-typ-sonntagsgottesdienst { --event-color: #3b82f6; }
.pz-event-typ-familien_gottesdienst { --event-color: #8b5cf6; }
.pz-event-typ-abendmahls_gottesdienst { --event-color: #f59e0b; }
.pz-event-typ-taufe { --event-color: #06b6d4; }
.pz-event-typ-jugend_gottesdienst { --event-color: #ec4899; }
.pz-event-typ-gebetsabend { --event-color: #6366f1; }
.pz-event-typ-probe { --event-color: #22c55e; }
.pz-event-typ-andacht { --event-color: #a855f7; }
.pz-event-typ-bibelforum { --event-color: #8b5cf6; }
.pz-event-typ-bibel_gebetsstunde { --event-color: #6366f1; }
.pz-event-typ-bibelabend { --event-color: #4f46e5; }
.pz-event-typ-zeugnisabend { --event-color: #ec4899; }
.pz-event-typ-evangelisation { --event-color: #f59e0b; }
.pz-event-typ-missionsgottesdienst { --event-color: #d97706; }
.pz-event-typ-gemeinschaftsstunde { --event-color: #14b8a6; }
.pz-event-typ-hochzeit { --event-color: #f472b6; }
.pz-event-typ-seminar { --event-color: #0ea5e9; }
.pz-event-typ-freizeit { --event-color: #22c55e; }
.pz-event-typ-sondergottesdienst { --event-color: #a855f7; }
.pz-event-typ-vereins_event { --event-color: #78716c; }
.pz-status-entwurf { --status-color: #9ca3af; }
.pz-status-angefragt { --status-color: #f59e0b; }
.pz-status-bestaetigt { --status-color: #10b981; }
.pz-status-abgesagt { --status-color: #ef4444; }
.pz-status-abgeschlossen { --status-color: #3b82f6; }



/* ─── Layout ──────────────────────────────────────────────────────── */
.pz-app {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: clip;
    background: var(--bg-body, #f0f4f8);
    color: var(--text-main, #2d3748);
}
.pz-app.dark {
    --primary: #4da3ff;
    --primary-hover: #79baff;
    --primary-light: #1e3a5f;
    --bg-body: #1a1a1a;
    --bg-card: #2d2d2d;
    --bg-header: #000000;
    --bg-sidebar: #222222;
    --bg-toolbar: #262626;
    --text-main: #e0e0e0;
    --text-light: #94a3b8;
    --border: #475569;
    --border-light: #333333;
}

.pz-main-layout {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* ─── Header ──────────────────────────────────────────────────────── */
.pz-header {
    background: var(--bg-header, #ffffff);
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 0 12px;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.pz-header-left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.pz-toggle-btn {
    font-size: 1.2rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-main, #2d3748);
    line-height: 1;
}
.pz-toggle-btn:hover {
    background: var(--bg-toolbar, #f8fafc);
}
.pz-header-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main, #2d3748);
    white-space: nowrap;
}
.pz-header-subtitle {
    font-size: var(--font-xs, 0.75rem);
    color: var(--text-light, #718096);
}
.pz-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
}
.pz-view-tabs {
    display: flex;
    gap: 2px;
    background: var(--bg-toolbar, #f8fafc);
    border-radius: 8px;
    padding: 2px;
}
.pz-view-tab {
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    border: none;
    background: transparent;
    color: var(--text-light, #718096);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.pz-view-tab:hover {
    color: var(--text-main, #2d3748);
}
.pz-view-tab.active {
    background: var(--bg-card, #ffffff);
    color: var(--primary, #005fa8);
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.pz-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
}
.pz-dark-toggle {
    font-size: 1rem;
    padding: 4px 8px;
    border-radius: 6px;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}

/* ─── Sidebar ──────────────────────────────────────────────────────── */
.pz-sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--bg-sidebar, #f8fafc);
    border-right: 1px solid var(--border, #e2e8f0);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    transition: width 0.2s, padding 0.2s;
}
.pz-sidebar.collapsed {
    width: 0;
    padding: 0;
    overflow: hidden;
}
.pz-sidebar-section {
    margin-bottom: 8px;
}
.pz-sidebar-section h3 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light, #718096);
    margin-bottom: 6px;
    padding: 0 4px;
}
.pz-sidebar-views {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pz-sidebar-views li {
    margin: 0;
}
.pz-view-link {
    display: block;
    width: 100%;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    font-weight: 500;
    border: none;
    background: transparent;
    color: var(--text-main, #2d3748);
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.pz-view-link:hover {
    background: var(--bg-card, #ffffff);
}
.pz-view-link.active {
    background: var(--primary-light, #e0f2fe);
    color: var(--primary, #005fa8);
}
.pz-sidebar-standorte {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pz-sidebar-standorte li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    font-size: 0.85rem;
    color: var(--text-main, #2d3748);
}
.pz-sidebar-standorte input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.pz-sidebar-motto {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pz-motto-item {
    font-size: 0.85rem;
    border-radius: 6px;
    padding: 6px 8px;
}
.pz-sidebar-saved {
    list-style: none;
    padding: 0;
    margin: 0;
}
.pz-saved-view-link {
    display: block;
    width: 100%;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    border: none;
    background: transparent;
    color: var(--text-main, #2d3748);
    cursor: pointer;
    text-align: left;
}
.pz-saved-view-link:hover {
    background: var(--primary-light, #e0f2fe);
}

/* ─── Toolbar ──────────────────────────────────────────────────────── */
.pz-toolbar {
    background: var(--bg-toolbar, #f8fafc);
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 4px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
}
.pz-toolbar-nav {
    display: flex;
    align-items: center;
    gap: 2px;
}
.pz-nav-btn {
    font-size: 1.2rem;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #2d3748);
    cursor: pointer;
    line-height: 1;
    transition: all 0.15s;
}
.pz-nav-btn:hover {
    background: var(--bg-toolbar, #f8fafc);
    border-color: var(--primary, #005fa8);
}
.pz-today-btn {
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #2d3748);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.pz-today-btn:hover {
    border-color: var(--primary, #005fa8);
    color: var(--primary, #005fa8);
}
.pz-toolbar-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
}
.pz-toolbar-filters select,
.pz-toolbar-filters input {
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #2d3748);
    font-size: 0.8rem;
}
.pz-toolbar-info {
    font-size: 0.75rem;
    color: var(--text-light, #718096);
    white-space: nowrap;
}

/* ─── Content Area ──────────────────────────────────────────────────── */
.pz-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow: hidden;
}
.pz-main {
    flex: 1;
    padding: 0;
    overflow-y: auto;
    position: relative;
}

/* ─── Common Buttons (PZ style) ──────────────────────────────────────── */
.pz-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
    white-space: nowrap;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-card, #ffffff);
    color: var(--text-main, #2d3748);
    cursor: pointer;
}
.pz-btn:hover {
    background: var(--bg-toolbar, #f8fafc);
    border-color: var(--primary, #005fa8);
}
.pz-btn-primary {
    background: var(--primary, #005fa8);
    color: #fff;
    border-color: var(--primary, #005fa8);
}
.pz-btn-primary:hover {
    background: var(--primary-hover, #004a80);
}
.pz-btn-sm {
    padding: 4px 10px;
    font-size: 0.75rem;
}
.pz-btn-xs {
    padding: 2px 6px;
    font-size: 0.7rem;
}
.pz-btn-icon {
    padding: 4px;
    min-width: 28px;
    justify-content: center;
}
.pz-btn-danger {
    color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}
.pz-btn-danger:hover {
    background: var(--danger, #ef4444);
    color: #fff;
}
.pz-btn.active {
    background: var(--primary, #005fa8);
    color: #fff;
    border-color: var(--primary, #005fa8);
}

/* ─── Selection / Checkbox ──────────────────────────────────────────── */
.pz-select-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--text-light, #718096);
    cursor: pointer;
    margin-left: 8px;
}
.pz-select-event {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

/* ─── Calendar: Month Grid ──────────────────────────────────────────── */
.pz-calendar-month {
    width: 100%;
}
.pz-month-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.pz-month-grid th {
    padding: 8px 4px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light, #718096);
    border-bottom: 2px solid var(--border, #e2e8f0);
    background: var(--bg-toolbar, #f8fafc);
}
.pz-month-grid th.sun {
    color: var(--danger, #ef4444);
}
.pz-month-grid td {
    border: 1px solid var(--border-light, #f1f5f9);
    vertical-align: top;
    padding: 4px;
    min-height: 90px;
    height: 90px;
    width: 14.28%;
    background: var(--bg-card, #ffffff);
}
.pz-month-day {
    cursor: pointer;
    transition: background 0.15s;
}
.pz-month-day:hover {
    background: var(--bg-toolbar, #f8fafc);
}
.pz-month-day.today {
    background: var(--primary-light, #e0f2fe);
}
.pz-month-day.today .pz-month-day-label {
    background: var(--primary, #005fa8);
    color: #fff;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pz-month-day.has-conflict {
    box-shadow: inset 0 -2px 0 var(--danger, #ef4444);
}
.pz-month-empty {
    background: var(--bg-body, #f0f4f8) !important;
}
.pz-month-day-label {
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
}
.pz-month-events {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.pz-month-event {
    font-size: 0.72rem;
    border-radius: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: opacity 0.15s;
}
.pz-month-event:hover {
    opacity: 0.85;
}
.pz-month-more {
    font-size: 0.7rem;
    color: var(--text-light, #718096);
    cursor: pointer;
    text-align: center;
    padding: 1px 0;
}
.pz-month-more:hover {
    color: var(--primary, #005fa8);
}

/* ─── Calendar: Week View ───────────────────────────────────────────── */
.pz-calendar-week {
    width: 100%;
}
.pz-week-grid {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.pz-week-grid th {
    padding: 6px 4px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-light, #718096);
    border-bottom: 2px solid var(--border, #e2e8f0);
    background: var(--bg-toolbar, #f8fafc);
}
.pz-week-grid th.sun {
    color: var(--danger, #ef4444);
}
.pz-week-grid th.today {
    background: var(--primary-light, #e0f2fe);
    color: var(--primary, #005fa8);
}
.pz-week-grid td {
    border: 1px solid var(--border-light, #f1f5f9);
    vertical-align: top;
    padding: 4px;
    height: 300px;
    width: 14.28%;
    background: var(--bg-card, #ffffff);
}
.pz-week-day.today {
    background: var(--primary-light, #e0f2fe);
}
.pz-week-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pz-week-event {
    font-size: 0.8rem;
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    transition: opacity 0.15s;
    line-height: 1.3;
}
.pz-week-event:hover {
    opacity: 0.85;
}
.pz-week-event-time {
    font-weight: 600;
    color: var(--primary, #005fa8);
}
.pz-week-event-loc {
    color: var(--text-light, #718096);
}

/* ─── Calendar: Day View ────────────────────────────────────────────── */
.pz-calendar-day {
    max-width: 600px;
    margin: 0 auto;
    padding: 16px;
}
.pz-day-header {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 16px;
    color: var(--text-main, #2d3748);
}
.pz-today-badge {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--primary, #005fa8);
    color: #fff;
    margin-left: 8px;
}
.pz-day-column {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pz-day-event {
    cursor: pointer;
    transition: all 0.15s;
}
.pz-day-event:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.05));
}
.pz-day-event-time {
    font-weight: 600;
    color: var(--primary, #005fa8);
}
.pz-day-event-title {
    font-weight: 600;
    color: var(--text-main, #2d3748);
}
.pz-day-event-loc {
    color: var(--text-light, #718096);
}
.pz-day-event-edit {
    background: var(--bg-card, #ffffff);
    border: 1px solid var(--border, #e2e8f0);
    border-radius: 4px;
    padding: 2px 8px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.15s;
}
.pz-day-event-edit:hover {
    border-color: var(--primary, #005fa8);
    color: var(--primary, #005fa8);
}

/* ─── Calendar: Year View ────────────────────────────────────────────── */
.pz-calendar-year {
    width: 100%;
}
.pz-year-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 16px;
}
.pz-year-month {
    background: var(--bg-card, #ffffff);
    border-radius: 8px;
    padding: 8px;
    border: 1px solid var(--border, #e2e8f0);
}
.pz-year-month-name {
    font-size: 0.85rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 4px;
    color: var(--text-main, #2d3748);
}
.pz-year-grid-inner {
    width: 100%;
    border-collapse: collapse;
}
.pz-year-grid-inner td {
    border: 1px solid var(--border-light, #f1f5f9);
    text-align: center;
    padding: 2px;
    font-size: 0.7rem;
    width: 14.28%;
    cursor: pointer;
}
.pz-year-empty {
    background: var(--bg-body, #f0f4f8) !important;
    border: none !important;
}
.pz-year-day {
    transition: background 0.15s;
}
.pz-year-day:hover {
    background: var(--bg-toolbar, #f8fafc);
}
.pz-year-day.today {
    background: var(--primary-light, #e0f2fe);
    font-weight: 700;
}
.pz-year-day-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
}
.pz-year-day.today .pz-year-day-label {
    background: var(--primary, #005fa8);
    color: #fff;
    border-radius: 50%;
}
.pz-year-events-count {
    font-size: 0.6rem;
    color: var(--primary, #005fa8);
    font-weight: 600;
}

/* ─── Detail Panel (Slide-in) ────────────────────────────────────────── */
.pz-detail-panel {
    position: fixed;
    top: 48px;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: calc(100vh - 48px);
    background: var(--bg-card, #ffffff);
    z-index: 200;
    box-shadow: -4px 0 12px rgba(0,0,0,0.1);
    overflow-y: auto;
    border-left: 1px solid var(--border, #e2e8f0);
}
.pz-detail-inner {
    padding: 0;
}
.pz-detail-header {
    padding: 16px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    display: flex;
    align-items: center;
    gap: 8px;
    position: sticky;
    top: 0;
    background: var(--bg-card, #ffffff);
    z-index: 1;
}
.pz-detail-header h2 {
    font-size: 1rem;
    font-weight: 700;
    flex: 1;
    margin: 0;
}
.pz-detail-close {
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: var(--text-light, #718096);
    line-height: 1;
}
.pz-detail-close:hover {
    background: var(--bg-toolbar, #f8fafc);
    color: var(--text-main, #2d3748);
}
.pz-detail-body {
    padding: 16px;
    font-size: 0.9rem;
    line-height: 1.6;
}
.pz-detail-body p {
    margin-bottom: 8px;
}
.pz-detail-actions {
    padding: 12px 16px;
    border-top: 1px solid var(--border, #e2e8f0);
    position: sticky;
    bottom: 0;
    background: var(--bg-card, #ffffff);
}

/* ─── Batch Bar ──────────────────────────────────────────────────────── */
.pz-batch-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg-card, #ffffff);
    border-top: 2px solid var(--primary, #005fa8);
    padding: 8px 16px;
    z-index: 150;
    display: none;
    align-items: center;
    gap: 12px;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.1);
}
.pz-batch-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
}
.pz-batch-inner span {
    font-weight: 600;
    font-size: 0.9rem;
    flex: 1;
}
.pz-batch-inner button {
    padding: 6px 16px;
    border-radius: 8px;
    border: 1px solid var(--border, #e2e8f0);
    background: var(--bg-card, #ffffff);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
}
.pz-batch-inner button:hover {
    border-color: var(--primary, #005fa8);
}
.pz-batch-inner button.danger {
    color: var(--danger, #ef4444);
    border-color: var(--danger, #ef4444);
}
.pz-batch-inner button.danger:hover {
    background: var(--danger, #ef4444);
    color: #fff;
}

/* ─── Toast + Dialog Overlay ─────────────────────────────────────────── */
.pz-toast {
    position: fixed;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 500;
    background: var(--text-main, #2d3748);
    color: var(--bg-card, #ffffff);
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 0.875rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}
.pz-toast.show {
    opacity: 1;
}
/* ─── Dialog Overlay (einheitlich oben links, Tastatur-sicher) ────────── */
.pz-dialog-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 300;
    display: none;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    --pz-dialog-gap: 20px;
}
.pz-dialog-overlay.open {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    padding: max(var(--pz-dialog-gap), env(safe-area-inset-top, 0px)) max(var(--pz-dialog-gap), env(safe-area-inset-right, 0px)) max(var(--pz-dialog-gap), env(safe-area-inset-bottom, 0px)) max(var(--pz-dialog-gap), env(safe-area-inset-left, 0px));
    animation: pz-overlay-in 0.18s ease-out;
}
.pz-dialog-overlay.open .pz-dialog {
    animation: pz-dialog-pop 0.18s ease-out;
}
@keyframes pz-overlay-in {
    from { background: rgba(0, 0, 0, 0); }
    to   { background: rgba(0, 0, 0, 0.5); }
}
@keyframes pz-dialog-pop {
    from { opacity: 0; transform: translateY(-6px) scale(0.985); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 768px) {
    .pz-dialog-overlay { --pz-dialog-gap: 16px; }
}
@media (max-width: 480px) {
    .pz-dialog-overlay { --pz-dialog-gap: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) {
    .pz-dialog-overlay { --pz-dialog-gap: 8px; }
}
.pz-dialog {
    max-height: calc(var(--pz-vh, 100dvh) - (2 * var(--pz-dialog-gap, 20px)));
}

/* ─── Stats View ──────────────────────────────────────────────────────── */
.pz-stats {
    padding: 16px;
    max-width: 600px;
    margin: 0 auto;
}
.pz-stats h2 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 16px;
}
.pz-stats ul {
    list-style: disc;
    padding-left: 20px;
    margin-top: 8px;
}
.pz-stats li {
    font-size: 0.9rem;
    margin-bottom: 4px;
}

/* ─── Badge ──────────────────────────────────────────────────────────── */
.pz-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-pill, 999px);
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--primary-light, color-mix(in srgb, var(--pill-bg-light, #eef2f7) 70%, var(--primary, #005fa8)));
    color: var(--primary, #005fa8);
    transition: background .15s;
}

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .pz-sidebar {
        width: 48px;
        overflow: hidden;
    }
    .pz-sidebar-section h3,
    .pz-sidebar-views li,
    .pz-sidebar-standorte li,
    .pz-sidebar-motto,
    .pz-sidebar-saved {
        display: none;
    }
    .pz-toolbar {
        gap: 4px;
        padding: 6px 8px;
    }
    .pz-main {
        padding: 0;
    }
    .pz-year-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .pz-detail-panel {
        width: 100vw;
        top: 48px;
        height: calc(100vh - 48px);
    }
    .pz-month-grid td {
        height: 70px;
        min-height: 70px;
    }
    .pz-month-event {
        font-size: 0.65rem;
    }
    .pz-toolbar-filters select,
    .pz-toolbar-filters input {
        max-width: 120px;
    }
}
@media (max-width: 480px) {
    .pz-year-grid {
        grid-template-columns: 1fr;
    }
    .pz-month-grid td {
        height: 55px;
        min-height: 55px;
    }
    .pz-view-tab {
        padding: 4px 8px;
        font-size: 0.75rem;
    }
}

/* ─── Dark Mode Toggle ────────────────────────────────────────────────── */
.pz-app.dark .pz-header {
    background: var(--bg-header, #000000);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-sidebar {
    background: var(--bg-sidebar, #222222);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-toolbar {
    background: var(--bg-toolbar, #262626);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-month-grid td {
    background: var(--bg-card, #2d2d2d);
    border-color: var(--border-light, #333333);
}
.pz-app.dark .pz-month-grid th {
    background: var(--bg-toolbar, #262626);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-week-grid td {
    background: var(--bg-card, #2d2d2d);
}
.pz-app.dark .pz-week-grid th {
    background: var(--bg-toolbar, #262626);
}
.pz-app.dark .pz-year-month {
    background: var(--bg-card, #2d2d2d);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-detail-panel {
    background: var(--bg-card, #2d2d2d);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-batch-bar {
    background: var(--bg-card, #2d2d2d);
    border-color: var(--border, #475569);
}
.pz-app.dark .pz-month-empty {
    background: var(--bg-body, #1a1a1a) !important;
}
.pz-app.dark .pz-year-empty {
    background: var(--bg-body, #1a1a1a) !important;
}
.pz-app.dark .pz-detail-header {
    background: var(--bg-card, #2d2d2d);
}
.pz-app.dark .pz-detail-actions {
    background: var(--bg-card, #2d2d2d);
}
.pz-app.dark .pz-nav-btn {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-main, #e0e0e0);
}
.pz-app.dark .pz-today-btn {
    background: var(--bg-card, #2d2d2d);
    color: var(--text-main, #e0e0e0);
}
.pz-app.dark .pz-view-link:hover {
    background: var(--bg-card, #2d2d2d);
}
.pz-app.dark .pz-view-link.active {
    background: var(--primary-light, #1e3a5f);
}

/* ─── Print ──────────────────────────────────────────────────────────── */
@media print {
    .pz-header,
    .pz-toolbar,
    .pz-sidebar,
    .pz-batch-bar,
    .pz-detail-panel,
    .pz-dialog-overlay,
    .pz-toast,
    .pz-nav-btn,
    .pz-today-btn {
        display: none !important;
    }
    .pz-app {
        display: block !important;
        height: auto !important;
    }
    .pz-main {
        overflow: visible !important;
    }
    .pz-main-layout {
        display: block !important;
    }
}

/* ─── Heatmap ──────────────────────────────────────────────────────────── */
.pz-heatmap-wrap {
    padding: 16px;
    max-width: 900px;
    margin: 0 auto;
}
.pz-heatmap {
    display: grid;
    grid-template-columns: 200px repeat(12, 1fr);
    gap: 2px;
    margin-top: 12px;
}
.pz-heatmap-label {
    font-size: 0.8rem;
    padding: 4px 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    font-weight: 500;
}
.pz-heatmap-cell {
    padding: 4px;
    text-align: center;
    font-size: 0.75rem;
    border-radius: 4px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.15s;
}
.pz-heatmap-cell:hover {
    opacity: 0.8;
}
.pz-heatmap-header {
    font-weight: 700;
    font-size: 0.8rem;
    text-align: center;
    padding: 4px;
    color: var(--text-light, #718096);
}
.pz-heatmap-tools {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 16px;
}
.pz-heatmap-legend {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 0.75rem;
    color: var(--text-light, #718096);
}
.pz-heatmap-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}
.pz-heatmap-legend-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid var(--border, #e2e8f0);
}

/* ════════════════════════════════════════════════════════════════════
   MOTTO / THEMA BADGES
   ════════════════════════════════════════════════════════════════════ */

.plan-motto-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    font-size: 0.72rem;
    font-weight: 500;
    padding: 0.1rem 0.4rem;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    line-height: 1.4;
    transition: opacity 0.15s;
}
.plan-motto-badge:hover { opacity: 0.85; }

.plan-motto-thema-area {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding: 0.5rem 0.65rem;
    background: var(--bg-light, #f8fafc);
    border-radius: 8px;
    font-size: 0.82rem;
}

.plan-motto-badge-global {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    line-height: 1.4;
}

@media (max-width: 600px) {
    .plan-motto-badge {
        max-width: 120px;
        font-size: 0.65rem;
    }
    .plan-motto-thema-area {
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }
}

/* ============================================================================
   ICON SYSTEM — SVG-Icon-Klassen für das Lucide-basierte Icon-Sprite
   ============================================================================ */
.pz-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

.pz-icon-wrapper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    line-height: 1;
}

.pz-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375em;
    padding: 0.5em;
    min-width: 44px;
    min-height: 44px;
    vertical-align: middle;
}

.pz-icon-btn .pz-icon {
    pointer-events: none;
}

/* ═══ ICON COLOR SYSTEM ════════════════════════════════════════════ */
.pz-icon-primary { color: var(--primary); }
.pz-icon-danger { color: var(--danger); }
.pz-icon-success { color: var(--success); }
.pz-icon-warning { color: var(--warning); }
.pz-icon-info { color: var(--info); }
.pz-icon-muted { color: var(--text-muted); }

/* ═══ INLINE ICON SYSTEM ════════════════════════════════════════════ */
.pz-icon-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: -0.125em;
    line-height: 1;
    flex-shrink: 0;
}
.pz-icon-inline svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.pz-icon-inline svg[style*="stroke:"] {
    stroke: currentColor;
}

/* ═══ ICON ANIMATION KEYFRAMES ═════════════════════════════════════ */
@keyframes pz-anim-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes pz-anim-pulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.15); opacity: 0.7; }
}
@keyframes pz-anim-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}
@keyframes pz-anim-shake {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-2px); }
    20%, 40%, 60%, 80% { transform: translateX(2px); }
}
@keyframes pz-anim-draw {
    from { stroke-dashoffset: 24; }
    to { stroke-dashoffset: 0; }
}

/* Animation classes */
.pz-icon-anim-spin {
    animation: pz-anim-spin 2s linear infinite;
    transform-origin: center center;
}
.pz-icon-anim-pulse {
    animation: pz-anim-pulse 1.5s ease-in-out infinite;
}
.pz-icon-anim-bounce {
    animation: pz-anim-bounce 1s ease-in-out infinite;
}
.pz-icon-anim-shake {
    animation: pz-anim-shake 0.6s ease-in-out infinite;
}
.pz-icon-anim-draw svg {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: pz-anim-draw 1.5s ease forwards;
}

/* Animation duration overrides */
.pz-icon-dur-fast { animation-duration: 0.8s; }
.pz-icon-dur-normal { animation-duration: 2s; }
.pz-icon-dur-slow { animation-duration: 3s; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .pz-icon-anim-spin,
    .pz-icon-anim-pulse,
    .pz-icon-anim-bounce,
    .pz-icon-anim-shake {
        animation: none !important;
    }
    .pz-icon-anim-draw svg {
        animation: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* Autocomplete-Prompt (Person-Auswahl) */
.v11-autocomplete-overlay .v11-ac-list > div:hover {
    background: var(--bg-body, #f3f4f6);
}
.v11-autocomplete-overlay .v11-ac-input:focus {
    outline: 2px solid var(--primary, #3b82f6);
    outline-offset: -1px;
}