:root {
  --ink: #162134;
  --ink-2: #202e44;
  --yellow: #f7be25;
  --yellow-soft: #fff7df;
  --paper: #f5f6f6;
  --surface: #fff;
  --line: #dce1e5;
  --muted: #667384;
  --green: #276a4d;
  --green-bg: #e3f1e9;
  --red: #9a4538;
  --red-bg: #f8e9e6;
  --shadow: 0 12px 35px rgba(22, 33, 52, 0.08);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--paper);
}

/* Geschützter Investorenprozess */
.investor-publication-summary,
.investor-profile-grid {
  display: grid;
  gap: 14px;
}

.investor-publication-summary {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-bottom: 14px;
}

.investor-publication-summary ul {
  margin: 10px 0 0;
  padding-left: 18px;
}

.investor-publication-summary li + li {
  margin-top: 5px;
}

.investor-anonymized-view,
.investor-fee-process {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  margin-bottom: 14px;
  padding: 18px;
}

.investor-profile-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 12px;
}

.investor-profile-grid > div {
  border-left: 3px solid var(--yellow);
  background: var(--paper);
  padding: 10px 12px;
}

.investor-profile-grid span,
.investor-fee-history span {
  color: var(--muted);
  display: block;
  font-size: 12px;
}

.investor-profile-grid strong {
  display: block;
  font-size: 14px;
  margin-top: 3px;
}

.investor-application-list {
  display: grid;
  gap: 9px;
}

.investor-application-card {
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 12px;
  display: grid;
  gap: 16px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 14px;
}

.investor-application-card.selected {
  border-color: var(--yellow);
  box-shadow: inset 3px 0 0 var(--yellow);
}

.investor-application-card h3 {
  margin: 0;
}

.investor-application-card p {
  margin: 6px 0;
}

.investor-application-card > div:last-child {
  align-items: flex-end;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.investor-fee-history {
  background: var(--paper);
  border-radius: 9px;
  color: var(--ink);
  font-size: 13px;
  margin: 12px 0;
  padding: 10px 12px;
}

.investor-fee-history span + span {
  border-top: 1px solid var(--line);
  margin-top: 7px;
  padding-top: 7px;
}

@media (max-width: 760px) {
  .investor-publication-summary,
  .investor-profile-grid {
    grid-template-columns: 1fr;
  }

  .investor-application-card {
    align-items: stretch;
    grid-template-columns: 1fr;
  }

  .investor-application-card > div:last-child {
    align-items: stretch;
  }

  .investor-application-card > div:last-child button {
    width: 100%;
  }
}

/* Kommunales FAQ */
.faq-search-card,
.faq-category,
.faq-support-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  margin-bottom: 14px;
  padding: 18px;
}

.faq-search-card label {
  display: block;
  font-weight: 700;
  margin-bottom: 7px;
}

.faq-search-card input {
  width: 100%;
}

.faq-list {
  display: grid;
  gap: 8px;
}

.faq-item {
  border: 1px solid var(--line);
  border-radius: 9px;
  overflow: hidden;
}

.faq-item summary {
  cursor: pointer;
  font-weight: 700;
  padding: 12px 14px;
}

.faq-item[open] summary {
  background: var(--yellow-soft);
}

.faq-item > div {
  padding: 0 14px 13px;
}

.faq-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.faq-support-card {
  align-items: center;
  background: var(--ink);
  color: #fff;
  display: flex;
  gap: 18px;
  justify-content: space-between;
}

.faq-support-card h2,
.faq-support-card p {
  color: inherit;
}

.faq-support-card .eyebrow {
  color: var(--yellow);
}

.faq-admin-list {
  display: grid;
  gap: 7px;
  margin-top: 18px;
}

.faq-admin-list article {
  align-items: center;
  border-top: 1px solid var(--line);
  display: flex;
  gap: 12px;
  justify-content: space-between;
  padding-top: 8px;
}

.faq-admin-list span {
  color: var(--muted);
  display: block;
  font-size: 12px;
  margin-top: 3px;
}

@media (max-width: 760px) {
  .faq-support-card,
  .faq-admin-list article {
    align-items: stretch;
    flex-direction: column;
  }

  .faq-support-card .action-button {
    width: 100%;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--paper);
  font-size: 15px;
  line-height: 1.45;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
}
.demo-strip {
  min-height: 31px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  padding: 6px 20px;
  background: var(--yellow);
  color: #263142;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-align: center;
}
.demo-strip strong {
  font-weight: 850;
  white-space: nowrap;
}
.demo-strip span {
  font-weight: 600;
  opacity: 0.88;
}
#portal-root {
  min-height: calc(100dvh - 31px);
}
.portal-shell {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: clamp(42px, 9vh, 110px) 0 64px;
}
.portal-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 42px;
}
.portal-brand-mark {
  display: grid;
  width: 48px;
  height: 38px;
  place-items: center;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  background: var(--ink);
  font-size: 13px;
  font-weight: 850;
}
.portal-brand strong {
  display: block;
  color: var(--ink);
  font-size: 22px;
  letter-spacing: -0.04em;
}
.portal-brand small {
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.portal-intro {
  max-width: 720px;
  margin-bottom: 36px;
}
.portal-intro h1 {
  margin: 8px 0 12px;
  color: var(--ink);
  font-size: clamp(36px, 5vw, 62px);
  letter-spacing: -0.06em;
  line-height: 0.98;
}
.portal-intro p:last-child {
  max-width: 590px;
  margin: 0;
  color: var(--muted);
  font-size: 17px;
}
.portal-access-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 20px;
}
.portal-access-card {
  display: flex;
  flex-direction: column;
  padding: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.portal-access-card.contractors {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
.portal-access-card h2 {
  margin: 7px 0 10px;
  font-size: 28px;
  letter-spacing: -0.045em;
}
.portal-access-title {
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  text-align: left;
}
.portal-access-card.contractors .portal-access-title:hover,
.portal-access-card.contractors .portal-access-title:focus-visible {
  color: var(--yellow);
  outline: none;
}
.portal-access-card p:not(.eyebrow) {
  max-width: 420px;
  margin: 0;
  color: var(--muted);
}
.portal-access-card.contractors p:not(.eyebrow) {
  color: #c6d0dc;
}
.portal-access-card .eyebrow {
  color: #8a7131;
}
.portal-access-card.contractors .eyebrow {
  color: var(--yellow);
}
.portal-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}
.portal-access-card.contractors .quiet-button {
  border-color: #718096;
  background: transparent;
  color: #fff;
}
.portal-access-card.contractors .demo-portal-button {
  border-color: var(--yellow);
  color: var(--yellow);
}
.premium-advertising {
  margin-top: 42px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.premium-advertising-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 20px;
}
.premium-advertising-head h2 {
  margin: 5px 0 7px;
  color: var(--ink);
  font-size: clamp(26px, 3vw, 34px);
  letter-spacing: -0.045em;
}
.premium-advertising-head p:not(.eyebrow) {
  max-width: 620px;
  margin: 0;
  color: var(--muted);
}
.premium-ad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  grid-auto-rows: 1fr;
  gap: 18px;
}
.premium-ad-card {
  position: relative;
  display: flex;
  height: 100%;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.premium-ad-card:hover {
  box-shadow: 0 14px 28px rgba(22, 33, 52, 0.16);
  transform: translateY(-2px);
}
.premium-ad-label {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(22, 33, 52, 0.9);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.premium-ad-image {
  aspect-ratio: 16 / 8;
  overflow: hidden;
  background: #e7edf4;
}
.premium-ad-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.premium-ad-content {
  display: grid;
  flex: 1;
  gap: 14px;
  padding: 18px;
}
.premium-ad-content > p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}
.premium-ad-content .action-button {
  align-self: end;
  justify-self: start;
}
.premium-ad-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--ink);
  font-size: 16px;
}
.premium-ad-brand > span,
.premium-ad-brand > img {
  display: grid;
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #c8d2df;
  border-radius: 9px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 12px;
  font-weight: 900;
}
.premium-ad-brand > img {
  object-fit: contain;
  background: #fff;
}
.premium-advertising-disclaimer {
  max-width: 900px;
  margin: 18px 0 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}
.premium-demo-admin-entry {
  margin-top: 12px;
}
.premium-ad-preview {
  max-width: 390px;
  margin: 0 auto 26px;
}
.premium-admin-settings {
  margin-top: 22px;
}
.premium-admin-card small {
  display: block;
  margin-top: 8px;
  color: var(--muted);
  line-height: 1.45;
}
.partner-benefits-section {
  display: grid;
  gap: 12px;
  margin-top: 20px;
  padding: 32px 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.partner-benefits-section h2 {
  margin: 0;
  color: var(--ink);
  font-size: 26px;
  letter-spacing: -0.04em;
}
.partner-benefit-intro {
  margin: 0;
  max-width: 840px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.48;
}
.partner-benefit-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 16px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}
.partner-benefit-list li {
  display: grid;
  gap: 3px;
  padding-top: 9px;
  border-top: 1px solid var(--line);
}
.partner-benefit-list strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}
.partner-benefit-list span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.42;
}
.partner-fee-notice {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--yellow);
  background: var(--yellow-soft);
  color: #5f4a0a;
  font-size: 12px;
  line-height: 1.48;
}
.partner-fee-notice strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}
@media (max-width: 900px) {
  .portal-access-grid {
    grid-template-columns: 1fr;
  }
  .premium-advertising-head {
    align-items: flex-start;
    flex-direction: column;
  }
}
.portal-panel {
  max-width: 940px;
  padding: 34px;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.portal-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
}
.portal-panel-head h1 {
  margin: 5px 0 0;
  font-size: 34px;
  letter-spacing: -0.05em;
}
.portal-form {
  display: grid;
  gap: 24px;
}
.portal-form fieldset {
  min-width: 0;
  margin: 0;
  padding: 22px;
  border: 1px solid var(--line);
}
.portal-form legend {
  padding: 0 7px;
  color: var(--ink);
  font-weight: 800;
}
.portal-form .form-grid {
  margin: 0;
}
.portal-form .wide {
  grid-column: 1 / -1;
}
.portal-choice-grid,
.portal-reference-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
.membership-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.membership-choice {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 126px;
  padding: 17px;
  border: 1px solid #34445d;
  background: var(--ink);
  color: var(--yellow);
  cursor: pointer;
}
.membership-choice:has(input:checked) {
  outline: 3px solid var(--yellow);
  outline-offset: 2px;
}
.membership-choice input {
  accent-color: var(--yellow);
  margin-top: 3px;
}
.membership-choice span {
  display: grid;
  gap: 7px;
}
.membership-choice strong,
.membership-choice b {
  color: var(--yellow);
}
.membership-choice small {
  color: #e5e9ef;
  line-height: 1.42;
}
.portal-choice-grid label,
.portal-legal label {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  color: var(--ink);
  font-weight: 650;
}
.portal-reference-card {
  padding: 16px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.portal-reference-card h3 {
  margin: 0 0 14px;
  font-size: 16px;
}
.portal-reference-card label {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.portal-reference-card input,
.portal-reference-card textarea {
  width: 100%;
}
.portal-legal {
  display: grid;
  gap: 9px;
}
.portal-form-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
}
.portal-notice {
  padding: 14px 16px;
  border-left: 4px solid var(--yellow);
  background: var(--yellow-soft);
  color: #5f4a0a;
}
.portal-account-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.portal-account-grid article {
  padding: 22px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.portal-account-grid h2 {
  margin: 6px 0;
  font-size: 21px;
}
.portal-admin-entry {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.portal-review-list {
  display: grid;
  gap: 12px;
}
.portal-review-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fafbfc;
}
.portal-review-card h2 {
  margin: 3px 0 6px;
  color: var(--navy);
  font-size: 20px;
}
.portal-review-card p {
  margin: 0;
}
.portal-review-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 7px;
}
.portal-cart-list {
  display: grid;
  gap: 10px;
}
.portal-cart-item,
.portal-order-summary,
.portal-cart-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 17px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.portal-cart-item h2 {
  margin: 4px 0 6px;
  color: var(--navy);
  font-size: 18px;
}
.portal-cart-item p,
.portal-order-summary p {
  margin: 0;
}
.portal-cart-item > div:last-child {
  display: grid;
  justify-items: end;
  gap: 8px;
}
.portal-cart-total {
  margin-top: 10px;
  border-color: var(--yellow);
  background: var(--yellow-soft);
}
.portal-cart-total strong,
.portal-order-summary strong {
  color: var(--ink);
  font-size: 22px;
}
.portal-cart-button {
  margin-left: auto;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
}
.contractor-requests {
  display: grid;
  gap: 12px;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.contractor-project-request,
.interested-company-list > article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.contractor-project-request h3,
.interested-company-list h3 {
  margin: 3px 0 7px;
  color: var(--navy);
}
.contractor-project-request p,
.interested-company-list p {
  margin: 0 0 8px;
}
.project-request-summary {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.project-request-summary h2 {
  margin: 0 0 7px;
}
.project-request-summary p {
  margin: 8px 0 0;
}
.interest-letter-preview {
  margin-top: 12px;
  padding: 22px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  line-height: 1.55;
  white-space: pre-wrap;
}
.interested-companies {
  margin-top: 22px;
}
.interested-company-list {
  display: grid;
  gap: 11px;
}
.interested-company-list > article > div:last-child {
  min-width: 180px;
}
.dashboard-subline {
  max-width: 620px;
  margin: 8px 0 0;
  color: var(--muted);
}
.contractor-dashboard-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
}
.contractor-dashboard-nav a,
.contractor-dashboard-nav button {
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.contractor-dashboard-nav a:hover,
.contractor-dashboard-nav button:hover {
  border-color: var(--yellow);
  background: var(--yellow-soft);
}
.dashboard-stat-grid,
.contractor-statistics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.dashboard-stat-grid {
  margin-bottom: 18px;
}
.dashboard-stat-grid article,
.contractor-statistics > div {
  display: grid;
  gap: 4px;
  min-height: 104px;
  padding: 16px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.dashboard-stat-grid article.warning {
  border-color: var(--yellow);
  background: var(--yellow-soft);
}
.dashboard-stat-grid span,
.contractor-statistics span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 750;
  line-height: 1.3;
}
.dashboard-stat-grid strong,
.contractor-statistics strong {
  align-self: end;
  color: var(--ink);
  font-size: 28px;
  letter-spacing: -0.05em;
}
.dashboard-profile-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin: 0 0 6px;
  padding: 18px;
  border-left: 4px solid var(--yellow);
  background: var(--yellow-soft);
}
.dashboard-profile-status h2 {
  margin: 3px 0 5px;
  font-size: 20px;
}
.dashboard-profile-status p {
  margin: 0;
  color: #5f4a0a;
}
.contractor-request-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 180px;
}
.request-meta,
.request-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 16px;
  margin: 12px 0;
}
.request-meta div,
.request-detail-grid div {
  display: grid;
  gap: 1px;
}
.request-meta dt,
.request-detail-grid dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.request-meta dd,
.request-detail-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}
.deadline-warning,
.status.warning {
  color: #7c5600;
}
.contractor-project-request.is-expiring {
  border-color: var(--yellow);
  background: #fffdf6;
}
.request-detail h3 {
  margin: 18px 0 0;
  font-size: 15px;
}
.contractor-request-detail-actions {
  display: flex;
  justify-content: flex-end;
  margin: 18px 0;
}
.request-history {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.request-history li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.request-history span {
  color: var(--muted);
  font-size: 13px;
  text-align: right;
}
.contractor-account-details {
  margin-top: 22px;
}
@media (max-width: 760px) {
  #portal-root {
    min-height: calc(100dvh - 31px);
  }
  .portal-shell {
    width: min(100% - 34px, 1180px);
    padding: 34px 0 calc(40px + env(safe-area-inset-bottom, 0px));
  }
  .portal-intro h1 {
    font-size: 39px;
  }
  .portal-access-grid,
  .portal-account-grid,
  .dashboard-stat-grid,
  .contractor-statistics,
  .portal-choice-grid,
  .membership-choice-grid,
  .portal-reference-grid,
  .partner-benefit-list {
    grid-template-columns: 1fr;
  }
  .portal-access-card,
  .portal-panel {
    padding: 23px;
  }
  .partner-benefits-section {
    padding: 23px;
  }
  .portal-panel-head {
    display: grid;
  }
  .portal-form-actions {
    justify-content: stretch;
  }
  .portal-form-actions .action-button,
  .portal-form-actions .quiet-button {
    width: 100%;
  }
  .portal-review-card {
    align-items: flex-start;
    flex-direction: column;
  }
  .portal-review-actions {
    justify-content: flex-start;
  }
  .portal-brand {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .portal-cart-button {
    margin-left: 0;
  }
  .portal-cart-item,
  .portal-order-summary,
  .portal-cart-total,
  .contractor-project-request,
  .interested-company-list > article {
    align-items: flex-start;
    flex-direction: column;
  }
  .portal-cart-item > div:last-child {
    justify-items: start;
  }
  .interested-company-list > article > div:last-child {
    min-width: 0;
  }
  .dashboard-profile-status,
  .request-history li {
    align-items: flex-start;
    flex-direction: column;
  }
  .contractor-request-actions {
    align-self: stretch;
    justify-items: stretch;
    width: 100%;
  }
  .contractor-project-request > div:last-child {
    width: 100%;
  }
  .contractor-request-actions .action-button,
  .contractor-request-actions .quiet-button,
  .contractor-request-actions .text-button {
    width: 100%;
  }
  .request-meta,
  .request-detail-grid {
    grid-template-columns: 1fr;
  }
  .request-history span {
    text-align: left;
  }
}

/* Kalender & Erinnerungen */
.calendar-toolbar,
.calendar-view-switch,
.calendar-toolbar > div:last-child,
.calendar-provider-list > div,
.municipal-calendar-summary,
.calendar-task-list article,
.calendar-upcoming-list button,
.calendar-agenda-list article {
  display: flex;
  align-items: center;
  gap: 8px;
}
.calendar-toolbar,
.municipal-calendar-summary {
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.calendar-view-switch {
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 8px;
}
.calendar-view-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 9px;
  border-radius: 5px;
  cursor: pointer;
}
.calendar-view-switch button.active {
  color: #f7be25;
  background: #162134;
}
.calendar-grid-view,
.calendar-content-grid {
  margin-bottom: 14px;
}
.calendar-weekdays,
.calendar-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}
.calendar-weekdays span {
  color: var(--muted);
  font-size: 11px;
  padding: 6px 8px;
}
.calendar-month-grid {
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}
.calendar-day {
  min-height: 100px;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 7px;
  display: flex;
  align-items: stretch;
  flex-direction: column;
  gap: 4px;
}
.calendar-day.outside {
  background: #f7f8f9;
  color: var(--muted);
}
.calendar-event {
  border: 0;
  background: #162134;
  color: #f7be25;
  text-align: left;
  border-radius: 4px;
  padding: 4px 6px;
  font-size: 11px;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calendar-content-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.calendar-task-list,
.calendar-upcoming-list,
.calendar-agenda-list,
.calendar-reminder-log ul {
  display: grid;
  gap: 7px;
}
.calendar-task-list article,
.calendar-agenda-list article {
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  padding: 8px 0;
}
.calendar-task-list article > div,
.calendar-agenda-list article > div,
.calendar-upcoming-list button,
.calendar-reminder-log li {
  display: grid;
  gap: 2px;
}
.calendar-task-list span,
.calendar-upcoming-list span,
.calendar-agenda-list span,
.calendar-reminder-log span,
.calendar-provider-list span,
.municipal-calendar-summary-list {
  color: var(--muted);
  font-size: 12px;
}
.calendar-upcoming-list button {
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: white;
  padding: 9px;
  border-radius: 6px;
  cursor: pointer;
}
.calendar-provider-list {
  display: grid;
  gap: 7px;
}
.calendar-provider-list > div {
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 8px;
}
.calendar-provider-list > div span {
  margin-left: auto;
}
.calendar-reminder-log li {
  list-style: none;
  border-top: 1px solid var(--line);
  padding-top: 7px;
}
.municipal-calendar-summary {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 13px;
}
.municipal-calendar-summary h2 {
  margin: 2px 0 7px;
}
.municipal-calendar-summary-list {
  display: grid;
  gap: 3px;
}
@media (max-width: 760px) {
  .calendar-toolbar > div:last-child {
    width: 100%;
    flex-wrap: wrap;
  }
  .calendar-toolbar > div:last-child .action-button {
    flex: 1 1 100%;
  }
  .calendar-month-grid {
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    overflow-x: auto;
  }
  .calendar-weekdays {
    grid-template-columns: repeat(7, minmax(72px, 1fr));
    overflow-x: auto;
  }
  .calendar-day {
    min-height: 88px;
  }
  .calendar-content-grid {
    grid-template-columns: 1fr;
  }
  .calendar-provider-list > div {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .calendar-provider-list > div span {
    margin-left: 0;
    flex-basis: 100%;
  }
  .calendar-task-list article,
  .calendar-agenda-list article {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .calendar-task-list select {
    width: 100%;
  }
}
.app-shell {
  display: grid;
  grid-template-columns: 254px minmax(0, 1fr);
  min-height: calc(100vh - 31px);
}
.sidebar {
  position: sticky;
  top: 0;
  height: calc(100vh - 31px);
  height: calc(100dvh - 31px);
  display: flex;
  flex-direction: column;
  padding: 29px 17px calc(20px + env(safe-area-inset-bottom, 0px));
  overflow: hidden;
  background: var(--ink);
  color: white;
  z-index: 10;
}
.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 32px;
}
.sidebar-close {
  display: none;
}
.brand-box {
  display: grid;
  place-items: center;
  height: 33px;
  width: 42px;
  border: 1px solid var(--yellow);
  color: var(--yellow);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.brand-name {
  font-size: 17px;
  font-weight: 750;
  letter-spacing: -0.03em;
}
.brand-name i {
  color: var(--yellow);
  font-style: normal;
}
.brand-name small {
  display: block;
  margin-top: 1px;
  color: #aeb8c4;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
#main-nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  align-content: flex-start;
  justify-content: flex-start;
  flex: 1 1 auto;
  min-height: 0;
  gap: 3px;
  touch-action: pan-y;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding-right: 4px;
  scrollbar-gutter: stable;
}
.nav-group {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-group-toggle {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  width: 100%;
  min-height: 42px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: #f4f6f8;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
}
.nav-group-toggle:hover,
.nav-group.open .nav-group-toggle {
  background: rgba(255, 255, 255, 0.06);
}
.nav-group-toggle span {
  color: var(--yellow);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.nav-group-toggle i {
  color: #acb7c4;
  font-size: 16px;
  font-style: normal;
  transition: transform 0.18s ease;
}
.nav-group.open .nav-group-toggle i {
  color: var(--yellow);
  transform: rotate(180deg);
}
.nav-submenu {
  display: none;
  padding: 3px 0 7px;
}
.nav-group.open .nav-submenu {
  display: grid;
  gap: 1px;
}
.nav-subgroup {
  display: block;
  margin: 1px 0;
}
.nav-subgroup-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 34px;
  padding: 0 10px 0 38px;
  border: 0;
  background: transparent;
  color: #c7d0da;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  text-align: left;
}
.nav-subgroup-toggle:hover,
.nav-subgroup.open .nav-subgroup-toggle {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}
.nav-subgroup-toggle i {
  color: #acb7c4;
  font-size: 14px;
  font-style: normal;
  transition: transform 0.18s ease;
}
.nav-subgroup.open .nav-subgroup-toggle i {
  color: var(--yellow);
  transform: rotate(180deg);
}
.nav-subsubmenu {
  display: none;
  padding: 1px 0 3px;
}
.nav-subgroup.open .nav-subsubmenu {
  display: grid;
  gap: 1px;
}
.nav-subsubmenu .nav-link {
  padding-left: 52px;
}
.nav-link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 35px;
  padding: 0 10px 0 38px;
  border: 0;
  border-left: 2px solid transparent;
  background: transparent;
  color: #b9c2cd;
  font-weight: 600;
  text-align: left;
}
.nav-link:hover {
  color: white;
  background: rgba(255, 255, 255, 0.05);
}
.nav-link.active {
  border-left-color: var(--yellow);
  background: rgba(255, 255, 255, 0.08);
  color: white;
}
.nav-link span {
  width: 18px;
  color: #748195;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.nav-link.active span {
  color: var(--yellow);
}
.sidebar-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding: 20px 9px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  color: #abb7c2;
  font-size: 11px;
}
.live-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #7ec99d;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  min-height: 75px;
  padding: 0 40px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
}
.top-kicker {
  margin: 0 0 1px;
  color: #7a8693;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}
.topbar strong {
  font-size: 14px;
  letter-spacing: -0.01em;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 17px;
}
.session-note {
  color: var(--muted);
  font-size: 11px;
}
.reset-button,
.quiet-button,
.action-button {
  min-height: 37px;
  padding: 0 13px;
  border: 1px solid #c5ccd3;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.reset-button:hover,
.quiet-button:hover {
  border-color: var(--ink);
  background: #fafbfb;
}
.action-button {
  border-color: var(--yellow);
  background: var(--yellow);
}
.action-button:hover {
  background: #ffc936;
}
.action-button.secondary {
  border-color: #cbd2d8;
  background: #fff;
}
.action-button.danger {
  border-color: #c97769;
  color: var(--red);
  background: #fff;
}
.menu-toggle {
  display: none;
}
.workspace {
  max-width: 1500px;
  margin: 0 auto;
  padding: 39px 40px 70px;
}
.page-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}
.eyebrow {
  margin: 0 0 5px;
  color: #788594;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.page-head h1 {
  margin: 0;
  font-size: 34px;
  letter-spacing: -0.045em;
  line-height: 1.1;
}
.page-head p:last-child {
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.page-head .meta {
  text-align: right;
  color: var(--muted);
  font-size: 12px;
}
.page-head .meta strong {
  display: block;
  color: var(--ink);
  font-size: 15px;
}
.municipality-cart-header {
  display: grid;
  justify-items: end;
  gap: 2px;
  min-width: 180px;
  padding: 10px 13px;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  background: var(--ink);
  color: var(--yellow);
  font-weight: 800;
  text-align: right;
}
.municipality-cart-header:hover {
  background: var(--ink-2);
}
.municipality-cart-header span {
  font-size: 14px;
}
.municipality-cart-header b {
  color: #fff;
}
.municipality-cart-header small {
  color: #f4dd92;
  font-size: 11px;
  font-weight: 650;
}
.project-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 235px;
  gap: 30px;
  padding: 31px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
.project-hero h1 {
  margin: 3px 0 11px;
  font-size: 32px;
  letter-spacing: -0.04em;
}
.project-hero p {
  margin: 0;
  color: #bdc8d3;
  font-size: 14px;
}
.project-code {
  color: var(--yellow) !important;
  font-size: 11px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.progress-wrap {
  display: grid;
  align-content: end;
  gap: 10px;
}
.progress-wrap span {
  display: flex;
  justify-content: space-between;
  color: #c9d1d9;
  font-size: 11px;
}
.progress-wrap strong {
  color: #fff;
  font-size: 25px;
}
.progress {
  height: 7px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.18);
}
.progress > i {
  display: block;
  height: 100%;
  background: var(--yellow);
}
.stat-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  margin: 24px 0;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 5px 17px rgba(22, 33, 52, 0.04);
}
.stat-card {
  min-height: 139px;
  padding: 19px 18px;
  background: #fff;
  text-align: left;
  border: 0;
}
.stat-card:hover {
  background: #fafbfc;
}
.stat-card span {
  display: block;
  color: #7a8794;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.stat-card strong {
  display: block;
  margin: 14px 0 5px;
  font-size: 29px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.stat-card small {
  color: var(--muted);
  font-size: 11px;
}
.stat-card.accent {
  background: #fffbef;
}
.stat-card.accent strong {
  color: #96700f;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 22px;
}
.card {
  padding: 23px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 19px rgba(22, 33, 52, 0.04);
}
.card h2 {
  margin: 2px 0 16px;
  font-size: 18px;
  letter-spacing: -0.025em;
}
.card.full {
  grid-column: 1/-1;
}
.card.dark {
  background: var(--ink-2);
  color: white;
  border-color: var(--ink-2);
}
.card.dark p {
  color: #c0cad4;
}
.card-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.card-header .eyebrow {
  margin: 0;
}
.card-header a {
  color: #667384;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
}
.card-header a:hover {
  color: var(--ink);
}
.card.dark .card-header {
  border-color: rgba(255, 255, 255, 0.15);
}
.card.dark .eyebrow {
  color: var(--yellow);
}
.card.dark .action-button.secondary {
  border-color: rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.detail-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.detail-list li {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding: 13px 0;
  border-bottom: 1px solid #edf0f2;
  font-size: 13px;
}
.detail-list li:last-child {
  border: 0;
}
.detail-list strong {
  font-weight: 700;
}
.detail-list span {
  color: var(--muted);
  text-align: right;
}
.action-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}
.link-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 12px 0;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  background: transparent;
  color: var(--ink);
  text-align: left;
}
.link-row:hover {
  color: #7b5c0d;
}
.link-row span {
  color: var(--muted);
  font-size: 12px;
}
.timeline {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.timeline li {
  position: relative;
  padding: 13px 0 13px 20px;
  border-left: 1px solid #d7dde1;
  font-size: 13px;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 18px;
  left: -4px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
}
.timeline time {
  display: block;
  margin-bottom: 2px;
  color: #798693;
  font-size: 10px;
  font-weight: 700;
}
.timeline small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.section-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.panel-title {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 14px;
}
.panel-title h2 {
  margin: 2px 0 0;
  font-size: 19px;
}
.hint {
  margin: 0 0 14px;
  padding: 12px 13px;
  border-left: 3px solid var(--yellow);
  background: var(--yellow-soft);
  color: #685018;
  font-size: 12px;
}
.file-drop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  margin-bottom: 15px;
  padding: 14px;
  border: 1px dashed #b9c3cc;
  background: #fafbfc;
  color: #607080;
  font-size: 12px;
}
.file-drop input {
  width: 1px;
  height: 1px;
  opacity: 0;
  position: absolute;
}
.file-drop label {
  text-decoration: underline;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
}
.file-row {
  display: grid;
  grid-template-columns: 37px minmax(0, 1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f2;
}
.file-row:last-child {
  border-bottom: 0;
}
.file-icon {
  display: grid;
  place-items: center;
  width: 37px;
  height: 37px;
  border: 1px solid #d5dce1;
  background: #f4f7f8;
  color: #506172;
  font-size: 9px;
  font-weight: 800;
}
.file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 700;
}
.file-info {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}
.file-actions {
  display: flex;
  gap: 6px;
}
.icon-action {
  min-width: 29px;
  height: 29px;
  border: 1px solid #d5dce1;
  border-radius: 3px;
  background: #fff;
  color: #536270;
  font-size: 12px;
}
.icon-action:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.approval {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 19px 0;
  border-bottom: 1px solid #e8ecee;
}
.approval:last-child {
  border: 0;
}
.approval h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.approval p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.approval-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
}
.status {
  display: inline-flex;
  align-items: center;
  min-height: 23px;
  padding: 0 8px;
  border-radius: 20px;
  background: #edf1f3;
  color: #536270;
  font-size: 10px;
  font-weight: 800;
}
.status.open {
  background: var(--yellow-soft);
  color: #7b5b09;
}
.status.approved {
  background: var(--green-bg);
  color: var(--green);
}
.status.question {
  background: var(--red-bg);
  color: var(--red);
}
.phase-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.phase {
  display: flex;
  gap: 11px;
  align-items: center;
  min-height: 58px;
  padding: 11px 13px;
  background: #fff;
  font-size: 13px;
}
.phase-num {
  color: #93a0ab;
  font-size: 10px;
  font-weight: 800;
}
.phase b {
  display: block;
  font-size: 12px;
}
.phase small {
  color: var(--muted);
  font-size: 10px;
}
.phase .status {
  margin-left: auto;
}
.info-grid {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 0;
  margin: 0;
}
.info-grid dt,
.info-grid dd {
  margin: 0;
  padding: 11px 0;
  border-bottom: 1px solid #edf0f2;
  font-size: 13px;
}
.info-grid dt {
  color: var(--muted);
}
.info-grid dd {
  font-weight: 600;
}
.sampling-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.sampling-tabs button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid #d5dde2;
  border-radius: 3px;
  background: #fff;
  color: #607080;
  font-size: 11px;
  font-weight: 700;
}
.sampling-tabs button.active {
  border-color: var(--ink);
  background: var(--ink);
  color: white;
}
.variants {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
.variant {
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 5px 16px rgba(22, 33, 52, 0.04);
}
.variant-image {
  height: 190px;
  position: relative;
  overflow: hidden;
  background: #ddd;
}
.variant-image::before,
.variant-image::after {
  content: "";
  position: absolute;
  inset: 0;
}
.variant-image.larch {
  background: linear-gradient(
    90deg,
    #563d29 0 8%,
    #bd8752 8% 13%,
    #734b31 13% 24%,
    #d9a76e 24% 29%,
    #714a32 29% 39%,
    #c58b55 39% 45%,
    #593c2b 45% 58%,
    #cf9a5e 58% 64%,
    #71482e 64% 75%,
    #bd814f 75% 81%,
    #513826 81% 100%
  );
}
.variant-image.fiber {
  background: linear-gradient(
    145deg,
    #31363c 0 47%,
    #464d53 47% 51%,
    #252b32 51% 100%
  );
}
.variant-image.plaster {
  background: linear-gradient(
    140deg,
    #e8e2d6 0 48%,
    #d3c8b7 48% 52%,
    #f4f0e9 52% 100%
  );
}
.variant-image::after {
  background: repeating-linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.09) 0 1px,
    transparent 1px 19px
  );
  opacity: 0.4;
}
.variant-body {
  padding: 17px;
}
.variant h3 {
  margin: 0 0 5px;
  font-size: 16px;
}
.variant .label {
  color: #73808c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.variant dl {
  display: grid;
  grid-template-columns: 75px 1fr;
  gap: 6px 8px;
  margin: 14px 0;
  font-size: 11px;
}
.variant dt {
  color: var(--muted);
}
.variant dd {
  margin: 0;
  font-weight: 600;
}
.variant footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px solid #e9edef;
}
.variant footer span {
  color: #6d5512;
  font-size: 11px;
  font-weight: 700;
}
.variant.selected {
  border: 2px solid var(--yellow);
}
.variant.selected .variant-body {
  padding: 16px;
}
.selected-flag {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 6px;
  background: var(--green-bg);
  color: var(--green);
  font-size: 10px;
  font-weight: 800;
}
.calendar {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.appointment {
  display: grid;
  grid-template-columns: 113px 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 15px 17px;
  background: #fff;
}
.appointment.past {
  background: #f4f6f7;
  color: #71808d;
}
.appointment time {
  color: #5a6875;
  font-size: 12px;
  font-weight: 800;
}
.appointment h3 {
  margin: 0 0 2px;
  font-size: 14px;
}
.appointment p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.message-board {
  display: grid;
  gap: 14px;
  max-width: 900px;
}
.message {
  padding: 14px 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.message.own {
  margin-left: 70px;
  border-color: #efd68f;
  background: #fffcf3;
}
.message-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
  font-size: 11px;
}
.message-head strong {
  font-size: 12px;
}
.message-head span {
  color: var(--muted);
}
.message p {
  margin: 0;
  color: #445260;
  font-size: 13px;
  white-space: pre-wrap;
}
.message-form {
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--line);
  background: #f9fafb;
}
.message-form textarea {
  width: 100%;
  min-height: 95px;
  margin: 9px 0 11px;
  padding: 10px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  resize: vertical;
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
}
.access-list {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.person {
  display: grid;
  grid-template-columns: 1fr 180px 180px;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: #fff;
}
.person strong {
  display: block;
  font-size: 14px;
}
.person small {
  color: var(--muted);
  font-size: 11px;
}
.add-person {
  margin-top: 20px;
  padding: 21px;
  border: 1px solid var(--line);
  background: #f9fafb;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.form-grid label {
  display: grid;
  gap: 5px;
  color: #596775;
  font-size: 11px;
  font-weight: 700;
}
.form-grid input,
.form-grid select {
  width: 100%;
  height: 38px;
  padding: 0 9px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
.form-grid .wide {
  grid-column: 1/-1;
}
.empty {
  padding: 35px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}
.modal {
  width: min(760px, calc(100vw - 28px));
  max-height: min(84vh, 850px);
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 25px 80px rgba(9, 16, 27, 0.35);
}
.modal::backdrop {
  background: rgba(12, 22, 36, 0.61);
}
.modal-body {
  padding: 27px;
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 15px;
  padding: 20px 27px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 {
  margin: 2px 0 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.modal-close {
  width: 31px;
  height: 31px;
  border: 0;
  border-radius: 50%;
  background: #edf0f2;
  font-size: 18px;
}
.preview-sheet {
  min-height: 430px;
  padding: 36px;
  background: #f2f3f1;
}
.preview-plan {
  min-height: 340px;
  padding: 20px;
  border: 1px solid #aeb8bd;
  background-color: #fff;
  background-image:
    linear-gradient(#d9e0e2 1px, transparent 1px),
    linear-gradient(90deg, #d9e0e2 1px, transparent 1px);
  background-size: 24px 24px;
  color: #425260;
}
.preview-plan h3 {
  margin: 0 0 14px;
  font-size: 17px;
}
.preview-rooms {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  grid-template-rows: 100px 140px;
  gap: 10px;
}
.preview-rooms span {
  display: grid;
  place-items: center;
  border: 2px solid #6e7e89;
  background: rgba(255, 255, 255, 0.76);
  font-size: 11px;
  font-weight: 700;
}
.preview-rooms span:first-child {
  grid-row: 1/3;
}
.preview-image {
  display: grid;
  place-items: center;
  min-height: 385px;
  overflow: hidden;
  background: #e9ece9;
}
.preview-image img {
  max-width: 100%;
  max-height: 385px;
}
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 27px;
  border-top: 1px solid var(--line);
}
.toast {
  position: fixed;
  right: 23px;
  bottom: 23px;
  z-index: 20;
  max-width: 340px;
  padding: 12px 15px;
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
  font-size: 12px;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: 0.2s;
}
.toast.show {
  opacity: 1;
  transform: none;
}
@media (max-width: 1100px) {
  .stat-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .variants {
    grid-template-columns: 1fr 1fr;
  }
  .project-hero {
    grid-template-columns: 1fr;
  }
  .dashboard-grid {
    grid-template-columns: 1fr;
  }
  .person {
    grid-template-columns: 1fr 1fr;
  }
  .person > div:first-child {
    grid-column: 1/-1;
  }
}
@media (max-width: 760px) {
  body.mobile-nav-open {
    overflow: hidden;
  }
  .demo-strip {
    height: 31px;
    min-height: 31px;
    padding: 0 12px;
    line-height: 1.2;
  }
  .demo-strip span {
    display: none;
  }
  .app-shell {
    display: block;
    min-height: 0;
  }
  .sidebar {
    position: fixed;
    top: 31px;
    left: 0;
    width: min(280px, 86vw);
    height: calc(100vh - 31px);
    height: calc(100dvh - 31px);
    max-height: calc(100dvh - 31px);
    padding: 20px 17px calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-105%);
    transition: transform 0.2s;
    box-shadow: 18px 0 36px rgba(0, 0, 0, 0.22);
  }
  .sidebar.open {
    transform: none;
  }
  .brand {
    flex: 0 0 auto;
    padding: 0 42px 24px 8px;
  }
  .sidebar-close {
    position: absolute;
    top: 14px;
    right: 14px;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(247, 190, 37, 0.72);
    border-radius: 8px;
    background: transparent;
    color: var(--yellow);
    font-size: 26px;
    line-height: 1;
  }
  #main-nav {
    display: flex;
    padding: 0 4px 18px 0;
  }
  .sidebar-foot {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 16px 9px 0;
  }
  .topbar {
    grid-template-columns: auto 1fr;
    gap: 12px;
    min-height: 67px;
    padding: 0 17px;
  }
  .menu-toggle {
    display: block;
    width: 35px;
    height: 35px;
    border: 0;
    background: transparent;
    color: var(--ink);
    font-size: 20px;
  }
  .header-actions {
    display: flex;
    margin-left: auto;
  }
  .header-actions > :not(.return-portal) {
    display: none;
  }
  .workspace {
    padding: 27px 17px 46px;
  }
  .page-head {
    display: block;
  }
  .page-head .meta {
    text-align: left;
    margin-top: 15px;
  }
  .municipality-cart-header {
    justify-items: start;
    width: 100%;
    text-align: left;
  }
  .page-head h1 {
    font-size: 29px;
  }
  .project-hero {
    padding: 23px;
  }
  .project-hero h1 {
    font-size: 27px;
  }
  .stat-grid {
    grid-template-columns: 1fr 1fr;
  }
  .stat-card {
    min-height: 119px;
  }
  .section-grid,
  .phase-list {
    grid-template-columns: 1fr;
  }
  .variants {
    grid-template-columns: 1fr;
  }
  .appointment {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .appointment .status {
    justify-self: start;
  }
  .message.own {
    margin-left: 16px;
  }
  .person {
    grid-template-columns: 1fr;
  }
  .person > div:first-child {
    grid-column: auto;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
  .form-grid .wide {
    grid-column: auto;
  }
  .file-row {
    grid-template-columns: 32px minmax(0, 1fr);
  }
  .file-actions {
    grid-column: 2;
    justify-content: start;
  }
  .card {
    padding: 18px;
  }
  .info-grid {
    grid-template-columns: 115px 1fr;
  }
  .approval {
    grid-template-columns: 1fr;
  }
  .approval-actions {
    justify-content: start;
  }
  .session-note {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* DIN 276 cost structure */
.din276-costs {
  margin-top: 22px;
}
.din276-list {
  margin-top: 3px;
}
.din276-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 48px auto;
  gap: 12px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f2;
  font-size: 13px;
}
.din276-row > strong {
  color: #788594;
  font-size: 11px;
  letter-spacing: 0.06em;
}
.din276-row > span {
  font-weight: 700;
}
.din276-row > small {
  color: var(--muted);
  font-size: 11px;
  text-align: right;
}
.din276-row > b {
  min-width: 134px;
  text-align: right;
  font-size: 13px;
}
.din276-row.unassigned {
  margin: 5px -10px 0;
  padding: 12px 10px;
  border-top: 1px solid #efd68f;
  border-bottom: 1px solid #efd68f;
  background: var(--yellow-soft);
}
.din276-row.unassigned > strong {
  color: #7b5b09;
}
.din276-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: 13px;
  padding-top: 15px;
  border-top: 2px solid var(--ink);
  font-size: 14px;
  font-weight: 800;
}
.din276-total strong {
  font-size: 17px;
}
.din276-assignments {
  display: grid;
  gap: 9px;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.din276-assignments > p {
  margin: 0 0 2px;
  color: #667384;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.din276-assignments label {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 0.8fr);
  gap: 15px;
  align-items: center;
  color: #3c4b5b;
  font-size: 12px;
  font-weight: 700;
}
.din276-assignments select {
  width: 100%;
  height: 36px;
  padding: 0 9px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
}
@media (max-width: 760px) {
  .din276-row {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 8px;
  }
  .din276-row > small {
    display: none;
  }
  .din276-row > b {
    min-width: 0;
    font-size: 12px;
  }
  .din276-assignments label {
    grid-template-columns: 1fr;
    gap: 5px;
  }
  .din276-total strong {
    font-size: 15px;
  }
}

/* Municipality-first dashboard and responsive project overview. */
.sidebar.is-municipality .project-only,
.topbar.is-municipality .project-only {
  display: none;
}
.municipality-card {
  display: grid;
  grid-template-columns: 1.05fr 1.05fr 0.9fr;
  margin-bottom: 25px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow);
}
.municipality-section {
  min-height: 210px;
  padding: 26px;
  border-right: 1px solid var(--line);
}
.municipality-section:last-child {
  border-right: 0;
  background: #f9fafb;
}
.municipality-section h2 {
  margin: 2px 0 12px;
  font-size: 24px;
  letter-spacing: -0.035em;
}
.municipality-section p {
  margin: 0 0 5px;
  color: #526170;
  font-size: 13px;
}
.municipality-section address {
  color: #526170;
  font-size: 13px;
  font-style: normal;
  line-height: 1.65;
}
.contact-name {
  display: block;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: 750;
}
.contact-meta {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.municipality-mini {
  margin-top: 15px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.municipality-mini strong {
  display: block;
  font-size: 13px;
}
.municipality-mini span {
  display: block;
  color: var(--muted);
  font-size: 11px;
}
.municipality-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0 0 30px;
  border: 1px solid var(--line);
  background: var(--line);
}
.municipality-stat {
  min-height: 104px;
  padding: 16px 19px;
  border: 0;
  background: #fff;
  text-align: left;
}
.municipality-stat span {
  display: block;
  color: #7a8794;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.municipality-stat strong {
  display: block;
  margin-top: 11px;
  font-size: 24px;
  letter-spacing: -0.04em;
}
.municipality-stat small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
}
.municipal-dashboard {
  display: grid;
  gap: 18px;
  margin: 0 0 32px;
}
.municipal-dashboard > .section-heading {
  margin: 0;
}
.municipal-dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.municipal-dashboard-stats article {
  display: grid;
  gap: 8px;
  min-height: 98px;
  padding: 16px;
  background: #fff;
}
.municipal-dashboard-stats article.highlight {
  background: var(--yellow-soft);
}
.municipal-dashboard-stats article.warning {
  border-left: 3px solid var(--yellow);
  background: #fffdf6;
}
.municipal-dashboard-stats span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  line-height: 1.25;
  text-transform: uppercase;
}
.municipal-dashboard-stats strong {
  align-self: end;
  font-size: 25px;
  letter-spacing: -0.05em;
}
.municipal-dashboard-section {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 18px rgba(22, 33, 52, 0.04);
}
.municipal-dashboard-section > .card-header {
  padding: 19px 20px;
  border-bottom: 1px solid var(--line);
}
.municipal-offer-card,
.municipal-request-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--line);
}
.municipal-offer-card:last-child,
.municipal-request-card:last-child {
  border-bottom: 0;
}
.municipal-offer-card.is-new {
  border-left: 4px solid var(--yellow);
  background: #fffdf6;
}
.municipal-offer-card h3,
.municipal-request-card h3 {
  margin: 3px 0 5px;
  font-size: 18px;
}
.municipal-offer-card p,
.municipal-request-card p {
  margin: 0 0 8px;
  color: var(--muted);
}
.municipal-request-card small,
.municipal-request-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
}
.municipal-offer-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 205px;
}
.municipal-request-actions {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 245px;
}
.downloadcenter-notice {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 15px 18px;
  border-left: 4px solid var(--yellow);
  background: var(--yellow-soft);
  color: var(--ink);
}
.downloadcenter-notice span {
  color: var(--muted);
}
.downloadcenter-packets {
  display: grid;
  gap: 20px;
}
.downloadcenter-packet {
  display: grid;
  gap: 16px;
}
.downloadcenter-actions,
.contractor-request-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.downloadcenter-actions label {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
.downloadcenter-folder-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.downloadcenter-folder {
  min-width: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.downloadcenter-folder:has(.is-dragging),
.downloadcenter-folder:hover {
  border-color: var(--yellow);
}
.downloadcenter-folder-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  cursor: grab;
}
.downloadcenter-folder-head > div {
  min-width: 0;
}
.downloadcenter-folder-head h3,
.downloadcenter-folder-head p {
  margin: 0;
}
.downloadcenter-folder-head h3 {
  display: inline;
  font-size: 15px;
}
.downloadcenter-folder-head p,
.downloadcenter-drop-help {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
}
.downloadcenter-drag-handle {
  display: inline-block;
  margin-right: 7px;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  vertical-align: -2px;
}
.downloadcenter-file-picker {
  margin: 12px 0 2px;
}
.downloadcenter-document-row {
  cursor: grab;
}
.downloadcenter-document-row.is-dragging,
.downloadcenter-folder-head.is-dragging {
  opacity: 0.45;
}
.downloadcenter-context {
  position: relative;
  flex: 0 0 auto;
}
.downloadcenter-context summary {
  cursor: pointer;
  color: var(--blue);
  font-weight: 750;
}
.downloadcenter-context[open] {
  z-index: 1;
}
.downloadcenter-context[open] > div {
  display: grid;
  gap: 7px;
  min-width: 190px;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 8px 18px rgb(22 33 52 / 12%);
}
.downloadcenter-context label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.downloadcenter-move-label {
  display: grid !important;
  gap: 4px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.downloadcenter-move-label select {
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font: inherit;
}
.downloadcenter-document-list,
.partner-download-list {
  border-top: 1px solid var(--line);
}
.downloadcenter-document-list article,
.partner-download-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}
.downloadcenter-document-list strong,
.partner-download-list strong {
  margin-right: 8px;
}
.downloadcenter-document-list small,
.partner-download-list small {
  display: block;
  margin-top: 5px;
  color: var(--muted);
}
.downloadcenter-conditions,
.partner-download-conditions {
  margin-top: 22px;
}
.project-document-selector {
  margin-top: 18px;
}
.downloadcenter-source-groups {
  display: grid;
  gap: 12px;
}
.downloadcenter-source-groups > section {
  padding: 12px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.source-category-choice,
.project-source-document {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 8px 0;
  color: var(--ink);
}
.source-category-choice {
  border-bottom: 1px solid var(--line);
  font-weight: 800;
}
.project-source-document {
  cursor: grab;
}
.project-source-document span {
  display: grid;
  gap: 3px;
}
.project-source-document small {
  color: var(--muted);
}
.project-source-dropzone {
  margin-top: 14px;
  padding: 14px;
  border: 2px dashed var(--yellow);
  color: var(--blue);
  font-weight: 750;
  text-align: center;
}
.partner-downloadcenter {
  display: grid;
  gap: 20px;
}
.partner-download-conditions {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fffdf6;
}
.municipal-offer-status.new,
.municipal-offer-status.unopened {
  border-color: #c18a00;
  background: var(--yellow-soft);
  color: #745500;
}
.municipal-offer-status.review,
.municipal-offer-status.comparison {
  border-color: #65758b;
  background: #eef2f6;
  color: #33445c;
}
.deadline-section {
  border-left: 4px solid var(--yellow);
}
.offer-detail,
.offer-comparison {
  display: grid;
  gap: 16px;
}
.offer-detail h3,
.offer-comparison h3 {
  margin: 0;
}
.offer-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.offer-detail-grid > div {
  min-width: 0;
  padding: 11px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.offer-detail-grid dt {
  margin-bottom: 3px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.offer-detail-grid dd {
  margin: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}
.offer-detail-grid select {
  width: 100%;
}
.offer-inclusions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.offer-inclusions > div {
  padding: 13px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.offer-inclusions p {
  margin: 5px 0 0;
  color: var(--muted);
}
.offer-deviations {
  padding: 14px 16px;
  border-left: 4px solid var(--yellow);
  background: var(--yellow-soft);
}
.offer-deviations ul {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 8px 0;
  padding: 0;
  list-style: none;
}
.offer-deviations li {
  padding: 4px 7px;
  border: 1px solid #c18a00;
  color: #735400;
  font-size: 12px;
  font-weight: 700;
}
.offer-deviations small {
  color: #655116;
}
.offer-document-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.offer-document-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.comparison-criteria {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px;
  padding: 13px;
  border: 1px solid var(--line);
  background: #fafbfc;
}
.comparison-criteria span {
  flex: 1 1 280px;
  color: var(--muted);
  font-size: 12px;
}
.offer-comparison-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}
.offer-comparison-list > article {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 17px;
  border: 1px solid var(--line);
  background: #fff;
}
.offer-comparison-list p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.project-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}
.project-card {
  display: grid;
  grid-template-columns: 102px minmax(0, 1fr);
  min-height: 240px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 19px rgba(22, 33, 52, 0.04);
}
.project-card.completed {
  opacity: 0.8;
  box-shadow: none;
}
.project-card-picture {
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: #233247;
  overflow: hidden;
}
.project-card-picture::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.62;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.1) 0 1px,
    transparent 1px 19px
  );
}
.project-card-picture.fire {
  background: linear-gradient(160deg, #c67130, #6d3026 54%, #202b3c 54%);
}
.project-card-picture.kindergarten {
  background: linear-gradient(160deg, #e9c856, #d1774d 52%, #447d79 52%);
}
.project-card-picture.rathaus {
  background: linear-gradient(160deg, #a0aab0, #ece7db 52%, #596775 52%);
}
.project-card-body {
  display: flex;
  flex-direction: column;
  padding: 20px;
}
.project-card h3 {
  margin: 2px 0 5px;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.project-card-number {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}
.project-card-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 17px 0;
}
.project-card-metrics div {
  padding: 8px 5px 7px;
  border-top: 1px solid #e4e9ec;
  font-size: 10px;
}
.project-card-metrics strong,
.project-card-metrics span {
  display: block;
}
.project-card-metrics strong {
  font-size: 17px;
}
.project-card-metrics span {
  color: var(--muted);
}
.project-card footer {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 10px;
  margin-top: auto;
}
.project-card footer small {
  color: var(--muted);
  font-size: 10px;
}
.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin: 30px 0 15px;
}
.section-heading h2 {
  margin: 2px 0 0;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.municipality-hero {
  position: relative;
  min-height: 300px;
  margin-bottom: 29px;
  background: #344457 center/cover no-repeat;
  color: #fff;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.municipality-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(16, 27, 43, 0.88),
    rgba(16, 27, 43, 0.56) 54%,
    rgba(16, 27, 43, 0.28)
  );
}
.municipality-hero-content {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr) auto;
  align-items: end;
  gap: 22px;
  min-height: 300px;
  padding: 31px;
}
.municipality-profile-image {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  padding: 8px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  background: rgba(255, 255, 255, 0.93);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}
.municipality-profile-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.profile-fallback {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  background: #edf1f3;
  color: var(--ink);
  font-size: 36px;
  font-weight: 800;
}
.municipality-hero-title .eyebrow {
  color: var(--yellow);
}
.municipality-hero-title h1 {
  margin: 3px 0 8px;
  font-size: 34px;
  letter-spacing: -0.045em;
}
.municipality-hero-title p {
  margin: 0;
  color: #eef2f5;
  font-size: 14px;
}
.municipality-hero-title > span {
  display: block;
  margin-top: 11px;
  color: #dbe3e9;
  font-size: 11px;
  font-weight: 700;
}
.municipality-hero-action {
  display: grid;
  justify-items: end;
  gap: 10px;
}
.municipality-hero-action span {
  color: #e3e9ed;
  font-size: 10px;
}
.municipality-hero-action .action-button {
  white-space: nowrap;
}
.profile-editor-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.profile-editor-grid h3 {
  margin: 0 0 11px;
  font-size: 15px;
}
.profile-image-editor {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 13px;
  align-items: center;
  padding: 13px;
  border: 1px solid var(--line);
  background: #fafbfb;
}
.profile-image-editor .image-preview {
  display: grid;
  place-items: center;
  width: 96px;
  height: 75px;
  overflow: hidden;
  background: #e9edf0;
}
.profile-image-editor.wappen .image-preview {
  height: 96px;
}
.profile-image-editor img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.profile-image-editor.header img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-image-editor label {
  display: block;
  color: #596775;
  font-size: 11px;
  font-weight: 700;
}
.profile-image-editor input[type="file"] {
  display: block;
  width: 100%;
  margin: 8px 0;
  font-size: 11px;
}
.protected-fields {
  padding: 12px 13px;
  border-left: 3px solid #8d9aa5;
  background: #f1f4f5;
  color: #53616e;
  font-size: 11px;
}
.protected-fields strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink);
}
@media (max-width: 760px) {
  .municipality-hero {
    min-height: 250px;
    margin-inline: -17px;
    margin-top: -27px;
  }
  .municipality-hero-content {
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: end;
    gap: 14px;
    min-height: 250px;
    padding: 20px 17px;
  }
  .municipality-profile-image {
    width: 76px;
    height: 76px;
    padding: 5px;
  }
  .municipality-hero-title h1 {
    font-size: 25px;
  }
  .municipality-hero-title p {
    font-size: 12px;
  }
  .municipality-hero-title > span {
    font-size: 9px;
  }
  .municipality-hero-action {
    grid-column: 1/-1;
    justify-items: start;
  }
  .municipality-hero-action span {
    display: none;
  }
  .profile-editor-grid {
    grid-template-columns: 1fr;
  }
}

/* Project-level municipal polling and separated communication. */
.poll-card {
  margin-bottom: 22px;
  padding: 24px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 6px 19px rgba(22, 33, 52, 0.04);
}
.poll-head {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.poll-head h2 {
  margin: 2px 0 6px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.poll-head p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.poll-head > div:last-child {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 5px;
}
.poll-head small {
  color: var(--muted);
  font-size: 10px;
}
.poll-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 15px;
  margin: 20px 0;
}
.poll-option {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #dfe5e8;
  background: #fff;
}
.poll-option.voted {
  border: 2px solid var(--yellow);
}
.poll-visual {
  min-height: 190px;
  background: #607080;
}
.poll-visual.blue {
  background: linear-gradient(145deg, #466d9a, #213d5a 52%, #a8c8de 52%);
}
.poll-visual.white {
  background: linear-gradient(145deg, #f5f4ef, #d7d5cf 52%, #fff 52%);
}
.poll-visual.beige {
  background: linear-gradient(145deg, #d2ae7c, #907250 52%, #e5c89f 52%);
}
.poll-visual.wood {
  background: repeating-linear-gradient(
    90deg,
    #633d24 0 13px,
    #b57b43 13px 22px,
    #754827 22px 34px
  );
}
.poll-option-body {
  padding: 15px;
}
.poll-option h3 {
  margin: 2px 0 8px;
  font-size: 17px;
}
.poll-option dl {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 5px 8px;
  margin: 10px 0;
  font-size: 11px;
}
.poll-option dt {
  color: var(--muted);
}
.poll-option dd {
  margin: 0;
  font-weight: 600;
}
.cost-info {
  display: block;
  margin: 11px 0;
  color: #76580f;
  font-size: 12px;
}
.vote-result {
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid #e7ebed;
}
.vote-result strong,
.vote-result small {
  display: block;
  font-size: 10px;
}
.vote-result small {
  margin-top: 5px;
  color: var(--muted);
}
.vote-result i {
  display: block;
  height: 5px;
  margin-top: 6px;
  overflow: hidden;
  background: #e7ebed;
}
.vote-result i b {
  display: block;
  height: 100%;
  background: var(--yellow);
}
.poll-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.poll-actions > div {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.poll-actions span {
  color: var(--muted);
  font-size: 11px;
}
.communication-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}
.communication-grid .message-board {
  max-width: none;
}
.communication-grid .message {
  margin: 0 0 10px;
}
.communication-grid .message.own {
  margin-left: 22px;
}
.communication-grid .message-form {
  margin-top: 15px;
}
@media (max-width: 760px) {
  .poll-card {
    padding: 17px;
  }
  .poll-head,
  .poll-actions {
    align-items: flex-start;
    flex-direction: column;
  }
  .poll-head > div:last-child {
    justify-items: start;
  }
  .poll-options,
  .communication-grid {
    grid-template-columns: 1fr;
  }
  .poll-option {
    grid-template-columns: 88px minmax(0, 1fr);
  }
  .poll-visual {
    min-height: 180px;
  }
  .communication-grid .message.own {
    margin-left: 10px;
  }
}
@media (max-width: 1100px) {
  .municipality-card {
    grid-template-columns: 1fr;
  }
  .municipality-section {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .municipality-section:last-child {
    border-bottom: 0;
  }
  .municipality-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  .municipal-dashboard-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 760px) {
  .municipality-stats,
  .municipal-dashboard-stats,
  .project-card-grid {
    grid-template-columns: 1fr;
  }
  .municipal-offer-card,
  .municipal-request-card {
    flex-direction: column;
    gap: 12px;
  }
  .municipal-offer-actions {
    justify-items: stretch;
    width: 100%;
  }
  .municipal-request-actions {
    justify-items: stretch;
    width: 100%;
  }
  .downloadcenter-notice,
  .downloadcenter-document-list article,
  .partner-download-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .downloadcenter-folder-grid {
    grid-template-columns: 1fr;
  }
  .downloadcenter-folder-head {
    flex-direction: column;
  }
  .downloadcenter-context,
  .downloadcenter-context summary,
  .downloadcenter-context[open] > div {
    width: 100%;
  }
  .downloadcenter-document-list article > div:last-child,
  .partner-download-list .action-button {
    width: 100%;
  }
  .municipal-offer-actions .action-button,
  .municipal-offer-actions .quiet-button,
  .municipal-request-card .action-button,
  .municipal-request-card .quiet-button {
    width: 100%;
  }
  .offer-detail-grid,
  .offer-inclusions {
    grid-template-columns: 1fr;
  }
  .offer-document-list li {
    align-items: flex-start;
    flex-direction: column;
  }
  .project-card {
    grid-template-columns: 82px minmax(0, 1fr);
  }
  .project-card-body {
    padding: 16px;
  }
  .project-card h3 {
    font-size: 17px;
  }
  .section-heading {
    margin-top: 24px;
  }
}

/* Cost calculation and payment-plan view. */
.cost-calculator-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 22px;
  margin-bottom: 22px;
}
.area-input {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px auto;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  color: #596775;
  font-size: 12px;
  font-weight: 750;
}
.area-input input {
  width: 100%;
  height: 43px;
  padding: 0 11px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font-weight: 750;
}
.area-input input:disabled {
  color: #72808d;
  background: #f2f4f5;
}
.area-input > span {
  color: var(--muted);
  font-size: 12px;
}
.cost-definition {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0;
  margin: 19px 0 0;
  border-top: 1px solid #e8ecee;
  font-size: 12px;
}
.cost-definition dt,
.cost-definition dd {
  margin: 0;
  padding: 10px 0;
  border-bottom: 1px solid #edf0f2;
}
.cost-definition dt {
  color: var(--muted);
}
.cost-definition dd {
  font-weight: 750;
  text-align: right;
}
.platform-card {
  background: var(--ink-2);
  border-color: var(--ink-2);
  color: #fff;
}
.platform-card .eyebrow {
  color: var(--yellow);
}
.platform-card h2 {
  font-size: 23px;
}
.platform-card p {
  margin: 0 0 16px;
  color: #c7d0d9;
  font-size: 13px;
}
.platform-card > span {
  display: inline-flex;
  padding: 5px 8px;
  background: rgba(255, 255, 255, 0.1);
  color: #f3d77e;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cost-summary {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 5px 17px rgba(22, 33, 52, 0.04);
}
.cost-summary > div {
  min-height: 113px;
  padding: 17px;
  background: #fff;
}
.cost-summary span,
.cost-summary small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.cost-summary strong {
  display: block;
  margin: 12px 0 3px;
  font-size: 20px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.cost-summary small {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.payment-timeline {
  display: grid;
  margin-top: 3px;
}
.payment-step {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 132px 154px;
  align-items: center;
  gap: 15px;
  padding: 15px 0;
  border-bottom: 1px solid #edf0f2;
}
.payment-step:last-child {
  border-bottom: 0;
}
.payment-index {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background: #edf1f3;
  color: #536270;
  font-size: 10px;
  font-weight: 800;
}
.payment-step.paid .payment-index {
  background: var(--green-bg);
  color: var(--green);
}
.payment-step.due .payment-index,
.payment-step.overdue .payment-index {
  background: var(--yellow-soft);
  color: #7b5b09;
}
.payment-step h3 {
  margin: 0 0 2px;
  font-size: 14px;
}
.payment-step p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.payment-step > strong {
  font-size: 13px;
  text-align: right;
}
.payment-step > strong small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.payment-status-select {
  width: 100%;
  height: 35px;
  padding: 0 8px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
}
.payment-status {
  justify-content: center;
  min-width: 108px;
}
.payment-status.paid {
  background: var(--green-bg);
  color: var(--green);
}
.payment-status.due,
.payment-status.overdue {
  background: var(--yellow-soft);
  color: #7b5b09;
}
.payment-status.overdue {
  background: var(--red-bg);
  color: var(--red);
}
@media (max-width: 1100px) {
  .cost-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .payment-step {
    grid-template-columns: 38px minmax(0, 1fr) 125px;
  }
  .payment-step > div:last-child {
    grid-column: 2/-1;
  }
  .payment-status-select {
    max-width: 190px;
  }
}
@media (max-width: 760px) {
  .cost-calculator-grid,
  .cost-summary {
    grid-template-columns: 1fr;
  }
  .area-input {
    grid-template-columns: 1fr auto;
  }
  .area-input input {
    grid-column: 1;
  }
  .area-input > span {
    grid-column: 2;
    grid-row: 2;
  }
  .payment-step {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
  }
  .payment-step > strong {
    grid-column: 2;
    text-align: left;
  }
  .payment-step > div:last-child {
    grid-column: 2;
  }
  .payment-status-select {
    max-width: none;
  }
  .cost-summary > div {
    min-height: 86px;
  }
  .cost-summary strong {
    font-size: 22px;
  }
}

/* Project-specific title image: independent from the municipal profile imagery. */
.project-card.has-project-image {
  display: block;
  min-height: 0;
}
.project-card-cover {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  height: 320px;
  overflow: hidden;
  background: #d7dde1;
}
.project-card-open-image {
  cursor: pointer;
}
.project-card-open-image:hover img {
  transform: scale(1.025);
}
.project-card-open-image:focus-visible {
  outline: 3px solid var(--yellow);
  outline-offset: -3px;
}
.project-card-cover img,
.project-hero-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transition: transform 0.2s ease;
}
.project-card.has-project-image .project-card-body {
  min-height: 245px;
}
.project-hero.has-project-image {
  grid-template-columns: minmax(250px, 0.9fr) minmax(340px, 1.2fr) minmax(
      190px,
      0.55fr
    );
  align-items: stretch;
}
.project-hero.has-project-image > div:first-child {
  display: grid;
  align-content: center;
}
.project-hero-image {
  min-height: 214px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.project-hero.has-project-image .progress-wrap {
  padding: 0 0 5px;
}
@media (max-width: 1100px) {
  .project-hero.has-project-image {
    grid-template-columns: 1fr;
  }
  .project-hero.has-project-image > div:first-child {
    display: block;
  }
  .project-hero-image {
    min-height: 285px;
  }
  .project-hero.has-project-image .progress-wrap {
    padding: 0;
  }
}
@media (max-width: 760px) {
  .project-card-cover {
    height: 205px;
  }
  .project-card.has-project-image .project-card-body {
    min-height: 0;
  }
  .project-hero-image {
    min-height: 192px;
  }
  .project-hero.has-project-image {
    gap: 19px;
  }
  .project-hero.has-project-image .progress-wrap {
    gap: 8px;
  }
  .project-card-cover img,
  .project-hero-image img {
    object-position: center 40%;
  }
}

/* Project costs are deliberately separate from SBK payments. */
.project-cost-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 22px;
  border: 1px solid var(--line);
  background: var(--line);
  box-shadow: 0 5px 17px rgba(22, 33, 52, 0.04);
}
.project-cost-summary > div {
  min-height: 118px;
  padding: 18px;
  background: #fff;
}
.project-cost-summary span,
.project-cost-summary small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-cost-summary strong {
  display: block;
  margin: 12px 0 3px;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.04em;
}
.project-cost-summary small {
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.cost-change-up {
  color: #9a4538 !important;
}
.project-cost-list {
  display: grid;
}
.project-cost-list article {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 150px 150px 118px;
  align-items: center;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid #edf0f2;
}
.project-cost-list article:last-child {
  border-bottom: 0;
}
.project-cost-list h3 {
  margin: 0 0 3px;
  font-size: 14px;
}
.project-cost-list p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.project-cost-list strong {
  display: grid;
  gap: 2px;
  font-size: 13px;
  text-align: right;
}
.project-cost-list strong small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
}
.project-cost-list > article > span {
  text-align: right;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 760px) {
  .project-cost-summary {
    grid-template-columns: 1fr;
  }
  .project-cost-summary > div {
    min-height: 88px;
  }
  .project-cost-list article {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .project-cost-list article > div {
    grid-column: 1/-1;
  }
  .project-cost-list strong {
    text-align: left;
  }
  .project-cost-list > article > span {
    text-align: right;
    align-self: end;
  }
}

/* Document categories keep project plans easy to find. */
.document-category {
  margin-top: 21px;
  padding-top: 17px;
  border-top: 1px solid var(--line);
}
.document-category-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 7px;
}
.document-category-head .eyebrow {
  margin-bottom: 3px;
}
.document-category-head h3 {
  margin: 0;
  font-size: 15px;
  letter-spacing: -0.02em;
}

/* Featured plan documents use their real preview assets. */
.file-row.has-thumbnail {
  grid-template-columns: 76px minmax(0, 1fr) auto;
}
.file-thumbnail {
  width: 76px;
  height: 54px;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d5dce1;
  background: #eef1f2;
}
.file-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.current-plans {
  margin-top: 22px;
}
.plan-quick-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 17px;
  margin-top: 18px;
}
.plan-quick-card {
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  gap: 14px;
  overflow: hidden;
  border: 1px solid #e0e5e8;
  background: #fafbfb;
}
.plan-quick-preview {
  min-height: 116px;
  overflow: hidden;
  padding: 0;
  border: 0;
  background: #e9edef;
}
.plan-quick-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.plan-quick-card > div {
  padding: 14px 14px 14px 0;
}
.plan-quick-card h3 {
  margin: 2px 0 12px;
  font-size: 14px;
  line-height: 1.23;
}
.plan-quick-card .action-button {
  min-height: 32px;
  padding: 0 10px;
}
.modal.plan-modal {
  width: min(1280px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
}
.modal.plan-modal .modal-body {
  padding: 18px;
}
.preview-image.plan-preview {
  min-height: min(68vh, 780px);
  background: #eff1ef;
}
.preview-image.plan-preview img {
  width: 100%;
  max-width: none;
  max-height: min(68vh, 780px);
  object-fit: contain;
}
@media (max-width: 1100px) and (min-width: 761px) {
  .plan-quick-grid {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .file-row.has-thumbnail {
    grid-template-columns: 63px minmax(0, 1fr);
  }
  .file-thumbnail {
    width: 63px;
    height: 50px;
  }
  .file-row.has-thumbnail .file-actions {
    grid-column: 2;
  }
  .plan-quick-grid {
    grid-template-columns: 1fr;
  }
  .plan-quick-card {
    grid-template-columns: 120px minmax(0, 1fr);
  }
  .plan-quick-preview {
    min-height: 104px;
  }
  .modal.plan-modal {
    width: calc(100vw - 18px);
    max-height: calc(100vh - 18px);
  }
  .modal.plan-modal .modal-head {
    padding: 16px 18px;
  }
  .modal.plan-modal .modal-head h2 {
    font-size: 16px;
    overflow-wrap: anywhere;
  }
  .modal.plan-modal .modal-body {
    padding: 10px;
  }
  .preview-image.plan-preview {
    min-height: 0;
  }
  .preview-image.plan-preview img {
    max-height: 58vh;
  }
  .modal.plan-modal .modal-actions {
    padding: 12px 18px;
  }
}
.file-description {
  display: block;
  margin-top: 3px;
  color: #657381;
  font-size: 10px;
  line-height: 1.35;
}
.plan-version {
  display: block;
  margin: -7px 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}
.planning-development {
  margin-top: 22px;
}
.planning-development h2 {
  margin: 2px 0 17px;
  font-size: 23px;
  letter-spacing: -0.03em;
}
.planning-development h2 span {
  color: var(--yellow);
}
.planning-development-grid {
  display: grid;
  grid-template-columns: 1fr 42px 1fr;
  gap: 14px;
  align-items: center;
}
.planning-development-grid::before {
  content: "→";
  grid-column: 2;
  grid-row: 1;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--yellow-soft);
  color: #7b5b09;
  font-size: 21px;
  font-weight: 800;
}
.development-preview {
  position: relative;
  grid-row: 1;
  min-height: 206px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--line);
  background: #e8edef;
  text-align: left;
}
.development-preview:first-of-type {
  grid-column: 1;
}
.development-preview:last-of-type {
  grid-column: 3;
}
.development-preview img {
  display: block;
  width: 100%;
  height: 206px;
  object-fit: cover;
}
.development-preview span {
  position: absolute;
  left: 12px;
  bottom: 12px;
  padding: 5px 8px;
  background: rgba(22, 33, 52, 0.9);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.planning-development .hint {
  margin: 15px 0 0;
}
.stock-documents .plan-quick-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.stock-documents .plan-quick-card {
  grid-template-columns: 1fr;
}
.stock-documents .plan-quick-preview {
  min-height: 135px;
}
.stock-documents .plan-quick-card > div {
  padding: 13px;
}
.document-period {
  margin-top: 23px;
  padding: 20px;
  border: 1px solid var(--line);
  background: #fafbfb;
}
.document-period:first-child {
  margin-top: 19px;
}
.document-period-head h2 {
  margin: 2px 0 0;
  font-size: 20px;
  letter-spacing: -0.03em;
}
.document-period .document-category {
  background: #fff;
  padding: 15px;
}
.document-period .document-category + .document-category {
  margin-top: 12px;
}
@media (max-width: 1100px) {
  .stock-documents .plan-quick-grid {
    grid-template-columns: 1fr;
  }
  .planning-development-grid {
    grid-template-columns: 1fr;
  }
  .planning-development-grid::before {
    grid-column: 1;
    grid-row: auto;
    justify-self: center;
    transform: rotate(90deg);
  }
  .development-preview,
  .development-preview:first-of-type,
  .development-preview:last-of-type {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 760px) {
  .planning-development {
    margin-top: 18px;
  }
  .planning-development h2 {
    font-size: 20px;
  }
  .development-preview {
    min-height: 160px;
  }
  .development-preview img {
    height: 160px;
  }
  .document-period {
    padding: 15px;
  }
  .document-period .document-category {
    padding: 12px;
  }
}
.site-requirements-compact {
  margin-top: 22px;
}
.site-requirements-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.site-requirements-summary > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 66px;
  padding: 14px;
  background: #fff;
}
.site-requirements-summary strong {
  font-size: 13px;
}
.site-requirements-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px;
  margin-top: 17px;
}
.site-requirement {
  padding: 18px;
  border: 1px solid var(--line);
  background: #fafbfb;
}
.site-requirement-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}
.site-requirement h3 {
  margin: 2px 0 0;
  font-size: 18px;
  letter-spacing: -0.03em;
}
.site-requirement .status {
  white-space: nowrap;
}
.site-requirement ul {
  display: grid;
  gap: 8px;
  margin: 17px 0;
  padding: 0;
  list-style: none;
}
.site-requirement li {
  display: flex;
  gap: 8px;
  align-items: center;
  color: #596775;
  font-size: 12px;
}
.site-requirement li i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #bbc5cb;
}
.site-requirement label {
  display: grid;
  gap: 5px;
  color: #596775;
  font-size: 11px;
  font-weight: 800;
}
.site-requirement select {
  height: 36px;
  padding: 0 8px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.site-requirement .quiet-button {
  width: 100%;
  margin-top: 12px;
}
.requirement-note {
  margin: 14px 0 -3px;
  color: #596775;
  font-size: 11px;
  line-height: 1.45;
}
.site-document-period {
  margin-top: 18px;
}
@media (max-width: 1100px) {
  .site-requirements-grid {
    grid-template-columns: 1fr;
  }
  .site-requirements-summary {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 760px) {
  .site-requirements-compact {
    margin-top: 18px;
  }
  .site-requirements-summary > div {
    min-height: 54px;
  }
  .site-requirement {
    padding: 15px;
  }
}
.climate-project-cost-summary .project-cost-total {
  background: var(--ink-2);
  color: #fff;
}
.climate-project-cost-summary .project-cost-total span,
.climate-project-cost-summary .project-cost-total small {
  color: #dce5ec;
}
.climate-cost-list {
  display: grid;
  border-top: 1px solid #e7ecef;
}
.climate-cost-list > article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  padding: 19px 0;
  border-bottom: 1px solid #e7ecef;
}
.climate-cost-list h3 {
  margin: 0 0 4px;
  font-size: 16px;
}
.climate-cost-list p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}
.climate-cost-list > article > strong {
  white-space: nowrap;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.climate-cost-list .climate-cost-total {
  padding: 21px 18px;
  border: 0;
  background: var(--yellow-soft);
  color: #342b0b;
}
.climate-cost-total span {
  font-size: 14px;
  font-weight: 800;
}
.climate-cost-total strong {
  font-size: 23px;
}
@media (max-width: 760px) {
  .climate-cost-list > article {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  .climate-cost-list > article > strong {
    font-size: 19px;
  }
  .climate-cost-list .climate-cost-total {
    flex-direction: row;
    align-items: center;
  }
}

/* Project traffic-light status: text remains visible alongside the colour. */
.traffic-light {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 9px;
  color: #495a69;
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2;
}
.traffic-light i {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.13);
}
.traffic-light.red i {
  background: #c9493d;
}
.traffic-light.yellow i {
  background: #e4af19;
}
.traffic-light.green i {
  background: #258158;
}
.project-card .traffic-light {
  margin-top: 10px;
}
.project-hero-traffic {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 14px;
}
.project-hero-traffic .traffic-light {
  margin: 0;
  color: #fff;
}
.project-hero-traffic .traffic-light.red i {
  background: #ef6d62;
}
.project-hero-traffic .traffic-light.yellow i {
  background: #f7be25;
}
.project-hero-traffic .traffic-light.green i {
  background: #73c796;
}
.project-hero-traffic > span {
  color: #c9d3dc;
  font-size: 12px;
  line-height: 1.35;
}
.traffic-light-project {
  align-self: start;
}
.traffic-light-detail {
  display: grid;
  gap: 9px;
  margin-top: 4px;
}
.traffic-light-detail .traffic-light {
  margin: 0;
  font-size: 14px;
}
.traffic-light-detail p {
  margin: 0;
  color: #485968;
  font-size: 13px;
}
.traffic-light-detail small {
  color: var(--muted);
  font-size: 11px;
}
.traffic-light-readonly {
  margin: 17px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.traffic-light-form {
  display: grid;
  gap: 11px;
  margin-top: 17px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.traffic-light-form label {
  display: grid;
  gap: 5px;
  color: #596775;
  font-size: 11px;
  font-weight: 800;
}
.traffic-light-form input,
.traffic-light-form select {
  width: 100%;
  height: 37px;
  padding: 0 9px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.traffic-light-form .action-button {
  justify-self: start;
}
@media (max-width: 760px) {
  .project-hero-traffic {
    align-items: flex-start;
    flex-direction: column;
    gap: 5px;
  }
  .project-card .traffic-light {
    font-size: 10px;
  }
  .traffic-light i {
    width: 13px;
    height: 13px;
    flex-basis: 13px;
  }
  .traffic-light-project {
    grid-column: 1/-1;
  }
}

/* Completed projects retain their full record while keeping the archive state explicit. */
.archive-completion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 22px;
  border-left: 4px solid #258158;
  background: #f7fbf8;
}
.archive-completion h2 {
  margin-bottom: 7px;
}
.archive-completion p:not(.eyebrow) {
  margin: 0 0 8px;
  color: #485968;
}
.archive-completion small {
  color: var(--muted);
  font-size: 11px;
}
.archive-completion-status {
  display: grid;
  justify-items: end;
  gap: 5px;
  min-width: 150px;
  text-align: right;
}
.archive-completion-status > strong {
  font-size: 28px;
  letter-spacing: -0.05em;
}
.archive-completion-status > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.archive-completion-status .traffic-light {
  margin: 3px 0 2px;
}
.completed-sampling {
  margin-top: 22px;
}
.completed-sampling-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.completed-sampling-list > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 12px;
  align-items: center;
  padding: 13px;
  background: #fff;
}
.completed-sampling-list span:first-child {
  color: var(--muted);
  font-size: 11px;
}
.completed-sampling-list strong {
  font-size: 12px;
}
.completed-sampling-list .status {
  grid-column: 2;
  font-size: 9px;
}
@media (max-width: 760px) {
  .archive-completion {
    align-items: flex-start;
    flex-direction: column;
  }
  .archive-completion-status {
    justify-items: start;
    text-align: left;
  }
  .completed-sampling-list {
    grid-template-columns: 1fr;
  }
  .completed-sampling-list > div {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

.mediation-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  margin-bottom: 22px;
}
.mediation-flow {
  margin-bottom: 22px;
}
.investor-document {
  display: block;
  margin: 10px 0;
  color: #465767;
  font-size: 12px;
}
.investor-document input {
  margin-right: 7px;
}
.mediation-flow + .section-grid {
  margin-bottom: 22px;
}
@media (max-width: 760px) {
  .mediation-grid {
    grid-template-columns: 1fr;
  }
  .mediation-grid .form-actions {
    justify-content: flex-start;
    flex-wrap: wrap;
  }
}
.project-chat {
  display: grid;
  gap: 10px;
}
.chat-message {
  padding: 16px;
  border: 1px solid var(--line);
  background: #fff;
}
.chat-message.from-sbk {
  border-left: 3px solid var(--yellow);
  background: #fffdf5;
}
.chat-message strong {
  margin-right: 8px;
  font-size: 13px;
}
.chat-message small {
  display: block;
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.chat-message p {
  margin: 11px 0;
  color: #40505f;
  font-size: 13px;
  white-space: pre-wrap;
}
.chat-message .quiet-button {
  min-height: 30px;
  padding: 0 9px;
}
.chat-reply {
  padding: 5px 7px;
  background: #f3f5f6;
}
.chat-consent label {
  display: flex;
  gap: 9px;
  margin: 18px 0;
  color: #40505f;
  font-size: 13px;
}
.nav-link b {
  margin-left: auto;
  min-width: 18px;
  padding: 1px 5px;
  border-radius: 10px;
  background: var(--yellow);
  color: var(--ink);
  font-size: 10px;
  text-align: center;
}

/* Project-card metadata and traffic light remain visually separate. */
.project-card-statusline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-top: 2px;
}
.project-card-statusline .project-card-number {
  min-width: 0;
}
.project-card-traffic {
  display: flex;
  flex: 0 0 auto;
  justify-content: flex-end;
}
.project-card .project-card-traffic .traffic-light {
  margin-top: 0;
  white-space: nowrap;
}
@media (max-width: 760px) {
  .project-card-statusline {
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 8px 18px;
  }
  .project-card-traffic {
    margin-left: auto;
  }
  .project-card .project-card-traffic .traffic-light {
    font-size: 10px;
  }
}

/* Public participant controls: dark blue with yellow text signals an allowed action. */
.poll-option-body .action-button,
.project-chat .message-form textarea,
.project-chat .message-form .action-button {
  border-color: #162134;
  background: #162134;
  color: #f7be25;
}
.poll-option-body .action-button:hover,
.project-chat .message-form .action-button:hover {
  border-color: #f7be25;
  background: #213149;
  color: #f7be25;
}
.project-chat .message-form textarea {
  caret-color: #f7be25;
}
.project-chat .message-form textarea::placeholder {
  color: #e6c75a;
}

/* Participant-facing specialist searches use the established blue/yellow interaction language. */
.specialist-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 24px;
}
.specialist-catalog-controls,
.specialist-selection-summary,
.specialist-category {
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}
.specialist-catalog-controls {
  display: grid;
  grid-template-columns: minmax(220px, 420px) 1fr;
  gap: 16px;
  align-items: end;
  padding: 14px 16px;
}
.specialist-catalog-controls label {
  display: grid;
  gap: 6px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 750;
}
.specialist-catalog-controls input {
  min-height: 39px;
}
.specialist-catalog-controls p,
.specialist-selection-hint {
  margin: 0;
  color: #647184;
  font-size: 12px;
  line-height: 1.45;
}
.specialist-selection-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
}
.specialist-selection-summary h2 {
  margin: 3px 0;
  font-size: 16px;
}
.specialist-selection-summary p {
  margin: 0;
  color: #526073;
  font-size: 12px;
}
.specialist-selection-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.specialist-selection-items .text-button {
  color: #33445a;
  font-size: 12px;
}
.specialist-selection-hint {
  margin: 0 0 12px;
}
.specialist-category-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 53px;
  padding: 10px 15px;
  border: 0;
  border-radius: 9px;
  background: var(--ink);
  color: var(--yellow);
  font: inherit;
  text-align: left;
}
.specialist-category-toggle span {
  display: grid;
  gap: 2px;
}
.specialist-category-toggle small {
  color: #d2d9e1;
  font-size: 11px;
  font-weight: 650;
}
.specialist-category-toggle i {
  font-size: 20px;
  font-style: normal;
  transition: transform .18s ease;
}
.specialist-category.open .specialist-category-toggle i {
  transform: rotate(180deg);
}
.specialist-category .specialist-grid {
  padding: 12px;
}
.specialist-choice.selected {
  outline: 2px solid var(--yellow);
  outline-offset: -2px;
  background: #20314b;
}
@media (max-width: 680px) {
  .specialist-catalog-controls,
  .specialist-selection-summary {
    grid-template-columns: 1fr;
    display: grid;
  }
  .specialist-selection-summary .form-actions {
    display: grid;
    grid-template-columns: 1fr;
  }
}
.specialist-choice {
  display: grid;
  align-content: space-between;
  gap: 11px;
  min-height: 102px;
  padding: 17px;
  border: 1px solid #162134;
  border-radius: 3px;
  background: #162134;
  color: #f7be25;
  text-align: left;
  box-shadow: 0 5px 15px rgba(22, 33, 52, 0.08);
}
.specialist-choice:hover:not(:disabled),
.specialist-choice:focus-visible {
  border-color: #f7be25;
  background: #213149;
  outline: 2px solid #f7be25;
  outline-offset: 2px;
}
.specialist-choice:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}
.specialist-choice > span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.specialist-choice small {
  color: #f6d96e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;
}
.search-service-tile {
  min-height: 0;
  overflow: hidden;
}
.search-service-tile-toggle {
  display: grid;
  align-content: space-between;
  gap: 11px;
  width: 100%;
  min-height: 102px;
  padding: 17px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.search-service-tile-toggle > span,
.search-service-tile-heading > span {
  font-size: 14px;
  font-weight: 800;
  line-height: 1.25;
}
.search-service-tile-toggle small,
.search-service-tile-heading small,
.search-service-status {
  color: #f6d96e;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}
.search-service-tile-toggle:focus-visible {
  outline: 2px solid #f7be25;
  outline-offset: -5px;
}
.search-service-tile-heading {
  display: grid;
  gap: 11px;
  padding: 17px 17px 11px;
}
.search-service-tile.is-in-cart,
.search-service-tile.is-released {
  background: #20314b;
}
.search-service-tile.is-in-cart .quiet-button {
  align-self: start;
  margin: 0 17px 17px;
}
.search-service-status {
  display: block;
  padding: 0 17px 17px;
}
.search-service-confirmation {
  display: grid;
  gap: 10px;
  padding: 17px;
  border-top: 1px solid rgba(247, 190, 37, 0.52);
  background: #fff9e9;
  color: #162134;
}
.search-service-confirmation h3,
.search-service-confirmation p {
  margin: 0;
}
.search-service-confirmation h3 {
  font-size: 16px;
}
.search-service-confirmation p {
  font-size: 12px;
  line-height: 1.5;
}
.search-service-confirmation .form-actions {
  margin-top: 2px;
}
.search-service-confirmation .action-button {
  border-color: #162134;
  background: #162134;
  color: #f7be25;
}
.service-explanation-trigger {
  justify-self: start;
  margin-top: 2px;
}
.service-explanation {
  display: grid;
  gap: 18px;
}
.service-explanation-intro {
  margin: 0;
  color: #536174;
  font-size: 13px;
  line-height: 1.5;
}
.service-explanation dl {
  display: grid;
  gap: 12px;
  margin: 0;
}
.service-explanation dl > div {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border: 1px solid #dfe5ec;
  border-radius: 10px;
  background: #f8fafc;
}
.service-explanation dt {
  color: #162134;
  font-size: 12px;
  font-weight: 800;
}
.service-explanation dd {
  margin: 0;
  color: #435269;
  font-size: 14px;
  line-height: 1.5;
}
.project-cost-overview-card {
  display: grid;
  gap: 4px;
  width: 100%;
  margin: 0 0 20px;
  padding: 20px 22px;
  border: 1px solid #d4dde8;
  border-left: 6px solid #f7be25;
  border-radius: 13px;
  background: #fff;
  color: #162134;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(22, 33, 52, 0.08);
}
.project-cost-overview-card:hover,
.project-cost-overview-card:focus-visible {
  border-color: #f7be25;
  outline: 2px solid #f7be25;
  outline-offset: 2px;
}
.project-cost-overview-card span,
.project-cost-overview-card small {
  color: #536174;
  font-size: 13px;
}
.project-cost-overview-card strong {
  color: #162134;
  font-size: clamp(24px, 3vw, 34px);
}
.project-cost-ledger-summary {
  margin-bottom: 18px;
}
.project-cost-sort {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 18px 0;
}
.project-cost-sort > span {
  margin-right: 4px;
  color: #536174;
  font-size: 13px;
  font-weight: 700;
}
.project-cost-sort .quiet-button.active {
  border-color: #162134;
  background: #162134;
  color: #f7be25;
}
.project-cost-drop-zone {
  display: grid;
  gap: 4px;
  margin: 0 0 18px;
  padding: 17px;
  border: 2px dashed #aebdce;
  border-radius: 12px;
  background: #f8fafc;
  color: #30435e;
}
.project-cost-drop-zone strong {
  color: #162134;
}
.project-cost-drop-zone span {
  font-size: 13px;
}
.project-cost-table {
  overflow-x: auto;
  border: 1px solid #dfe5ec;
  border-radius: 12px;
}
.project-cost-table-head,
.project-cost-row {
  display: grid;
  grid-template-columns: 104px minmax(180px, 1.45fr) minmax(150px, 1fr) 110px 110px 110px 140px minmax(140px, .9fr) minmax(126px, .85fr);
  min-width: 1220px;
}
.project-cost-table-head {
  align-items: center;
  padding: 11px 14px;
  background: #eef2f7;
  color: #536174;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}
.project-cost-row {
  align-items: start;
  gap: 0;
  border-top: 1px solid #e5eaf0;
  background: #fff;
}
.project-cost-row > div {
  min-height: 76px;
  padding: 12px 14px;
  color: #23344d;
  font-size: 13px;
}
.project-cost-row strong,
.project-cost-row small {
  display: block;
}
.project-cost-row small {
  margin-top: 3px;
  color: #65738a;
  font-size: 11px;
  line-height: 1.35;
}
.project-cost-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.project-cost-row-actions .danger {
  color: #a12e2e;
}
.project-cost-audit {
  margin-top: 18px;
}
.project-cost-audit ul {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}
.project-cost-audit li {
  display: grid;
  gap: 2px;
  padding: 10px 0;
  border-top: 1px solid #e5eaf0;
}
.project-cost-audit li span {
  color: #65738a;
  font-size: 12px;
}
.project-cost-header-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.project-budget-control {
  position: relative;
  z-index: 4;
  margin: 0 0 18px;
}
.project-budget-band {
  position: relative;
  display: block;
  width: 100%;
  height: 10px;
  margin: 0;
  padding: 0;
  overflow: visible;
  border: 1px solid rgba(22, 33, 52, 0.18);
  border-radius: 999px;
  background: linear-gradient(90deg, #39a76a 0%, #39a76a 64%, #f1cb42 66%, #f1cb42 77%, #e98c32 79%, #e98c32 85%, #d74a42 87%, #d74a42 96%, #8a4da1 100%);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 3px 9px rgba(22, 33, 52, 0.12);
  cursor: pointer;
  transition: box-shadow 160ms ease, transform 160ms ease;
}
.project-budget-band::after {
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.43), transparent 65%);
  content: "";
  pointer-events: none;
}
.project-budget-band:hover,
.project-budget-band:focus-visible {
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 0 0 3px rgba(247, 190, 37, 0.28), 0 3px 9px rgba(22, 33, 52, 0.16);
  outline: none;
}
.project-budget-band.neutral {
  background: linear-gradient(90deg, #cfd8e3, #eef2f7);
}
.project-budget-band.neutral i {
  display: none;
}
.project-budget-marker {
  position: absolute;
  z-index: 1;
  top: 50%;
  width: 4px;
  height: 24px;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.94);
  border-radius: 3px;
  background: #162134;
  box-shadow: 0 2px 9px rgba(0, 0, 0, 0.32);
}
.project-budget-popover {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  display: none;
  width: min(360px, calc(100vw - 40px));
  padding: 14px 15px;
  transform: translateX(-50%);
  border: 1px solid #d6dee8;
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(22, 33, 52, 0.2);
  color: #23344d;
  text-align: left;
}
.project-budget-control:hover .project-budget-popover,
.project-budget-control:focus-within .project-budget-popover,
.project-budget-control.is-open .project-budget-popover {
  display: block;
}
.project-budget-popover::before {
  position: absolute;
  top: -5px;
  left: 50%;
  width: 9px;
  height: 9px;
  transform: translateX(-50%) rotate(45deg);
  border-top: 1px solid #d6dee8;
  border-left: 1px solid #d6dee8;
  background: #fff;
  content: "";
}
.project-budget-popover strong {
  display: block;
  margin-bottom: 8px;
  color: #162134;
}
.project-budget-popover p,
.project-budget-popover small {
  margin: 0;
  color: #65738a;
  font-size: 12px;
  line-height: 1.45;
}
.project-budget-popover dl {
  display: grid;
  gap: 5px;
  margin: 0 0 10px;
}
.project-budget-popover dl > div {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.project-budget-popover dt {
  color: #65738a;
  font-size: 12px;
}
.project-budget-popover dd {
  margin: 0;
  color: #162134;
  font-size: 12px;
  font-weight: 800;
  text-align: right;
}
.project-budget-popover dd.over {
  color: #9a2e62;
}
.search-renewal-note {
  display: block;
  margin-top: 5px;
  color: #697686;
  font-size: 11px;
  line-height: 1.45;
}
.search-renewal-note.is-eligible {
  color: #21633a;
}
.search-renewal-note.is-expired {
  color: #9a5611;
}
.specialist-searches {
  margin-top: 0;
}
.performance-description-section {
  margin-top: 22px;
}
.external-tender-intro,
.external-tender-list {
  margin-top: 22px;
}
.external-tender-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.external-tender-intro h2,
.external-tender-intro p {
  margin-top: 0;
}
.external-tender-list > article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.external-tender-list > article:last-child {
  border-bottom: 0;
}
.external-tender-list h3,
.external-tender-list p {
  margin-top: 0;
}
.external-tender-list small {
  color: var(--muted);
  line-height: 1.5;
}
.external-tender-list > article > div:last-child {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 200px;
}
.external-tender-list a.quiet-button {
  text-decoration: none;
}
.performance-description-list {
  display: grid;
}
.performance-description-list article {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.performance-description-list article:last-child {
  border-bottom: 0;
}
.performance-description-list h3,
.performance-description-list p {
  margin-top: 0;
}
.performance-description-list small {
  color: var(--muted);
  line-height: 1.5;
}
.performance-description-list article > div:last-child {
  display: grid;
  justify-items: end;
  gap: 8px;
  min-width: 180px;
}
.specialist-search-list {
  display: grid;
}
.specialist-search-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 15px 0;
  border-bottom: 1px solid #edf0f2;
}
.specialist-search-list article:last-child {
  border-bottom: 0;
}
.specialist-search-list strong,
.specialist-search-list span {
  display: block;
}
.specialist-search-list strong {
  margin-bottom: 4px;
  font-size: 14px;
}
.specialist-search-list span {
  color: var(--muted);
  font-size: 11px;
}
.specialist-search-list article > div:last-child {
  display: grid;
  justify-items: end;
  gap: 6px;
  text-align: right;
}
.specialist-search-list b {
  font-size: 12px;
}
.specialist-search-list .status {
  margin: 0;
}
.specialist-empty {
  margin: 18px 0 4px;
}
.specialist-admin-note {
  margin: 18px 0 0;
  padding-top: 13px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 11px;
}
.specialist-confirm h3 {
  margin: 3px 0 18px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.specialist-confirm > p:not(.eyebrow):not(.hint) {
  font-size: 14px;
}
.specialist-warning {
  margin: 0 0 16px;
  padding: 12px;
  border-left: 3px solid var(--yellow);
  background: #fff9e9;
  color: #5d4b12;
  font-size: 13px;
  line-height: 1.4;
}
.modal-actions .specialist-confirm-button {
  border-color: #162134;
  background: #162134;
  color: #f7be25;
}
.modal-actions .specialist-confirm-button:hover {
  border-color: #f7be25;
  background: #213149;
}
@media (max-width: 1100px) {
  .specialist-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 760px) {
  .specialist-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .specialist-choice {
    min-height: 80px;
    padding: 14px;
  }
  .search-service-tile-toggle {
    min-height: 80px;
    padding: 14px;
  }
  .search-service-confirmation .form-actions {
    grid-template-columns: 1fr;
  }
  .service-explanation-trigger {
    width: 100%;
  }
  .service-explanation dl > div {
    padding: 12px;
  }
  .project-cost-overview-card {
    padding: 17px;
  }
  .project-cost-sort {
    align-items: stretch;
    flex-direction: column;
  }
  .project-cost-sort .quiet-button {
    width: 100%;
  }
  .project-cost-drop-zone {
    padding: 14px;
  }
  .project-cost-header-actions {
    width: 100%;
    justify-content: stretch;
  }
  .project-cost-header-actions > button {
    flex: 1 1 180px;
  }
  .project-budget-popover {
    left: 0;
    width: min(360px, calc(100vw - 32px));
    transform: none;
  }
  .project-budget-popover::before {
    left: 22px;
  }
  .specialist-search-list article {
    align-items: flex-start;
    flex-direction: column;
    gap: 9px;
  }
  .performance-description-list article {
    align-items: stretch;
    flex-direction: column;
  }
  .external-tender-intro,
  .external-tender-list > article {
    align-items: stretch;
    flex-direction: column;
  }
  .external-tender-list > article > div:last-child {
    justify-items: stretch;
    min-width: 0;
  }
  .external-tender-list .action-button,
  .external-tender-list .quiet-button,
  .external-tender-intro .action-button {
    width: 100%;
  }
  .performance-description-list article > div:last-child {
    justify-items: stretch;
    min-width: 0;
  }
  .performance-description-list .action-button,
  .performance-description-list .quiet-button {
    width: 100%;
  }
  .specialist-search-list article > div:last-child {
    justify-items: start;
    text-align: left;
  }
  .specialist-searches {
    padding: 18px;
  }
}

/* Administration-only external inquiry workflow for specialist searches. */
.specialist-requests,
.specialist-offers {
  margin-top: 22px;
}
.specialist-request-list {
  display: grid;
}
.specialist-request-list > article {
  display: flex;
  justify-content: space-between;
  gap: 22px;
  padding: 17px 0;
  border-bottom: 1px solid #edf0f2;
}
.specialist-request-list > article:last-child {
  border-bottom: 0;
}
.specialist-request-list h3 {
  margin: 2px 0 5px;
  font-size: 15px;
}
.specialist-request-list p:not(.eyebrow) {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.specialist-request-list small {
  display: block;
  margin-top: 7px;
  color: #586978;
  font-size: 11px;
}
.specialist-request-actions {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 8px;
  min-width: 210px;
}
.specialist-request-actions label {
  display: grid;
  gap: 4px;
  color: #687684;
  font-size: 10px;
  font-weight: 800;
  text-align: left;
}
.specialist-request-actions select {
  height: 34px;
  padding: 0 8px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.specialist-request-actions .quiet-button {
  min-height: 32px;
  padding: 0 10px;
}
.specialist-attachments {
  display: grid;
  gap: 7px;
  margin: 22px 0 0;
  padding: 15px;
  border: 1px solid var(--line);
  background: #fafbfb;
}
.specialist-attachments legend {
  padding: 0 5px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}
.specialist-attachments > p {
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.4;
}
.specialist-attachments label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px;
  border: 1px solid #e5eaed;
  background: #fff;
  color: #374957;
  font-size: 12px;
}
.specialist-attachments small {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}
.specialist-preview dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 20px;
}
.specialist-preview dl div {
  padding: 10px;
  border: 1px solid var(--line);
  background: #fafbfb;
}
.specialist-preview dt {
  margin-bottom: 4px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.specialist-preview dd {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
}
.specialist-preview h3 {
  margin: 20px 0 7px;
  font-size: 14px;
}
.specialist-preview p {
  line-height: 1.55;
}
.specialist-preview pre {
  overflow: auto;
  max-height: 380px;
  margin: 0;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fafbfb;
  color: #40505f;
  font:
    12px/1.55 ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;
  white-space: pre-wrap;
}
.specialist-preview ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 19px;
  font-size: 12px;
}
.specialist-preview li small {
  margin-left: 5px;
  color: var(--muted);
}
.specialist-request-requirements {
  display: grid;
  gap: 5px;
  margin-top: 18px;
  padding: 14px;
  border-left: 3px solid var(--yellow);
  background: #fff9e9;
  color: #5c4b16;
  font-size: 12px;
  line-height: 1.45;
}
.specialist-offer-list {
  display: grid;
}
.specialist-offer-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  border-bottom: 1px solid #edf0f2;
}
.specialist-offer-list article:last-child {
  border-bottom: 0;
}
.specialist-offer-list strong,
.specialist-offer-list span,
.specialist-offer-list small {
  display: block;
}
.specialist-offer-list strong {
  margin-bottom: 4px;
  font-size: 13px;
}
.specialist-offer-list span,
.specialist-offer-list small {
  color: var(--muted);
  font-size: 11px;
}
.specialist-offer-list article > div:last-child {
  text-align: right;
}
.specialist-offer-list b {
  font-size: 14px;
}
@media (max-width: 760px) {
  .specialist-request-list > article,
  .specialist-offer-list article {
    align-items: flex-start;
    flex-direction: column;
    gap: 11px;
  }
  .specialist-request-actions {
    justify-items: start;
    min-width: 0;
  }
  .specialist-preview dl {
    grid-template-columns: 1fr;
  }
  .specialist-attachments label {
    grid-template-columns: auto minmax(0, 1fr);
  }
  .specialist-attachments small {
    grid-column: 2;
    text-align: left;
  }
  .specialist-offer-list article > div:last-child {
    text-align: left;
  }
}

/* Cart and approval flow for paid specialist searches. */
.specialist-cart-summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 24px;
  margin: 0 0 22px;
  padding: 21px 23px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: #fff;
  box-shadow: var(--shadow);
}
.specialist-cart-summary .eyebrow {
  color: #f7be25;
}
.specialist-cart-summary h2 {
  margin: 2px 0 5px;
  font-size: 21px;
  letter-spacing: -0.03em;
}
.specialist-cart-summary h2 span {
  color: #f7be25;
}
.specialist-cart-summary p {
  margin: 0;
  color: #c5d0da;
  font-size: 12px;
}
.specialist-cart-summary > strong {
  color: #f7be25;
  font-size: 23px;
  white-space: nowrap;
}
.specialist-cart-summary .action-button {
  border-color: #f7be25;
  background: #f7be25;
  color: #162134;
}
.specialist-approval {
  margin-top: 22px;
}
.specialist-approval > p {
  margin: 16px 0;
  color: #566675;
  font-size: 12px;
}
.specialist-approval-list {
  display: grid;
}
.specialist-approval-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f2;
}
.specialist-approval-list strong,
.specialist-approval-list span {
  display: block;
}
.specialist-approval-list strong {
  margin-bottom: 3px;
  font-size: 13px;
}
.specialist-approval-list span {
  color: var(--muted);
  font-size: 11px;
}
.specialist-approval-list select {
  height: 35px;
  min-width: 168px;
  padding: 0 8px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
  font: inherit;
}
.specialist-approval-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 17px;
  padding: 14px 16px;
  background: #fff9e9;
  color: #514313;
  font-size: 12px;
}
.specialist-approval-total strong {
  font-size: 18px;
  white-space: nowrap;
}
.specialist-cart-modal-list {
  display: grid;
}
.specialist-cart-modal-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid #edf0f2;
}
.specialist-cart-modal-list strong,
.specialist-cart-modal-list span {
  display: block;
}
.specialist-cart-modal-list strong {
  font-size: 13px;
}
.specialist-cart-modal-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
}
.specialist-history {
  margin-top: 22px;
}
.specialist-history-list {
  display: grid;
  gap: 1px;
  border: 1px solid var(--line);
  background: var(--line);
}
.specialist-history-list div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 13px;
  background: #fff;
}
.specialist-history-list strong {
  font-size: 12px;
}
.specialist-history-list span {
  color: var(--muted);
  font-size: 10px;
  text-align: right;
}
@media (max-width: 760px) {
  .specialist-cart-summary {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 18px;
  }
  .specialist-cart-summary > strong {
    font-size: 21px;
  }
  .specialist-cart-summary .action-button {
    width: 100%;
  }
  .specialist-approval-list article,
  .specialist-cart-modal-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .specialist-approval-list select {
    width: 100%;
  }
  .specialist-approval-total {
    align-items: flex-start;
    flex-direction: column;
    gap: 7px;
  }
  .specialist-history-list div {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }
  .specialist-history-list span {
    text-align: left;
  }
}

/* Project development is a distinct, full-project alternative to individual disciplines. */
.project-development-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  margin: 0 0 22px;
  padding: 24px;
  border: 1px solid var(--yellow);
  background: #fffbef;
  box-shadow: 0 6px 19px rgba(22, 33, 52, 0.04);
}
.project-development-choice .eyebrow {
  color: #80640d;
}
.project-development-choice h2 {
  margin: 2px 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.project-development-choice p:not(.eyebrow) {
  margin: 0;
  color: #4e5d67;
  font-size: 13px;
  line-height: 1.5;
}
.project-development-choice ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 15px;
  margin: 15px 0 0;
  padding-left: 17px;
  color: #566674;
  font-size: 11px;
  line-height: 1.4;
}
.project-development-choice .action-button {
  justify-self: end;
  min-height: 47px;
  background: #162134;
  color: #f7be25;
  border-color: #162134;
}
.project-development-choice .action-button:hover {
  border-color: #f7be25;
  background: #213149;
}
.specialist-approval-list small {
  display: block;
  max-width: 530px;
  margin-top: 4px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.35;
}
@media (max-width: 760px) {
  .project-development-choice {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 18px;
  }
  .project-development-choice .action-button {
    justify-self: stretch;
    width: 100%;
  }
}

.specialist-order-confirmation {
  margin: 0;
  padding: 20px;
  border-left: 4px solid var(--yellow);
  background: #fff9e9;
  color: #4f4112;
  font-size: 15px;
  line-height: 1.65;
}
.specialist-order-confirmation strong {
  font-size: 18px;
}
.specialist-orders {
  margin-top: 22px;
}
.service-catalog {
  display: grid;
  gap: 26px;
}
.service-category {
  padding: 22px;
  border: 1px solid var(--line);
  background: #fff;
}
.service-category .card-header {
  margin-bottom: 16px;
}
.service-category .specialist-grid {
  margin: 0;
}
.specialist-legal-note {
  margin: 0 0 22px;
  padding: 14px 16px;
  border-left: 3px solid var(--yellow);
  background: #fff9e9;
  color: #594916;
  font-size: 12px;
  line-height: 1.55;
}
.external-provider-notice {
  margin-top: 22px;
  border-left: 4px solid var(--yellow);
  background: #fffdf6;
}
.external-provider-notice p {
  max-width: 920px;
  margin: 8px 0 0;
  line-height: 1.55;
}
.external-partner-fee-notice {
  margin-top: 14px;
  border-left: 4px solid var(--yellow);
  background: #fffdf6;
}
.external-partner-fee-notice p {
  max-width: 920px;
  margin: 8px 0 0;
  line-height: 1.55;
}
.service-catalog-admin {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin: 0 0 16px;
  padding: 10px 13px;
  border: 1px solid #d9c169;
  background: #fff9e9;
  color: #5b4914;
  font-size: 11px;
  font-weight: 800;
}
.service-catalog-manager-list {
  display: grid;
  max-height: 55vh;
  overflow: auto;
  border: 1px solid var(--line);
}
.service-catalog-manager-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.service-catalog-manager-list article:last-child {
  border-bottom: 0;
}
.service-catalog-manager-list strong,
.service-catalog-manager-list span {
  display: block;
}
.service-catalog-manager-list strong {
  font-size: 12px;
}
.service-catalog-manager-list span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 10px;
}
.service-catalog-manager-list article > div:last-child {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 5px;
}
.service-catalog-manager-list .quiet-button {
  min-height: 28px;
  padding: 0 7px;
  font-size: 10px;
}
.headhunter-privacy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 22px;
  align-items: center;
  margin: 0 0 22px;
  padding: 21px 23px;
  border: 1px solid #162134;
  background: #162134;
  color: #fff;
}
.headhunter-privacy .eyebrow {
  color: #f7be25;
}
.headhunter-privacy h2 {
  margin: 3px 0 7px;
  font-size: 20px;
}
.headhunter-privacy p {
  margin: 0;
  color: #cad4dc;
  font-size: 12px;
  line-height: 1.5;
}
.headhunter-privacy label {
  display: grid;
  gap: 6px;
  color: #f7be25;
  font-size: 11px;
  font-weight: 800;
}
.headhunter-privacy select,
.headhunter-status {
  height: 36px;
  padding: 0 9px;
  border: 1px solid #f7be25;
  border-radius: 3px;
  background: #162134;
  color: #f7be25;
  font: inherit;
}
.headhunter-status {
  min-width: 190px;
  background: #fff;
  color: #162134;
  border-color: #cbd3d9;
}
.headhunter-status-model {
  margin-top: 22px;
}
.headhunter-status-model p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.7;
}
.insurance-options {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 22px;
  align-items: center;
  margin: 0 0 22px;
  padding: 20px 22px;
  border: 1px solid #d9c169;
  background: #fff9e9;
}
.insurance-options h2 {
  margin: 3px 0 7px;
  font-size: 20px;
}
.insurance-options p {
  margin: 0;
  color: #5b6470;
  font-size: 12px;
  line-height: 1.5;
}
.insurance-options label {
  display: grid;
  gap: 6px;
  color: #5b4914;
  font-size: 11px;
  font-weight: 800;
}
.insurance-options select {
  height: 37px;
  padding: 0 9px;
  border: 1px solid #c5a330;
  border-radius: 3px;
  background: #fff;
  color: #162134;
  font: inherit;
}
.legal-advice-note {
  margin: 0 0 18px;
  padding: 13px 16px;
  border-left: 3px solid #b47d18;
  background: #fff7e8;
  color: #5d4618;
  font-size: 12px;
  line-height: 1.55;
}
.general-contractor-choice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 28px;
  align-items: center;
  margin: 0 0 22px;
  padding: 24px;
  border: 1px solid #162134;
  background: #f8fafb;
  box-shadow: 0 6px 19px rgba(22, 33, 52, 0.04);
}
.general-contractor-choice h2 {
  margin: 2px 0 8px;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.general-contractor-choice p:not(.eyebrow) {
  margin: 0;
  color: #4e5d67;
  font-size: 13px;
  line-height: 1.5;
}
.general-contractor-choice .action-button {
  justify-self: end;
  min-height: 47px;
  background: #162134;
  color: #f7be25;
  border-color: #162134;
}
.general-contractor-targets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 17px 0;
}
.general-contractor-targets label {
  display: flex;
  gap: 7px;
  align-items: flex-start;
  color: #435462;
  font-size: 12px;
}
.general-contractor-targets input {
  accent-color: #162134;
}
.general-contractor-model {
  display: grid;
  gap: 6px;
  color: #435462;
  font-size: 11px;
  font-weight: 800;
}
.general-contractor-model select,
.general-contractor-status {
  height: 36px;
  padding: 0 9px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: #162134;
  font: inherit;
}
.general-contractor-status {
  min-width: 210px;
}
.general-contractor-progress {
  margin-top: 22px;
}
@media (max-width: 760px) {
  .general-contractor-choice {
    grid-template-columns: 1fr;
    gap: 17px;
    padding: 19px;
  }
  .general-contractor-choice .action-button {
    justify-self: stretch;
    width: 100%;
  }
  .general-contractor-targets {
    grid-template-columns: 1fr;
  }
  .general-contractor-status {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .service-category {
    padding: 17px;
  }
  .service-category .card-header {
    align-items: flex-start;
    gap: 8px;
    flex-direction: column;
  }
}
@media (max-width: 760px) {
  .service-catalog-admin,
  .service-catalog-manager-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .service-catalog-manager-list article > div:last-child {
    justify-content: flex-start;
  }
}
@media (max-width: 760px) {
  .headhunter-privacy {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .headhunter-privacy select,
  .headhunter-status {
    width: 100%;
  }
}
@media (max-width: 760px) {
  .insurance-options {
    grid-template-columns: 1fr;
    padding: 18px;
  }
  .insurance-options select {
    width: 100%;
  }
}

/* Projektanlage und Konzeptentwicklung */
.new-project-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding: 28px 32px;
  border-radius: 18px;
  background: #162134;
  color: #fff;
  box-shadow: 0 14px 30px rgba(22, 33, 52, 0.16);
}
.new-project-entry h2 {
  margin: 4px 0 8px;
  color: #fff;
}
.new-project-entry p:not(.eyebrow) {
  margin: 0;
  max-width: 720px;
  color: #dbe3f0;
}
.new-project-entry .action-button {
  flex: 0 0 auto;
}
.municipality-cart-entry {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 24px;
  padding: 26px 32px;
  border: 1px solid #d7dee9;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(22, 33, 52, 0.08);
}
.municipality-cart-entry h2 {
  margin: 4px 0 8px;
  color: #162134;
}
.municipality-cart-entry h2 span {
  color: #8b6700;
}
.municipality-cart-entry p:not(.eyebrow) {
  margin: 0;
  color: #526176;
}
.municipality-cart-entry .action-button {
  flex: 0 0 auto;
}
.municipality-cart-item-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.project-creation-form {
  display: grid;
  gap: 26px;
}
.project-creation-form section {
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line, #dfe5ee);
}
.project-creation-form section:last-child {
  padding-bottom: 0;
  border: 0;
}
.project-context {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.project-context span {
  display: grid;
  gap: 3px;
  padding: 12px 14px;
  border: 1px solid #cbd4e2;
  border-radius: 12px;
  background: #f6f8fb;
  color: #162134;
}
.project-context b {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-model-selection {
  display: grid;
  gap: 16px;
}
.project-model-selection > article {
  display: grid;
  gap: 10px;
  padding: 22px;
  border: 1px solid #d9e0eb;
  border-radius: 16px;
  background: #fff;
}
.project-model-selection h3,
.project-model-selection p {
  margin: 0;
}
.project-model-selection small {
  color: #667085;
}
.project-model-selection article > div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}
.project-building {
  margin: 16px 0;
  padding: 18px;
  border: 1px solid var(--line, #dfe5ee);
  border-radius: 14px;
}
.project-building legend {
  padding: 0 8px;
  font-weight: 800;
  color: #162134;
}
.building-remove {
  margin-top: 14px;
}
.project-model-choice {
  display: grid;
  gap: 12px;
}
.model-choice {
  display: block;
  cursor: pointer;
}
.model-choice input {
  position: absolute;
  opacity: 0;
}
.model-choice span {
  display: grid;
  gap: 4px;
  padding: 18px 20px;
  border: 1px solid #cbd4e2;
  border-radius: 14px;
  background: #fff;
  color: #162134;
}
.model-choice input:checked + span {
  border-color: #f7be25;
  background: #162134;
  color: #f7be25;
  box-shadow: 0 0 0 3px rgba(247, 190, 37, 0.22);
}
.model-choice b {
  font-size: 1.05rem;
}
.model-choice small {
  color: inherit;
  opacity: 0.82;
}
@media (max-width: 620px) {
  .project-context {
    grid-template-columns: 1fr;
  }
  .project-model-selection article > div {
    display: grid;
  }
}
.booking-summary {
  display: grid;
  gap: 16px;
}
.booking-summary h3,
.booking-summary h4 {
  margin: 0;
}
.booking-summary dl {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px 18px;
  margin: 0;
  padding: 18px;
  border-radius: 12px;
  background: #f3f6fa;
}
.booking-summary dt {
  color: #526176;
}
.booking-summary dd {
  margin: 0;
  font-weight: 800;
  text-align: right;
}
.booking-summary ol {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 22px;
}
.booking-summary ol li {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.booking-summary ul {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-left: 20px;
}
.concept-dashboard {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}
.concept-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.concept-dashboard-grid > div {
  display: grid;
  gap: 4px;
  padding: 16px;
  border-radius: 12px;
  background: #f3f6fa;
}
.concept-dashboard-grid strong {
  font-size: 1.12rem;
  color: #162134;
}
.concept-dashboard-grid span {
  color: #526176;
  font-size: 0.86rem;
}
.concept-session-list {
  display: grid;
  gap: 8px;
}
.concept-session-list article {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line, #dfe5ee);
}
.concept-session-list article:last-child {
  border: 0;
}
.concept-session-list article > div {
  display: grid;
  gap: 3px;
}
.concept-session-list span {
  font-size: 0.88rem;
  color: #526176;
}
.concept-payment-preview {
  display: grid;
  gap: 6px;
  padding: 16px;
  border-left: 4px solid #f7be25;
  background: #fff8e8;
}
.concept-payment-preview span {
  font-size: 0.9rem;
}
.project-intake-summary {
  margin-top: 24px;
}
.concept-session-actions {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}
.concept-session-actions .action-button {
  min-height: auto;
  padding: 9px 12px;
}
@media (max-width: 700px) {
  .new-project-entry {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }
  .new-project-entry .action-button {
    width: 100%;
  }
  .municipality-cart-entry {
    align-items: flex-start;
    flex-direction: column;
    padding: 22px;
  }
  .municipality-cart-entry .action-button {
    width: 100%;
  }
  .municipality-cart-item-actions {
    justify-content: flex-start;
  }
  .concept-dashboard-grid {
    grid-template-columns: 1fr;
  }
  .concept-session-list article {
    align-items: flex-start;
    flex-direction: column;
  }
  .booking-summary dl {
    grid-template-columns: 1fr;
  }
  .booking-summary dd {
    text-align: left;
  }
  .booking-summary ol li {
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }
}

/* Dense administrative layout: more project information per viewport. */
.municipality-only {
  display: none;
}
.sidebar.is-municipality .municipality-only {
  display: flex;
}
.portal-shell {
  padding-top: clamp(32px, 6vh, 72px);
  padding-bottom: 44px;
}
.portal-brand {
  margin-bottom: 28px;
}
.portal-intro {
  margin-bottom: 26px;
}
.app-shell {
  grid-template-columns: 236px minmax(0, 1fr);
}
.sidebar {
  padding: 20px 14px calc(14px + env(safe-area-inset-bottom, 0px));
}
.brand {
  padding-bottom: 20px;
}
.nav-link {
  min-height: 37px;
  gap: 11px;
  padding: 0 8px;
  font-size: 13px;
}
.sidebar-foot {
  padding-top: 13px;
}
.nav-group-toggle {
  min-height: 38px;
  padding: 0 8px;
  font-size: 12px;
}
.nav-link {
  min-height: 32px;
  padding: 0 8px 0 34px;
  font-size: 12px;
}
.topbar {
  min-height: 62px;
  padding: 0 32px;
}
.workspace {
  padding: 27px 32px 48px;
}
.page-head {
  margin-bottom: 20px;
}
.page-head h1 {
  font-size: 29px;
}
.page-head p:last-child {
  margin-top: 6px;
  font-size: 13px;
}
.section-heading {
  margin-top: 26px;
  margin-bottom: 13px;
}
.section-heading h2 {
  font-size: 21px;
}
.card {
  padding: 17px;
  box-shadow: 0 4px 14px rgba(22, 33, 52, 0.035);
}
.card h2 {
  margin-bottom: 10px;
  font-size: 17px;
}
.card-header {
  padding-bottom: 10px;
}
.project-hero {
  gap: 22px;
  padding: 24px;
}
.project-hero h1 {
  margin-bottom: 7px;
  font-size: 28px;
}
.stat-grid {
  margin: 18px 0;
}
.stat-card {
  min-height: 108px;
  padding: 14px;
}
.stat-card strong {
  margin-top: 9px;
  font-size: 25px;
}
.form-grid {
  gap: 9px;
}
.form-grid label {
  gap: 3px;
}
.form-grid input,
.form-grid select {
  height: 35px;
}
.form-grid textarea {
  min-height: 76px;
  padding: 8px 9px;
}
.portal-form {
  gap: 14px;
}
.portal-form fieldset {
  padding: 15px;
}
.municipality-card {
  margin-bottom: 18px;
}
.municipality-section {
  min-height: 174px;
  padding: 18px;
}
.municipality-mini {
  margin-top: 10px;
  padding-top: 9px;
}
.municipality-stats {
  margin-bottom: 20px;
}
.municipality-stat {
  min-height: 88px;
  padding: 13px 15px;
}
.municipality-stat strong {
  margin-top: 7px;
  font-size: 21px;
}
.municipal-dashboard {
  gap: 13px;
  margin-bottom: 22px;
}
.municipal-dashboard-stats article {
  min-height: 78px;
  gap: 4px;
  padding: 12px;
}
.municipal-dashboard-stats strong {
  font-size: 22px;
}
.municipal-dashboard-compact .municipal-dashboard-stats {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.municipal-offer-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--yellow);
  background: #fffdf6;
}
.municipal-offer-summary h2 {
  margin: 2px 0 4px;
  font-size: 17px;
}
.municipal-offer-summary p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.municipal-offer-filter-card {
  margin-bottom: 14px;
}
.municipal-offer-filter-form {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.25fr) repeat(4, minmax(130px, 1fr))
    auto;
  gap: 9px;
  align-items: end;
}
.municipal-offer-filter-form label {
  display: grid;
  gap: 3px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 750;
}
.municipal-offer-filter-form input,
.municipal-offer-filter-form select {
  width: 100%;
  height: 35px;
  padding: 0 8px;
  border: 1px solid #cbd3d9;
  border-radius: 3px;
  background: #fff;
  color: var(--ink);
}
.municipal-offer-filter-actions {
  display: flex;
  gap: 6px;
}
.municipal-offer-overview {
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: 0 4px 14px rgba(22, 33, 52, 0.035);
}
.municipal-offer-overview-head,
.municipal-offer-row {
  display: grid;
  grid-template-columns:
    minmax(180px, 1.3fr) minmax(140px, 1fr) minmax(135px, 0.75fr)
    minmax(110px, 0.65fr) minmax(180px, 1fr);
  gap: 14px;
  align-items: center;
}
.municipal-offer-overview-head {
  padding: 10px 15px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.municipal-offer-row {
  padding: 12px 15px;
  border-bottom: 1px solid var(--line);
}
.municipal-offer-row:last-child {
  border-bottom: 0;
}
.municipal-offer-row .eyebrow {
  margin-bottom: 2px;
}
.municipal-offer-row strong,
.municipal-offer-row small {
  display: block;
}
.municipal-offer-row strong {
  font-size: 13px;
}
.municipal-offer-row small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}
.municipal-offer-row-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 9px;
  align-items: center;
}

/* Kommunale Kontoübersicht */
.account-section-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: -6px 0 14px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f8fafb;
}
.account-section-nav .quiet-button {
  min-height: 31px;
  padding: 0 10px;
  font-size: 11px;
}
.account-section-nav-title {
  display: inline-flex;
  align-items: center;
  padding: 0 4px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}
.account-overview-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(250px, 0.8fr);
  gap: 14px;
  margin-bottom: 16px;
}
.account-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.account-detail-grid > div,
.account-payment-summary > div {
  display: grid;
  gap: 3px;
  padding: 10px;
  border: 1px solid var(--line);
  background: #f8fafb;
}
.account-detail-grid span,
.account-payment-summary span,
.account-authorized-users span,
.account-invoice span,
.account-invoice small {
  color: var(--muted);
  font-size: 11px;
}
.account-authorized-users {
  display: grid;
  gap: 7px;
  margin-top: 13px;
  padding-top: 11px;
  border-top: 1px solid var(--line);
}
.account-authorized-users > div {
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) 1.3fr;
  gap: 8px;
}
.account-authorized-users .text-button {
  justify-self: start;
  margin-top: 2px;
}
.account-security-card {
  display: grid;
  align-content: start;
  gap: 8px;
}
.account-security-card .action-button {
  justify-self: start;
}
.account-overview-section {
  margin-top: 16px;
}
.account-subscription-list,
.account-invoice-list,
.account-legal-list {
  display: grid;
  border: 1px solid var(--line);
  background: #fff;
}
.account-subscription,
.account-invoice,
.account-legal-document {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--line);
}
.account-subscription:last-child,
.account-invoice:last-child,
.account-legal-document:last-child {
  border-bottom: 0;
}
.account-subscription h3,
.account-legal-document h3 {
  margin: 0 0 4px;
  font-size: 15px;
}
.account-subscription p,
.account-legal-document p {
  margin: 3px 0;
}
.account-subscription small,
.account-legal-document small {
  color: var(--muted);
  font-size: 11px;
}
.account-service-summary,
.account-consent-section,
.account-retention-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  background: #f8fafb;
}
.account-service-summary > div:first-child,
.account-consent-section > div:first-child {
  min-width: 190px;
}
.account-service-summary h3,
.account-consent-section h3,
.account-retention-note h3 {
  margin: 0;
  font-size: 15px;
}
.account-service-summary p,
.account-consent-section p,
.account-retention-note p {
  margin: 2px 0;
  font-size: 12px;
}
.account-payment-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 10px;
}
.account-payment-summary strong {
  font-size: 13px;
}
.account-payment-summary small {
  color: var(--muted);
  font-size: 11px;
}
.account-invoice > div:first-child {
  display: grid;
  gap: 3px;
}
.account-invoice > div:last-child,
.account-legal-document > div:last-child {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 7px;
  text-align: right;
}
.account-legal-intro {
  margin: -3px 0 10px;
  color: var(--muted);
  font-size: 13px;
}
.account-retention-note {
  display: block;
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.account-retention-note p {
  color: #e7edf5;
  line-height: 1.5;
}
.legal-document-reader h2 {
  margin: 0 0 4px;
  color: var(--navy);
  font-size: 20px;
}
.legal-document-meta {
  margin: 0 0 14px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.legal-document-text {
  max-height: min(58vh, 680px);
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  background: #fafbfd;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  -webkit-overflow-scrolling: touch;
}
.legal-document-frame {
  border: 1px solid var(--line);
  height: min(58vh, 680px);
  width: 100%;
}
.legal-document-draft-note {
  margin: 12px 0 0;
}
.municipal-offer-row-actions .quiet-button,
.municipal-offer-row-actions .text-button {
  min-height: 30px;
  padding: 0 8px;
  font-size: 11px;
}
@media (max-width: 1180px) {
  .municipal-offer-filter-form {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .municipal-offer-overview-head {
    display: none;
  }
  .municipal-offer-row {
    grid-template-columns: 1.2fr 1fr 0.8fr;
  }
  .municipal-offer-row-actions {
    grid-column: 1 / -1;
  }
  .account-overview-grid,
  .account-payment-summary {
    grid-template-columns: 1fr;
  }
  .account-section-nav {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .account-section-nav .quiet-button {
    flex: 0 0 auto;
  }
  .account-consent-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .account-consent-section > * {
    min-width: 0;
  }
}
@media (max-width: 760px) {
  .app-shell {
    grid-template-columns: 1fr;
  }
  .sidebar {
    padding: 16px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .nav-link {
    min-height: 36px;
  }
  .topbar {
    min-height: 58px;
    padding: 0 15px;
  }
  .workspace {
    padding: 20px 15px 38px;
  }
  .page-head {
    margin-bottom: 16px;
  }
  .page-head h1 {
    font-size: 25px;
  }
  .card {
    padding: 14px;
  }
  .project-hero {
    padding: 18px;
  }
  .municipality-section {
    min-height: auto;
    padding: 15px;
  }
  .municipal-dashboard-compact .municipal-dashboard-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .municipal-offer-summary {
    align-items: stretch;
    flex-direction: column;
    padding: 14px;
  }
  .municipal-offer-summary .action-button {
    width: 100%;
  }
  .municipal-offer-filter-form,
  .municipal-offer-row {
    grid-template-columns: 1fr;
  }
  .municipal-offer-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .municipal-offer-filter-actions button {
    width: 100%;
  }
  .municipal-offer-row {
    gap: 7px;
    padding: 13px;
  }
  .municipal-offer-row-actions {
    grid-column: auto;
    align-items: stretch;
    flex-direction: column;
  }
  .municipal-offer-row-actions button {
    width: 100%;
  }
  .account-detail-grid {
    grid-template-columns: 1fr;
  }
  .account-authorized-users > div,
  .account-subscription,
  .account-invoice,
  .account-legal-document,
  .account-service-summary,
  .account-consent-section {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
  }
  .account-invoice > div:last-child,
  .account-legal-document > div:last-child {
    justify-content: flex-start;
    text-align: left;
  }
  .account-subscription .quiet-button,
  .account-security-card .action-button,
  .account-consent-section .quiet-button {
    width: 100%;
  }
}