/* Customer pages use the public website's typography, sage accents and surfaces. */
:root {
  --paper: #f1eee7;
  --ink: #202722;
  --muted: #626963;
  --line: #d5ddd6;
  --green: #78a18c;
  --accent: #52755f;
  --dark: #151c18;
  --white: #fff;
  --shell: 1240px;
}
* { box-sizing: border-box; }
html { font-family: "DM Sans", system-ui, sans-serif; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; scroll-padding-top: 7rem; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button, summary { cursor: pointer; }
button, input, textarea, select { max-width: 100%; }
:is(a, button, input, textarea, select, summary):focus-visible { outline: 2px solid var(--accent); outline-offset: 5px; }
h1, h2, h3 { font-family: "Poiret One", "Century Gothic", sans-serif; font-weight: 400; letter-spacing: -.035em; line-height: 1.08; overflow-wrap: anywhere; }
.skip-link { position: fixed; top: 1rem; left: 1rem; z-index: 200; transform: translateY(-200%); padding: 1rem; background: var(--paper); color: var(--ink); }
.skip-link:focus { transform: none; }
.wordmark { display: inline-flex; align-items: center; flex-shrink: 0; font-family: "Poiret One", sans-serif; font-size: 2.5rem; line-height: 1; letter-spacing: -.063em; }
.wordmark b { font-weight: 400; color: var(--green); }
.eyebrow { display: block; color: var(--muted); font-size: .7rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.portal-site-header { position: sticky; top: 0; z-index: 100; background: #fafaf8; border-bottom: 1px solid var(--line); }
.portal-site-nav { width: min(1400px, calc(100% - 3rem)); min-height: 5.25rem; margin: auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; }
.login-body { --accent: #91b29f; background: #000; color: #f4f4f1; }
.login-shell { width: min(var(--shell), calc(100% - 3rem)); min-height: calc(100svh - 10rem); margin: auto; padding: 5rem 0; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr); gap: clamp(3rem, 7vw, 7rem); align-items: center; }
.login-intro .eyebrow { color: #91b29f; }
.login-intro h1 { margin: 1.5rem 0; font-size: clamp(2.8rem, 4.8vw, 4.8rem); }
.login-intro h1 span { display: block; color: #91b29f; }
.login-intro p { max-width: 36rem; margin: 1.5rem 0 0; color: #b1b8b3; font-size: 1.05rem; font-weight: 300; line-height: 1.75; }
.login-card { --accent: #52755f; min-width: 0; padding: clamp(1.5rem, 3.2vw, 3rem); border: 1px solid #e4e4df; border-radius: 12px; background: #fafaf8; color: var(--ink); }
.login-card h2 { margin: 1rem 0 2rem; font-size: clamp(2rem, 2.7vw, 2.8rem); }
.login-card label, .message-section form label { display: block; color: var(--muted); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.login-card label { margin-top: 1.3rem; }
.login-card input, .message-section textarea, .message-section select { width: 100%; margin-top: .6rem; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: .5rem; background: white; color: var(--ink); }
.login-card input:focus, .message-section textarea:focus, .message-section select:focus { border-color: var(--accent); }
.login-card button, .message-section button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; margin-top: 1.7rem; padding: 1rem 1.3rem; border: 0; border-radius: 999px; background: var(--green); color: #15221a; font-size: .9rem; font-weight: 500; }
.login-card button:hover, .message-section button:hover, .quick-actions .action-primary:hover { background: #a8c7b6; }
.login-card small { display: block; margin-top: 1.4rem; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.login-card small a { color: var(--accent); text-decoration: underline; text-underline-offset: .2em; }
.alert { padding: .9rem 1rem; border-radius: .5rem; background: #f4e5e3; color: #8d3730; font-size: .85rem; line-height: 1.6; }
.portal-header { width: min(var(--shell), calc(100% - 3rem)); margin: auto; min-height: 5rem; display: flex; align-items: center; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.portal-account-label { margin-right: auto; color: var(--accent); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.portal-header > div { min-width: 0; text-align: right; }
.portal-header > div span { display: block; color: var(--muted); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; }
.portal-header > div strong { display: block; margin-top: .25rem; font-size: .85rem; font-weight: 500; overflow-wrap: anywhere; }
.portal-header button { padding: .65rem 1rem; border: 1px solid #bdc8bf; border-radius: 999px; background: transparent; color: var(--ink); font-size: .75rem; }
.portal-header button:hover { background: white; }
.portal-main { width: min(var(--shell), calc(100% - 3rem)); margin: auto; }
.portal-hero { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: 3rem 0 2.5rem; }
.portal-hero h1 { margin: 1rem 0; font-size: clamp(2.8rem, 4.5vw, 4rem); }
.portal-hero h1 span { color: var(--accent); }
.portal-hero p { margin: 0; color: var(--muted); font-size: .95rem; font-weight: 300; line-height: 1.75; }
.quick-actions { display: flex; flex-wrap: wrap; gap: .6rem; max-width: 400px; }
.quick-actions a { padding: .8rem 1rem; border: 1px solid #bdc8bf; border-radius: 999px; font-size: .85rem; background: #fafaf8; }
.quick-actions a:hover { background: #e5ebe5; }
.quick-actions .action-primary { background: var(--green); color: #15221a; border-color: var(--green); }
.project-section { padding: 0 0 2rem; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.project-card { min-width: 0; padding: 1.75rem; border: 1px solid #e4e4df; border-radius: 12px; background: #fafaf8; }
.project-card-head { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.project-card-head > div { min-width: 0; }
.project-card-head span { color: var(--accent); font-size: .65rem; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; }
.project-card-head h2 { margin: .6rem 0; font-size: clamp(1.8rem, 2.7vw, 2.4rem); }
.project-card-head a { flex-shrink: 0; padding-bottom: .3rem; border-bottom: 1px solid #bdc8bf; font-size: .72rem; }
.quota-month { padding: 1.2rem 0; border-top: 1px solid var(--line); margin-top: 1rem; }
.month-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.month-heading h3 { margin: 0; font-size: 1.5rem; }
.month-heading h3 small { display: inline-block; vertical-align: middle; margin-left: .5rem; padding: .25rem .5rem; border-radius: 999px; background: #e8efe9; color: #365b45; font: 500 .65rem "DM Sans", sans-serif; letter-spacing: 0; }
.month-heading strong { flex-shrink: 0; font-size: .85rem; font-weight: 500; }
.progress { display: block; appearance: none; width: 100%; height: 10px; margin-top: 1rem; border: 0; border-radius: 8px; overflow: hidden; background: #e5ebe5; }
.progress::-webkit-progress-bar { background: #e5ebe5; }
.progress::-webkit-progress-value { background: var(--green); }
.progress::-moz-progress-bar { background: var(--green); }
.quota-caption { margin: .6rem 0; color: var(--muted); font-size: .8rem; }
.project-card details { margin-top: .8rem; }
.project-card summary { display: flex; align-items: baseline; padding: .55rem 0; font-size: .85rem; list-style: none; }
.project-card summary::-webkit-details-marker { display: none; }
.project-card summary::before { content: "＋"; margin-right: .55rem; color: var(--accent); }
.project-card details[open] > summary::before { content: "−"; }
.project-card summary span { margin-left: auto; color: var(--muted); }
.entry-list > div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: .8rem; padding: .85rem 0; border-top: 1px solid var(--line); font-size: .85rem; line-height: 1.6; }
.entry-list p { margin: 0; overflow-wrap: anywhere; }
.entry-list strong { font-weight: 500; }
.entry-list small { color: var(--muted); font-size: .7rem; }
.entry-list > p { font-size: .85rem; color: var(--muted); line-height: 1.6; }
.empty { padding: 2rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); line-height: 1.75; }
.message-section { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; padding: 3rem 0; border-top: 1px solid var(--line); }
.message-section h2 { margin: 1rem 0; font-size: clamp(2rem, 3vw, 3rem); }
.message-copy p { max-width: 520px; margin: 1rem 0; color: var(--muted); font-size: .95rem; font-weight: 300; line-height: 1.75; }
.message-section select { margin-bottom: 1.2rem; }
.message-section textarea { resize: vertical; line-height: 1.6; }
.message-section button { margin-top: 1rem; }
.success { color: #365b45; font-size: .85rem; line-height: 1.6; }
.message-history { padding-bottom: 3rem; }
.message-history article { display: grid; grid-template-columns: 8rem minmax(0, 1fr) auto; gap: 1rem; padding: 1.3rem 0; border-bottom: 1px solid var(--line); font-size: .85rem; line-height: 1.6; }
.message-history time, .message-history article span { color: var(--muted); font-size: .7rem; }
.message-history p { margin: 0; overflow-wrap: anywhere; }
footer { width: min(var(--shell), calc(100% - 3rem)); margin: auto; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; border-top: 1px solid var(--line); color: var(--muted); font-size: .75rem; line-height: 1.6; }
footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
footer a:hover { text-decoration: underline; }
.login-body footer { border-color: #2b352e; color: #b1b8b3; }
@media (max-width: 1000px) {
  .wordmark { font-size: 2rem; }
}
@media (max-width: 900px) {
  .login-shell { grid-template-columns: minmax(0, 1fr); min-height: auto; gap: 2.5rem; padding: 3.5rem 0; max-width: 640px; }
  .login-intro h1 { max-width: 580px; font-size: clamp(2.8rem, 7vw, 4rem); }
  .portal-hero { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .quick-actions { max-width: none; }
}
@media (max-width: 600px) {
  html { scroll-padding-top: 6rem; }
  .portal-site-nav, .portal-main, .portal-header, .login-shell, footer { width: calc(100% - 2.25rem); }
  .portal-site-nav { min-height: 4.5rem; gap: 1rem; }
  .wordmark { font-size: 1.85rem; }
  .login-shell { padding: 2.5rem 0; }
  .login-intro h1 { font-size: clamp(2.35rem, 9.5vw, 3.6rem); }
  .login-intro p { font-size: .95rem; }
  .login-card { padding: 1.5rem; }
  .portal-header { flex-wrap: wrap; gap: .8rem; padding: 1rem 0; }
  .portal-account-label { flex-basis: 100%; }
  .portal-header > div { margin-right: auto; text-align: left; flex: 1; }
  .portal-hero { padding: 2rem 0; }
  .project-card { padding: 1.2rem; }
  .project-card-head { display: block; }
  .project-card-head a { display: inline-block; margin-top: .6rem; }
  .month-heading { align-items: start; flex-wrap: wrap; gap: .6rem; }
  .month-heading h3 small { display: block; width: fit-content; margin: .4rem 0 0; }
  .entry-list > div { grid-template-columns: minmax(0, 1fr) auto; }
  .entry-list small { grid-column: 1 / -1; }
  .message-section { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; padding: 2.5rem 0; }
  .message-history article { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
}

/* Same calm subpage navigation as the Web-Projekte mobile header. */
.portal-site-header { position: sticky; top: 0; background: #151c18; color: #fff; border-color: #35453b; }
.portal-site-nav {
  width: 100%; min-height: calc(4.75rem + env(safe-area-inset-top)); margin: 0;
  padding: calc(.9rem + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) .9rem max(18px, env(safe-area-inset-left));
  gap: .75rem;
}
.portal-site-nav .wordmark { font-size: clamp(1.55rem, 6.2vw, 2rem); }
.portal-home-link {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  flex-shrink: 0; min-height: 44px; padding: .65rem .9rem;
  border: 1px solid #91b29f; border-radius: 999px;
  background: #78a18c; color: #102018; font-size: .8rem; font-weight: 500;
}
.portal-home-link > span { font-size: 1.2rem; line-height: 1; }
.portal-home-link:hover { background: #a8c7b6; }
.portal-site-nav a:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 360px) {
  .portal-site-nav { gap: .5rem; padding-inline: 12px; }
  .portal-site-nav .wordmark { font-size: 1.5rem; }
  .portal-home-link { gap: .35rem; padding-inline: .65rem; font-size: .75rem; }
}

/* Invoice-style monthly total after the service ledger. */
.billing-total { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem 2rem; flex-wrap: wrap; margin-top: 1.2rem; padding-top: 1.2rem; border-top: 2px solid var(--line); }
.billing-total > div { display: grid; gap: .4rem; }
.billing-total > div > strong { font-size: .9rem; font-weight: 500; }
.billing-total span { color: var(--muted); font-size: .75rem; }
.billing-total-amount { margin-left: auto; text-align: right; font-size: 1.35rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-total-amount small { font-size: .75rem; font-weight: 400; color: var(--muted); }

/* One shared monthly ledger for all customer services. */
.service-websites { display:flex; flex-wrap:wrap; gap:12px 24px; margin-bottom:24px; }
.service-websites:empty { display:none; }
.service-websites a { color:inherit; text-underline-offset:6px; }
.service-month { margin-top:18px; border:1px solid var(--line, #d5ddd7); border-radius:18px; overflow:hidden; }
.service-month > summary { display:flex; align-items:center; gap:16px; padding:22px; cursor:pointer; font-weight:600; background:rgba(121,160,143,.07); }
.service-month > summary > span:first-of-type { flex:1; }
.service-month > summary small { display:inline-block; margin-left:10px; font-size:13px; font-weight:400; }
.service-month > summary .service-count { font-size:14px; font-weight:400; }
.service-month-body { padding:4px 22px 24px; }
.service-month-body .entry-list { margin-top:16px; }
@media(max-width:600px) { .service-month > summary { flex-wrap:wrap; padding:18px; gap:10px; } .service-month > summary .service-count { flex-basis:100%; padding-left:24px; } .service-month-body { padding:4px 18px 20px; } }

.service-month[data-current="true"] { border-color:#79a08f; box-shadow:0 0 0 1px rgba(121,160,143,.15); }
.service-month[data-current="true"] > summary > span:first-of-type { font-size:24px; }
.service-month[data-current="true"] > summary small { padding:5px 10px; border-radius:999px; background:#e4eee8; color:#426b59; vertical-align:middle; }
.service-history-heading { margin:36px 0 12px; font-family:inherit; font-size:16px; font-weight:600; color:#67736b; }
@media(max-width:600px) { .service-month[data-current="true"] > summary > span:first-of-type { font-size:20px; } }

/* Account navigation and private document history */
.portal-menu{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 36px;padding:8px;background:#e3e9e3;border-radius:22px}
.portal-menu a,.document-filters a{padding:13px 20px;text-decoration:none;border-radius:16px;color:inherit}
.portal-menu a[aria-current],.document-filters a[aria-current]{background:#22382e;color:#fff}
.portal-menu a:focus-visible,.document-row a:focus-visible,.overview-card:focus-visible{outline:3px solid #4c8068;outline-offset:4px}
.portal-overview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-bottom:50px}
.overview-card{display:block;padding:30px;background:#fff;border:1px solid #dce3dc;border-radius:24px;text-decoration:none;color:inherit}
.overview-card h2{font-size:2rem;margin:18px 0}.overview-card p{color:#68756b;line-height:1.6}.overview-card strong{display:block;margin-top:28px}
.document-history{margin-bottom:50px}.document-history h1{font-size:clamp(2rem,4vw,3.4rem);margin:16px 0}.section-heading p{color:#68756b;line-height:1.6}
.document-filters{display:flex;gap:8px;margin:28px 0;flex-wrap:wrap}.document-filters a{border:1px solid #bbc9c0}
.document-year{margin:18px 0;background:#fff;border:1px solid #dde3dd;border-radius:22px;overflow:hidden}
.document-year>summary{display:flex;justify-content:space-between;gap:16px;padding:24px 28px;font-size:1.4rem;cursor:pointer;list-style:none}.document-year>summary:before{content:'+'}.document-year[open]>summary:before{content:'−'}.document-year>summary span{margin-left:auto;font-size:1rem;color:#68756b}
.document-list{padding:0 28px}.document-row{display:flex;justify-content:space-between;gap:24px;border-top:1px solid #dde3dd;padding:24px 0;align-items:center}.document-row h3{font-family:inherit;font-size:1.2rem;margin:8px 0;overflow-wrap:anywhere}.document-row p,.document-kind{color:#68756b;margin:0;font-size:.95rem}.document-download{display:flex;align-items:center;gap:28px}.document-download strong{white-space:nowrap}.document-download small{font-size:.8rem;font-weight:400}.document-download a{display:inline-block;padding:12px 18px;border-radius:24px;text-decoration:none;color:#17251d;background:#9cbbab;white-space:nowrap}
.empty-state{padding:30px;background:#fff;border-radius:22px}
@media(max-width:760px){.portal-overview-grid{grid-template-columns:1fr}.portal-menu{display:grid;grid-template-columns:1fr 1fr}.portal-menu a{padding:12px;font-size:.9rem}.document-row{align-items:flex-start;flex-direction:column}.document-download{width:100%;justify-content:space-between;gap:10px}.document-list{padding:0 18px}.document-year>summary{padding:20px 18px}}

.contact-options{margin-bottom:36px}.contact-options h1{font-size:clamp(2rem,4vw,3.4rem);margin:20px 0}.contact-options .quick-actions{max-width:640px}

/* Public login: the homepage's dark green hero, with a halo around the form. */
html:has(> .login-body) { overflow-x: clip; }
.login-body {
  min-height: 100svh;
  position: relative;
  isolation: isolate;
  overflow-x: clip;
  background: radial-gradient(ellipse at 77% 46%,rgba(120,161,140,.21),transparent 49%), radial-gradient(circle at 22% 72%,rgba(120,161,140,.07),transparent 34%), linear-gradient(145deg,#1d2421 0%,#141917 58%,#0d100f 100%);
}
.login-body::before {
  content: ''; position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);
  background-size: 8rem 8rem;
  mask-image: linear-gradient(to bottom,transparent,black 12%,black 90%,transparent);
}
.login-body > .brand-header { background: rgba(29,36,33,.92); }
.login-frame { position: relative; isolation: isolate; min-width: 0; }
.login-frame::before {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 50%;
  width: max(125%,36rem); aspect-ratio: 1; border: 1px solid rgba(120,161,140,.28); border-radius: 50%;
  box-shadow: 0 0 0 4rem rgba(120,161,140,.04),0 0 0 8rem rgba(120,161,140,.025);
  transform: translate(-50%,-50%); pointer-events: none;
}
.login-body .login-card { box-shadow: 0 1.5rem 4.5rem rgba(0,0,0,.16); }
@keyframes login-content-enter {
  from { opacity: .25; translate: var(--login-entry-x,-30px) 22px; }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion:no-preference) {
  .login-intro > * { animation: login-content-enter .72s cubic-bezier(.16,1,.3,1) backwards; }
  .login-intro h1 { animation-delay: .045s; }
  .login-intro p { animation-delay: .09s; }
  .login-card { --login-entry-x: 30px; animation: login-content-enter .85s .14s cubic-bezier(.16,1,.3,1) backwards; }
}
@media (max-width:900px) {
  .login-intro { --login-entry-x: -14px; }
  .login-card { --login-entry-x: 14px; }
  .login-frame::before { width: max(120%,30rem); box-shadow: 0 0 0 2.5rem rgba(120,161,140,.04),0 0 0 5rem rgba(120,161,140,.025); }
}

/* A quiet, translucent login surface within the halo. */
.login-body .login-card {
  --ink: #edf3ed;
  --muted: #b6c8bc;
  --accent: #b0d2bd;
  --line: rgba(166,197,179,.3);
  color-scheme: dark;
  color: var(--ink);
  border: 1px solid rgba(166,197,179,.12);
  border-radius: 1.5rem;
  background: linear-gradient(145deg,rgba(45,65,54,.36),rgba(17,29,23,.46));
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  box-shadow: 0 1.5rem 4rem rgba(0,0,0,.08),inset 0 1px 0 rgba(207,229,215,.025);
}
.login-card input {
  background: rgba(8,18,12,.35);
  color: var(--ink);
  min-height: 3.25rem;
  border-radius: .65rem;
  transition: border-color .2s,background .2s;
}
.login-card input:hover { border-color: rgba(176,210,189,.55); }
.login-card input:focus { background: rgba(8,18,12,.58); }
.login-card input:autofill { box-shadow: 0 0 0 1000px #1c2c23 inset; -webkit-text-fill-color: #edf3ed; }
.login-card button {
  background: #365d48;
  color: #edf3ed;
  border: 1px solid #648d75;
  min-height: 3.35rem;
  transition: background .2s,border-color .2s;
}
.login-card button:hover { background: #426e55; border-color: #a3c5b0; }
.login-card .alert { background: #432e2b; color: #f4d1c9; border: 1px solid #88605a; }

/* Customer overview: recent outcomes, transparent billing, contact last. */
.overview-intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(290px,.85fr);gap:18px;align-items:stretch;margin:40px 0 54px}
.overview-feature{position:relative;overflow:hidden;padding:clamp(30px,4vw,54px);border:1px solid #d9e3da;border-radius:28px;background:linear-gradient(145deg,#f9faf6 0%,#e4eee5 100%);min-width:0;display:flex;flex-direction:column;align-items:start}
.overview-feature::after{content:"";position:absolute;width:260px;height:260px;right:-100px;top:-110px;border:1px solid #b8d0bd;border-radius:50%;pointer-events:none}
.overview-feature-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%;position:relative;z-index:1}.overview-feature-meta time{font-size:.78rem;color:var(--muted)}
.overview-feature h1{position:relative;z-index:1;font-size:clamp(2.5rem,4.3vw,4.4rem);margin:clamp(38px,5vw,70px) 0 28px;max-width:760px}
.overview-feature-benefits{position:relative;z-index:1;display:grid;gap:13px;list-style:none;padding:0;margin:0;max-width:660px}.overview-feature-benefits li{position:relative;padding-left:23px;line-height:1.58;font-size:1rem}.overview-feature-benefits li::before{content:"↗";position:absolute;left:0;top:0;color:var(--accent);font-weight:600}
.overview-feature .overview-open{position:relative;z-index:1;margin:30px 0 0}
.overview-billing{padding:clamp(30px,3vw,42px);border-radius:28px;background:#20382e;color:#f7faf6;display:flex;flex-direction:column;align-items:start;min-width:0}.overview-billing .eyebrow{color:#bed8c4}.overview-billing .overview-amount{font-size:clamp(3rem,5vw,5rem);letter-spacing:-.055em;font-weight:600;line-height:1.1;margin:clamp(48px,6vw,82px) 0 6px}.overview-billing>span:not(.eyebrow){font-size:.86rem;color:#c8d8ce}.overview-billing-quota{display:grid;gap:7px;width:100%;padding:20px 0;margin-top:auto;border-top:1px solid #668271}.overview-billing-quota span{font-size:.8rem;color:#bed0c1}.overview-billing-quota strong{font-size:1rem;font-weight:500}.overview-billing a{display:flex;justify-content:space-between;align-items:center;gap:18px;width:100%;padding:16px 18px;margin-top:22px;border-radius:14px;background:#b9d9c4;color:#173025;font-weight:600;font-size:.86rem}.overview-billing a:hover{background:#d5e8d9}
.overview-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.overview-section-head h2,.overview-middle h2{font-size:2.2rem;margin:10px 0 0}.overview-section-head>a{font-size:.9rem;white-space:nowrap}
.overview-highlights{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.overview-highlight{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px;min-width:0;display:flex;flex-direction:column;align-items:start}.overview-highlight:first-child{border-top:4px solid var(--accent);padding-top:23px}.overview-highlight-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:30px}.overview-step{display:grid;place-items:center;width:48px;height:48px;background:#e7eee8;color:var(--accent);border-radius:16px;font-size:1.2rem;font-weight:600}.overview-highlight time{color:var(--muted);font-size:.8rem}.overview-highlight h3{font-family:"DM Sans",system-ui,sans-serif;letter-spacing:-.025em;font-weight:500;font-size:1.3rem;line-height:1.3;margin:12px 0}.overview-excerpt{color:var(--muted);font-size:.9rem;line-height:1.65;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 20px}.overview-highlight details{margin-top:auto;width:100%;border-top:1px solid var(--line);padding-top:14px;font-size:.85rem}.overview-highlight summary{font-weight:600}.overview-highlight details p{line-height:1.7;overflow-wrap:anywhere}
.overview-middle{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;margin:48px 0}.overview-timeline{list-style:none;padding:0;margin:26px 0 0}.overview-timeline li{display:grid;grid-template-columns:55px 1fr;gap:20px;border-top:1px solid var(--line);padding:20px 0}.overview-timeline time{color:var(--accent);font-size:.85rem}.overview-timeline strong{display:block;font-weight:500;font-size:.95rem;line-height:1.5}.overview-timeline a{display:inline-block;font-size:.8rem;margin-top:8px;color:var(--accent)}.overview-projects{background:#e8e9e1;padding:28px;border-radius:22px;align-self:start}.overview-project{display:flex;gap:16px;align-items:center;padding:22px 0;border-bottom:1px solid #ccd6cc}.overview-project:last-child{border:0}.overview-project-icon{font-size:1.7rem;color:var(--accent)}.overview-project strong{display:block;font-weight:500}.overview-project small{display:block;margin-top:6px;color:var(--muted);overflow-wrap:anywhere}
.overview-contact{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;gap:40px;background:#20382e;color:#fff;border-radius:24px;padding:40px;margin:40px 0}.overview-contact .eyebrow{color:#a8c8b6}.overview-contact h2{font-size:2.5rem;margin:14px 0}.overview-contact p{color:#cad9d0;line-height:1.6}.overview-contact .quick-actions{justify-content:flex-start}.overview-contact .quick-actions a{color:#fff;border-color:#70887a;background:transparent}.overview-contact .quick-actions .action-primary{background:#b1d2bf;color:#20382e;border-color:#b1d2bf}.overview-empty{background:white;border:1px solid var(--line);border-radius:22px;padding:32px}.overview-empty h3{font-size:2rem}.overview-empty p{color:var(--muted);line-height:1.6}
@media(max-width:1000px){.overview-highlights{grid-template-columns:1fr}.overview-highlight-top{margin-bottom:16px}.overview-intro{gap:16px}.overview-middle{gap:24px}}
@media(max-width:700px){.overview-intro,.overview-middle,.overview-contact{grid-template-columns:1fr}.overview-intro{margin:28px 0 42px}.overview-feature h1{margin:38px 0 24px}.overview-billing .overview-amount{margin:34px 0 8px}.overview-billing-quota{margin-top:38px}.overview-contact{padding:26px}.overview-section-head{align-items:start;flex-direction:column}.overview-middle{margin:32px 0}.overview-contact h2{font-size:2rem}}

.overview-benefits{padding-left:18px;line-height:1.65;font-size:.9rem;margin:18px 0 24px;color:var(--ink)}.overview-benefits li+li{margin-top:10px}.overview-status{display:inline-block;font-size:.72rem;background:#e9eee8;padding:6px 10px;border-radius:8px;color:#405b49}.overview-open{width:100%;position:relative;overflow:hidden;background:rgba(222,238,226,.58);border:1px solid rgba(72,111,83,.22);border-radius:16px;padding:18px 20px;margin:0 0 20px;font-size:.84rem;line-height:1.6;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}.overview-open::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(#b9d8c2,#5e8d6c)}.overview-open>strong{display:inline-flex;align-items:center;gap:9px;color:#274b32;font-size:.84rem}.overview-open>strong::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;background:#6c9a78;box-shadow:0 0 0 4px rgba(108,154,120,.15)}.overview-open>p{color:#3e5846;margin:8px 0}.overview-open ul{padding-left:16px;margin-bottom:0}.overview-open li+li{margin-top:10px}.overview-open small{color:#4c6553}.overview-highlight{align-self:start}

@media(min-width:1001px){.overview-highlights{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Approved editorial overview: project links occupy the full middle section. */
.overview-middle:has(> .overview-projects:only-child){grid-template-columns:1fr}

/* Kundenneuigkeiten als ruhige Absätze, ohne Aufzählungszeichen. */
.overview-benefits,.overview-open ul{list-style:none;padding-left:0}

/* Logged-in portal: the public hero's charcoal, sage light and orbit. */
.portal-body {
  --paper:#111815; --ink:#eef4ee; --muted:#b8c7bc; --line:#3a5041;
  --accent:#a9d2b6; --green:#a9d2b6;
  min-height:100svh; position:relative; isolation:isolate; overflow-x:clip;
  color:var(--ink); color-scheme:dark;
  background:radial-gradient(ellipse at 78% 18%,rgba(120,161,140,.2),transparent 36%),radial-gradient(circle at 12% 58%,rgba(120,161,140,.08),transparent 38%),linear-gradient(145deg,#1d2421 0%,#141917 55%,#0d100f 100%);
}
.portal-body[data-theme="light"] {
  --paper:#f2f2eb; --ink:#203027; --muted:#526459; --line:#c9d8cb;
  --accent:#426d52; --green:#78a18c;
  color-scheme:light;
  background:radial-gradient(ellipse at 78% 18%,rgba(120,161,140,.23),transparent 38%),linear-gradient(145deg,#f7f7f2,#e9efe8 72%,#e5ebe3);
}
.portal-ambient{position:absolute;z-index:0;inset:5rem 0 auto;height:900px;overflow:hidden;pointer-events:none}
.portal-ambient::before{content:"";position:absolute;left:61%;top:-21rem;width:clamp(45rem,72vw,78rem);aspect-ratio:1;border:1px solid rgba(169,210,182,.26);border-radius:50%;box-shadow:0 0 0 6rem rgba(120,161,140,.045),0 0 0 12rem rgba(120,161,140,.025)}
.portal-ambient::after{content:"";position:absolute;inset:0;background-image:linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px);background-size:8rem 8rem;mask-image:linear-gradient(to bottom,transparent,black 15%,transparent 88%)}
.portal-body[data-theme="light"] .portal-ambient::before{border-color:rgba(71,111,83,.22);box-shadow:0 0 0 6rem rgba(120,161,140,.05),0 0 0 12rem rgba(120,161,140,.025)}
.portal-body[data-theme="light"] .portal-ambient::after{background-image:linear-gradient(90deg,rgba(35,66,45,.03) 1px,transparent 1px),linear-gradient(rgba(35,66,45,.03) 1px,transparent 1px)}
.portal-body>.portal-header,.portal-body>.portal-main,.portal-body>footer{position:relative;z-index:1}
.portal-body .portal-header{min-height:6rem;border-color:var(--line)}
.portal-body .portal-header>a:first-child{margin-right:auto}
.portal-body .portal-account-label{color:var(--accent)}
.portal-body .portal-header>div span{color:var(--muted)}
.portal-body .portal-header button:not(.portal-theme-toggle){border-color:var(--line);color:var(--ink)}
.portal-body .portal-header button:not(.portal-theme-toggle):hover{background:rgba(169,210,182,.1)}
.portal-theme-toggle{display:inline-flex;align-items:center;gap:.65rem;min-height:2.7rem;padding:.45rem .85rem;border:1px solid var(--line);border-radius:999px;background:rgba(169,210,182,.07);color:var(--ink);font-size:.76rem;white-space:nowrap}
.portal-theme-toggle:hover{border-color:var(--accent);background:rgba(169,210,182,.14)}
.portal-theme-toggle__icon{display:grid;place-items:center;width:1.35rem;height:1.35rem;border-radius:50%;background:var(--accent);color:#16251b;font-size:1rem;line-height:1}
.portal-body .portal-menu{position:relative;z-index:1;margin:1.6rem 0 2.2rem;padding:.45rem;border:1px solid var(--line);background:rgba(26,42,32,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.portal-body .portal-menu a{color:var(--ink)}
.portal-body .portal-menu a:hover{background:rgba(169,210,182,.12)}
.portal-body .portal-menu a[aria-current]{background:#a9d2b6;color:#17251b}
.portal-body[data-theme="light"] .portal-menu{background:rgba(255,255,255,.68)}
.portal-body[data-theme="light"] .portal-menu a[aria-current]{background:#244331;color:#f6faf5}
.portal-body .project-card,.portal-body .document-year,.portal-body .overview-highlight,.portal-body .overview-projects,.portal-body .overview-feature,.portal-body .empty-state,.portal-body .overview-empty{
  background:linear-gradient(145deg,rgba(37,58,46,.89),rgba(22,35,27,.94));border:1px solid var(--line);color:var(--ink);box-shadow:0 1.5rem 4rem rgba(0,0,0,.08);
}
.portal-body .project-card,.portal-body .document-year,.portal-body .overview-highlight,.portal-body .overview-projects,.portal-body .overview-feature{border-radius:26px}
.portal-body .project-card{position:relative;overflow:hidden;padding:clamp(1.35rem,3.5vw,3rem)}
.portal-body .project-card::before{content:"";position:absolute;right:-7rem;top:-13rem;width:34rem;aspect-ratio:1;border:1px solid rgba(169,210,182,.19);border-radius:50%;box-shadow:0 0 0 4rem rgba(169,210,182,.035);pointer-events:none}
.portal-body .project-card>*{position:relative}
.portal-body .project-card-head span{color:var(--accent)}
.portal-body .project-card-head h2{font-size:clamp(2.45rem,4.4vw,4.3rem);margin:.6rem 0 1.3rem}
.portal-body .service-websites a{color:var(--accent)}
.portal-body .service-month{background:rgba(9,20,13,.27);border-color:var(--line)}
.portal-body .service-month>summary{background:rgba(169,210,182,.065)}
.portal-body .service-month[data-current="true"]{border-color:#93b9a0;box-shadow:0 0 0 1px rgba(169,210,182,.17)}
.portal-body .service-month[data-current="true"]>summary small,.portal-body .month-heading h3 small{background:#355441;color:#eaf5ed}
.portal-body .service-history-heading{color:var(--muted)}
.portal-body .progress,.portal-body .progress::-webkit-progress-bar{background:#31483a}
.portal-body .progress::-webkit-progress-value{background:#a9d2b6}
.portal-body .progress::-moz-progress-bar{background:#a9d2b6}
.portal-body .overview-feature{background:linear-gradient(145deg,#2e4b39,#1a2b21 70%,#16241d)}
.portal-body .overview-feature::after{border-color:rgba(169,210,182,.3);box-shadow:0 0 0 3rem rgba(169,210,182,.035)}
.portal-body .overview-feature-benefits li::before{color:var(--accent)}
.portal-body .overview-billing{
  position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(137deg,rgba(245,255,247,.76),rgba(208,232,214,.61) 48%,rgba(165,201,175,.48));
  color:#17291e;border:1px solid rgba(246,255,248,.78);
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.2),inset 0 1px 0 rgba(255,255,255,.92),inset 0 -1px 0 rgba(75,112,82,.15);
  backdrop-filter:blur(30px) saturate(155%);-webkit-backdrop-filter:blur(30px) saturate(155%);
}
.portal-body .overview-billing::before{content:"";position:absolute;z-index:0;inset:0;pointer-events:none;background:linear-gradient(127deg,rgba(255,255,255,.52),transparent 31%,transparent 68%,rgba(255,255,255,.1)),radial-gradient(circle at 85% 8%,rgba(255,255,255,.62),transparent 42%)}
.portal-body .overview-billing::after{content:"";position:absolute;z-index:0;right:-8rem;top:-13rem;width:27rem;aspect-ratio:1;border:1px solid rgba(255,255,255,.42);border-radius:50%;box-shadow:0 0 0 3rem rgba(255,255,255,.045);pointer-events:none}
.portal-body .overview-billing>*{position:relative;z-index:1}
.portal-body .overview-billing .eyebrow,.portal-body .overview-billing>span:not(.eyebrow),.portal-body .overview-billing-quota span{color:#3d5a47}
.portal-body .overview-billing-quota{border-color:rgba(56,93,65,.32)}
.portal-body .overview-billing a{background:#244531;color:#f0f8f1;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.portal-body .overview-billing a:hover{background:#38634a}
.portal-body .overview-step{background:#355441;color:#eaf5ed}
.portal-body .overview-project{border-color:var(--line)}
.portal-body .overview-contact{background:#213e2e;border:1px solid #4b7257}
.portal-body .overview-contact .quick-actions a:not(.action-primary){background:transparent;border-color:#829f89;color:#f1f8f2}
.portal-body .overview-contact .quick-actions .action-primary{background:#d2e3d4;color:#173025}
.portal-body .overview-open,.portal-body .overview-feature .overview-open{background:linear-gradient(115deg,rgba(171,211,183,.13),rgba(171,211,183,.045));border-color:rgba(189,224,198,.25);color:#e6f0e7;box-shadow:inset 0 1px 0 rgba(237,255,241,.08)}
.portal-body .overview-open::before{background:linear-gradient(#d2e9d5,#77ad89)}
.portal-body .overview-open>strong,.portal-body .overview-open>p,.portal-body .overview-open small{color:#e3f2e6}
.portal-body .overview-open>strong::before{background:#b9dcc2;box-shadow:0 0 0 4px rgba(169,210,182,.17),0 0 14px rgba(169,210,182,.45)}
.portal-body .document-year>summary span,.portal-body .document-row p,.portal-body .document-kind,.portal-body .section-heading p{color:var(--muted)}
.portal-body .document-row{border-color:var(--line)}
.portal-body .document-download a{background:#b7d8c2;color:#16251a}
.portal-body .document-filters a{border-color:var(--line)}
.portal-body .document-filters a[aria-current]{background:#a9d2b6;color:#17251b}
.portal-body .quick-actions a{background:#1d3326;border-color:var(--line);color:var(--ink)}
.portal-body .quick-actions a:hover{background:#2c4a35}
.portal-body .quick-actions .action-primary{background:#a9d2b6;color:#15271a;border-color:#a9d2b6}
.portal-body .message-section textarea,.portal-body .message-section select{background:#18291e;border-color:#53705a;color:var(--ink)}
.portal-body .message-section textarea::placeholder{color:#a9baae}
.portal-body .message-section form label{color:var(--muted)}
.portal-body .message-section button{background:#a9d2b6;color:#14251a}
.portal-body .success{color:#b7dfc3}
.portal-body footer{border-color:var(--line);color:var(--muted)}
.portal-body :is(a,button,input,textarea,select,summary):focus-visible{outline-color:#c6e8ce}

/* Matching light treatment uses the same hierarchy and orbit. */
.portal-body[data-theme="light"] .project-card,.portal-body[data-theme="light"] .document-year,.portal-body[data-theme="light"] .overview-highlight,.portal-body[data-theme="light"] .overview-projects,.portal-body[data-theme="light"] .overview-feature,.portal-body[data-theme="light"] .empty-state,.portal-body[data-theme="light"] .overview-empty{background:linear-gradient(145deg,#fff,#f1f7f0);box-shadow:0 1.5rem 4rem rgba(34,65,43,.05)}
.portal-body[data-theme="light"] .project-card::before{border-color:rgba(66,109,82,.2);box-shadow:0 0 0 4rem rgba(66,109,82,.035)}
.portal-body[data-theme="light"] .service-month{background:#fff;border-color:var(--line)}
.portal-body[data-theme="light"] .service-month>summary{background:#eaf1ea}
.portal-body[data-theme="light"] .service-month[data-current="true"]>summary small,.portal-body[data-theme="light"] .month-heading h3 small{background:#dcebdd;color:#31583e}
.portal-body[data-theme="light"] .progress,.portal-body[data-theme="light"] .progress::-webkit-progress-bar{background:#e2eae1}
.portal-body[data-theme="light"] .progress::-webkit-progress-value{background:#608d6c}
.portal-body[data-theme="light"] .progress::-moz-progress-bar{background:#608d6c}
.portal-body[data-theme="light"] .overview-feature{background:linear-gradient(145deg,#fff,#e5f0e6)}
.portal-body[data-theme="light"] .overview-feature::after{border-color:rgba(66,109,82,.2);box-shadow:0 0 0 3rem rgba(66,109,82,.035)}
.portal-body[data-theme="light"] .overview-billing{
  background:linear-gradient(140deg,rgba(45,85,59,.87),rgba(25,64,41,.78) 53%,rgba(18,48,32,.7));
  color:#f5faf5;border-color:rgba(255,255,255,.34);
  box-shadow:0 1.5rem 4rem rgba(35,66,43,.2),inset 0 1px 0 rgba(255,255,255,.29),inset 0 -1px 0 rgba(9,35,20,.3);
}
.portal-body[data-theme="light"] .overview-billing::before{background:linear-gradient(125deg,rgba(255,255,255,.21),transparent 35%,transparent 70%,rgba(255,255,255,.035)),radial-gradient(circle at 87% 6%,rgba(199,237,207,.2),transparent 43%)}
.portal-body[data-theme="light"] .overview-billing::after{border-color:rgba(224,250,230,.22)}
.portal-body[data-theme="light"] .overview-billing .eyebrow,.portal-body[data-theme="light"] .overview-billing>span:not(.eyebrow),.portal-body[data-theme="light"] .overview-billing-quota span{color:#d3e7d8}
.portal-body[data-theme="light"] .overview-billing-quota{border-color:rgba(225,246,230,.34)}
.portal-body[data-theme="light"] .overview-billing a{background:rgba(228,249,233,.88);color:#183422;box-shadow:inset 0 1px 0 rgba(255,255,255,.6)}
.portal-body[data-theme="light"] .overview-billing a:hover{background:#e1efe3}
.portal-body[data-theme="light"] .overview-step{background:#e0eee2;color:#31583e}
.portal-body[data-theme="light"] .overview-open,.portal-body[data-theme="light"] .overview-feature .overview-open{background:linear-gradient(115deg,rgba(211,230,215,.84),rgba(241,248,241,.7));border-color:rgba(84,125,94,.25);color:#284534;box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
.portal-body[data-theme="light"] .overview-open>strong,.portal-body[data-theme="light"] .overview-open>p,.portal-body[data-theme="light"] .overview-open small{color:#284534}
.portal-body[data-theme="light"] .overview-open>strong::before{background:#5d9070;box-shadow:0 0 0 4px rgba(93,144,112,.15)}
.portal-body[data-theme="light"] .overview-contact{background:#244331;color:#fff}
.portal-body[data-theme="light"] .document-download a{background:#b6d6bd}
.portal-body[data-theme="light"] .document-filters a[aria-current]{background:#244331;color:#fff}
.portal-body[data-theme="light"] .quick-actions a{background:#f9fcf8;color:var(--ink)}
.portal-body[data-theme="light"] .quick-actions a:hover{background:#e6eee5}
.portal-body[data-theme="light"] .quick-actions .action-primary{background:#608d6c;color:#fff}
.portal-body[data-theme="light"] .overview-contact .quick-actions a:not(.action-primary){color:#fff}
.portal-body[data-theme="light"] .message-section textarea,.portal-body[data-theme="light"] .message-section select{background:#fff;border-color:var(--line);color:var(--ink)}
.portal-body[data-theme="light"] .message-section button{background:#608d6c;color:#fff}
.portal-body[data-theme="light"] .success{color:#31583e}
.portal-body[data-theme="light"] :is(a,button,input,textarea,select,summary):focus-visible{outline-color:#426d52}
@media(max-width:700px){.portal-ambient{height:650px}.portal-ambient::before{left:24%;top:-10rem;width:38rem}.portal-body .portal-header{gap:.7rem}.portal-theme-toggle{order:3;margin-left:auto}.portal-body .portal-header>div{order:1}.portal-body .portal-header>form{order:2}.portal-body .project-card-head h2{font-size:clamp(2.5rem,10vw,3.6rem)}}

/* Customer outcomes lead the overview; account figures stay within reach at the viewport edge. */
.portal-body--overview .portal-main{padding-bottom:calc(7rem + env(safe-area-inset-bottom))}
.overview-intro--single{grid-template-columns:minmax(0,1fr)}
.portal-body .overview-spotlight{
  position:relative;display:flex;flex-direction:column;align-items:flex-start;min-width:0;
  padding:clamp(30px,3.3vw,46px);overflow:hidden;border:1px solid #d7e8d8;border-radius:28px;
  background:linear-gradient(145deg,#e8f2e8,#bfd8c5 75%,#a9cdb5);color:#1b3928;
  box-shadow:0 1.5rem 4rem rgba(0,0,0,.11)
}
.portal-body .overview-spotlight::after{content:"";position:absolute;right:-8rem;top:-9rem;width:24rem;aspect-ratio:1;border:1px solid rgba(255,255,255,.62);border-radius:50%;box-shadow:0 0 0 3rem rgba(255,255,255,.1);pointer-events:none}
.overview-spotlight>*{position:relative;z-index:1}
.overview-spotlight__meta{display:flex;justify-content:space-between;gap:1rem;align-items:center;width:100%;font-size:.72rem;letter-spacing:.08em;color:#476850}
.overview-spotlight .eyebrow{color:#476850}
.overview-spotlight h2{font-size:clamp(2.2rem,3.3vw,3.7rem);margin:clamp(2.2rem,4vw,4.5rem) 0 1.6rem}
.overview-spotlight__benefits{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:.9rem}
.overview-spotlight__benefits li{position:relative;padding-left:1.15rem;font-size:.92rem;line-height:1.58}
.overview-spotlight__benefits li::before{content:"↗";position:absolute;left:0;color:#547c5b}
.portal-body .overview-spotlight .overview-open{margin:0 0 1.25rem;background:rgba(255,255,255,.42);border-color:rgba(45,94,55,.22);color:#23472d}
.portal-body .overview-spotlight .overview-open>strong,.portal-body .overview-spotlight .overview-open small{color:#23472d}
.portal-body .overview-spotlight .overview-open::before{background:#6e9d78}
.overview-spotlight>a{display:inline-flex;justify-content:space-between;gap:2rem;align-items:center;margin-top:auto;padding:.85rem 0 0;border-top:1px solid rgba(35,71,45,.27);width:100%;font-size:.78rem;font-weight:600;letter-spacing:.04em}
.overview-spotlight>a:hover{text-decoration:underline;text-underline-offset:.25em}
.overview-spotlight>a span{font-size:1.15rem}

.portal-body .overview-dock{
  position:fixed;z-index:50;left:50%;bottom:max(.75rem,env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:clamp(1rem,3vw,3rem);width:min(var(--shell),calc(100% - 2rem));
  min-height:4.7rem;padding:.85rem clamp(1rem,2vw,1.8rem);border:1px solid #71967a;
  border-radius:18px;background:linear-gradient(112deg,rgba(37,66,47,.97),rgba(24,46,34,.97));
  color:#f3f8f2;box-shadow:0 .8rem 2.5rem rgba(0,0,0,.24),inset 0 1px rgba(255,255,255,.12);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  transform:translate(-50%,0);transition:transform .48s cubic-bezier(.22,1,.36,1),opacity .3s ease;
}
.portal-body .overview-dock.is-near-footer{opacity:0;pointer-events:none;transform:translate(-50%,calc(100% + 2rem))}
.overview-dock__item{display:grid;gap:.25rem;min-width:0}
.overview-dock__item+.overview-dock__item{padding-left:clamp(1rem,3vw,3rem);border-left:1px solid rgba(199,225,202,.3)}
.overview-dock__item>span{color:#b7d3be;font-size:.64rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.overview-dock__item strong{font-size:1rem;font-weight:500;line-height:1.3;white-space:nowrap}
.overview-dock__item small{color:#c3d9c8;font-size:.72rem;font-weight:400}
.overview-dock>a{display:inline-flex;align-items:center;gap:.75rem;margin-left:auto;padding:.6rem .9rem;border:1px solid rgba(225,244,227,.55);border-radius:999px;font-size:.73rem;font-weight:600;letter-spacing:.04em;white-space:nowrap}
.overview-dock>a:hover{background:rgba(255,255,255,.1)}
.portal-body[data-theme="light"] .overview-dock{border-color:#b3ceb8;background:linear-gradient(112deg,rgba(247,252,247,.98),rgba(226,239,227,.98));color:#1b3928;box-shadow:0 .8rem 2.5rem rgba(32,65,38,.14)}
.portal-body[data-theme="light"] .overview-dock__item>span,.portal-body[data-theme="light"] .overview-dock__item small{color:#50735a}
.portal-body[data-theme="light"] .overview-dock__item+.overview-dock__item{border-color:#b8d1bc}
.portal-body[data-theme="light"] .overview-dock>a{border-color:#8bab91}

@media(max-width:800px){
  .portal-body .overview-dock{gap:1rem}
  .overview-dock__item strong{font-size:.88rem}
  .overview-dock__item small{display:block;font-size:.66rem}
}
@media(max-width:620px){
  .portal-body--overview .portal-main{padding-bottom:calc(9rem + env(safe-area-inset-bottom))}
  .portal-body .overview-dock{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;gap:.45rem 1rem;padding:.75rem;border-radius:16px}
  .overview-dock__item>span{font-size:.56rem;line-height:1.3;white-space:normal}
  .overview-dock__item strong{font-size:.8rem;white-space:normal}
  .overview-dock__item+.overview-dock__item{padding-left:.75rem}
  .overview-dock>a{padding:.5rem .6rem;font-size:.65rem}
  .overview-dock>a span{display:none}
  .overview-spotlight h2{margin-top:2rem}
}
@media(max-width:410px){
  .portal-body .overview-dock{grid-template-columns:1fr 1fr}
  .overview-dock>a{grid-column:1/-1;justify-self:end;margin-top:.1rem}
}
@media(prefers-reduced-motion:reduce){.portal-body .overview-dock{transition:none}}

/* Keep the additional amount prominent across desktop and mobile layouts. */
.overview-dock__item--amount{gap:.35rem}
.overview-dock__item--amount strong{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:600;line-height:1.1;font-variant-numeric:tabular-nums}
.overview-dock__item--amount small{display:block;line-height:1.5}
@media(max-width:620px){
  .portal-body .overview-dock{grid-template-columns:minmax(0,1fr) auto}
  .overview-dock__item--amount{grid-column:1;grid-row:1}
  .overview-dock__item--amount.overview-dock__item{padding-left:0;border-left:0}
  .overview-dock__item:not(.overview-dock__item--amount){grid-column:1;grid-row:2}
  .overview-dock>a{grid-column:2;grid-row:1 / span 2;align-self:center;margin-top:0}
  .overview-dock__item--amount strong{font-size:1.75rem}
}