.portal-topbar {
    grid-template-columns: 64px auto minmax(220px, 1fr) auto;
    gap: 18px;
}

.portal-topbar .brand-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.login-brand-logo {
    width: 112px;
    height: 112px;
    object-fit: contain;
}

.portal-nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
}

.portal-nav button {
    position: relative;
    padding: 0 13px;
    border: 0;
    background: transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
}

.portal-nav button::after {
    content: "";
    position: absolute;
    right: 13px;
    bottom: -1px;
    left: 13px;
    height: 3px;
    background: transparent;
}

.portal-nav button:hover,
.portal-nav button.active {
    color: var(--ink);
    background: #f7f5f2;
}

.portal-nav button.active::after { background: var(--ink); }
.portal-content-page { max-width: 1320px; }
.portal-content-page .page-head { align-items: center; margin-bottom: 28px; }

.portal-stats {
    display: grid;
    grid-template-columns: .6fr .6fr 1.8fr;
    margin-bottom: 18px;
    border-top: 1px solid var(--ui-border);
    border-left: 1px solid var(--ui-border);
    background: #fff;
}

.portal-stat {
    min-height: 96px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px;
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
}

.portal-stat span { color: var(--muted); font-size: 12px; font-weight: 750; }
.portal-stat strong { overflow: hidden; font-size: 27px; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.portal-stat:last-child strong { font-size: 18px; }

.portal-notice {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
    padding: 13px 15px;
    border: 1px solid #c5a36a;
    background: #fff7e8;
    color: #61491f;
    font-size: 13px;
}

.portal-notice strong { white-space: nowrap; }
.portal-notice code { padding: 2px 4px; background: rgba(97,73,31,.09); }

.portal-list,
.settings-list { display: grid; border-top: 1px solid var(--ui-border); }

.automation-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.5fr) minmax(160px, .8fr) minmax(180px, 1fr) minmax(190px, auto);
    align-items: center;
    gap: 18px;
    min-height: 102px;
    padding: 16px 18px;
    border-right: 1px solid var(--ui-border);
    border-bottom: 1px solid var(--ui-border);
    border-left: 1px solid var(--ui-border);
    background: #fff;
}

.automation-row:hover,
.settings-row:hover { background: #faf9f7; }
.automation-row.inactive { color: var(--muted); background: #f5f3ef; }
.automation-title { min-width: 0; }
.automation-title h2 { overflow: hidden; margin: 0 0 6px; font-size: 18px; text-overflow: ellipsis; white-space: nowrap; }
.automation-title p,
.automation-meta p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.automation-meta strong { display: block; margin-bottom: 4px; font-size: 13px; }
.automation-actions,
.row-actions { display: flex; justify-content: flex-end; gap: 7px; }
.automation-actions .button,
.row-actions .button { min-height: 34px; padding: 6px 9px; font-size: 12px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 4px 7px;
    border: 1px solid #c7c0b7;
    background: #f2efeb;
    color: #554f49;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.status-pill.success { border-color: #9db9a6; background: #edf6f0; color: #315f40; }
.status-pill.failed { border-color: #d4aaa3; background: #fff1ef; color: #8a332a; }
.status-pill.partial { border-color: #d7bd88; background: #fff7e6; color: #77551d; }
.status-pill.processing { border-color: #9dabbc; background: #eff4fa; color: #35506e; }

.portal-empty {
    min-height: 330px;
    display: grid;
    place-items: center;
    align-content: center;
    padding: 40px 22px;
    border: 1px solid var(--ui-border);
    background: #fff;
    text-align: center;
}

.portal-empty .empty-index { margin-bottom: 15px; color: #b0a89f; font: 700 52px/1 Georgia, serif; }
.portal-empty h2 { margin-bottom: 7px; }
.portal-empty p { max-width: 520px; margin: 0 0 20px; color: var(--muted); }

.settings-section {
    margin-bottom: 28px;
    border: 1px solid var(--ui-border);
    background: #fff;
}

.section-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 110px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--ui-border);
}

.section-heading h2 { margin-bottom: 4px; }
.section-heading p:last-child { margin: 0; }
.settings-list { border-top: 0; }
.settings-row {
    display: grid;
    grid-template-columns: minmax(190px, 1fr) minmax(200px, 1fr) minmax(120px, .6fr) auto;
    align-items: center;
    gap: 18px;
    min-height: 78px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--line);
}

.settings-row:last-child { border-bottom: 0; }
.settings-row h3 { margin: 0 0 4px; font-size: 15px; }
.settings-row p { overflow: hidden; margin: 0; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inline-empty { padding: 26px 22px; color: var(--muted); }

.portal-modal { width: min(980px, calc(100vw - 28px)); }
.portal-modal form { max-height: min(900px, calc(100vh - 30px)); }
.portal-form-layout { display: grid; gap: 18px; }
.form-section { padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.form-section:last-child { padding-bottom: 0; border-bottom: 0; }
.form-section h3 { margin-bottom: 13px; }
.form-section label,
.modal-body > label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 750; }
.form-section input,
.form-section select,
.form-section textarea,
.modal-body > label input,
.modal-body > label select { width: 100%; border: 1px solid var(--ui-border); background: #fff; padding: 10px 11px; }
.form-section input,
.form-section select { min-height: 42px; }
.form-section textarea { min-height: 78px; resize: vertical; line-height: 1.45; }
.form-section small,
.modal-body label small { color: var(--muted); font-weight: 500; }

.variable-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 9px; }
.variable-bar span { margin-right: 3px; color: var(--muted); font-size: 11px; font-weight: 750; }
.variable-bar button { padding: 4px 7px; border: 1px solid var(--line-strong); background: #f5f2ee; color: var(--ink); font: 11px ui-monospace, monospace; }
.variable-bar button:hover { background: var(--accent-soft); }

.contact-picker-head { display: grid; grid-template-columns: 1fr 220px; gap: 10px; margin-top: 12px; }
.contact-picker-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 9px 0 6px; color: var(--muted); font-size: 12px; }
.compact-button { min-height: 32px; padding: 5px 9px; font-size: 11px; }
.contact-picker-list { max-height: 280px; overflow-y: auto; border: 1px solid var(--ui-border); background: #fff; }
.portal-modal .form-section label.contact-picker-row { display: grid; grid-template-columns: 22px minmax(0, 1fr); align-items: start; gap: 9px; min-height: 54px; padding: 8px 10px; border-bottom: 1px solid var(--line); color: var(--ink); cursor: pointer; }
.contact-picker-row:last-child { border-bottom: 0; }
.contact-picker-row:hover { background: #f5f2ee; }
.contact-picker-row:has(input:checked) { background: #f0eee9; }
.contact-picker-row input { width: 17px; min-height: 17px; margin-top: 2px; padding: 0; }
.contact-picker-info { display: grid; min-width: 0; gap: 2px; }
.contact-picker-info strong,
.contact-picker-secondary { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-picker-info strong { font-size: 12px; }
.contact-picker-secondary { color: var(--muted); font-size: 11px; font-weight: 500; }
.contact-picker-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.contact-picker-tags > span { padding: 2px 5px; background: #e8e4de; color: #625b54; font-size: 9px; font-weight: 700; }
.contact-picker-empty { padding: 18px; color: var(--muted); font-size: 13px; text-align: center; }

.selected-contact-area { margin-top: 12px; padding: 11px; border: 1px solid var(--ui-border); background: #f7f5f2; }
.selected-contact-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; font-size: 11px; }
.selected-contact-list { display: flex; max-height: 132px; flex-wrap: wrap; gap: 6px; overflow-y: auto; }
.selected-contact-chip { display: inline-flex; max-width: 290px; align-items: center; gap: 5px; min-height: 29px; padding: 3px 4px 3px 9px; border: 1px solid var(--line-strong); background: #fff; color: var(--ink); font-size: 10px; font-weight: 700; }
.selected-contact-chip > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-contact-chip button { flex: 0 0 auto; width: 21px; height: 21px; padding: 0; border: 0; background: transparent; color: var(--muted); font-size: 17px; line-height: 1; }
.selected-contact-chip button:hover { background: #eee9e3; color: var(--danger); }

.switch-row {
    min-height: 42px;
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 10px !important;
    padding: 9px 11px;
    border: 1px solid var(--line);
    background: #f7f5f2;
    color: var(--ink) !important;
}
.switch-row input { width: 17px !important; min-height: 17px !important; }
.connection-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.attachment-drop {
    min-height: 84px;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--ui-border);
    background: #f7f5f2;
    cursor: pointer;
    text-align: center;
}
.attachment-drop:hover { background: var(--accent-soft); }
.attachment-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.attachment-drop strong { color: var(--ink); font-size: 14px; }
.attachment-drop span { font-weight: 500; }
.attachment-list { display: grid; margin-top: 8px; border-top: 1px solid var(--line); }
.attachment-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; min-height: 40px; border-bottom: 1px solid var(--line); font-size: 12px; }
.attachment-row span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attachment-row .muted { font-size: 11px; }
.attachment-row button { border: 0; background: transparent; color: var(--danger); font-size: 12px; font-weight: 750; }

.project-stats { grid-template-columns: repeat(3, 1fr); }
.project-stats .portal-stat:last-child strong { font-size: 27px; }

.project-toolbar {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 9px;
    padding: 14px 16px;
    border: 1px solid var(--ui-border);
    background: #fff;
}

.project-search { display: grid; gap: 6px; width: min(560px, 100%); color: var(--muted); font-size: 11px; font-weight: 750; }
.project-search input { min-height: 42px; width: 100%; padding: 9px 11px; border: 1px solid var(--ui-border); background: #fff; color: var(--ink); font: inherit; font-size: 13px; font-weight: 500; }
.project-view-switch { display: flex; border: 1px solid var(--ui-border); }
.project-view-switch button { min-height: 40px; padding: 8px 13px; border: 0; border-right: 1px solid var(--ui-border); background: #fff; color: var(--muted); font-size: 12px; font-weight: 750; }
.project-view-switch button:last-child { border-right: 0; }
.project-view-switch button:hover { background: #f7f5f2; color: var(--ink); }
.project-view-switch button.active { background: var(--ink); color: #fff; }
.project-result-summary { margin: 0 0 14px; font-size: 12px; }

.project-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); gap: 14px; }
.project-card {
    position: relative;
    min-width: 0;
    padding: 18px;
    border: 1px solid var(--ui-border);
    background: #fff;
}
.project-card:hover { border-color: #8b847d; }
.project-card-image { position: absolute; top: 18px; left: 18px; width: 64px; height: 78px; display: grid; place-items: center; overflow: hidden; background: #e9e5df; color: #6b635b; font: 700 22px/1 Georgia, serif; }
.project-card-image img { width: 100%; height: 100%; object-fit: cover; }
.project-card-head { min-height: 82px; display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding-left: 78px; }
.project-card-head > div { min-width: 0; }
.project-card-head p { margin: 0 0 5px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.project-card-head h2 { overflow: hidden; margin: 0 0 5px; font-size: 19px; line-height: 1.16; text-overflow: ellipsis; }
.project-card-head .muted { display: block; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.project-card-head .button { flex: 0 0 auto; min-height: 32px; padding: 5px 8px; font-size: 11px; }
.project-card-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 14px; border: 1px solid var(--line); background: var(--line); }
.project-card-details > div { min-width: 0; min-height: 64px; padding: 9px; background: #faf9f7; }
.project-card-details span { display: block; margin-bottom: 5px; color: var(--muted); font-size: 9px; font-weight: 750; text-transform: uppercase; }
.project-card-details strong { display: -webkit-box; overflow: hidden; font-size: 11px; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.project-card-links { display: grid; gap: 7px; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.project-card-link { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 9px; color: var(--ink); font-size: 11px; line-height: 1.4; }
.project-card-link > span { color: var(--muted); font-weight: 750; }
.project-card-link a,
.project-table a,
.timeline-content a { color: #315d8a; text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.project-card-placeholder { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.project-card-grid > .project-empty { grid-column: 1 / -1; }

.project-table-surface { border: 1px solid var(--ui-border); background: #fff; }
.project-table-scroll { width: 100%; max-height: calc(100vh - 330px); overflow: auto; }
.project-table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; font-size: 11px; line-height: 1.4; }
.project-table th { position: sticky; z-index: 2; top: 0; min-width: 150px; max-width: 240px; padding: 10px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); background: #efede9; text-align: left; white-space: nowrap; }
.project-table td { min-width: 150px; max-width: 300px; padding: 9px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); vertical-align: top; overflow-wrap: anywhere; }
.project-table tr:last-child td { border-bottom: 0; }
.project-table tbody tr:hover td { background: #faf9f7; }
.project-table .project-table-action { position: sticky; z-index: 3; left: 0; min-width: 88px; width: 88px; background: #fff; }
.project-table th.project-table-action { z-index: 4; background: #efede9; }
.project-table-action .button { min-height: 30px; padding: 4px 7px; font-size: 10px; }
.project-name-cell { font-weight: 750; }
.project-empty-value { color: #b4ada6; }

.project-timeline { border-top: 1px solid var(--ui-border); }
.timeline-item { display: grid; grid-template-columns: 155px minmax(0, 1fr) auto; align-items: center; gap: 20px; min-height: 94px; padding: 14px 17px; border-right: 1px solid var(--ui-border); border-bottom: 1px solid var(--ui-border); border-left: 1px solid var(--ui-border); background: #fff; }
.timeline-item:hover { background: #faf9f7; }
.timeline-item.undated { background: #f6f4f1; }
.timeline-date { align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding-right: 16px; border-right: 1px solid var(--line); }
.timeline-date strong { margin-bottom: 5px; font-size: 14px; }
.timeline-date span { color: var(--muted); font-size: 10px; font-weight: 750; text-transform: uppercase; }
.timeline-content { min-width: 0; }
.timeline-content p { margin: 0 0 3px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.timeline-content h2 { margin: 0 0 5px; font-size: 17px; }
.timeline-content > div { color: var(--muted); font-size: 11px; line-height: 1.45; }
.timeline-item > .button { min-height: 32px; padding: 5px 8px; font-size: 11px; }

.project-modal { width: min(1160px, calc(100vw - 28px)); }
.project-form-body { background: #faf9f7; }
.project-form-sections { display: grid; gap: 16px; }
.project-form-sections .form-section { padding: 18px; border: 1px solid var(--ui-border); background: #fff; }
.project-form-sections .form-section:last-child { padding-bottom: 18px; border-bottom: 1px solid var(--ui-border); }
.project-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px 16px; }
.project-form-grid label { display: flex; min-width: 0; flex-direction: column; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 750; }
.project-form-grid input,
.project-form-grid textarea { width: 100%; border: 1px solid var(--ui-border); background: #fff; padding: 10px 11px; color: var(--ink); }
.project-form-grid input { min-height: 42px; }
.project-form-grid textarea { min-height: 84px; resize: vertical; line-height: 1.45; }
.project-field-bild,
.project-field-projekt,
.project-field-arbeitstitel { grid-column: 1 / -1; }
.project-modal footer .spacer { flex: 1; }

@media (max-width: 1220px) {
    :root { --topbar-height: 116px; }
    .portal-topbar { height: auto; min-height: 116px; grid-template-columns: 64px 1fr auto; grid-template-rows: 58px 44px; padding-top: 1px; }
    .portal-nav { grid-column: 1 / -1; grid-row: 2; border-top: 1px solid var(--line); }
    .portal-nav button { flex: 1; }
    .global-search { grid-column: 2; grid-row: 1; }
    .top-actions { grid-column: 3; grid-row: 1; }
    .brand { grid-column: 1; grid-row: 1; }
}

@media (max-width: 820px) {
    :root { --topbar-height: 0px; }
    .portal-topbar { position: static; display: grid; min-height: 0; grid-template-columns: 1fr auto; grid-template-rows: auto auto auto; padding: 8px 14px 0; }
    .portal-topbar .brand { grid-column: 1; grid-row: 1; }
    .portal-topbar .top-actions { grid-column: 2; grid-row: 1; }
    .portal-topbar .global-search { grid-column: 1 / -1; grid-row: 2; margin: 5px 0 10px; }
    .portal-nav { grid-column: 1 / -1; grid-row: 3; min-width: 0; overflow-x: auto; }
    .portal-nav button { min-height: 44px; padding: 0 10px; font-size: 12px; }
    .portal-nav button::after { right: 8px; left: 8px; }
    .portal-content-page .page-head,
    .section-heading { align-items: flex-start; flex-direction: column; }
    .portal-stats { grid-template-columns: 1fr 1fr; }
    .portal-stat:last-child { grid-column: 1 / -1; }
    .automation-row { grid-template-columns: 1fr; gap: 10px; }
    .automation-actions { justify-content: flex-start; flex-wrap: wrap; }
    .settings-row { grid-template-columns: 1fr; gap: 7px; }
    .row-actions { justify-content: flex-start; flex-wrap: wrap; }
    .connection-grid,
    .contact-picker-head { grid-template-columns: 1fr; }
    .project-toolbar { align-items: stretch; flex-direction: column; }
    .project-search { width: 100%; }
    .project-view-switch { align-self: flex-start; }
    .project-card-grid { grid-template-columns: 1fr; }
    .timeline-item { grid-template-columns: 130px minmax(0, 1fr) auto; gap: 12px; }
}

@media (max-width: 520px) {
    .portal-nav { margin: 0 -14px; }
    .portal-nav button { min-width: max-content; }
    .portal-stats { grid-template-columns: 1fr; }
    .portal-stat:last-child { grid-column: auto; }
    .portal-notice { align-items: flex-start; flex-direction: column; }
    .project-stats { grid-template-columns: 1fr; }
    .project-view-switch { width: 100%; }
    .project-view-switch button { flex: 1; padding: 7px; }
    .project-card { padding: 14px; }
    .project-card-image { top: 14px; left: 14px; }
    .project-card-details { grid-template-columns: 1fr; }
    .project-card-link { grid-template-columns: 72px minmax(0, 1fr); }
    .timeline-item { grid-template-columns: 1fr; }
    .timeline-date { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
    .timeline-item > .button { justify-self: start; }
    .project-form-grid { grid-template-columns: 1fr; }
    .project-field-bild,
    .project-field-projekt,
    .project-field-arbeitstitel { grid-column: auto; }
    .contact-picker-actions { align-items: stretch; flex-direction: column; }
    .contact-picker-actions .compact-button { width: 100%; }
    .selected-contact-chip { max-width: 100%; }
}