:root {
    --bg: #f5f6f8;
    --surface: #ffffff;
    --surface-soft: #f0f2f4;
    --text: #18202a;
    --muted: #68727f;
    --line: #dde2e7;
    --accent: #254f44;
    --accent-dark: #1c3c34;
    --shadow: 0 12px 36px rgba(21, 31, 43, 0.08);
    --radius: 18px;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: var(--bg);
    color: var(--text);
}
a { color: inherit; }
button, input, select, textarea { font: inherit; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 250px 1fr; }
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 18px;
    background: #151b22;
    color: #f7f9fb;
    display: flex;
    flex-direction: column;
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 34px; }
.brand-mark {
    width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
    background: #eef3f1; color: #1f493e; font-weight: 800;
}
.brand strong { display: block; font-size: 16px; }
.brand span { display: block; color: #98a4b1; font-size: 13px; margin-top: 2px; }
.nav { display: grid; gap: 6px; }
.nav-link { text-decoration: none; padding: 11px 13px; border-radius: 10px; color: #c6ced7; font-size: 14px; }
.nav-link:hover { background: rgba(255,255,255,.05); color: white; }
.nav-link.active { background: #eef3f1; color: #183a31; font-weight: 700; }
.sidebar-footer { margin-top: auto; color: #9da8b4; font-size: 12px; display: flex; align-items: center; gap: 8px; }
.status-dot { width: 8px; height: 8px; background: #73b397; border-radius: 999px; }

.main { min-width: 0; }
.topbar {
    min-height: 96px; padding: 22px 32px; display: flex; align-items: center; justify-content: space-between;
    border-bottom: 1px solid var(--line); background: rgba(255,255,255,.82); backdrop-filter: blur(12px);
}
.topbar h1 { margin: 2px 0 0; font-size: 27px; letter-spacing: -.02em; }
.eyebrow { margin: 0; color: var(--muted); text-transform: uppercase; letter-spacing: .11em; font-size: 11px; font-weight: 800; }
.user-chip { padding: 9px 13px; background: var(--surface-soft); border: 1px solid var(--line); border-radius: 999px; font-size: 13px; font-weight: 700; }
.mobile-menu { display: none; border: 0; background: transparent; font-size: 24px; }
.content { padding: 28px 32px 44px; max-width: 1500px; margin: 0 auto; }

.hero-card {
    background: linear-gradient(135deg, #ffffff, #eef4f1);
    border: 1px solid var(--line); border-radius: var(--radius); padding: 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--shadow);
}
.hero-card h2 { margin: 6px 0 10px; font-size: clamp(24px, 3vw, 36px); letter-spacing: -.03em; }
.muted { color: var(--muted); margin: 0; max-width: 720px; }
.button { border: 1px solid var(--line); border-radius: 10px; padding: 10px 15px; background: white; cursor: pointer; font-weight: 750; text-decoration: none; white-space: nowrap; }
.button.primary { background: var(--accent); color: white; border-color: var(--accent); }
.button.primary:hover { background: var(--accent-dark); }

.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 18px 0; }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 20px; }
.stat-card span { display: block; color: var(--muted); font-size: 13px; }
.stat-card strong { display: block; font-size: 31px; margin-top: 12px; letter-spacing: -.03em; }
.two-column { display: grid; grid-template-columns: 1.45fr 1fr; gap: 18px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; }
.panel-head { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin-bottom: 20px; }
.panel h3 { margin: 5px 0 0; font-size: 20px; }
.workflow { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.workflow li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; }
.workflow li > span { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--surface-soft); font-weight: 800; }
.workflow strong, .workflow small { display: block; }
.workflow small { color: var(--muted); margin-top: 3px; line-height: 1.45; }
.status-list { display: grid; gap: 12px; }
.status-list > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--line); padding-bottom: 12px; }
.status-list small { color: var(--muted); }
.badge { display: inline-flex; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 800; }
.badge.draft { background: #edf0f3; }
.badge.pending { background: #fff1c9; color: #6e5511; }
.badge.signed { background: #e2edf8; color: #24517d; }
.badge.confirmed { background: #dfeee7; color: #245744; }
.empty-state { min-height: 280px; display: grid; place-content: center; text-align: center; padding: 30px; border: 1px dashed #c9d0d7; border-radius: 14px; background: #fafbfc; }
.empty-state strong { font-size: 18px; }
.empty-state p { max-width: 620px; color: var(--muted); line-height: 1.55; }
.settings-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.setting-card { padding: 18px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 6px; }
.setting-card span { color: var(--muted); font-size: 13px; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: fixed; z-index: 20; width: 260px; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 20px 0 40px rgba(0,0,0,.15); }
    .sidebar.open { transform: translateX(0); }
    .mobile-menu { display: block; }
    .topbar { justify-content: flex-start; gap: 15px; padding: 18px 20px; }
    .user-chip { margin-left: auto; }
    .content { padding: 20px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .two-column { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .topbar h1 { font-size: 22px; }
    .user-chip { display: none; }
    .content { padding: 14px; }
    .hero-card { align-items: stretch; flex-direction: column; padding: 20px; }
    .button { width: 100%; text-align: center; }
    .stats-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .stat-card { padding: 15px; }
    .stat-card strong { font-size: 25px; }
    .panel { padding: 16px; }
    .panel-head { align-items: stretch; flex-direction: column; }
    .settings-grid { grid-template-columns: 1fr; }
}

/* Kalender und Reservierungen */
body.modal-open { overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.button.compact { padding: 9px 12px; min-width: 42px; text-align: center; }
.button.ghost { background: transparent; }
.icon-button { width: 38px; height: 38px; border: 1px solid var(--line); background: var(--surface); border-radius: 10px; display: inline-grid; place-items: center; cursor: pointer; color: var(--muted); font-size: 24px; line-height: 1; }
.icon-button:hover { color: var(--text); background: var(--surface-soft); }
.icon-button.small { width: 32px; height: 32px; font-size: 20px; }

.calendar-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.calendar-toolbar h2 { margin: 5px 0 0; font-size: 28px; letter-spacing: -.025em; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.calendar-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.calendar-panel { padding: 0; overflow: hidden; }
.calendar-legend { min-height: 54px; display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 12px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.legend-dot.draft { background: #9aa4ae; }
.legend-dot.pending { background: #d5a936; }
.legend-dot.signed { background: #5686ad; }
.legend-dot.confirmed { background: #4f8b71; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { border-bottom: 1px solid var(--line); background: #fafbfc; }
.calendar-weekdays div { padding: 10px 12px; text-align: right; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.calendar-day { position: relative; min-height: 132px; padding: 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); }
.calendar-day:nth-child(7n) { border-right: 0; }
.calendar-day.outside { background: #fafbfc; color: #a5adb6; }
.calendar-day.today { box-shadow: inset 0 0 0 2px rgba(37, 79, 68, .38); z-index: 1; }
.calendar-day-head { display: flex; justify-content: space-between; align-items: center; min-height: 22px; margin-bottom: 8px; }
.day-number { font-size: 13px; font-weight: 800; }
.today-label { font-size: 10px; color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.calendar-add { width: 100%; min-height: 76px; border: 1px dashed transparent; border-radius: 10px; background: transparent; color: #a0a9b2; cursor: pointer; display: grid; place-content: center; text-align: center; transition: .15s ease; }
.calendar-add span { font-size: 24px; line-height: 1; font-weight: 400; }
.calendar-add small { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; margin-top: 4px; }
.calendar-day.free:hover .calendar-add { border-color: #c6d2ce; background: #f5f9f7; color: var(--accent); }
.calendar-past-label { display: block; text-align: center; color: #c3c9cf; font-size: 11px; padding-top: 24px; }
.calendar-event { display: block; border-left: 3px solid #9aa4ae; background: #f3f5f6; border-radius: 8px; padding: 8px 9px; text-decoration: none; margin-top: 6px; overflow: hidden; }
.calendar-event strong, .calendar-event span, .calendar-event small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calendar-event strong { font-size: 11px; }
.calendar-event span { font-size: 12px; margin-top: 3px; }
.calendar-event small { font-size: 10px; color: var(--muted); margin-top: 2px; }
.calendar-event.pending { border-color: #d5a936; background: #fff7df; }
.calendar-event.signed { border-color: #5686ad; background: #edf5fb; }
.calendar-event.deposit { border-color: #7b77a8; background: #f2f0fa; }
.calendar-event.confirmed { border-color: #4f8b71; background: #eaf4ef; }
.calendar-event.completed { border-color: #858f98; opacity: .78; }
.calendar-side { position: sticky; top: 116px; }
.panel-head.slim { margin-bottom: 15px; }
.compact-workflow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.compact-workflow li { position: relative; display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding-bottom: 19px; }
.compact-workflow li:not(:last-child)::before { content: ''; position: absolute; left: 5px; top: 14px; bottom: 3px; width: 1px; background: var(--line); }
.step-dot { width: 11px; height: 11px; border-radius: 999px; border: 2px solid #c8ced4; background: white; margin-top: 3px; z-index: 1; }
.step-dot.active { border-color: var(--accent); background: var(--accent); box-shadow: 0 0 0 4px #edf4f1; }
.compact-workflow strong, .compact-workflow small { display: block; }
.compact-workflow strong { font-size: 13px; }
.compact-workflow small { color: var(--muted); margin-top: 3px; line-height: 1.4; }
.info-box { padding: 14px; border-radius: 12px; background: #f4f7f6; border: 1px solid #dce6e2; }
.info-box strong { font-size: 12px; }
.info-box p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.45; }

.modal-backdrop { position: fixed; inset: 0; z-index: 100; background: rgba(14, 20, 27, .48); backdrop-filter: blur(3px); padding: 24px; display: none; align-items: center; justify-content: center; }
.modal-backdrop.open { display: flex; }
.modal { width: min(820px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--surface); border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.22); border: 1px solid rgba(255,255,255,.6); }
.modal-head { position: sticky; top: 0; z-index: 2; padding: 20px 22px 17px; display: flex; align-items: center; justify-content: space-between; gap: 15px; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 5px 0 0; font-size: 22px; }
.reservation-form { padding: 0 22px 22px; }
.form-section { padding: 20px 0; border-bottom: 1px solid var(--line); }
.form-section-head { display: grid; grid-template-columns: 32px 1fr; gap: 10px; align-items: start; margin-bottom: 16px; }
.form-section-head > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: #eef3f1; color: var(--accent); font-size: 12px; font-weight: 850; }
.form-section-head strong, .form-section-head small { display: block; }
.form-section-head strong { font-size: 14px; }
.form-section-head small { color: var(--muted); font-size: 12px; margin-top: 3px; }
.form-grid { display: grid; gap: 14px; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span { color: #4f5965; font-size: 12px; font-weight: 750; }
.field input, .field select, .field textarea, .filter-bar input, .filter-bar select { width: 100%; border: 1px solid #cfd5db; border-radius: 10px; background: white; color: var(--text); padding: 10px 11px; outline: none; transition: border-color .15s ease, box-shadow .15s ease; }
.field input:focus, .field select:focus, .field textarea:focus, .filter-bar input:focus, .filter-bar select:focus { border-color: #78978e; box-shadow: 0 0 0 3px rgba(37,79,68,.08); }
.field textarea { resize: vertical; min-height: 84px; }
.span-2 { grid-column: 1 / -1; }
.money-field { align-content: start; }
.money-field > div { position: relative; }
.money-field input { padding-right: 36px; }
.money-field b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 9px; padding-top: 20px; }
.form-alert, .page-alert { border: 1px solid #efd0d0; background: #fff6f6; color: #7e3434; border-radius: 12px; padding: 13px 15px; }
.form-alert { margin: 18px 22px 0; }
.form-alert strong { font-size: 13px; }
.form-alert ul { margin: 7px 0 0; padding-left: 20px; font-size: 12px; line-height: 1.5; }
.page-alert { margin-bottom: 16px; }
.page-alert p { margin: 0; font-size: 13px; }
.page-alert p + p { margin-top: 4px; }

.toast { position: fixed; z-index: 120; top: 20px; right: 24px; max-width: min(420px, calc(100vw - 32px)); display: flex; align-items: center; gap: 14px; padding: 13px 14px 13px 16px; background: #173e34; color: white; border-radius: 12px; box-shadow: 0 16px 45px rgba(0,0,0,.18); font-size: 13px; font-weight: 700; transition: opacity .2s ease, transform .2s ease; }
.toast.hide { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.toast-close { border: 0; background: transparent; color: inherit; font-size: 20px; cursor: pointer; padding: 0 2px; line-height: 1; opacity: .8; }

.reservations-head { margin-bottom: 16px; }
.filter-bar { display: grid; grid-template-columns: minmax(220px, 1fr) 190px 170px auto auto; gap: 9px; padding: 14px; margin-bottom: 16px; border: 1px solid var(--line); background: #fafbfc; border-radius: 12px; }
.search-field { min-width: 0; }
.table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.data-table th { padding: 10px 12px; text-align: left; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--line); }
.data-table td { padding: 14px 12px; border-bottom: 1px solid #e8ebee; vertical-align: middle; font-size: 13px; }
.data-table tbody tr:hover { background: #fafbfc; }
.data-table td strong, .data-table td small { display: block; }
.data-table td small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.text-right { text-align: right !important; }
.row-action { width: 42px; text-align: right; }
.badge.deposit { background: #ece9f7; color: #585083; }
.badge.cancelled { background: #f7e7e7; color: #873f3f; }
.badge.completed { background: #eaedf0; color: #5e6770; }
.compact-empty { min-height: 220px; }

@media (max-width: 1120px) {
    .calendar-layout { grid-template-columns: 1fr; }
    .calendar-side { position: static; }
    .filter-bar { grid-template-columns: minmax(220px, 1fr) 180px 160px auto; }
    .filter-bar .ghost { grid-column: 1 / -1; justify-self: start; width: auto; }
}

@media (max-width: 780px) {
    .calendar-toolbar { align-items: stretch; flex-direction: column; }
    .toolbar-actions { justify-content: flex-start; }
    .toolbar-actions .button.primary { width: auto; margin-left: auto; }

    /* Mobile Monatsansicht: alle sieben Wochentage bleiben gleichzeitig sichtbar. */
    .calendar-panel { width: 100%; max-width: 100%; overflow-x: hidden; }
    .calendar-weekdays, .calendar-grid { width: 100%; min-width: 0; grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .calendar-weekdays div { min-width: 0; padding: 9px 1px; text-align: center; font-size: 10px; letter-spacing: .04em; }
    .calendar-day { min-width: 0; min-height: 86px; padding: 5px 4px; overflow: hidden; }
    .calendar-day-head { min-height: 18px; margin-bottom: 3px; }
    .day-number { font-size: 12px; }
    .today-label { width: 6px; height: 6px; overflow: hidden; border-radius: 999px; background: var(--accent); color: transparent; font-size: 0; }
    .calendar-add { min-width: 0; min-height: 52px; padding: 0; border-radius: 7px; }
    .calendar-add span { font-size: 18px; }
    .calendar-add small { display: none; }
    .calendar-past-label { padding-top: 16px; font-size: 9px; }
    .calendar-event { min-width: 0; height: 18px; margin-top: 4px; padding: 0; border-left-width: 0; border-radius: 5px; }
    .calendar-event strong, .calendar-event span, .calendar-event small { display: none; }
    .calendar-event.inquiry { background: #d5a936; }
    .calendar-event.details { background: #7c93aa; }
    .calendar-event.conditions { background: #6e8a75; }
    .calendar-event.pending { background: #d5a936; }
    .calendar-event.signed { background: #5686ad; }
    .calendar-event.deposit { background: #7b77a8; }
    .calendar-event.confirmed { background: #4f8b71; }
    .calendar-event.completed { background: #858f98; }

    /* Mobile Grundregel: Modals bleiben als klar erkennbare, zentrierte Dialoge. */
    .modal-backdrop {
        align-items: center;
        justify-content: center;
        padding: max(14px, env(safe-area-inset-top)) 14px max(14px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }
    .modal {
        width: min(820px, 100%);
        max-height: calc(100vh - 28px);
        max-height: calc(100dvh - 28px);
        margin: auto;
        border-radius: 18px;
        overflow: auto;
        overscroll-behavior: contain;
    }
    .filter-bar { grid-template-columns: 1fr 1fr; }
    .filter-bar .search-field { grid-column: 1 / -1; }
    .filter-bar .button { width: auto; }
}

@media (max-width: 620px) {
    .calendar-toolbar h2 { font-size: 24px; }
    .toolbar-actions { display: grid; grid-template-columns: 42px 1fr 42px; }
    .toolbar-actions .button.primary { grid-column: 1 / -1; width: 100%; margin: 2px 0 0; }
    .calendar-legend { gap: 10px 14px; }
    .calendar-legend { padding: 11px 12px; font-size: 11px; }
    .calendar-day { min-height: 76px; padding: 4px 3px; }
    .calendar-weekdays div { padding: 8px 0; font-size: 9px; }
    .calendar-add { min-height: 44px; }
    .calendar-past-label { padding-top: 13px; font-size: 8px; }
    .calendar-event { height: 15px; margin-top: 3px; }
    .modal-head { padding: 17px 16px 14px; }
    .reservation-form { padding: 0 16px 18px; }
    .form-alert { margin: 15px 16px 0; }
    .form-grid.cols-2 { grid-template-columns: 1fr; }
    .span-2 { grid-column: auto; }
    .modal-actions { position: sticky; bottom: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); padding: 14px 0 2px; }
    .modal-actions .button { width: 50%; }
    .filter-bar { grid-template-columns: 1fr; }
    .filter-bar .search-field, .filter-bar .ghost { grid-column: auto; }
    .filter-bar .button { width: 100%; }
    .data-table { min-width: 0; }
    .data-table thead { display: none; }
    .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
    .data-table tr { padding: 14px 0; border-bottom: 1px solid var(--line); }
    .data-table td { display: grid; grid-template-columns: 105px 1fr; gap: 10px; padding: 6px 3px; border: 0; text-align: left !important; }
    .data-table td::before { content: attr(data-label); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; padding-top: 2px; }
    .data-table .row-action { display: none; }
    .toast { top: 12px; right: 16px; }
}

/* Anfrage-Workflow v0.3 */
.badge.inquiry { background: #fff1c9; color: #6e5511; }
.badge.details { background: #e7edf4; color: #405a73; }
.legend-dot.inquiry { background: #d5a936; }
.legend-dot.details { background: #7c93aa; }
.calendar-event.inquiry { border-left-color: #d5a936; background: #fff9e8; }
.calendar-event.details { border-left-color: #7c93aa; background: #f2f6fa; }
.toast.warning { background: #785d17; }
.workflow-stats { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.process-note { margin-top: 18px; padding: 14px 15px; border: 1px solid #dce6e2; background: #f4f7f6; border-radius: 12px; }
.process-note strong { display: block; font-size: 13px; }
.process-note p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.next-step { color: #46515d; font-size: 12px; line-height: 1.4; }
.reservations-table { min-width: 1050px; }
.calendar-event.range-middle { opacity: .9; }

/* Öffentliche Selbstauskunft */
.public-body { min-height: 100vh; background: #f3f5f6; }
.public-shell { width: min(860px, calc(100% - 28px)); margin: 0 auto; padding: 42px 0 28px; }
.public-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.public-brand { display: flex; align-items: center; gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.public-brand strong, .public-brand span { display: block; }
.public-brand strong { font-size: 14px; }
.public-brand span { color: var(--muted); font-size: 12px; margin-top: 2px; }
.public-intro { padding: 28px 24px 18px; }
.public-intro h1 { margin: 6px 0 10px; font-size: clamp(25px, 5vw, 34px); letter-spacing: -.03em; }
.public-intro > p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.readonly-range { margin: 0 24px 4px; padding: 16px 17px; border-radius: 13px; background: #eef3f1; border: 1px solid #dce6e2; }
.readonly-range span, .readonly-range strong { display: block; }
.readonly-range span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.readonly-range strong { margin-top: 6px; font-size: 16px; }
.public-form { padding: 0 24px 24px; }
.public-form .field input[readonly] { background: #f4f5f6; color: #626b75; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.choice-card { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 14px; border: 1px solid #cfd5db; border-radius: 12px; cursor: pointer; }
.choice-card:has(input:checked) { border-color: #78978e; background: #f3f7f5; box-shadow: 0 0 0 3px rgba(37,79,68,.06); }
.choice-card input { margin-top: 3px; }
.choice-card strong, .choice-card small { display: block; }
.choice-card strong { font-size: 13px; }
.choice-card small { margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.4; }
.member-number-field { margin-top: 14px; }
.public-form-actions { display: flex; justify-content: flex-end; padding-top: 20px; }
.public-status { margin: 26px 24px; padding: 18px; border-radius: 13px; }
.public-status strong { display: block; font-size: 16px; }
.public-status p { margin: 7px 0 0; line-height: 1.5; font-size: 13px; }
.public-status.success { border: 1px solid #cfe2d9; background: #f0f7f3; color: #254f44; }
.public-status.error { border: 1px solid #efd0d0; background: #fff6f6; color: #7e3434; }
.public-footer { margin: 14px 0 0; color: #7b848e; text-align: center; font-size: 11px; }

@media (max-width: 1100px) {
    .workflow-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
    .workflow-stats { grid-template-columns: 1fr 1fr; }
    .choice-grid { grid-template-columns: 1fr; }
    .public-shell { width: min(100% - 18px, 860px); padding-top: 10px; }
    .public-card { border-radius: 16px; }
    .public-brand { padding: 16px; }
    .public-intro { padding: 22px 16px 15px; }
    .readonly-range { margin: 0 16px; }
    .public-form { padding: 0 16px 18px; }
    .public-status { margin: 18px 16px; }
    .public-form-actions .button { width: 100%; }
}

/* Vorgangsdetail und Vertragskonditionen v0.4 */
.badge.conditions { background: #e9efe9; color: #47614f; }
.legend-dot.conditions { background: #6e8a75; }
.calendar-event.conditions { border-left-color: #6e8a75; background: #f0f5f1; }
.workflow-stats { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.clickable-row { cursor: pointer; }
.clickable-row:focus-within { background: #fafbfc; }

.detail-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.back-link { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 750; }
.back-link:hover { color: var(--text); }
.detail-toolbar-actions { display: flex; align-items: center; gap: 9px; }
.detail-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 18px; }
.detail-hero h2 { margin: 5px 0 7px; font-size: clamp(25px, 4vw, 34px); letter-spacing: -.03em; }
.detail-range { margin: 0; color: var(--muted); font-size: 14px; }
.detail-next-step { min-width: 235px; padding: 14px 16px; border: 1px solid #dce6e2; background: #f4f7f6; border-radius: 12px; }
.detail-next-step span, .detail-next-step strong { display: block; }
.detail-next-step span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.detail-next-step strong { margin-top: 5px; font-size: 13px; line-height: 1.4; }
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.detail-main, .detail-side { display: grid; gap: 18px; }
.detail-side { position: relative; align-self: stretch; align-content: start; min-height: 100%; }
.detail-section { min-width: 0; }
.detail-list { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.detail-list > div { padding: 14px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.detail-list > div:nth-child(odd):not(.span-2) { padding-right: 18px; }
.detail-list > div:nth-child(even):not(.span-2) { padding-left: 18px; border-left: 1px solid var(--line); }
.detail-list dt, .detail-list dd { margin: 0; }
.detail-list dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.detail-list dd { margin-top: 6px; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.detail-list dd a { color: var(--accent); }
.amounts-list dd { font-variant-numeric: tabular-nums; }
.action-strip { margin-top: 18px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid #e6dfc8; background: #fffaf0; border-radius: 12px; }
.action-strip strong, .action-strip small { display: block; }
.action-strip strong { font-size: 13px; }
.action-strip small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.action-strip-buttons { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.action-strip-buttons form { margin: 0; }
.saved-hint { color: var(--muted); font-size: 11px; }
.conditions-form { display: grid; gap: 18px; }
.form-divider { height: 1px; background: var(--line); }
.cost-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fafbfc; }
.cost-summary > div { padding: 13px 14px; border-right: 1px solid var(--line); }
.cost-summary > div:last-child { border-right: 0; }
.cost-summary span, .cost-summary strong { display: block; }
.cost-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cost-summary strong { margin-top: 5px; font-size: 15px; font-variant-numeric: tabular-nums; }
.cost-summary-total { background: #f1f6f3; }
.areas-fieldset { margin: 0; padding: 0; border: 0; }
.areas-fieldset legend { margin-bottom: 9px; color: #4f5965; font-size: 12px; font-weight: 750; }
.area-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.area-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 11px; border: 1px solid #cfd5db; border-radius: 10px; background: #fff; cursor: pointer; font-size: 12px; font-weight: 700; }
.area-choice:has(input:checked) { border-color: #78978e; background: #f3f7f5; box-shadow: 0 0 0 2px rgba(37,79,68,.05); }
.area-choice input { margin: 0; }
.conditions-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.form-help { color: var(--muted); font-size: 11px; line-height: 1.45; }
.next-stage-card { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: linear-gradient(135deg, #ffffff, #eef4f1); }
.next-stage-card h3 { margin: 5px 0 7px; }
.next-stage-card p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 720px; }
.button:disabled { cursor: not-allowed; opacity: .52; }
.detail-progress-slot { position: static; align-self: start; }
.detail-workflow { list-style: none; margin: 0; padding: 0; }
.detail-workflow li { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; padding-bottom: 18px; }
.detail-workflow li:not(:last-child)::before { content: ''; position: absolute; left: 8px; top: 18px; bottom: 3px; width: 1px; background: var(--line); }
.workflow-marker { position: relative; z-index: 1; width: 17px; height: 17px; margin-top: 1px; display: grid; place-items: center; border: 2px solid #cbd2d8; border-radius: 999px; background: #fff; color: #fff; font-size: 10px; font-weight: 900; }
.detail-workflow li.done .workflow-marker { border-color: #5b8974; background: #5b8974; }
.detail-workflow li.active .workflow-marker { border-color: var(--accent); box-shadow: 0 0 0 4px #edf4f1; }
.detail-workflow strong, .detail-workflow small { display: block; }
.detail-workflow strong { font-size: 12px; }
.detail-workflow small { margin-top: 3px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.detail-workflow li:not(.done):not(.active) { opacity: .62; }
.mini-detail-list { margin: 0; display: grid; gap: 11px; }
.mini-detail-list div { display: grid; gap: 3px; }
.mini-detail-list dt, .mini-detail-list dd { margin: 0; }
.mini-detail-list dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.mini-detail-list dd { font-size: 11px; line-height: 1.4; }

@media (max-width: 1180px) {
    .workflow-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .detail-layout { grid-template-columns: minmax(0, 1fr) 280px; }
    .detail-side { grid-template-columns: 1fr; }
    .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 820px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .detail-hero { align-items: stretch; flex-direction: column; }
    .detail-next-step { min-width: 0; }
    .detail-side { grid-template-columns: 1fr; }
    .detail-list { grid-template-columns: 1fr; }
    .detail-list > div:nth-child(odd):not(.span-2), .detail-list > div:nth-child(even):not(.span-2) { padding-left: 0; padding-right: 0; border-left: 0; }
    .detail-list .span-2 { grid-column: auto; }
    .action-strip { align-items: stretch; flex-direction: column; }
    .action-strip-buttons { align-items: stretch; flex-direction: column; }
    .action-strip-buttons .button { width: 100%; }
    .cost-summary { grid-template-columns: 1fr; }
    .cost-summary > div { border-right: 0; border-bottom: 1px solid var(--line); }
    .cost-summary > div:last-child { border-bottom: 0; }
    .area-grid { grid-template-columns: 1fr 1fr; }
    .conditions-actions { align-items: stretch; flex-direction: column; }
    .conditions-actions .button { width: 100%; }
    .next-stage-card { align-items: stretch; flex-direction: column; }
}

@media (max-width: 500px) {
    .workflow-stats { grid-template-columns: 1fr 1fr; }
    .area-grid { grid-template-columns: 1fr; }
}

/* v0.5 – temporäre Identitätsprüfung */
.identity-upload-section { scroll-margin-top: 18px; }
.identity-privacy-note { margin: 0 0 18px; padding: 15px 16px; border: 1px solid #d9e7e2; background: #f5faf8; border-radius: 13px; }
.identity-privacy-note strong { display: block; margin-bottom: 5px; font-size: 13px; color: #204f43; }
.identity-privacy-note p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; }
.upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.upload-card { display: flex; flex-direction: column; gap: 7px; padding: 16px; border: 1px dashed #b9c9c4; border-radius: 14px; background: #fbfcfc; cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.upload-card:hover { border-color: #6f978b; background: #f7faf9; transform: translateY(-1px); }
.upload-card-title { font-size: 14px; font-weight: 800; color: var(--text); }
.upload-card-hint { font-size: 12px; color: var(--muted); }
.upload-card input[type="file"] { width: 100%; margin-top: 4px; font-size: 12px; color: var(--muted); }
.upload-card input[type="file"]::file-selector-button { margin-right: 10px; border: 1px solid var(--line); background: white; color: var(--text); border-radius: 9px; padding: 8px 10px; font-weight: 750; cursor: pointer; }
.upload-file-name { display: block; min-height: 18px; font-size: 12px; font-weight: 700; color: #356a5d; overflow-wrap: anywhere; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 16px; padding: 13px 14px; border-radius: 12px; background: #f7f8f8; color: var(--text); font-size: 12.5px; line-height: 1.5; cursor: pointer; }
.consent-check input { margin-top: 3px; flex: 0 0 auto; }

.identity-review-section .section-copy { margin: -2px 0 15px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.identity-state { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap; }
.identity-state.pending { background: #fff4d7; color: #775913; }
.identity-state.verified { background: #e6f4ee; color: #245c4d; }
.identity-document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.identity-document-card { width: 100%; appearance: none; font: inherit; text-align: left; cursor: pointer; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfc; color: var(--text); text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.identity-document-card:hover { border-color: #9eb6af; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(20, 45, 38, .06); }
.identity-document-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 11px; background: #e9f1ee; color: #315f53; font-size: 12px; font-weight: 900; }
.identity-document-card > span:nth-child(2) { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.identity-document-card strong { font-size: 13px; }
.identity-document-card small { color: var(--muted); font-size: 11px; }
.identity-document-card b { color: #315f53; font-size: 11px; white-space: nowrap; }
.identity-review-actions { margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.identity-review-actions > div { display: flex; flex-direction: column; gap: 3px; }
.identity-review-actions strong { font-size: 13px; }
.identity-review-actions small { color: var(--muted); font-size: 11px; line-height: 1.4; }
.identity-verified-box { display: flex; align-items: flex-start; gap: 13px; padding: 15px; border-radius: 13px; background: #f0f8f5; border: 1px solid #d5ebe3; }
.identity-verified-mark { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #2d705e; color: white; font-weight: 900; }
.identity-verified-box strong { display: block; margin: 1px 0 4px; font-size: 14px; }
.identity-verified-box p { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.identity-verified-box small { color: #436c61; font-size: 11px; font-weight: 700; }
.identity-missing-box, .identity-waiting-box { padding: 14px 15px; border-radius: 12px; background: #f7f8f8; border: 1px solid var(--line); }
.identity-missing-box strong, .identity-waiting-box strong { display: block; margin-bottom: 4px; font-size: 13px; }
.identity-missing-box p, .identity-waiting-box p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.conditions-locked-card { display: grid; grid-template-columns: 46px 1fr; gap: 14px; align-items: start; padding: 18px; border-style: dashed; }
.conditions-locked-card .locked-mark { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: #eef1f1; color: #667875; font-size: 12px; font-weight: 900; }
.conditions-locked-card h3 { margin: 3px 0 5px; font-size: 17px; }
.conditions-locked-card p:last-child { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.compact-confirm-modal { width: min(570px, 100%); }
.confirm-modal-body { padding: 20px 22px 22px; }
.confirm-modal-body > p { margin: 0 0 14px; color: var(--muted); line-height: 1.55; }
.deletion-warning { padding: 13px 14px; border-radius: 12px; background: #fff7e7; border: 1px solid #f0dfb8; display: flex; flex-direction: column; gap: 3px; }
.deletion-warning strong { color: #6c5217; font-size: 13px; }
.deletion-warning span { color: #7a6b49; font-size: 11px; line-height: 1.45; }
.confirm-form { margin-top: 18px; display: flex; justify-content: flex-end; gap: 9px; }

@media (max-width: 720px) {
    .upload-grid, .identity-document-grid { grid-template-columns: 1fr; }
    .identity-review-actions { align-items: stretch; flex-direction: column; }
    .identity-review-actions .button { width: 100%; }
    .identity-document-card { grid-template-columns: 42px 1fr; }
    .identity-document-card b { grid-column: 2; }
    .conditions-locked-card { grid-template-columns: 1fr; }
    .confirm-form { flex-direction: column-reverse; }
    .confirm-form .button { width: 100%; }
}

/* v0.5.4 – geschützte Ausweisvorschau mit Datenabgleich und Zoom bis 500 % */
.identity-preview-backdrop { z-index: 130; }
.identity-preview-modal { width: min(1120px, 100%); height: min(92vh, 900px); display: flex; flex-direction: column; overflow: hidden; }
.identity-preview-head { flex: 0 0 auto; }
.identity-preview-compare { flex: 0 0 auto; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: 10px; padding: 12px 16px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: #f7f9f8; }
.identity-preview-compare > div { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.identity-preview-compare span { color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.identity-preview-compare strong { color: var(--text); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.identity-preview-toolbar { flex: 0 0 auto; min-height: 48px; padding: 7px 12px; display: flex; align-items: center; justify-content: center; gap: 8px; border-top: 1px solid var(--line); background: var(--surface); }
.identity-zoom-button, .identity-zoom-reset { appearance: none; border: 1px solid var(--line); background: #f8faf9; color: var(--text); min-height: 34px; border-radius: 9px; font: inherit; font-weight: 800; cursor: pointer; }
.identity-zoom-button { width: 38px; padding: 0; font-size: 20px; line-height: 1; }
.identity-zoom-reset { padding: 0 12px; font-size: 11px; }
.identity-zoom-button:hover, .identity-zoom-reset:hover { border-color: #9eb6af; background: #eef4f1; }
.identity-zoom-value { min-width: 58px; text-align: center; font-size: 11px; font-weight: 900; color: #315f53; }
.identity-preview-body { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; background: #e8eceb; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
@media (pointer: fine) {
    .identity-preview-body { cursor: grab; }
    .identity-preview-body.is-panning { cursor: grabbing; scroll-behavior: auto; }
}
.identity-preview-stage { min-width: 100%; min-height: 100%; display: grid; place-items: center; padding: 14px; box-sizing: border-box; }
.identity-preview-loading { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px; color: var(--muted); font-size: 13px; font-weight: 700; line-height: 1.5; text-align: center; background: #e8eceb; }
.identity-preview-loading.hidden { display: none; }
.identity-preview-image { display: none; width: auto; height: auto; max-width: none; max-height: none; object-fit: contain; margin: auto; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; box-shadow: 0 8px 28px rgba(20, 45, 38, .16); }
.identity-preview-image.visible { display: block; }
.identity-preview-footer { flex: 0 0 auto; min-height: 58px; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border-top: 1px solid var(--line); background: var(--surface); }
.identity-preview-footer span { color: var(--muted); font-size: 11px; line-height: 1.4; max-width: 760px; }

@media (max-width: 780px) {
    .identity-preview-backdrop {
        align-items: center;
        justify-content: center;
        padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom));
    }
    .identity-preview-modal {
        width: 100%;
        height: calc(100vh - 20px);
        height: calc(100dvh - 20px);
        max-height: calc(100vh - 20px);
        max-height: calc(100dvh - 20px);
        margin: auto;
        border-radius: 15px;
        border: 1px solid rgba(255,255,255,.6);
    }
    .identity-preview-head { padding-top: max(12px, env(safe-area-inset-top)); padding-bottom: 10px; }
    .identity-preview-head .eyebrow { display: none; }
    .identity-preview-head h2 { font-size: 17px; }
    .identity-preview-compare { grid-template-columns: 1fr; gap: 7px; padding: 9px 12px; }
    .identity-preview-compare > div { display: grid; grid-template-columns: 110px minmax(0, 1fr); align-items: start; gap: 8px; }
    .identity-preview-compare span { padding-top: 2px; font-size: 9px; }
    .identity-preview-compare strong { font-size: 12px; }
    .identity-preview-toolbar { min-height: 46px; padding: 6px 10px; position: relative; z-index: 3; }
    .identity-zoom-button { width: 42px; min-height: 36px; }
    .identity-zoom-reset { min-height: 36px; padding-inline: 10px; }
    .identity-preview-stage { padding: 10px; }
    .identity-preview-footer { padding: 8px 10px max(8px, env(safe-area-inset-bottom)); align-items: stretch; flex-direction: column; gap: 7px; }
    .identity-preview-footer span { font-size: 9px; }
    .identity-preview-footer .button { width: 100%; min-height: 38px; }
}

@media (max-width: 430px) {
    .identity-preview-compare > div { grid-template-columns: 92px minmax(0, 1fr); }
    .identity-zoom-value { min-width: 48px; }
    .identity-zoom-reset { font-size: 10px; }
}

/* Mobile Kalenderstatus v0.5.9
   Große, vollständig antippbare Statusfläche mit mittig ausgerichtetem Normaltext. */
@media (max-width: 780px) {
    .calendar-event {
        width: 100%;
        min-width: 0;
        min-height: 52px;
        height: 52px;
        margin-top: 0;
        padding: 2px 3px;
        border: 0;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        overflow: hidden;
        opacity: 1;
        box-sizing: border-box;
        touch-action: manipulation;
    }

    .calendar-event strong {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 2px;
        overflow: hidden;
        white-space: normal;
        text-overflow: clip;
        text-align: center;
        font-size: 7px;
        line-height: 1.12;
        font-weight: 500;
        letter-spacing: 0;
        overflow-wrap: anywhere;
    }

    .calendar-event span,
    .calendar-event small {
        display: none;
    }

    .calendar-event.inquiry,
    .calendar-event.pending {
        background: #d5a936;
        color: #2f270a;
    }

    .calendar-event.details {
        background: #7c93aa;
        color: #ffffff;
    }

    .calendar-event.conditions {
        background: #6e8a75;
        color: #ffffff;
    }

    .calendar-event.signed {
        background: #5686ad;
        color: #ffffff;
    }

    .calendar-event.deposit {
        background: #7b77a8;
        color: #ffffff;
    }

    .calendar-event.confirmed {
        background: #4f8b71;
        color: #ffffff;
    }

    .calendar-event.completed {
        background: #858f98;
        color: #ffffff;
        opacity: .9;
    }

    .calendar-event.range-middle {
        opacity: 1;
    }
}

@media (max-width: 620px) {
    .calendar-event {
        min-height: 44px;
        height: 44px;
        padding-inline: 2px;
    }

    .calendar-event strong {
        font-size: 6.5px;
        line-height: 1.08;
        font-weight: 500;
    }
}

@media (max-width: 430px) {
    .calendar-event strong {
        font-size: 6.2px;
        line-height: 1.06;
    }
}

/* v0.6.0 – optionale Identitätsprüfung, Dokumenttypen, Wiederholungsprüfung und Storno */
.button.danger { background: #fff7f7; color: #8a3434; border-color: #e7c8c8; }
.button.danger:hover { background: #fbeaea; border-color: #d9a8a8; color: #702727; }
.button.danger.compact { min-height: 36px; padding: 8px 12px; }

.identity-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.identity-type-card { min-height: 96px; }
.identity-upload-groups { margin-top: 2px; }
.identity-upload-details[hidden],
.identity-upload-group[hidden] { display: none !important; }
.identity-not-required-public { margin-top: 18px; padding: 16px; border: 1px solid #d7e4df; border-radius: 13px; background: #f4f8f6; }
.identity-not-required-public strong { display: block; color: #285448; font-size: 13px; margin-bottom: 5px; }
.identity-not-required-public p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.public-identity-summary { margin: 14px 0 18px; display: grid; grid-template-columns: .8fr 1.4fr; gap: 10px; }
.public-identity-summary > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfb; }
.public-identity-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.public-identity-summary strong { font-size: 13px; line-height: 1.4; }

.identity-state.neutral { background: #edf0f2; color: #5f6872; }
.identity-state.retry { background: #f4ebff; color: #67417f; }
.identity-not-required-box { display: flex; align-items: flex-start; gap: 13px; padding: 15px; border-radius: 13px; background: #f5f7f7; border: 1px solid var(--line); }
.identity-not-required-box strong { display: block; margin: 1px 0 4px; font-size: 14px; }
.identity-not-required-box p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.retry-waiting-box { border-color: #ded0e8; background: #fbf8fd; }
.retry-waiting-box small { display: block; margin-top: 7px; color: #735687; font-size: 11px; font-weight: 700; }
.identity-document-type-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; padding: 9px 11px; border-radius: 10px; background: #f7f9f8; border: 1px solid var(--line); }
.identity-document-type-line span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.identity-document-type-line strong { font-size: 12px; }
.identity-review-decision-actions { align-items: flex-start; }
.identity-decision-buttons { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.identity-decision-buttons.standalone { margin-top: 12px; justify-content: flex-start; }
.identity-decision-buttons .button { min-height: 38px; }
.modal-form-stack { display: grid; gap: 14px; margin-top: 14px; }
.modal-form-stack .confirm-form { margin-top: 0; }
.cancellation-state-card { margin: 0 0 18px; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; border-color: #e5cccc; background: #fffafa; }
.cancellation-state-mark { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: #f5dddd; color: #8b3939; font-size: 23px; font-weight: 700; }
.cancellation-state-card h3 { margin: 3px 0 5px; font-size: 17px; }
.cancellation-state-card p:not(.eyebrow) { margin: 0 0 6px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.cancellation-state-card small { color: #7c5d5d; font-size: 11px; }

.cancellation-state-content { min-width: 0; }
.cancellation-state-meta { display: flex; flex-wrap: wrap; gap: 7px 14px; margin-top: 7px; }
.customer-cancellation-state { border-color: #ead7c2; background: #fffaf4; }
.customer-cancellation-state .cancellation-state-mark { background: #f8e8d3; color: #8a5a21; }
.rebooking-review-box { margin-top: 14px; padding: 14px 15px; border: 1px solid #ead9c5; border-radius: 12px; background: rgba(255,255,255,.72); }
.rebooking-review-box > strong { display: block; margin-bottom: 4px; font-size: 13px; }
.rebooking-review-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.rebooking-review-actions form { margin: 0; }
.review-decision-state strong { display: block; margin-bottom: 4px; }
.review-decision-state.approved strong { color: #2f6f58; }
.review-decision-state.declined strong { color: #7b4b4b; }

@media (max-width: 820px) {
    .identity-type-grid { grid-template-columns: 1fr; }
    .public-identity-summary { grid-template-columns: 1fr; }
    .identity-review-decision-actions { flex-direction: column; align-items: stretch; }
    .identity-decision-buttons { justify-content: stretch; flex-direction: column; width: 100%; }
    .identity-decision-buttons .button { width: 100%; }
}

@media (max-width: 620px) {
    .detail-toolbar { align-items: stretch; }
    .detail-toolbar-actions { align-items: stretch; flex-direction: column-reverse; }
    .detail-toolbar-actions .button { width: 100%; }
    .cancellation-state-card { grid-template-columns: 1fr; }
    .rebooking-review-actions { flex-direction: column; }
    .rebooking-review-actions form, .rebooking-review-actions .button { width: 100%; }
}

/* Kompakte Aktionsdialoge: zusätzliche Größenbegrenzung auf Mobilgeräten.
   Die globale Modal-Regel zentriert inzwischen sämtliche Popups. */
@media (max-width: 780px) {
    #identityVerifyModal,
    #identityRetryModal,
    #reservationCancelModal,
    #depositConfirmModal,
    #balanceConfirmModal {
        align-items: center;
        justify-content: center;
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
        box-sizing: border-box;
    }

    #identityVerifyModal .compact-confirm-modal,
    #identityRetryModal .compact-confirm-modal,
    #reservationCancelModal .compact-confirm-modal,
    #depositConfirmModal .compact-confirm-modal,
    #balanceConfirmModal .compact-confirm-modal {
        width: min(570px, 100%);
        max-height: calc(100vh - 32px);
        max-height: calc(100dvh - 32px);
        margin: auto;
        border-radius: 18px;
        overflow: auto;
        overscroll-behavior: contain;
    }
}

@media (max-width: 420px) {
    #identityVerifyModal,
    #identityRetryModal,
    #reservationCancelModal,
    #depositConfirmModal,
    #balanceConfirmModal {
        padding-left: 12px;
        padding-right: 12px;
    }

    #identityVerifyModal .compact-confirm-modal,
    #identityRetryModal .compact-confirm-modal,
    #reservationCancelModal .compact-confirm-modal,
    #depositConfirmModal .compact-confirm-modal,
    #balanceConfirmModal .compact-confirm-modal {
        max-height: calc(100vh - 24px);
        max-height: calc(100dvh - 24px);
    }
}

/* v0.7.0 – Vertragsvorlagen, Vertragsarchiv und PDF-Vorschau */
.settings-intro-card h2 { margin: 4px 0 8px; font-size: clamp(22px, 3vw, 30px); }
.settings-intro-card p:not(.eyebrow) { margin: 0; color: var(--muted); line-height: 1.65; max-width: 920px; }
.settings-toolbar { margin-bottom: 16px; }
.settings-help { color: var(--muted); font-size: 12px; line-height: 1.6; margin: 0; }
.setting-link-card { text-decoration: none; color: inherit; position: relative; transition: border-color .16s ease, transform .16s ease; }
.setting-link-card:hover { border-color: #b9cbc5; transform: translateY(-1px); }
.setting-link-card em { margin-top: auto; color: var(--primary); font-style: normal; font-size: 12px; font-weight: 700; }

.placeholder-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.placeholder-grid > div { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfb; min-width: 0; }
.placeholder-grid code { flex: 0 0 auto; padding: 3px 6px; border-radius: 6px; background: #edf3f1; color: #285448; font-size: 11px; }
.placeholder-grid span { color: var(--muted); font-size: 11px; line-height: 1.45; }

.contract-template-form { display: grid; gap: 16px; }
.contract-section-group .panel-head p:not(.eyebrow),
.contract-new-section-panel .panel-head p:not(.eyebrow) { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.contract-editor-list,
.contract-new-section-list { display: grid; gap: 12px; }
.contract-editor-item { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfc; transition: opacity .16s ease, background .16s ease; }
.contract-editor-item.inactive { opacity: .62; background: #f3f5f5; }
.contract-editor-item-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.template-switch { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-size: 12px; font-weight: 700; color: #33433e; }
.template-switch input { width: 17px; height: 17px; accent-color: var(--primary); }
.compact-order-field { width: 120px; flex: 0 0 120px; }
.compact-type-field { width: min(330px, 100%); flex: 1 1 260px; }
.contract-new-section-panel .panel-head { align-items: flex-start; }
.new-contract-editor-item { border-style: dashed; border-color: #b9cbc5; }
.template-save-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; position: sticky; bottom: 14px; z-index: 8; box-shadow: 0 16px 42px rgba(25, 45, 39, .12); }
.template-save-bar > div { display: grid; gap: 3px; }
.template-save-bar span { color: var(--muted); font-size: 12px; line-height: 1.45; }
.template-version-list { display: grid; gap: 8px; }
.template-version-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); border-radius: 10px; }
.template-version-list span { color: var(--muted); font-size: 12px; }
.integration-status-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.integration-status-grid > div { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfb; }
.integration-status-grid span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.integration-status-grid strong { font-size: 12px; overflow-wrap: anywhere; }
.integration-note { margin-top: 14px; padding: 14px 15px; border: 1px solid #d8e2de; border-radius: 11px; background: #f5f8f7; }
.integration-note strong { display: block; margin-bottom: 4px; }
.integration-note p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.code-config-box { display: grid; gap: 6px; margin: 14px 0; padding: 12px; background: #161b1a; border-radius: 10px; }
.code-config-box code { color: #e8eeec; font-size: 11px; overflow-wrap: anywhere; }

.contract-stage-card { scroll-margin-top: 18px; }
.contract-action-layout { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px; border: 1px solid #d8e4df; border-radius: 12px; background: #f6f9f8; }
.contract-action-layout strong { display: block; margin-bottom: 5px; }
.contract-action-layout p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 720px; }
.contract-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; margin-bottom: 14px; }
.contract-summary > div { display: grid; gap: 4px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: #fafbfb; }
.contract-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.contract-summary strong { font-size: 12px; line-height: 1.35; }
.contract-buttons { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.contract-buttons form { margin: 0; }
.contract-integration-note { margin-top: 14px; padding: 13px 14px; border: 1px solid #e4d9b7; border-radius: 11px; background: #fffaf0; }
.contract-integration-note strong { display: block; font-size: 13px; margin-bottom: 4px; }
.contract-integration-note p { margin: 0 0 6px; color: #756b52; font-size: 11px; line-height: 1.5; }
.contract-integration-note a { color: #5d5140; font-size: 11px; font-weight: 700; }

.contract-preview-backdrop { z-index: 140; }
.contract-preview-modal { width: min(1120px, calc(100vw - 48px)); height: min(90vh, 900px); height: min(90dvh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.contract-preview-body { min-height: 0; background: #dfe4e2; }
.contract-preview-body iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.contract-mobile-preview[hidden], .contract-mobile-page-viewport[hidden], .contract-mobile-page-controls[hidden], .contract-mobile-loading[hidden] { display: none !important; }
.contract-mobile-preview { width: 100%; height: 100%; min-height: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #dfe4e2; }
.contract-mobile-loading { align-self: center; justify-self: center; padding: 18px; color: #58645f; font-size: 12px; text-align: center; }
.contract-mobile-page-viewport { min-height: 0; overflow: auto; padding: 10px; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y pinch-zoom; }
.contract-mobile-page-viewport img { display: block; width: 100%; height: auto; max-width: none; margin: 0 auto; background: #fff; box-shadow: 0 4px 18px rgba(20, 34, 29, .18); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.contract-mobile-page-controls { display: grid; grid-template-columns: 54px minmax(0, 1fr) 54px; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid #cfd8d4; background: #fff; }
.contract-mobile-page-controls span { text-align: center; color: #4f5c57; font-size: 11px; font-weight: 700; }
.contract-mobile-page-controls .button { min-height: 36px; padding: 6px 10px; }
.contract-preview-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 16px; border-top: 1px solid var(--line); background: #fff; }
.contract-preview-footer span { color: var(--muted); font-size: 10px; }

.contract-archive-head { align-items: flex-start; }
.contract-archive-summary { display: flex; flex-wrap: wrap; gap: 8px; }
.contract-archive-card-list { display: none; }
.contract-status { display: inline-flex; align-items: center; justify-content: center; min-height: 25px; padding: 4px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; white-space: nowrap; }
.contract-status.generated { background: #e8efec; color: #385b50; }
.contract-status.sent { background: #fff2cf; color: #725b1d; }
.contract-status.signed { background: #dff1e9; color: #27614e; }
.contract-status.void { background: #eceff1; color: #6a737b; }
.contract-table td small { display: block; margin-top: 4px; color: var(--muted); }
.contract-table .contract-number { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; }
.contract-archive-actions { display: flex; gap: 6px; justify-content: flex-end; }
.contract-archive-actions .button { min-height: 34px; padding: 7px 10px; font-size: 11px; }

@media (max-width: 900px) {
    .placeholder-grid,
    .integration-status-grid { grid-template-columns: 1fr; }
    .contract-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
    .contract-editor-item-head { align-items: stretch; flex-wrap: wrap; }
    .compact-order-field { width: 110px; flex-basis: 110px; }
    .contract-new-section-panel .panel-head { align-items: stretch; }
    .contract-new-section-panel .panel-head .button { width: 100%; }
    .template-save-bar { position: static; align-items: stretch; flex-direction: column; }
    .template-save-bar .button { width: 100%; }
    .contract-action-layout { align-items: stretch; flex-direction: column; }
    .contract-action-layout form,
    .contract-action-layout .button { width: 100%; }
    .contract-summary { grid-template-columns: 1fr 1fr; }
    .contract-buttons { display: grid; grid-template-columns: 1fr; }
    .contract-buttons form,
    .contract-buttons .button { width: 100%; }
    .contract-preview-backdrop { align-items: center; padding: max(10px, env(safe-area-inset-top)) 10px max(10px, env(safe-area-inset-bottom)); }
    .contract-preview-modal { width: 100%; height: calc(100vh - 20px); height: calc(100dvh - 20px); border-radius: 15px; }
    .contract-preview-footer { padding: 9px 11px; }
    .contract-preview-footer span { display: none; }
    .contract-preview-footer .button { width: 100%; }
    .contract-mobile-page-viewport { padding: 6px; }
    .contract-mobile-page-controls { padding: 7px 8px; }
}

@media (max-width: 620px) {
    .contract-archive-table-wrap { display: none; }
    .contract-archive-card-list { display: grid; gap: 10px; }
    .contract-archive-card { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
    .contract-archive-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
    .contract-archive-card-head strong { font-size: 13px; }
    .contract-archive-card-head small { display: block; margin-top: 3px; color: var(--muted); font-size: 10px; }
    .contract-archive-card dl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; }
    .contract-archive-card dl div { display: grid; gap: 2px; }
    .contract-archive-card dt { color: var(--muted); font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
    .contract-archive-card dd { margin: 0; font-size: 11px; }
    .contract-archive-actions { justify-content: stretch; display: grid; grid-template-columns: 1fr; }
    .contract-archive-actions .button { width: 100%; }
}

/* v0.11.0 – Anmeldung, Benutzerverwaltung und Konditionen */
.auth-body { min-height: 100vh; margin: 0; background: #eef2f0; color: var(--text); }
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 28px 16px; }
.auth-card { width: min(480px, 100%); padding: 28px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: 0 18px 50px rgba(31, 49, 43, .10); }
.auth-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 28px; }
.auth-brand > div:last-child { display: grid; gap: 1px; }
.auth-brand strong { font-size: 15px; }
.auth-brand span { color: var(--muted); font-size: 11px; }
.auth-card h1 { margin: 5px 0 8px; font-size: clamp(24px, 5vw, 31px); line-height: 1.12; }
.auth-intro { margin: 0 0 22px; color: var(--muted); font-size: 13px; line-height: 1.55; }
.auth-form { display: grid; gap: 14px; }
.auth-submit { width: 100%; margin-top: 3px; }
.auth-alert { margin-bottom: 16px; }
.auth-security-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.5; }
.field-hint { margin: -3px 0 3px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.topbar-user { display: flex; align-items: center; gap: 8px; }
.user-chip-link { display: grid; gap: 1px; min-width: 0; text-decoration: none; color: inherit; }
.user-chip-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 180px; }
.user-chip-link small { color: var(--muted); font-size: 9px; font-weight: 600; }
.logout-form { margin: 0; }
.logout-button { min-height: 34px; padding: 7px 10px; font-size: 10px; }
.profile-password-card { max-width: 760px; }

.check-row { display: flex; align-items: flex-start; gap: 10px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfb; cursor: pointer; }
.check-row input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--primary); flex: 0 0 auto; }
.check-row span { display: grid; gap: 3px; }
.check-row strong { font-size: 12px; }
.check-row small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.user-admin-list { display: grid; gap: 12px; }
.user-admin-card { display: grid; gap: 14px; padding: 15px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfc; }
.user-admin-card.inactive { background: #f4f6f5; opacity: .78; }
.user-admin-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.user-admin-head > div:first-child { display: grid; gap: 3px; min-width: 0; }
.user-admin-head strong { font-size: 13px; }
.user-admin-head span:not(.badge) { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.user-admin-badges { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.user-admin-actions { display: flex; justify-content: flex-end; }

.signer-condition-grid { margin-bottom: 14px; }
.signer-condition-grid .field small,
.money-field small { display: block; margin-top: 5px; color: var(--muted); font-size: 10px; line-height: 1.45; }
.rental-fee-breakdown { display: grid; gap: 0; margin: 13px 0; border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: #fafbfb; }
.rental-fee-breakdown > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; border-top: 1px solid var(--line); font-size: 11px; }
.rental-fee-breakdown > div:first-child { border-top: 0; }
.rental-fee-breakdown-head { align-items: flex-start !important; background: #f3f7f5; }
.rental-fee-breakdown-head strong { font-size: 11px; }
.rental-fee-breakdown-head span { color: var(--muted); text-align: right; }
.rental-fee-breakdown-total { background: #f3f7f5; font-weight: 700; }
.amounts-list dd small { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }

@media (max-width: 700px) {
    .auth-card { padding: 22px 18px; border-radius: 15px; }
    .topbar-user { gap: 5px; }
    .user-chip-link { max-width: 120px; }
    .user-chip-link span { max-width: 105px; }
    .user-chip-link small { display: none; }
    .logout-button { padding-inline: 8px; }
    .user-admin-head { align-items: stretch; flex-direction: column; }
    .user-admin-badges { justify-content: flex-start; }
    .user-admin-actions .button { width: 100%; }
    .rental-fee-breakdown-head { flex-direction: column; }
    .rental-fee-breakdown-head span { text-align: left; }
}

/* v0.19.5 – aufklappbare Vorgangsbereiche mit echter Desktop-Statusspalte */
.detail-accordion,
details[data-detail-accordion] {
    padding: 0;
    overflow: hidden;
}
details[data-detail-accordion] > .detail-accordion-summary {
    display: grid;
    /* Desktop: Der Status beginnt immer exakt in der Mitte des nutzbaren
       Header-Bereichs. Titellänge und Badge-Breite verändern diese X-Position
       nicht. Die dritte Spalte gehört ausschließlich dem Chevron. */
    grid-template-columns: minmax(0, 50%) minmax(0, 1fr) 16px;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
    margin: 0;
    padding: 22px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background .16s ease;
}
.detail-section { scroll-margin-top: 18px; }
details[data-detail-accordion] > .detail-accordion-summary::-webkit-details-marker { display: none; }
details[data-detail-accordion] > .detail-accordion-summary::marker { content: ''; }
details[data-detail-accordion] > .detail-accordion-summary:hover { background: #fafbfc; }
details[data-detail-accordion][open] > .detail-accordion-summary {
    border-bottom: 1px solid var(--line);
    background: #fbfcfc;
}
.detail-accordion-summary > div:first-child {
    min-width: 0;
    grid-column: 1;
}
.detail-accordion-summary > .detail-status-slot {
    grid-column: 2;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    justify-self: stretch;
}
.detail-status-slot > .badge,
.detail-status-slot > .identity-state,
.detail-status-slot > .saved-hint {
    flex: 0 0 auto;
    margin: 0;
}
.detail-accordion-chevron {
    grid-column: 3;
    width: 10px;
    height: 10px;
    border-right: 2px solid #7b8792;
    border-bottom: 2px solid #7b8792;
    transform: rotate(45deg);
    transition: transform .16s ease;
    justify-self: end;
    margin: -4px 3px 0 4px;
}
details[data-detail-accordion][open] > .detail-accordion-summary .detail-accordion-chevron {
    transform: rotate(225deg);
    margin-top: 4px;
}
.detail-accordion-content { padding: 22px; }
.detail-accordion-content > :first-child { margin-top: 0; }
.detail-accordion-content > :last-child { margin-bottom: 0; }

/* Fortschritt und System sind permanente Vorgangspanels.
   Der Fortschrittsbereich bleibt bewusst im normalen Seitenfluss und folgt
   beim Scrollen nicht dem Viewport. Beide Panels sind dauerhaft geöffnet. */
.persistent-detail-panel { padding: 0; overflow: hidden; }
.persistent-detail-head {
    margin: 0;
    padding: 22px;
    border-bottom: 1px solid var(--line);
    background: #fbfcfc;
}
.persistent-detail-head > div:first-child { min-width: 0; }

@media (max-width: 620px) {
    details[data-detail-accordion] > .detail-accordion-summary {
        grid-template-columns: minmax(0, 1fr) auto 16px;
        padding: 16px;
        gap: 9px;
    }
    .detail-accordion-summary > .detail-status-slot {
        width: auto;
        min-width: 0;
        justify-self: end;
    }
    .detail-accordion-content { padding: 16px; }
    .persistent-detail-head { padding: 16px; }
    .detail-status-slot > .badge,
    .detail-status-slot > .identity-state,
    .detail-status-slot > .saved-hint {
        max-width: 150px;
        text-align: center;
    }
}

/* v0.11.15 – Anzahlung und verbindliche Reservierungsbestätigung */
.payment-awaiting-box,
.payment-confirmed-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px;
    border: 1px solid var(--line);
    border-radius: 13px;
    background: #fafbfc;
}
.payment-awaiting-box strong,
.payment-awaiting-box p,
.payment-confirmed-box strong,
.payment-confirmed-box p { display: block; }
.payment-awaiting-box p,
.payment-confirmed-box p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.payment-awaiting-box .button { flex: 0 0 auto; }
.payment-confirmed-box { justify-content: flex-start; background: #f1f7f4; border-color: #d3e5dc; }
.payment-confirmed-mark { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 50%; background: #dceee5; color: #2f6c53; font-weight: 900; font-size: 18px; }
.payment-detail-list { margin-top: 16px; }
.payment-process-note { margin-top: 14px; }
.confirmation-consequence { padding: 13px 14px; border: 1px solid #d3e5dc; border-radius: 11px; background: #f1f7f4; }
.confirmation-consequence strong,
.confirmation-consequence span { display: block; }
.confirmation-consequence strong { font-size: 12px; }
.confirmation-consequence span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.deposit-confirm-summary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfc; }
.deposit-confirm-summary > div { min-width: 0; }
.deposit-confirm-summary span,
.deposit-confirm-summary strong { display: block; }
.deposit-confirm-summary span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.deposit-confirm-summary strong { margin-top: 4px; font-size: 12px; overflow-wrap: anywhere; }
.payment-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 10px; margin: 0 22px 20px; }
.payment-stats > div { padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.payment-stats span,
.payment-stats strong { display: block; }
.payment-stats span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.payment-stats strong { margin-top: 5px; font-size: 22px; }
.payments-table { min-width: 1050px; }
.payment-actions-cell .button { white-space: nowrap; }

@media (max-width: 700px) {
    .payment-awaiting-box { align-items: stretch; flex-direction: column; }
    .payment-awaiting-box .button { width: 100%; }
    .payment-stats { grid-template-columns: 1fr 1fr; margin: 0 16px 16px; }
    .deposit-confirm-summary { grid-template-columns: 1fr; }
    .deposit-confirm-summary .span-2 { grid-column: auto; }
}

/* v0.12.0 – Restforderung und Terminabstimmung */
.conditions-later-note,
.appointment-ready-box,
.appointment-offer-state {
    padding: 15px 16px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #fafbfc;
}
.conditions-later-note strong,
.conditions-later-note p,
.appointment-ready-box strong,
.appointment-ready-box p,
.appointment-offer-state strong,
.appointment-offer-state p { display: block; }
.conditions-later-note p,
.appointment-ready-box p,
.appointment-offer-state p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }

.payment-stage-divider { height: 1px; margin: 22px 0; background: var(--line); }
.subsection-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.subsection-heading h4 { margin: 3px 0 0; font-size: 17px; }
.subsection-heading > strong { font-size: 18px; }
.compact-success-box { margin-top: 0; }
.balance-detail-list { margin-top: 14px; }
.balance-awaiting-box { background: #fffdf8; }

.payment-stats-three { grid-template-columns: repeat(3, minmax(0, 220px)); }
.payments-ledger-table { min-width: 1120px; }
.payments-ledger-table td small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.35; }

.appointment-locked-card { margin-top: 0; }
.appointment-window-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.appointment-window-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fafbfc; }
.appointment-window-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.appointment-window-head > span { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; border-radius: 9px; background: #e9efed; color: #315e52; font-size: 12px; font-weight: 900; }
.appointment-window-head strong,
.appointment-window-head small { display: block; }
.appointment-window-head small { margin-top: 2px; color: var(--muted); font-size: 11px; }
.appointment-window-actions { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 16px; }
.appointment-window-actions .form-help { max-width: 650px; }
.appointment-window-actions .button { flex: 0 0 auto; }

.appointment-offer-state { display: flex; align-items: center; justify-content: space-between; gap: 18px; background: #f5f8f7; }
.appointment-offer-state > span { flex: 0 0 auto; color: var(--muted); font-size: 11px; }
.appointment-offer-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.appointment-offer-list { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.appointment-offer-list > span { display: block; margin-bottom: 9px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.appointment-offer-list > strong { display: block; padding: 7px 0; border-top: 1px solid var(--line); font-size: 12px; }
.appointment-offer-list > strong:first-of-type { border-top: 0; padding-top: 0; }
.appointment-resend-form { display: flex; justify-content: flex-end; margin-top: 12px; }
.appointment-replace-heading { margin-bottom: 5px; }
.appointment-final-list { margin-top: 16px; }

.appointment-public-card { max-width: 760px; }
.appointment-slot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.appointment-slot-card { position: relative; display: block; cursor: pointer; }
.appointment-slot-card input { position: absolute; opacity: 0; pointer-events: none; }
.appointment-slot-card > span { display: block; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.appointment-slot-card strong,
.appointment-slot-card small { display: block; }
.appointment-slot-card small { margin-top: 4px; color: var(--muted); font-size: 12px; }
.appointment-slot-card input:checked + span { border-color: #6f998d; background: #f1f7f4; box-shadow: 0 0 0 2px rgba(49,94,82,.08); }
.appointment-slot-card input:focus-visible + span { outline: 2px solid #315e52; outline-offset: 2px; }
.appointment-public-note { padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; }
.appointment-public-note strong,
.appointment-public-note p { display: block; }
.appointment-public-note p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.appointment-confirmed-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.appointment-confirmed-grid > div { padding: 15px; border: 1px solid #d3e5dc; border-radius: 12px; background: #f1f7f4; }
.appointment-confirmed-grid span,
.appointment-confirmed-grid strong { display: block; }
.appointment-confirmed-grid span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.appointment-confirmed-grid strong { margin-top: 5px; font-size: 13px; }

@media (max-width: 820px) {
    .appointment-window-grid,
    .appointment-offer-columns { grid-template-columns: 1fr; }
    .appointment-window-actions { align-items: stretch; flex-direction: column; }
    .appointment-window-actions .button { width: 100%; }
}

@media (max-width: 700px) {
    .payment-stats-three { grid-template-columns: 1fr; }
    .appointment-offer-state { align-items: flex-start; flex-direction: column; }
    .appointment-slot-grid,
    .appointment-confirmed-grid { grid-template-columns: 1fr; }
}


/* v0.14.0 – PIN-geschütztes Interessenten-Portal */
.portal-shell { width: min(920px, calc(100% - 28px)); }
.portal-card { overflow: visible; }
.portal-brand { position: sticky; top: 0; z-index: 4; background: rgba(255,255,255,.97); backdrop-filter: blur(12px); }
.portal-brand-copy { min-width: 0; flex: 1; }
.portal-status-badge { flex: 0 0 auto; }
.portal-overview { padding: 28px 24px 24px; display: grid; gap: 18px; }
.portal-intro-block h1 { margin: 6px 0 9px; font-size: clamp(28px, 5vw, 38px); letter-spacing: -.035em; }
.portal-intro-block > p:last-child { margin: 0; max-width: 720px; color: var(--muted); line-height: 1.62; }
.portal-next-card { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 20px; border-radius: 15px; border: 1px solid #d8e2de; background: #f5f8f7; }
.portal-next-card.is-customer { border-color: #bfd7cf; background: #eef6f3; }
.portal-next-meta { display: flex; flex-direction: column; gap: 5px; padding-right: 18px; border-right: 1px solid rgba(91,111,103,.16); }
.portal-next-meta span, .portal-next-copy > span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.portal-next-meta strong { font-size: 20px; color: var(--primary); }
.portal-next-copy h2 { margin: 4px 0 6px; font-size: 20px; }
.portal-next-copy p { margin: 0; color: var(--muted); line-height: 1.55; }
.portal-summary-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.portal-summary-item { display: flex; flex-direction: column; gap: 5px; padding: 14px 15px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfb; }
.portal-summary-item.span-2 { grid-column: 1 / -1; }
.portal-summary-item span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.portal-summary-item strong { line-height: 1.4; }
.portal-resource-strip { margin: 0 24px 24px; padding: 15px 17px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #d9e2de; border-radius: 13px; background: #f7f9f8; }
.portal-resource-strip strong, .portal-resource-strip span { display: block; }
.portal-resource-strip span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.portal-action-section, .portal-info-section { margin: 0 24px 24px; border: 1px solid var(--line); border-radius: 16px; background: #fff; overflow: hidden; }
.portal-action-section { border-color: #c9dcd5; box-shadow: 0 10px 30px rgba(30,66,56,.06); }
.portal-action-section.compact { padding-bottom: 22px; }
.portal-section-head { padding: 22px 22px 14px; }
.portal-section-head h2 { margin: 5px 0 7px; font-size: 22px; }
.portal-section-head > p:last-child { margin: 0; color: var(--muted); line-height: 1.55; }
.portal-public-form { padding: 0 22px 22px; }
.portal-primary-action { padding: 0 22px; }
.portal-payment-card { margin: 0 22px; padding: 18px; display: flex; align-items: center; justify-content: space-between; gap: 16px; border-radius: 13px; background: #f3f7f5; border: 1px solid #d7e3de; }
.portal-payment-card span { color: var(--muted); font-weight: 700; }
.portal-payment-card strong { font-size: 24px; color: var(--primary); }
.portal-appointment-grid { padding: 0 22px 18px; }
.portal-muted-note { margin: 0 22px 22px; color: var(--muted); font-size: 12px; line-height: 1.55; }
.portal-message { margin-top: 20px; margin-bottom: 0; }
.portal-cancel-section { margin: 0 24px 24px; }
.portal-cancel-details { border: 1px solid #e4d4d4; border-radius: 14px; background: #fffafa; overflow: hidden; }
.portal-cancel-details > summary { cursor: pointer; list-style: none; padding: 15px 17px; font-weight: 800; color: #7a3b3b; }
.portal-cancel-details > summary::-webkit-details-marker { display: none; }
.portal-cancel-details > summary::after { content: '+'; float: right; font-size: 20px; line-height: 1; }
.portal-cancel-details[open] > summary::after { content: '−'; }
.portal-cancel-content { padding: 0 17px 18px; border-top: 1px solid #efdede; }
.portal-cancel-content > p { color: var(--muted); line-height: 1.55; }
.portal-cancel-warning { margin: 14px 0; padding: 14px 15px; border-radius: 11px; background: #fff0f0; border: 1px solid #edcccc; }
.portal-cancel-warning.neutral { background: #f5f6f7; border-color: var(--line); }
.portal-cancel-warning strong { display: block; margin-bottom: 5px; }
.portal-cancel-warning p { margin: 0; color: #675151; font-size: 12px; line-height: 1.55; }
.portal-cancel-warning.neutral p { color: var(--muted); }
.portal-cancel-form { display: grid; gap: 14px; }
.portal-confirm-check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 13px; border: 1px solid #ead1d1; border-radius: 10px; background: #fff; font-size: 12px; line-height: 1.5; }
.portal-confirm-check input { margin-top: 3px; }
.portal-cancel-summary { margin: 0; padding: 0 22px 22px; display: grid; gap: 10px; }
.portal-cancel-summary > div { padding: 12px 14px; border-radius: 10px; background: #fafafa; border: 1px solid var(--line); }
.portal-cancel-summary dt { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.portal-cancel-summary dd { margin: 5px 0 0; line-height: 1.5; }

@media (max-width: 780px) {
    .portal-shell { width: min(100% - 18px, 920px); }
    .portal-brand { position: static; }
    .portal-overview { padding: 22px 16px 18px; }
    .portal-next-card { grid-template-columns: 1fr; gap: 12px; padding: 16px; }
    .portal-next-meta { padding: 0 0 11px; border-right: 0; border-bottom: 1px solid rgba(91,111,103,.16); }
    .portal-summary-grid { grid-template-columns: 1fr; }
    .portal-summary-item.span-2 { grid-column: auto; }
    .portal-resource-strip, .portal-action-section, .portal-info-section, .portal-cancel-section { margin-left: 16px; margin-right: 16px; }
    .portal-resource-strip { align-items: stretch; flex-direction: column; }
    .portal-resource-strip .button, .portal-primary-action .button { width: 100%; }
    .portal-section-head { padding: 18px 16px 12px; }
    .portal-public-form { padding: 0 16px 18px; }
    .portal-primary-action, .portal-appointment-grid { padding-left: 16px; padding-right: 16px; }
    .portal-payment-card { margin-left: 16px; margin-right: 16px; }
    .portal-muted-note { margin-left: 16px; margin-right: 16px; }
    .portal-cancel-summary { padding-left: 16px; padding-right: 16px; }
}


/* v0.14.0 – PIN-Anmeldung und verständliche Documenso-Unterzeichnung */
.portal-login-body { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.portal-login-shell { width: min(560px, calc(100% - 28px)); margin: 30px auto; }
.portal-login-card { overflow: hidden; }
.portal-login-brand { position: static; }
.portal-login-content { padding: 30px 28px 32px; }
.portal-login-content h1 { margin: 7px 0 10px; font-size: clamp(27px, 6vw, 36px); letter-spacing: -.035em; }
.portal-login-content > p { color: var(--muted); line-height: 1.6; }
.portal-login-message { margin: 18px 0; }
.portal-login-message p { margin: 4px 0 0; }
.portal-pin-form { display: grid; gap: 14px; margin-top: 24px; }
.portal-pin-field input { min-height: 58px; text-align: center; font-size: 28px; font-weight: 800; letter-spacing: .5em; padding-left: calc(16px + .5em); font-variant-numeric: tabular-nums; }
.portal-login-button { width: 100%; min-height: 48px; }
.portal-login-help { margin: 18px 0 0 !important; font-size: 12px; }
.portal-logout-form { margin-left: auto; }
.portal-logout-form .button { white-space: nowrap; }
.portal-sign-guide { margin: 0 22px 22px; display: grid; gap: 10px; }
.portal-sign-step { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; align-items: start; padding: 14px; border: 1px solid #d9e3df; border-radius: 12px; background: #f7faf9; }
.portal-sign-step > span { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 800; }
.portal-sign-step strong { display: block; margin-top: 2px; }
.portal-sign-step p { margin: 4px 0 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
@media (max-width: 620px) {
    .portal-login-body { align-items: center; }
    .portal-login-shell { margin: 16px auto; }
    .portal-login-content { padding: 24px 20px 26px; }
    .portal-pin-field input { font-size: 26px; }
    .portal-brand { flex-wrap: wrap; }
    .portal-logout-form { width: 100%; margin: 6px 0 0; }
    .portal-logout-form .button { width: 100%; }
    .portal-sign-guide { margin: 0 16px 18px; }
    .portal-sign-step { grid-template-columns: 34px minmax(0,1fr); padding: 12px; }
}

/* v0.15.0 – Vertragsvorschau im Portal und iterative Terminabstimmung */
.portal-resource-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.appointment-slot-card.is-counter > span { border-color: #c8d8d2; background: #f5f9f7; }
.appointment-slot-card em { display: block; margin-bottom: 5px; color: var(--primary); font-size: 10px; font-style: normal; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.appointment-proposal-choice { position: relative; display: block; margin-top: 12px; cursor: pointer; }
.appointment-proposal-choice input { position: absolute; opacity: 0; pointer-events: none; }
.appointment-proposal-choice > span { display: block; padding: 14px 15px; border: 1px dashed #aebdb7; border-radius: 12px; background: #fafcfb; }
.appointment-proposal-choice strong, .appointment-proposal-choice small { display: block; }
.appointment-proposal-choice small { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.appointment-proposal-choice input:checked + span { border-style: solid; border-color: #6f998d; background: #f1f7f4; box-shadow: 0 0 0 2px rgba(49,94,82,.08); }
.appointment-proposal-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-top: 10px; padding: 13px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfb; }
.appointment-negotiation-state { padding: 14px 15px; border-radius: 12px; border: 1px solid var(--line); }
.appointment-negotiation-state strong, .appointment-negotiation-state p, .appointment-negotiation-state small { display: block; }
.appointment-negotiation-state p { margin: 5px 0 0; }
.appointment-negotiation-state small { margin-top: 6px; color: var(--muted); }
.appointment-negotiation-state.agreed { border-color: #cce2d8; background: #f0f7f4; }
.appointment-negotiation-state.waiting { border-color: #e5dcc2; background: #fffaf0; }
.appointment-proposal-review-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-top: 14px; }
.appointment-proposal-review-card { padding: 15px; border: 1px solid #d8e1de; border-radius: 13px; background: #fff; }
.appointment-proposal-time { margin: 13px 0; padding: 11px 12px; border-radius: 10px; background: #f6f8f7; }
.appointment-proposal-time p { margin: 5px 0 0; color: var(--muted); font-size: 11px; line-height: 1.45; }
.appointment-proposal-accept-form { margin-bottom: 12px; }
.appointment-counter-form { display: grid; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.appointment-negotiation-fixed { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 13px; padding: 12px 14px; border: 1px solid #cce2d8; border-radius: 11px; background: #f0f7f4; font-size: 12px; }
.customer-proposal-state { border-color: #ddcfaa; background: #fffaf0; }

@media (max-width: 780px) {
    .portal-resource-actions { display: grid; grid-template-columns: 1fr; width: 100%; }
    .portal-resource-actions .button { width: 100%; }
    .appointment-proposal-fields, .appointment-proposal-review-grid { grid-template-columns: 1fr; }
    .appointment-proposal-fields .span-2 { grid-column: auto; }
    .appointment-proposal-review-card .button { width: 100%; }
}

/* v0.15.0 – Downloadaktion innerhalb der öffentlichen Vertragsvorschau */
.contract-preview-footer-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
@media (max-width: 700px) {
    .contract-preview-footer-actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
    .contract-preview-footer-actions .button { width: 100%; }
}



/* v0.16.1 – Vor-Ort-Protokolle für Schlüsselübergabe und Rückgabe */
.protocol-toolbar { margin-bottom: 14px; }
.protocol-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 22px 24px; }
.protocol-hero h2 { margin: 4px 0 5px; }
.protocol-hero p:last-child { margin: 0; color: var(--muted); }
.protocol-hero-meta { min-width: 230px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: #f7f9f8; }
.protocol-hero-meta span, .protocol-hero-meta strong { display: block; }
.protocol-hero-meta span { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.protocol-hero-meta strong { margin-top: 5px; }
.protocol-intro-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(260px,.65fr); gap: 16px; margin-top: 16px; }
.protocol-info-card { padding: 20px 22px; }
.protocol-info-card h3 { margin: 4px 0 10px; }
.protocol-info-card > p:last-child { margin-bottom: 0; color: var(--muted); line-height: 1.6; }
.protocol-source-note { background: #f7faf8; border-color: #dce7e2; }
.protocol-process-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }
.protocol-process-list li { display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 11px; align-items: start; }
.protocol-process-list li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: #edf4f1; color: var(--primary); font-weight: 800; }
.protocol-process-list strong, .protocol-process-list small { display: block; }
.protocol-process-list small { margin-top: 3px; color: var(--muted); line-height: 1.45; }
.protocol-form { display: grid; gap: 16px; margin-top: 16px; }
.protocol-form-section { overflow: hidden; }
.protocol-form-body { padding: 18px 20px 20px; }
.protocol-condition-table { margin-top: 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.protocol-condition-head, .protocol-condition-row { display: grid; grid-template-columns: minmax(150px,1.35fr) minmax(150px,1fr) minmax(170px,1fr); align-items: stretch; }
.protocol-condition-head { background: #f1f4f3; color: #59635f; font-size: 11px; text-align: center; }
.protocol-condition-head > *, .protocol-condition-row > * { padding: 11px 12px; border-right: 1px solid var(--line); }
.protocol-condition-head > *:last-child, .protocol-condition-row > *:last-child { border-right: 0; }
.protocol-condition-head strong { text-align: left; }
.protocol-condition-row { border-top: 1px solid var(--line); }
.protocol-condition-row > strong { display: flex; align-items: center; }
.protocol-radio { display: flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer; text-align: center; font-size: 12px; }
.protocol-radio input { flex: 0 0 auto; }
.protocol-return-grid { display: grid; gap: 12px; }
.protocol-binary-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfb; }
.protocol-binary-row > div { display: flex; gap: 18px; }
.protocol-binary-row label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.protocol-status-fieldset { margin: 0; padding: 13px 14px 14px; border: 1px solid var(--line); border-radius: 11px; min-width: 0; }
.protocol-status-fieldset legend { padding: 0 5px; font-size: 12px; font-weight: 700; }
.protocol-status-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.protocol-status-option { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 44px; margin: 0; padding: 10px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff; cursor: pointer; font-size: 12px; line-height: 1.35; }
.protocol-status-option:has(input:checked) { border-color: #78978e; background: #f3f7f5; box-shadow: 0 0 0 2px rgba(37,79,68,.05); }
.protocol-status-option input[type="radio"] { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; padding: 0; border: initial; border-radius: 50%; box-shadow: none; accent-color: var(--accent); }
.protocol-status-option span { min-width: 0; }
.protocol-photo-intro { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 14px; }
.protocol-photo-intro strong { display: block; }
.protocol-photo-intro p { max-width: 720px; margin: 4px 0 0; color: var(--muted); line-height: 1.5; }
.protocol-photo-counter { flex: 0 0 auto; padding: 7px 10px; border: 1px solid #d3dfda; border-radius: 999px; background: #f5f9f7; color: #45665a; font-size: 11px; font-weight: 700; white-space: nowrap; }
.protocol-photo-items { display: grid; gap: 12px; }
.protocol-photo-item { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fbfcfc; transition: border-color .15s ease, box-shadow .15s ease; }
.protocol-photo-item.has-error { border-color: #c96767; box-shadow: 0 0 0 3px rgba(174,61,61,.08); }
.protocol-photo-item-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.protocol-photo-item-grid { display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: 14px; align-items: stretch; }
.protocol-photo-upload { min-height: 145px; position: relative; display: grid; place-items: center; align-content: center; gap: 5px; padding: 18px; border: 1px dashed #9fb3ab; border-radius: 13px; background: #fff; text-align: center; cursor: pointer; }
.protocol-photo-upload:hover { border-color: #71998b; background: #f8fbfa; }
.protocol-photo-upload input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.protocol-photo-upload .protocol-photo-icon { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; background: #e9f2ee; color: var(--primary); font-size: 22px; }
.protocol-photo-upload small { max-width: 100%; color: var(--muted); line-height: 1.45; overflow-wrap: anywhere; }
.protocol-photo-comment { margin: 0; }
.protocol-photo-comment textarea { min-height: 105px; resize: vertical; }
.protocol-photo-comment > span small, .protocol-photo-comment > small { color: var(--muted); font-weight: 400; }
.protocol-photo-preview { margin-top: 12px; padding: 10px; border: 1px solid #d9e2de; border-radius: 11px; background: #fff; }
.protocol-photo-preview img { display: block; width: 100%; max-height: 320px; object-fit: contain; border-radius: 8px; background: #f3f5f4; }
.protocol-photo-error { margin-top: 10px; padding: 9px 11px; border-radius: 9px; background: #fff0f0; color: #983f3f; font-size: 12px; font-weight: 650; }
.protocol-photo-add-row { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.protocol-photo-add-row small { color: var(--muted); line-height: 1.45; }
.protocol-photo-add-row .button:disabled { opacity: .6; cursor: default; }
.protocol-sign-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
.protocol-sign-card { padding: 14px; border: 1px solid var(--line); border-radius: 13px; background: #fafbfb; transition: border-color .15s ease, box-shadow .15s ease; }
.protocol-sign-card.is-signed { border-color: #9fc2b4; background: #f7fbf9; }
.protocol-sign-card.has-error { border-color: #c96767; box-shadow: 0 0 0 3px rgba(174,61,61,.09); }
.protocol-sign-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.protocol-sign-card-head strong, .protocol-sign-card-head span { display: block; }
.protocol-sign-card-head span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.protocol-signature-canvas-wrap { position: relative; height: 190px; overflow: hidden; border: 1px solid #cbd4d0; border-radius: 10px; background: #fff; }
.protocol-signature-canvas { display: block; width: 100%; height: 100%; background: #fff; touch-action: none; cursor: crosshair; }
.protocol-signature-hint { position: absolute; inset: auto 12px 9px; color: #a1aaa6; font-size: 10px; text-align: center; pointer-events: none; }
.protocol-sign-card.is-signed .protocol-signature-hint { opacity: 0; }
.protocol-presence-confirmation { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 11px; align-items: start; margin-top: 18px; padding: 15px 16px; border: 1px solid #cfddd7; border-radius: 12px; background: #f6faf8; cursor: pointer; }
.protocol-presence-confirmation input { margin-top: 3px; }
.protocol-presence-confirmation strong { display: block; margin-bottom: 3px; }
.protocol-final-warning { margin-top: 14px; padding: 14px 15px; border-left: 4px solid #8a6b2c; border-radius: 8px; background: #fff9ed; }
.protocol-final-warning p { margin: 4px 0 0; color: #695d42; line-height: 1.5; }
.protocol-submit-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }
.protocol-completed-panel { display: grid; grid-template-columns: 54px minmax(0,1fr); gap: 16px; margin-top: 16px; padding: 22px; border-color: #cfe2d9; background: #f7fbf9; }
.protocol-completed-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 50%; background: #dcece5; color: #2d6956; font-size: 24px; font-weight: 800; }
.protocol-completed-content h3 { margin: 4px 0 6px; }
.protocol-completed-content > p { color: var(--muted); }
.protocol-completed-details { margin-top: 16px; }
.protocol-hash { overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 11px; }
.protocol-document-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.protocols-stage-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.protocol-stage-card { padding: 16px; border: 1px solid var(--line); border-radius: 13px; background: #fff; }
.protocol-stage-card.done { border-color: #cce2d8; background: #f7fbf9; }
.protocol-stage-card.locked { background: #f7f8f8; color: var(--muted); }
.protocol-stage-head { display: flex; justify-content: space-between; gap: 10px; align-items: start; }
.protocol-stage-head h4 { margin: 4px 0 0; }
.protocol-stage-card > p { margin: 10px 0 0; color: var(--muted); line-height: 1.5; }
.protocol-stage-meta { display: grid; gap: 6px; margin-top: 12px; font-size: 12px; }
.protocol-stage-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.portal-protocol-list { display: grid; gap: 10px; padding: 0 22px 20px; }
.portal-protocol-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 15px; border: 1px solid #d6e4de; border-radius: 12px; background: #f7fbf9; }
.portal-protocol-item span, .portal-protocol-item strong, .portal-protocol-item small { display: block; }
.portal-protocol-item small { margin-top: 3px; color: var(--muted); }

@media (max-width: 820px) {
    .protocol-hero { align-items: stretch; flex-direction: column; }
    .protocol-hero-meta { min-width: 0; }
    .protocol-intro-grid, .protocol-sign-grid, .protocols-stage-grid { grid-template-columns: 1fr; }
    .protocol-condition-head { display: none; }
    .protocol-condition-row { grid-template-columns: 1fr; padding: 12px; gap: 8px; }
    .protocol-condition-row > * { padding: 0; border: 0; }
    .protocol-condition-row > strong { margin-bottom: 3px; }
    .protocol-radio { justify-content: flex-start; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; text-align: left; }
    .protocol-binary-row { align-items: flex-start; flex-direction: column; }
    .protocol-binary-row > div { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .protocol-binary-row label { min-height: 40px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; background: #fff; }
    .protocol-status-options { grid-template-columns: 1fr; }
    .protocol-status-option { min-height: 46px; padding: 10px 12px; font-size: 13px; }
    .protocol-photo-intro { flex-direction: column; gap: 10px; }
    .protocol-photo-counter { align-self: flex-start; }
    .protocol-photo-item-grid { grid-template-columns: 1fr; }
    .protocol-photo-add-row { align-items: stretch; flex-direction: column; }
    .protocol-photo-add-row .button { width: 100%; }
    .protocol-photo-preview img { max-height: 260px; }
    .protocol-signature-canvas-wrap { height: 210px; }
    .protocol-submit-row { display: grid; grid-template-columns: 1fr; }
    .protocol-submit-row .button { width: 100%; }
    .protocol-completed-panel { grid-template-columns: 1fr; }
    .protocol-document-actions { display: grid; grid-template-columns: 1fr; }
    .protocol-document-actions .button { width: 100%; }
    .portal-protocol-item { align-items: stretch; flex-direction: column; }
    .portal-protocol-item .button { width: 100%; }
}

@media (max-width: 520px) {
    .protocol-form-body, .protocol-info-card, .protocol-hero { padding-left: 15px; padding-right: 15px; }
    .protocol-photo-item { padding: 12px; }
    .protocol-photo-item-head { align-items: flex-start; }
    .protocol-photo-remove { min-height: 36px; }
    .protocol-photo-upload { min-height: 132px; padding: 15px; }
    .protocol-photo-preview img { max-height: 220px; }
    .protocol-signature-canvas-wrap { height: 190px; }
}

/* v0.15.1 – Projektweite Mobile-Modal-Invariante
   Sämtliche Popups/Modals müssen auf Smartphones mittig im sichtbaren Bereich
   erscheinen. Feature-spezifische Regeln dürfen daraus kein Bottom-Sheet machen. */
@media (max-width: 780px) {
    .modal-backdrop,
    .modal-backdrop.identity-preview-backdrop,
    .modal-backdrop.contract-preview-backdrop {
        align-items: center !important;
        justify-content: center !important;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)) !important;
        box-sizing: border-box;
    }

    .modal {
        margin: auto !important;
        border-radius: 16px !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        overscroll-behavior: contain;
    }

    .identity-preview-modal,
    .contract-preview-modal {
        width: 100% !important;
        height: calc(100vh - 24px) !important;
        height: calc(100dvh - 24px) !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        border-radius: 16px !important;
        overflow: hidden;
    }
}

@media (max-width: 420px) {
    .modal-backdrop,
    .modal-backdrop.identity-preview-backdrop,
    .modal-backdrop.contract-preview-backdrop {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .modal {
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }

    .identity-preview-modal,
    .contract-preview-modal {
        height: calc(100vh - 20px) !important;
        height: calc(100dvh - 20px) !important;
        max-height: calc(100vh - 20px) !important;
        max-height: calc(100dvh - 20px) !important;
    }
}

/* v0.16.2 – Große sequenzielle Vor-Ort-Unterschriften im mittigen Popup. */
.protocol-sign-card { display: grid; gap: 14px; padding: 16px; }
.protocol-sign-card-copy { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; min-width: 0; }
.protocol-sign-card-copy > div { min-width: 0; }
.protocol-sign-card-copy strong,
.protocol-sign-card-copy > div > span { display: block; }
.protocol-sign-card-copy > div > span { margin-top: 3px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.protocol-sign-status { flex: 0 0 auto; padding: 5px 8px; border-radius: 999px; background: #eef2f1; color: #61706a; font-size: 10px; font-weight: 800; white-space: nowrap; }
.protocol-sign-card.is-signed .protocol-sign-status { background: #dcece5; color: #2d6956; }
.protocol-sign-card.is-locked { opacity: .68; background: #f5f6f6; }
.protocol-sign-card.is-locked .protocol-sign-open { cursor: not-allowed; }
.protocol-sign-open { width: 100%; min-height: 44px; }
.protocol-sign-sequence-note { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.protocol-signature-backdrop { z-index: 180; }
.protocol-signature-modal { width: min(920px, 100%); overflow: hidden; }
.protocol-signature-modal-body { padding: 20px 22px 16px; }
.protocol-signature-person { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }
.protocol-signature-person strong { font-size: 15px; }
.protocol-signature-person span { color: var(--muted); font-size: 12px; text-align: right; overflow-wrap: anywhere; }
.protocol-signature-instruction { margin: 0 0 14px; color: var(--muted); line-height: 1.5; }
.protocol-signature-modal-canvas-wrap { position: relative; height: clamp(300px, 44vh, 430px); min-height: 300px; overflow: hidden; border: 2px solid #bfcac5; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px rgba(37,79,68,.04); }
.protocol-signature-modal-canvas-wrap.is-signed { border-color: #7ba28f; }
.protocol-signature-modal-canvas { display: block; width: 100%; height: 100%; background: #fff; touch-action: none; cursor: crosshair; outline: none; }
.protocol-signature-modal-canvas:focus-visible { box-shadow: inset 0 0 0 3px rgba(37,79,68,.12); }
.protocol-signature-modal-canvas-wrap .protocol-signature-hint { inset: auto 16px 13px; font-size: 12px; }
.protocol-signature-modal-canvas-wrap.is-signed .protocol-signature-hint { opacity: 0; }
.protocol-signature-modal-tools { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 12px; }
.protocol-signature-modal-error { color: #983f3f; font-size: 12px; font-weight: 700; }
.protocol-signature-modal-footer { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 20px; border-top: 1px solid var(--line); background: #fafbfb; }

@media (max-width: 780px) {
    .protocol-sign-card-copy { flex-direction: column; gap: 8px; }
    .protocol-sign-status { align-self: flex-start; }
    .protocol-signature-modal { width: 100% !important; max-height: calc(100dvh - 24px) !important; }
    .protocol-signature-modal-body { padding: 16px; }
    .protocol-signature-person { align-items: flex-start; flex-direction: column; gap: 3px; }
    .protocol-signature-person span { text-align: left; }
    .protocol-signature-modal-canvas-wrap { height: min(42dvh, 340px); min-height: 230px; }
    .protocol-signature-modal-tools { align-items: stretch; flex-direction: column; }
    .protocol-signature-modal-tools .button { width: 100%; }
    .protocol-signature-modal-footer { display: grid; grid-template-columns: 1fr; padding: 14px 16px 16px; }
    .protocol-signature-modal-footer .button { width: 100%; }
}

@media (max-width: 420px) {
    .protocol-signature-modal-canvas-wrap { height: min(38dvh, 300px); min-height: 210px; }
}


/* v0.16.5 – Signatur-Popup im Smartphone-Querformat: maximale Zeichenfläche,
   exakte visualViewport-Höhe und weiterhin mittige Modal-Darstellung. */
@media (orientation: landscape) and (max-height: 700px) {
    .protocol-signature-backdrop {
        align-items: center;
        justify-content: center;
        padding: max(4px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(4px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left));
        box-sizing: border-box;
    }

    .protocol-signature-modal {
        width: min(1120px, 100%) !important;
        height: calc(var(--protocol-signature-viewport-height, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
        max-height: calc(var(--protocol-signature-viewport-height, 100dvh) - max(8px, env(safe-area-inset-top)) - max(8px, env(safe-area-inset-bottom))) !important;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr) auto;
        overflow: hidden;
        border-radius: 14px;
    }

    .protocol-signature-modal .modal-head {
        position: static;
        min-height: 0;
        padding: 6px 10px;
        gap: 8px;
    }

    .protocol-signature-modal .modal-head .eyebrow { display: none; }
    .protocol-signature-modal .modal-head h2 { margin: 0; font-size: 16px; line-height: 1.15; }
    .protocol-signature-modal .modal-head .icon-button { width: 34px; height: 34px; min-width: 34px; }

    .protocol-signature-modal-body {
        min-height: 0;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        padding: 6px 10px;
    }

    .protocol-signature-person {
        min-height: 0;
        align-items: center;
        justify-content: flex-end;
        flex-direction: row;
        gap: 8px;
        margin: 0 0 2px;
    }

    .protocol-signature-person strong { display: none; }
    .protocol-signature-person span { font-size: 10px; line-height: 1.1; text-align: right; }
    .protocol-signature-instruction { margin: 0 0 4px; font-size: 10px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    .protocol-signature-modal-canvas-wrap {
        flex: 1 1 auto;
        width: 100%;
        height: auto;
        min-height: 150px;
        max-height: none;
        border-radius: 10px;
    }

    .protocol-signature-modal-canvas-wrap .protocol-signature-hint {
        inset: auto 10px 6px;
        font-size: 10px;
    }

    .protocol-signature-modal-tools {
        flex: 0 0 auto;
        min-height: 34px;
        align-items: center;
        flex-direction: row;
        gap: 8px;
        margin-top: 4px;
    }

    .protocol-signature-modal-tools .button {
        width: auto;
        min-height: 34px;
        padding: 5px 9px;
        font-size: 12px;
    }

    .protocol-signature-modal-error { font-size: 10px; }

    .protocol-signature-modal-footer {
        display: flex;
        justify-content: flex-end;
        gap: 7px;
        padding: 5px 10px 6px;
    }

    .protocol-signature-modal-footer .button {
        width: auto;
        min-height: 34px;
        padding: 5px 10px;
        font-size: 12px;
    }
}

@media (orientation: landscape) and (max-height: 430px) {
    .protocol-signature-modal {
        border-radius: 10px;
    }
    .protocol-signature-modal .modal-head { padding-top: 4px; padding-bottom: 4px; }
    .protocol-signature-modal .modal-head h2 { font-size: 15px; }
    .protocol-signature-modal .modal-head .icon-button { width: 30px; height: 30px; min-width: 30px; }
    .protocol-signature-modal-body { padding-top: 4px; padding-bottom: 4px; }
    .protocol-signature-person { display: none; }
    .protocol-signature-instruction { margin-bottom: 3px; }
    .protocol-signature-modal-canvas-wrap { min-height: 130px; }
    .protocol-signature-modal-tools { min-height: 30px; margin-top: 3px; }
    .protocol-signature-modal-tools .button,
    .protocol-signature-modal-footer .button { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
    .protocol-signature-modal-footer { padding-top: 4px; padding-bottom: 4px; }
}


/* v0.16.6 – Vertragsübersicht: Offen / Erledigt / Storniert + Live-Suche */
.contract-worklist { overflow: visible; }
.contract-worklist-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 0 18px 14px;
    border-bottom: 1px solid var(--line);
}
.contract-view-tabs {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}
.contract-view-tab {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--muted);
    min-height: 38px;
    padding: 7px 11px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    white-space: nowrap;
}
.contract-view-tab strong {
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(15, 23, 42, .08);
    color: inherit;
    font-size: 10px;
}
.contract-view-tab:hover { color: var(--text); }
.contract-view-tab.active {
    background: #fff;
    color: var(--text);
    box-shadow: 0 1px 3px rgba(15, 23, 42, .08);
}
.contract-view-tab.active strong { background: rgba(37, 79, 68, .12); color: var(--accent); }
.contract-view-tab:focus-visible { outline: 3px solid rgba(22, 101, 52, .18); outline-offset: 2px; }

.contract-live-search {
    position: relative;
    flex: 1 1 380px;
    max-width: 520px;
    min-width: 240px;
}
.contract-live-search input {
    width: 100%;
    min-height: 42px;
    padding: 9px 42px 9px 39px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: #fff;
    color: var(--text);
    font: inherit;
    font-size: 13px;
}
.contract-live-search input:focus {
    border-color: rgba(22, 101, 52, .55);
    outline: 3px solid rgba(22, 101, 52, .10);
}
.contract-live-search-icon {
    position: absolute;
    left: 13px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
}
.contract-search-clear {
    position: absolute;
    right: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--muted);
    font-size: 21px;
    line-height: 1;
    cursor: pointer;
}
.contract-search-clear:hover { background: var(--surface-soft); color: var(--text); }
.contract-search-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 18px;
    color: var(--muted);
    font-size: 11px;
}
.contract-search-meta [data-contract-result-count] { color: var(--text); font-weight: 800; }
.contract-search-hint { text-align: right; }
.contract-record[hidden], .contract-filter-empty[hidden] { display: none !important; }
.contract-filter-empty { margin: 4px 18px 18px; }

.contract-workflow-status {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: .02em;
}
.contract-workflow-status.open { background: #fff7ed; color: #9a3412; }
.contract-workflow-status.done { background: #ecfdf3; color: #166534; }
.contract-workflow-status.cancelled { background: #fef2f2; color: #991b1b; }
.contract-table td:nth-child(5) small { display: block; max-width: 240px; margin-top: 5px; line-height: 1.35; }
.contract-archive-card dl .span-2 { grid-column: 1 / -1; }

@media (max-width: 960px) {
    .contract-worklist-toolbar {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }
    .contract-view-tabs { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .contract-view-tab { justify-content: center; min-width: 0; padding-left: 7px; padding-right: 7px; }
    .contract-live-search { max-width: none; min-width: 0; flex-basis: auto; }
}

@media (max-width: 720px) {
    .contract-worklist-toolbar { padding: 0 12px 12px; }
    .contract-view-tabs { gap: 3px; padding: 3px; border-radius: 10px; }
    .contract-view-tab { min-height: 40px; gap: 5px; font-size: 11px; }
    .contract-view-tab strong { min-width: 20px; height: 20px; padding: 0 5px; font-size: 9px; }
    .contract-live-search input { min-height: 44px; font-size: 16px; }
    .contract-search-meta { align-items: flex-start; padding: 9px 12px; }
    .contract-search-hint { display: none; }
    .contract-filter-empty { margin: 4px 12px 14px; }
    .contract-archive-card dl { grid-template-columns: 1fr; }
    .contract-archive-card dl .span-2 { grid-column: auto; }
}


/* v0.16.7 – Reservierungsübersicht im gleichen Arbeitslisten-Aufbau wie Verträge */
.reservation-worklist { overflow: visible; }
.reservation-record[hidden] { display: none !important; }
.reservation-worklist-table td:nth-child(5) small { display: block; max-width: 280px; margin-top: 5px; line-height: 1.35; }
.reservation-worklist-table td:nth-child(5) small + small { margin-top: 3px; color: #7a848e; }
@media (max-width: 720px) {
    .reservation-worklist .reservations-head { align-items: stretch; }
    .reservation-worklist .reservations-head .button { width: 100%; }
}

/* v0.17.0 – zentrale SMTP-Ausgangskonfiguration */
.smtp-settings-form .field-state-ok {
    color: #166534;
    font-weight: 800;
}
.smtp-enable-row {
    padding: 14px 15px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
}
.smtp-settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 2px;
}
.smtp-test-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: end;
    max-width: 760px;
}
.smtp-test-form .button {
    min-height: 44px;
    white-space: nowrap;
}
@media (max-width: 720px) {
    .smtp-settings-actions { justify-content: stretch; }
    .smtp-settings-actions .button { width: 100%; }
    .smtp-test-form { grid-template-columns: 1fr; }
    .smtp-test-form .button { width: 100%; }
}

/* v0.18.1 – Benutzerkommunikation und Passwort-Zurücksetzung */
.account-mail-hint,
.account-status-card {
    min-height: 74px;
    padding: 13px 14px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--surface-soft);
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.account-mail-hint strong,
.account-status-card strong { font-size: 13px; }
.account-mail-hint small,
.account-status-card small { color: var(--muted); line-height: 1.45; }
.auth-secondary-action { margin-top: 14px; text-align: center; }
.auth-secondary-action a { color: var(--accent); font-weight: 750; text-decoration: none; }
.auth-secondary-action a:hover { text-decoration: underline; }
.auth-success { margin: 0 0 18px; }
@media (max-width: 720px) {
    .account-mail-hint,
    .account-status-card { min-height: 0; }
}


/* v0.19.6 – Ein-Klick-Documenso-Workflow */
.contract-one-click-hint {
    flex: 1 1 100%;
    font-size: .84rem;
    color: var(--muted);
    margin: 0 0 .1rem;
}

/* v0.19.9 – Anfrage-Metadaten */
.inquiry-mail-sent-at { display: block; margin-top: 6px; font-weight: 700; color: var(--text); }
[data-inquiry-member-number][hidden],
[data-inquiry-identity-section][hidden] {
    display: none !important;
}


.portal-action-section.portal-active-target {
    scroll-margin-top: 1.5rem;
    border-color: #9cbcae;
    box-shadow: 0 0 0 1px rgba(37, 79, 68, 0.08), 0 18px 40px rgba(17, 32, 50, 0.08);
}

.portal-action-section.portal-active-target .portal-section-head h2 {
    color: #183428;
}