:root {
    --public-sidebar-bg: #10151f;
    --public-sidebar-border: rgba(255, 255, 255, .08);
    --public-sidebar-link: rgba(255, 255, 255, .76);
    --public-sidebar-active-bg: #ffffff;
    --public-sidebar-active-text: #172033;

    --page-bg: #f4f6fa;
    --surface: #ffffff;
    --surface-soft: #f8fafc;
    --text: #172033;
    --text-soft: #667085;
    --border: rgba(16, 24, 40, .10);
    --border-strong: rgba(16, 24, 40, .16);
    --primary: #1d4ed8;
    --primary-hover: #1e40af;
    --danger: #c62828;
    --success: #1f9d57;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
    --shadow-md: 0 10px 30px rgba(16, 24, 40, .08);
    --shadow-lg: 0 24px 70px rgba(16, 24, 40, .14);
    --public-sidebar-width: 288px;
    --content-max: 1500px;
}

*, *::before, *::after { box-sizing: border-box; }
html { width: 100%; min-height: 100%; scroll-behavior: smooth; }
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    background: var(--surface);
    color: var(--text);
    line-height: 1.5;
    overflow-x: hidden;
    overflow-y: auto;
}
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
img { max-width: 100%; display: block; }

.public-page {
    min-height: 100dvh;
    display: grid;
    grid-template-columns: var(--public-sidebar-width) minmax(0, 1fr);
    background: var(--surface);
}

.public-header {
    position: sticky;
    top: 0;
    height: 100dvh;
    min-height: 100dvh;
    background: var(--public-sidebar-bg);
    color: #fff;
    display: flex;
    flex-direction: column;
    padding: 28px 0 22px 22px;
    border-right: 0;
    z-index: 50;
}

.public-brand-link {
    color: inherit;
    text-decoration: none;
    padding: 4px 20px 24px 6px;
    margin: 0 20px 22px 0;
    border-bottom: 1px solid var(--public-sidebar-border);
}
.public-brand {
    margin: 0;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 42px;
    font-weight: 400;
    line-height: .95;
    letter-spacing: .005em;
    color: #fff;
    text-transform: lowercase;
}
.public-brand-subtitle {
    margin: 7px 0 0;
    color: rgba(255,255,255,.64);
    font-size: 12px;
    font-weight: 650;
}

.public-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-right: 0;
    flex: 1 1 auto;
}
.public-nav-link {
    position: relative;
    min-height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 16px 10px 18px;
    border-radius: 24px 0 0 24px;
    color: var(--public-sidebar-link);
    background: transparent;
    font-size: 15px;
    font-weight: 750;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease, transform .18s ease;
}
.public-nav-link::after {
    content: "";
    position: absolute;
    top: 0;
    right: -1px;
    width: 2px;
    height: 100%;
    background: transparent;
    transition: background .18s ease;
}
.public-nav-link:hover {
    background: rgba(255,255,255,.12);
    color: #fff;
}
.public-nav-link:hover::after { background: rgba(255,255,255,.12); }
.public-nav-link.is-active {
    background: var(--public-sidebar-active-bg);
    color: var(--public-sidebar-active-text);
    font-weight: 850;
}
.public-nav-link.is-active::after { background: var(--public-sidebar-active-bg); }
.public-nav-link.is-active:hover {
    background: var(--public-sidebar-active-bg);
    color: var(--public-sidebar-active-text);
    transform: none;
}
.public-nav-link.is-active:hover::after { background: var(--public-sidebar-active-bg); }

.public-main {
    width: 100%;
    min-width: 0;
    min-height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px;
    background: var(--surface);
}
.public-main.is-centered-card,
.public-auth-page .public-main,
.public-code-page .public-main {
    align-items: center;
}

.content-card {
    position: relative;
    width: min(100%, var(--content-max));
    min-height: calc(100dvh - 48px);
    max-height: none;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.content-card::after { display: none; }
.content-card-header {
    flex: 0 0 auto;
    padding: 24px 28px 20px;
    border-bottom: 1px solid var(--border);
    background: var(--surface);
    position: relative;
    z-index: 4;
    display: grid;
    gap: 18px;
}
.content-heading { margin: 0; }
.content-heading h2 {
    margin: 0;
    font-size: 32px;
    line-height: 1.1;
    letter-spacing: -.03em;
}
.content-heading p {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 14px;
}
.content-card-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 24px 28px 30px;
    scrollbar-gutter: stable;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(23, 32, 51, .32) transparent;
}
.content-card-body::-webkit-scrollbar { width: 10px; }
.content-card-body::-webkit-scrollbar-track { background: transparent; }
.content-card-body::-webkit-scrollbar-thumb {
    background: rgba(23, 32, 51, .26);
    border-radius: 999px;
    border: 3px solid var(--surface);
}

.login-card, .public-auth-card, .public-code-card {
    width: 460px;
    max-width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 30px;
    margin-left: auto;
    margin-right: auto;
}
.login-heading, .public-card-heading, .code-heading {
    text-align: center;
    margin-bottom: 24px;
}
.login-heading h2, .public-card-heading h2, .code-heading h2 {
    margin: 0;
    font-size: 30px;
    line-height: 1.1;
    letter-spacing: -.03em;
}
.login-heading p, .public-card-heading p, .code-heading p {
    margin: 10px 0 0;
    color: var(--text-soft);
    font-size: 14px;
}
.login-form, .public-code-form, .code-form { display: grid; gap: 16px; }

.code-input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}
.code-boxes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.code-box {
    width: 100%;
    aspect-ratio: 1 / 1;
    min-height: 56px;
    border-radius: 16px;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--text);
    text-align: center;
    font-size: 24px;
    line-height: 1;
    font-weight: 850;
    text-transform: uppercase;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.code-box:focus {
    border-color: rgba(29,78,216,.65);
    box-shadow: 0 0 0 4px rgba(29,78,216,.12);
    transform: translateY(-1px);
}

.form-hint { margin: 4px 0 0; color: var(--text-soft); font-size: 13px; line-height: 1.45; }
.public-document-page .public-main { align-items: flex-start; }
.public-document-page .content-card { width: min(100%, var(--content-max)); }
.content-section { padding-top: 0; margin-top: 28px; }
.content-section:first-child { margin-top: 0; }
.content-section h3 { margin: 24px 0 10px; font-size: 18px; line-height: 1.25; }
.content-section h3:first-child { margin-top: 0; }
.content-section p { margin: 0 0 10px; color: var(--text); font-size: 15px; }
.content-section p:last-child { margin-bottom: 0; }
.content-section ul, .legal-list { margin: 10px 0 0; padding-left: 20px; font-size: 15px; }
.content-section li, .legal-list li { margin: 4px 0; }
.legal-note { padding: 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--surface-soft); }
.uppercase-note { font-weight: 750; text-transform: uppercase; letter-spacing: .01em; }

.public-selbstauskunft-page .public-main { align-items: flex-start; }
.progress-wrap { display: grid; gap: 8px; }
.progress-meta { display: flex; justify-content: space-between; gap: 16px; color: var(--text-soft); font-size: 13px; font-weight: 750; }
.progress-track { width: 100%; height: 12px; border-radius: 999px; background: #ecfdf5; border: 1px solid rgba(34,197,94,.18); overflow: hidden; }
.progress-bar { width: 0%; height: 100%; background: linear-gradient(90deg, #bbf7d0, #86efac); border-radius: 999px; transition: width .22s ease; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.full { grid-column: 1 / -1; }
.wizard-step { grid-column: 1 / -1; display: none; gap: 16px; min-width: 0; }
.wizard-step.is-active { display: grid; }
.form-section { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--border); min-width: 0; }
.form-section.no-top-border { padding-top: 0; margin-top: 0; border-top: 0; }
.section-title { grid-column: 1 / -1; margin: 0 0 2px; font-size: 18px; line-height: 1.25; }
.section-note { grid-column: 1 / -1; margin: -4px 0 4px; color: var(--text-soft); font-size: 13px; }
.subsection-title { margin: 10px 0 -4px; font-size: 15px; line-height: 1.3; color: var(--text); }
.form-group { display: grid; gap: 8px; min-width: 0; }
.form-label { font-size: 13px; font-weight: 700; color: var(--text); }
.input, .select, .textarea {
    width: 100%;
    min-height: 48px;
    border-radius: 14px;
    border: 1px solid var(--border-strong);
    background: #fff;
    color: var(--text);
    padding: 11px 14px;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
.textarea { min-height: 88px; resize: vertical; }
.input[readonly] { background: var(--surface-soft); color: var(--text-soft); }
.input:focus, .select:focus, .textarea:focus {
    border-color: rgba(29,78,216,.55);
    box-shadow: 0 0 0 4px rgba(29,78,216,.10);
}
.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
.check { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); color: var(--text); font-size: 14px; }
.check input { width: auto; margin: 4px 0 0; flex: 0 0 auto; }
.hidden { display: none !important; }

.object-context { grid-column: 1 / -1; display: grid; gap: 6px; padding: 16px 18px; margin-bottom: 22px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-soft); }
.object-context-label { color: var(--text-soft); font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.object-context-title { font-size: 18px; font-weight: 850; color: var(--text); }
.object-context-details { color: var(--text-soft); font-size: 14px; }
.tenant-layout { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; align-items: start; min-width: 0; }
.tenant-column { display: grid; grid-template-columns: 1fr; gap: 16px; padding: 0; border: 0; border-radius: 0; background: transparent; min-width: 0; }
.tenant-column-main { grid-column: 1; }
.tenant-column-second { grid-column: 2; background: transparent; position: relative; }
.tenant-placeholder { grid-column: 2; min-height: 0; display: flex; align-items: flex-start; justify-content: stretch; padding-top: 67px; }
.tenant-toggle-card { width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
.tenant-toggle-card .check { width: 100%; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; cursor: pointer; border: 1px solid var(--border-strong); border-radius: 14px; background: #fff; color: var(--text); padding: 11px 14px; font-weight: 750; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.tenant-toggle-card .check:hover { background: var(--surface-soft); }
.tenant-toggle-card .check input { margin: 0; }
.tenant-column-header { display: block; padding-right: 92px; }
.tenant-column-header .section-title { margin: 0 0 2px; }
.tenant-column-header #removeP2 { position: absolute; top: 0; right: 0; }
.address-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; align-items: end; }
.income-box { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 0; margin-top: 2px; border: 0; border-radius: 0; background: transparent; }
.income-box-header { display: grid; gap: 5px; }
.income-box-header h3 { margin: 0; font-size: 18px; line-height: 1.25; }
.income-box-header p { margin: 0; color: var(--text-soft); font-size: 13px; }

.residents-section { grid-column: 1 / -1; display: grid; gap: 16px; padding-top: 24px; margin-top: 8px; border-top: 1px solid var(--border); min-width: 0; width: 100%; max-width: 100%; }
.residents-table-wrap { width: 100%; max-width: 100%; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow-x: auto; overflow-y: hidden; background: var(--surface); }
.residents-table { width: 100%; min-width: 920px; border-collapse: collapse; table-layout: fixed; }
.residents-table th, .residents-table td { box-sizing: border-box; }
.residents-table th:nth-child(1), .residents-table td:nth-child(1) { width: 19%; }
.residents-table th:nth-child(2), .residents-table td:nth-child(2) { width: 19%; }
.residents-table th:nth-child(3), .residents-table td:nth-child(3) { width: 18%; }
.residents-table th:nth-child(4), .residents-table td:nth-child(4) { width: 34%; }
.residents-table th:nth-child(5), .residents-table td:nth-child(5) { width: 70px; }
.residents-table th { text-align: left; font-size: 12px; letter-spacing: .03em; text-transform: uppercase; color: var(--text-soft); background: var(--surface-soft); border-bottom: 1px solid var(--border); padding: 12px; }
.residents-table td { border-bottom: 1px solid var(--border); padding: 8px; vertical-align: middle; }
.residents-table .input { min-height: 42px; border-radius: 11px; padding: 9px 11px; }
.resident-remove-cell { width: 52px; text-align: center; }
.resident-remove { width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(198,40,40,.22); border-radius: 10px; background: rgba(198,40,40,.08); color: var(--danger); cursor: pointer; font-weight: 900; line-height: 1; }
.resident-add-row { cursor: pointer; }
.resident-add-row td { padding: 0; border-bottom: 0; }
.resident-add-button { width: 100%; min-height: 52px; border: 0; background: var(--surface-soft); color: var(--primary); cursor: pointer; font-size: 24px; font-weight: 850; line-height: 1; }

.disclosure-table { grid-column: 1 / -1; width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; background: var(--surface); table-layout: fixed; }
.disclosure-table th, .disclosure-table td { border-bottom: 1px solid var(--border); border-right: 1px solid var(--border); }
.disclosure-table th:last-child, .disclosure-table td:last-child { border-right: 0; }
.disclosure-table tr:last-child td { border-bottom: 0; }
.disclosure-table th { padding: 13px 14px; background: var(--surface-soft); color: var(--text-soft); font-size: 12px; font-weight: 850; letter-spacing: .03em; text-transform: uppercase; text-align: left; }
.disclosure-table th:nth-child(2), .disclosure-table th:nth-child(3) { width: 120px; text-align: center; }
.disclosure-table td { padding: 14px; background: #fff; color: var(--text); font-size: 14px; vertical-align: middle; }
.disclosure-table .answer-cell { padding: 0; text-align: center; cursor: pointer; user-select: none; background: #fff; color: var(--text); font-weight: 850; transition: background .18s ease, color .18s ease; }
.disclosure-table .answer-cell:hover { background: var(--surface-soft); }
.disclosure-table .answer-cell.is-selected { background: var(--primary); color: #fff; }
.disclosure-table .answer-cell label { width: 100%; min-height: 54px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.disclosure-table .answer-cell input { position: absolute; opacity: 0; pointer-events: none; }
.disclosure-comment { grid-column: 1 / -1; display: grid; gap: 10px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-soft); }
.disclosure-comment .textarea { min-height: 120px; background: #fff; }

.upload-section { grid-column: 1 / -1; display: grid; gap: 18px; }
.upload-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.upload-card { display: grid; gap: 8px; padding: 18px; border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-soft); cursor: pointer; }
.upload-card:hover { background: #fff; border-color: rgba(29,78,216,.38); box-shadow: 0 0 0 4px rgba(29,78,216,.08); }
.upload-title { font-size: 15px; font-weight: 850; }
.upload-note { color: var(--text-soft); font-size: 13px; }
.upload-card input { margin-top: 8px; }
.upload-list-box { display: grid; gap: 8px; padding: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: #fff; }
.upload-list-box h4 { margin: 0; font-size: 15px; }
.upload-list-empty, .upload-list { color: var(--text-soft); font-size: 14px; }
.upload-list { display: grid; gap: 6px; }

.wizard-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 10px; padding-top: 18px; margin-top: 8px; border-top: 1px solid var(--border); }
.button-row { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin-top: 10px; }
.btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 14px; padding: 11px 18px; cursor: pointer; font-weight: 750; white-space: nowrap; transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:disabled, .btn.is-disabled { cursor: not-allowed; opacity: .58; transform: none; }
.btn-primary { background: var(--primary); color: #fff; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-secondary { background: var(--surface-soft); color: var(--text); border-color: var(--border-strong); }
.btn-danger { background: rgba(198,40,40,.08); color: var(--danger); border-color: rgba(198,40,40,.22); }
.btn-small { min-height: 34px; padding: 6px 10px; border-radius: 11px; font-size: 13px; line-height: 1; }

.summary { grid-column: 1 / -1; display: grid; gap: 0; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.summary-row { display: grid; grid-template-columns: 260px 1fr; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); background: #fff; }
.summary-row:last-child { border-bottom: 0; }
.summary-row strong { color: var(--text); }
.summary-row span { color: var(--text-soft); overflow-wrap: anywhere; white-space: pre-line; }
.signature-box { grid-column: 1 / -1; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.signature-box canvas { display: block; width: 100%; height: 190px; touch-action: none; }
.alert { grid-column: 1 / -1; border-radius: var(--radius-md); padding: 13px 14px; margin-bottom: 4px; font-size: 14px; border: 1px solid transparent; }
.alert-error { background: rgba(198,40,40,.08); color: #9f1d1d; border-color: rgba(198,40,40,.18); }
.alert-success { background: rgba(31,157,87,.10); color: #146c43; border-color: rgba(31,157,87,.18); }

.public-modal, .submit-progress-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, .56);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.public-modal.is-open, .public-modal[aria-hidden="false"], .submit-progress-modal:not(.hidden) { display: flex; }
.public-modal-card, .submit-progress-card {
    width: min(100%, 560px);
    max-height: min(720px, calc(100dvh - 48px));
    overflow: auto;
    display: grid;
    gap: 16px;
    padding: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
}
.public-modal-card h2, .submit-progress-card h3 { margin: 0; font-size: 24px; line-height: 1.2; letter-spacing: -.02em; }
.public-modal-card p, .submit-progress-card p { margin: 0; color: var(--text-soft); font-size: 14px; }
.public-modal-close { position: absolute; top: 14px; right: 16px; border: 0; background: transparent; color: var(--text-soft); font-size: 26px; cursor: pointer; }
body.public-modal-open, body.is-submitting { overflow: visible; }
.submit-progress-card { width: min(100%, 420px); justify-items: center; text-align: center; }
.submit-progress-circle { --progress: 0; width: 132px; height: 132px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--primary) calc(var(--progress) * 1%), rgba(29,78,216,.12) 0); transition: background .18s ease; }
.submit-progress-inner { width: 104px; height: 104px; display: grid; place-items: center; border-radius: 50%; background: #fff; }
.submit-progress-percent { color: var(--text); font-size: 25px; font-weight: 850; line-height: 1; }
.submit-progress-check { width: 58px; height: 58px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(34,197,94,.14); color: #16a34a; border: 1px solid rgba(34,197,94,.28); font-size: 36px; font-weight: 900; line-height: 1; }
.submit-progress-percent.hidden, .submit-progress-check.hidden { display: none !important; }
.submit-progress-actions { display: flex; justify-content: center; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.submit-progress-actions .btn { min-width: 190px; flex: 1 1 190px; }
.submit-progress-actions.hidden { display: none !important; }

.login-card .btn-primary, .public-auth-card .btn-primary, .public-code-card .btn-primary { width: 100%; min-height: 58px; font-size: 18px; border-radius: 18px; }
.login-card .button-row, .public-auth-card .button-row, .public-code-card .button-row { display: grid; grid-template-columns: 1fr; width: 100%; margin-top: 20px; }
.login-card .login-form .btn-primary, .public-auth-card .login-form .btn-primary, .public-code-card .public-code-form .btn-primary, .public-code-card .code-form .btn-primary, .login-form > .btn-primary, .public-code-form > .btn-primary, .code-form > .btn-primary { width: 100%; }

@media (max-width: 1100px) {
    .public-page { grid-template-columns: 1fr; }
    .public-header {
        position: relative;
        top: auto;
        height: auto;
        min-height: 0;
        padding: 18px;
        border-bottom: 1px solid var(--public-sidebar-border);
    }
    .public-brand-link {
        padding: 2px 6px 14px;
        margin: 0;
        border-bottom: 1px solid var(--public-sidebar-border);
        width: 100%;
        text-align: center;
    }
    .public-brand { font-size: 34px; }
    .public-nav {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        padding-top: 14px;
    }
    .public-nav-link, .public-nav-link:hover, .public-nav-link.is-active, .public-nav-link.is-active:hover {
        flex: 1 1 calc(50% - 8px);
        width: auto;
        border-radius: 14px;
        justify-content: center;
        min-height: 44px;
    }
    .public-nav-link::after { display: none; }
    .public-nav-link:hover { background: rgba(255,255,255,.12); color: #fff; }
    .public-nav-link.is-active { background: rgba(255,255,255,.18); color: #fff; }
    .public-main { min-height: auto; padding: 18px; }
    .content-card { min-height: auto; }
    .tenant-layout { grid-template-columns: 1fr; gap: 22px; }
    .tenant-column-main, .tenant-column-second, .tenant-placeholder { grid-column: 1; }
    .tenant-placeholder { padding-top: 0; }
    .address-row { grid-template-columns: minmax(0, 1fr) 104px; }
    .residents-table { min-width: 820px; }
    .upload-grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
    .public-header { padding: 16px 14px 14px; }
    .public-brand { font-size: 30px; }
    .public-nav-link, .public-nav-link:hover, .public-nav-link.is-active, .public-nav-link.is-active:hover { flex: 1 1 100%; }
    .public-main { padding: 14px; align-items: flex-start; }
    .public-main.is-centered-card, .public-auth-page .public-main, .public-code-page .public-main { align-items: flex-start; }
    .login-card, .public-auth-card, .public-code-card { width: 100%; padding: 24px 18px; }
    .content-card { width: 100%; border-radius: 18px; }
    .content-card-header { padding: 22px 18px 18px; }
    .content-card-body { padding: 20px 18px 24px; overflow: visible; }
    .content-heading h2 { font-size: 28px; }
    .form-grid, .form-section { grid-template-columns: 1fr; }
    .wizard-actions, .button-row { flex-direction: column; align-items: stretch; }
    .btn { width: 100%; }
    .summary-row { grid-template-columns: 1fr; }
    .disclosure-table { table-layout: auto; }
    .disclosure-table th, .disclosure-table td { font-size: 13px; }
    .disclosure-table th:nth-child(2), .disclosure-table th:nth-child(3) { width: 76px; }
    .disclosure-table td { padding: 12px; }
    .disclosure-table .answer-cell label { min-height: 52px; }
    .code-boxes { gap: 8px; }
    .code-box { min-height: 48px; font-size: 20px; border-radius: 14px; }
    .public-modal, .submit-progress-modal { padding: 14px; align-items: flex-start; overflow-y: auto; }
    .public-modal-card, .submit-progress-card { margin: 18px 0; padding: 24px 18px; max-height: none; }
    .submit-progress-actions { flex-direction: column; align-items: stretch; }
    .submit-progress-actions .btn { width: 100%; min-width: 0; }
}

@media (max-width: 520px) {
    .address-row { grid-template-columns: 1fr; }
    .submit-progress-circle { width: 116px; height: 116px; }
    .submit-progress-inner { width: 92px; height: 92px; }
}

/* =========================================================
   Public Layout: Top Navigation im Stil des eingeloggten Bereichs
   ========================================================= */
:root {
    --public-topbar-bg: #10151f;
    --public-topbar-border: rgba(255, 255, 255, .08);
    --public-nav-link: rgba(255, 255, 255, .76);
    --public-nav-hover: rgba(255, 255, 255, .10);
    --public-nav-active-bg: #ffffff;
    --public-nav-active-text: #172033;
}

body {
    background: var(--surface);
    overflow-x: hidden;
    overflow-y: auto;
}

.public-page {
    min-height: 100dvh;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr;
    background: var(--surface);
}

.public-header {
    position: sticky !important;
    top: 0;
    z-index: 100;
    width: 100%;
    height: auto !important;
    min-height: 56px !important;
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: stretch;
    gap: 22px;
    padding: 0 24px !important;
    background: var(--public-topbar-bg) !important;
    color: #fff;
    border-right: 0 !important;
    border-bottom: 1px solid var(--public-topbar-border);
    box-shadow: 0 10px 30px rgba(16, 24, 40, .10);
}

.public-brand-link {
    min-height: 56px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    padding: 0 22px 0 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
    border-right: 1px solid var(--public-topbar-border);
    color: #fff;
}

.public-brand {
    margin: 0;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
    font-size: 26px !important;
    font-weight: 400;
    line-height: .95;
    letter-spacing: .005em;
    color: #fff;
    text-transform: lowercase;
}

.public-brand-subtitle {
    display: none !important;
}

.public-nav-toggle {
    display: none;
}

.public-nav {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0 !important;
    min-width: 0;
    padding: 0 !important;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.public-nav::-webkit-scrollbar {
    display: none;
}

.public-nav-link {
    position: relative;
    width: auto !important;
    min-width: max-content;
    min-height: 56px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    padding: 0 18px !important;
    border-radius: 0 !important;
    color: var(--public-nav-link);
    background: transparent;
    font-size: 14px;
    font-weight: 750;
    white-space: nowrap;
    transition: background .18s ease, color .18s ease;
}

.public-nav-link::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 0;
    top: auto !important;
    width: auto !important;
    height: 3px !important;
    border-radius: 999px 999px 0 0;
    background: transparent;
    transition: background .18s ease;
}

.public-nav-link:hover {
    background: var(--public-nav-hover);
    color: #fff;
    transform: none !important;
}

.public-nav-link:hover::after {
    background: rgba(255, 255, 255, .28);
}

.public-nav-link.is-active {
    background: var(--public-nav-active-bg) !important;
    color: var(--public-nav-active-text) !important;
    font-weight: 850;
}

.public-nav-link.is-active::after {
    background: var(--primary) !important;
}

.public-nav-link.is-active:hover {
    background: var(--public-nav-active-bg) !important;
    color: var(--public-nav-active-text) !important;
}

.public-main {
    width: 100%;
    min-width: 0;
    min-height: calc(100dvh - 56px) !important;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 24px !important;
    background: var(--surface);
}

.public-main.is-centered-card,
.public-auth-page .public-main,
.public-code-page .public-main {
    align-items: center;
}

.content-card {
    width: min(100%, var(--content-max));
    min-height: calc(100dvh - 104px) !important;
    border-radius: 18px;
    box-shadow: var(--shadow-sm);
}

.login-card,
.public-auth-card,
.public-code-card {
    box-shadow: var(--shadow-md);
}

/* Zentrale Public-Modale */
.public-modal {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.public-modal.is-open,
.public-modal[aria-hidden="false"] {
    display: flex;
}

.public-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.public-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(620px, calc(100vw - 32px));
    max-height: calc(100dvh - 48px);
    overflow: hidden;
    border-radius: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
}

.public-modal-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid var(--border);
}

.public-modal-header h2,
.public-modal-header h3 {
    margin: 0;
    font-size: 22px;
    line-height: 1.2;
}

.public-modal-close {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 10px;
    background: var(--surface-soft);
    color: var(--text-soft);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

.public-modal-body {
    overflow-y: auto;
    padding: 20px 22px;
}

.public-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 16px 22px 20px;
    border-top: 1px solid var(--border);
}

body.public-modal-open {
    overflow: visible;
}

@media (max-width: 980px) {
    .public-header {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
        min-height: 58px !important;
        padding: 0 16px !important;
    }

    .public-brand-link {
        min-height: 58px;
        padding-right: 14px !important;
        border-right: 0;
    }

    .public-brand {
        font-size: 30px !important;
    }

    .public-nav-toggle {
        align-self: center;
        width: auto;
        min-height: 42px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 8px 12px;
        border: 1px solid rgba(255,255,255,.16);
        border-radius: 14px;
        background: rgba(255,255,255,.08);
        color: #fff;
        cursor: pointer;
        font: inherit;
        font-weight: 750;
    }

    .public-nav-toggle span {
        display: block;
        width: 16px;
        height: 2px;
        border-radius: 999px;
        background: currentColor;
    }

    .public-nav-toggle strong {
        margin-left: 2px;
        font-size: 13px;
    }

    .public-nav {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        max-height: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        padding: 0 !important;
        transition: max-height .24s ease, opacity .18s ease, padding .24s ease;
    }

    body.public-nav-open .public-nav {
        max-height: 420px;
        opacity: 1;
        pointer-events: auto;
        padding: 0 0 14px !important;
    }

    .public-nav-link {
        min-width: 0;
        width: 100% !important;
        min-height: 44px !important;
        border-radius: 14px !important;
        justify-content: center !important;
        padding: 0 12px !important;
        background: rgba(255,255,255,.08);
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .public-nav-link::after {
        display: none;
    }

    .public-nav-link.is-active {
        background: #fff !important;
        color: var(--text) !important;
    }

    .public-main {
        min-height: calc(100dvh - 58px) !important;
        padding: 18px 16px 24px !important;
        align-items: flex-start !important;
    }

    .public-main.is-centered-card,
    .public-auth-page .public-main,
    .public-code-page .public-main {
        align-items: center !important;
    }

    .content-card {
        min-height: auto !important;
        border-radius: 18px;
    }
}

@media (max-width: 720px) {
    .public-header {
        position: sticky !important;
        min-height: 56px !important;
    }

    .public-brand-link {
        min-height: 56px;
    }

    .public-brand {
        font-size: 28px !important;
    }

    .public-brand-subtitle {
        display: none;
    }

    .public-nav {
        grid-template-columns: 1fr;
    }

    .public-main {
        min-height: calc(100dvh - 56px) !important;
        padding: 14px 12px 22px !important;
    }

    .content-card-header {
        padding: 20px 16px 16px !important;
    }

    .content-card-body {
        padding: 18px 16px 22px !important;
        overflow-y: visible !important;
    }

    .content-heading h2 {
        font-size: 26px !important;
    }

    .login-card,
    .public-auth-card,
    .public-code-card {
        width: 100%;
        padding: 22px 16px !important;
    }

    .public-modal {
        padding: 12px;
        align-items: flex-end;
    }

    .public-modal-dialog {
        width: 100%;
        max-height: calc(100dvh - 24px);
        border-radius: 18px 18px 0 0;
    }

    .public-modal-footer {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =========================================================
   Final: Public Topnav mittig, schmaler, aktiver Button wie Backend
   ========================================================= */
:root {
    --public-topbar-height: 50px;
    --public-topbar-link-height: 44px;
}

.public-header {
    min-height: var(--public-topbar-height) !important;
    height: var(--public-topbar-height) !important;
    align-items: end !important;
    gap: 18px !important;
    padding: 0 22px !important;
}

.public-brand-link {
    min-height: var(--public-topbar-height) !important;
    height: var(--public-topbar-height) !important;
    align-self: stretch !important;
    padding-right: 20px !important;
}

.public-brand {
    font-size: 24px !important;
}

.public-nav {
    justify-content: center !important;
    align-items: flex-end !important;
    height: var(--public-topbar-height) !important;
    width: 100% !important;
    padding-top: 6px !important;
}

.public-nav-link {
    min-height: var(--public-topbar-link-height) !important;
    height: var(--public-topbar-link-height) !important;
    align-items: center !important;
    padding: 0 18px !important;
    margin-top: 6px !important;
    border-radius: 14px 14px 0 0 !important;
    align-self: flex-end !important;
}

.public-nav-link::after {
    display: none !important;
}

.public-nav-link:hover {
    background: rgba(255, 255, 255, .10) !important;
    color: #fff !important;
}

.public-nav-link.is-active,
.public-nav-link.is-active:hover {
    background: var(--public-nav-active-bg) !important;
    color: var(--public-nav-active-text) !important;
    border-radius: 14px 14px 0 0 !important;
    box-shadow: none !important;
}

.public-main {
    min-height: calc(100dvh - var(--public-topbar-height)) !important;
    padding-top: 22px !important;
}

.content-card {
    min-height: calc(100dvh - var(--public-topbar-height) - 44px) !important;
}

@media (max-width: 980px) {
    .public-header {
        min-height: var(--public-topbar-height) !important;
        height: auto !important;
        align-items: center !important;
        padding: 0 16px !important;
    }

    .public-brand-link {
        height: var(--public-topbar-height) !important;
        min-height: var(--public-topbar-height) !important;
    }

    .public-nav-toggle {
        min-height: 40px !important;
        height: 40px !important;
        align-self: center !important;
    }

    .public-nav {
        height: auto !important;
        justify-content: stretch !important;
        align-items: stretch !important;
        padding-top: 0 !important;
    }

    .public-nav-link,
    .public-nav-link.is-active,
    .public-nav-link.is-active:hover {
        height: auto !important;
        min-height: 44px !important;
        margin-top: 0 !important;
        border-radius: 12px !important;
        align-self: stretch !important;
    }
}

@media (max-width: 720px) {
    .public-header {
        padding: 0 14px !important;
    }

    .public-brand {
        font-size: 23px !important;
    }
}

/* =========================================================
   Korrektur: Topnav wirklich mittig über die ganze Leiste
   ========================================================= */
@media (min-width: 981px) {
    .public-header {
        position: sticky !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        min-height: var(--public-topbar-height) !important;
        height: var(--public-topbar-height) !important;
        padding: 0 22px !important;
        gap: 0 !important;
    }

    .public-brand-link {
        position: absolute !important;
        left: 22px !important;
        top: 0 !important;
        bottom: 0 !important;
        min-height: var(--public-topbar-height) !important;
        height: var(--public-topbar-height) !important;
        padding: 0 !important;
        border-right: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        z-index: 2;
    }

    .public-nav {
        position: relative !important;
        left: auto !important;
        transform: none !important;
        width: auto !important;
        max-width: calc(100vw - 320px) !important;
        height: var(--public-topbar-height) !important;
        margin: 0 auto !important;
        padding: 6px 0 0 !important;
        display: inline-flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow: visible !important;
        z-index: 1;
    }

    .public-nav-link {
        height: var(--public-topbar-link-height) !important;
        min-height: var(--public-topbar-link-height) !important;
        margin-top: 6px !important;
        border-radius: 14px 14px 0 0 !important;
        align-self: flex-end !important;
    }

    .public-nav-link::after {
        display: none !important;
    }
}

/* =========================================================
   Final: Public-Hinweis-Modal repariert
   - verhindert alte/konkurrierende public-modal-card-Regeln
   - zentriert das Modal sauber
   - entfernt den rechten Leer-/Close-Streifen
   ========================================================= */
.public-modal {
    position: fixed !important;
    inset: 0 !important;
    z-index: 9000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 24px !important;
    overflow-y: auto !important;
}

.public-modal.is-open,
.public-modal[aria-hidden="false"] {
    display: flex !important;
}

.public-modal-backdrop {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    background: rgba(16, 24, 40, .62) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.public-modal-dialog {
    position: relative !important;
    z-index: 1 !important;
    width: min(680px, calc(100vw - 40px)) !important;
    max-width: 680px !important;
    max-height: calc(100dvh - 48px) !important;
    margin: auto !important;
    overflow: hidden !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    background: var(--surface) !important;
    box-shadow: 0 28px 90px rgba(15, 23, 42, .28) !important;
    display: flex !important;
    flex-direction: column !important;
}

.public-modal-dialog.public-modal-dialog-sm {
    width: min(640px, calc(100vw - 40px)) !important;
    max-width: 640px !important;
}

.public-modal-dialog > .public-modal-card,
.public-modal-card {
    width: 100% !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    display: flex !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

.public-modal-header {
    position: relative !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 18px !important;
    padding: 28px 32px 22px !important;
    border-bottom: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

.public-modal-header h2,
.public-modal-header h3 {
    margin: 0 !important;
    font-size: 24px !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em !important;
    color: var(--text) !important;
}

.public-modal-header p {
    margin: 6px 0 0 !important;
    color: var(--text-soft) !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
}

.public-modal-close {
    position: static !important;
    flex: 0 0 38px !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--border) !important;
    border-radius: 12px !important;
    background: var(--surface-soft) !important;
    color: var(--text-soft) !important;
    cursor: pointer !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.public-modal-close:hover {
    background: #fff !important;
    color: var(--text) !important;
}

.public-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding: 28px 32px !important;
    color: var(--text-soft) !important;
    font-size: 17px !important;
    line-height: 1.62 !important;
}

.public-modal-body p {
    margin: 0 !important;
    color: var(--text-soft) !important;
    font-size: inherit !important;
    line-height: inherit !important;
}

.public-modal-body a {
    color: var(--text) !important;
    font-weight: 850 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
}

.public-modal-footer {
    flex: 0 0 auto !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 10px !important;
    padding: 22px 32px 28px !important;
    border-top: 1px solid var(--border) !important;
    background: var(--surface) !important;
}

.public-modal-footer .btn {
    width: auto !important;
    min-width: 160px !important;
}

body.public-modal-open {
    overflow: visible !important;
}

@media (max-width: 720px) {
    .public-modal {
        align-items: flex-start !important;
        padding: 14px !important;
    }

    .public-modal-dialog,
    .public-modal-dialog.public-modal-dialog-sm {
        width: 100% !important;
        max-width: none !important;
        max-height: none !important;
        margin: 16px 0 !important;
        border-radius: 18px !important;
    }

    .public-modal-header {
        padding: 22px 18px 18px !important;
    }

    .public-modal-header h2,
    .public-modal-header h3 {
        font-size: 22px !important;
    }

    .public-modal-body {
        padding: 22px 18px !important;
        font-size: 15px !important;
        line-height: 1.55 !important;
    }

    .public-modal-footer {
        padding: 18px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .public-modal-footer .btn {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* =========================================================
   Public Top-Navigation: Desktop zentriert, Smartphone mit Burger links
   ========================================================= */
.public-page {
    min-height: 100dvh !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr !important;
    background: var(--surface) !important;
}

.public-header {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    max-height: 50px !important;
    display: grid !important;
    grid-template-columns: minmax(170px, 1fr) auto minmax(170px, 1fr) !important;
    align-items: end !important;
    gap: 16px !important;
    padding: 0 24px !important;
    background: var(--public-sidebar-bg, #10151f) !important;
    color: #fff !important;
    border: 0 !important;
    z-index: 100 !important;
}

.public-brand-link {
    grid-column: 1 !important;
    align-self: center !important;
    justify-self: start !important;
    display: inline-flex !important;
    align-items: center !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #fff !important;
}

.public-brand {
    margin: 0 !important;
    color: #fff !important;
    font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif !important;
    font-size: 28px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: .005em !important;
    text-transform: lowercase !important;
    white-space: nowrap !important;
}

.public-brand-subtitle {
    display: none !important;
}

.public-nav-toggle {
    display: none !important;
}

.public-nav {
    grid-column: 2 !important;
    align-self: stretch !important;
    justify-self: center !important;
    height: 50px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-end !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    flex: 0 0 auto !important;
}

.public-nav-link {
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 16px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 15px 15px 0 0 !important;
    background: transparent !important;
    color: rgba(255, 255, 255, .76) !important;
    font-size: 14px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    transition: background .18s ease, color .18s ease !important;
}

.public-nav-link::after {
    display: none !important;
}

.public-nav-link:hover {
    background: rgba(255, 255, 255, .12) !important;
    color: #fff !important;
    transform: none !important;
}

.public-nav-link.is-active,
.public-nav-link.is-active:hover {
    background: var(--surface, #fff) !important;
    color: var(--text, #172033) !important;
    font-weight: 850 !important;
    transform: none !important;
}

.public-main {
    min-height: calc(100dvh - 50px) !important;
    width: 100% !important;
    padding: 24px !important;
    background: var(--surface) !important;
}

@media (max-width: 720px) {
    .public-header {
        height: 54px !important;
        min-height: 54px !important;
        max-height: 54px !important;
        grid-template-columns: 44px minmax(0, 1fr) 44px !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 0 14px !important;
    }

    .public-brand-link {
        grid-column: 2 !important;
        justify-self: center !important;
        align-self: center !important;
    }

    .public-brand {
        font-size: 30px !important;
        text-align: center !important;
    }

    .public-nav-toggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
        justify-self: start !important;
        align-self: center !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
        border: 1px solid rgba(255,255,255,.14) !important;
        border-radius: 13px !important;
        background: rgba(255,255,255,.08) !important;
        color: #fff !important;
        cursor: pointer !important;
    }

    .public-nav-toggle:hover {
        background: rgba(255,255,255,.14) !important;
    }

    .public-nav-toggle i {
        display: block !important;
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .public-nav-toggle span,
    .public-nav-toggle strong {
        display: none !important;
    }

    .public-nav {
        position: fixed !important;
        top: 62px !important;
        left: 14px !important;
        right: 14px !important;
        z-index: 120 !important;
        height: auto !important;
        max-height: calc(100dvh - 76px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 6px !important;
        padding: 10px !important;
        border: 1px solid rgba(255,255,255,.12) !important;
        border-radius: 18px !important;
        background: var(--public-sidebar-bg, #10151f) !important;
        box-shadow: 0 24px 70px rgba(16,24,40,.32) !important;
        overflow-y: auto !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transform: translateY(-8px) !important;
        transition: opacity .18s ease, transform .18s ease, visibility .18s ease !important;
    }

    body.public-nav-open .public-nav {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        transform: translateY(0) !important;
    }

    .public-nav-link {
        width: 100% !important;
        min-height: 46px !important;
        height: auto !important;
        border-radius: 13px !important;
        justify-content: center !important;
        padding: 13px 14px !important;
        color: rgba(255,255,255,.78) !important;
        background: transparent !important;
        font-size: 15px !important;
    }

    .public-nav-link.is-active,
    .public-nav-link.is-active:hover {
        background: var(--surface, #fff) !important;
        color: var(--text, #172033) !important;
    }

    .public-main {
        min-height: calc(100dvh - 54px) !important;
        padding: 14px !important;
    }

    .content-card {
        min-height: auto !important;
        width: 100% !important;
        border-radius: 16px !important;
    }
}


/* Page-scroll fix: these public forms must scroll on the document, not inside the card body. */
body.public-selbstauskunft-page,
body.public-termintool-page {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: auto !important;
}

body.public-selbstauskunft-page .public-main,
body.public-termintool-page .public-main {
    min-height: 100vh !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.public-selbstauskunft-page .content-card,
body.public-termintool-page .content-card {
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

body.public-selbstauskunft-page .content-card-body,
body.public-termintool-page .content-card-body {
    flex: 0 0 auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    scrollbar-gutter: auto !important;
}

/* Visual correction after document-scroll fix: keep page/card scrolling visible,
   but clip only the first child so the top card corners stay rounded. */
body.public-selbstauskunft-page .content-card,
body.public-termintool-page .content-card {
    border-radius: var(--radius-lg) !important;
    background: var(--surface) !important;
}
body.public-selbstauskunft-page .content-card > :first-child,
body.public-termintool-page .content-card > :first-child {
    border-top-left-radius: calc(var(--radius-lg) - 1px) !important;
    border-top-right-radius: calc(var(--radius-lg) - 1px) !important;
    overflow: hidden !important;
}
body.public-selbstauskunft-page .content-card-header,
body.public-termintool-page .content-card-header,
body.public-selbstauskunft-page .mi-public-switchbar,
body.public-termintool-page .mi-public-switchbar {
    border-top-left-radius: calc(var(--radius-lg) - 1px) !important;
    border-top-right-radius: calc(var(--radius-lg) - 1px) !important;
    overflow: hidden !important;
}
@media (max-width: 720px) {
    body.public-selbstauskunft-page .content-card,
    body.public-termintool-page .content-card {
        border-radius: 16px !important;
    }
    body.public-selbstauskunft-page .content-card > :first-child,
    body.public-termintool-page .content-card > :first-child,
    body.public-selbstauskunft-page .content-card-header,
    body.public-termintool-page .content-card-header,
    body.public-selbstauskunft-page .mi-public-switchbar,
    body.public-termintool-page .mi-public-switchbar {
        border-top-left-radius: 15px !important;
        border-top-right-radius: 15px !important;
    }
}



/* =========================================================
   Public Modal Scroll Restore
   ---------------------------------------------------------
   Public-Modale scrollen wieder im Modal-Inhalt. Die vorherige
   Dokument-Scroll-Korrektur bleibt auf Termin-/Selbstauskunft-
   Seiten beschränkt und darf echte Modale nicht überschreiben.
   ========================================================= */
body.public-modal-open{
    overflow:hidden !important;
}
.public-modal{
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
}
.public-modal-card,
.public-modal-dialog,
.public-modal-dialog.public-modal-dialog-sm{
    max-height:calc(100dvh - 48px) !important;
    overflow:hidden !important;
    display:flex !important;
    flex-direction:column !important;
}
.public-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
}
@media (max-width:720px){
    .public-modal{
        align-items:flex-start !important;
    }
    .public-modal-card,
    .public-modal-dialog,
    .public-modal-dialog.public-modal-dialog-sm{
        max-height:calc(100dvh - 28px) !important;
        margin:14px 0 !important;
    }
}


/* =========================================================
   Final Public Modal Scroll Fix v2
   ---------------------------------------------------------
   Lange Public-Modale scrollen ueber das Overlay selbst.
   Der Body bleibt gesperrt, aber der Modalinhalt wird nicht
   mehr durch verschachtelte max-height/overflow-Regeln blockiert.
   ========================================================= */
body.public-modal-open,
body.is-submitting{
    overflow:hidden !important;
}
.public-modal.is-open,
.public-modal[aria-hidden="false"],
.submit-progress-modal:not(.hidden),
.public-termintool-cancel-modal.is-open{
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
    padding:16px !important;
}
.public-modal-backdrop{
    position:fixed !important;
    inset:0 !important;
}
.public-modal-dialog,
.public-modal-dialog.public-modal-dialog-sm,
.submit-progress-card,
.public-termintool-cancel-dialog{
    max-height:none !important;
    height:auto !important;
    margin:auto !important;
    overflow:visible !important;
}
.public-modal-dialog > .public-modal-card,
.public-modal-card{
    flex:0 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
}
.public-modal-body{
    flex:0 1 auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    -webkit-overflow-scrolling:touch !important;
}
@media (max-width:720px){
    .public-modal.is-open,
    .public-modal[aria-hidden="false"],
    .submit-progress-modal:not(.hidden),
    .public-termintool-cancel-modal.is-open{
        padding:8px !important;
    }
    .public-modal-dialog,
    .public-modal-dialog.public-modal-dialog-sm,
    .submit-progress-card,
    .public-termintool-cancel-dialog{
        width:100% !important;
        margin:8px auto !important;
    }
}

/* =========================================================
   Popup Modal Centering - global public override
   ---------------------------------------------------------
   Echte Popups (Hinweis, Absage, Submit/Progress) stehen
   mittig im Browserfenster. Große Seiten-Cards wie Termin-
   buchung/Selbstauskunft bleiben davon unberührt.
   ========================================================= */
:root{
    --public-popup-modal-gap:24px;
}
body.public-modal-open,
body.is-submitting{
    overflow:hidden !important;
}
.public-modal.is-open,
.public-modal[aria-hidden="false"],
.submit-progress-modal:not(.hidden),
.public-termintool-cancel-modal.is-open{
    position:fixed !important;
    inset:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    padding:var(--public-popup-modal-gap) !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
}
.public-modal-dialog,
.public-modal-dialog.public-modal-dialog-sm,
.submit-progress-card,
.public-termintool-cancel-dialog{
    margin:auto !important;
    max-height:calc(100dvh - (var(--public-popup-modal-gap) * 2)) !important;
    height:auto !important;
    overflow:hidden !important;
    border-radius:28px !important;
}
.public-termintool-cancel-dialog,
.submit-progress-card{
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
}
.public-modal-dialog > .public-modal-card,
.public-modal-card{
    max-height:calc(100dvh - (var(--public-popup-modal-gap) * 2)) !important;
    height:auto !important;
    overflow:hidden !important;
    border-radius:28px !important;
    display:flex !important;
    flex-direction:column !important;
}
.public-modal-body{
    flex:1 1 auto !important;
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    -webkit-overflow-scrolling:touch !important;
}
@media (max-width:720px){
    :root{ --public-popup-modal-gap:12px; }
    .public-modal.is-open,
    .public-modal[aria-hidden="false"],
    .submit-progress-modal:not(.hidden),
    .public-termintool-cancel-modal.is-open{
        align-items:center !important;
        padding:var(--public-popup-modal-gap) !important;
    }
    .public-modal-dialog,
    .public-modal-dialog.public-modal-dialog-sm,
    .submit-progress-card,
    .public-termintool-cancel-dialog,
    .public-modal-dialog > .public-modal-card,
    .public-modal-card{
        width:100% !important;
        max-height:calc(100dvh - (var(--public-popup-modal-gap) * 2)) !important;
    }
}