.lead-agentursystem {
  --agency-ink: #202a38;
  --agency-muted: #526174;
  --agency-line: #dce2e9;
  --agency-paper: #f6f8fb;
  --agency-navy: #202a38;
  --agency-orange-ink: #a13318;
  --agency-orange-light: #fff0e9;
}

.agency-preview,
.agency-demo-app {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--agency-line);
  border-radius: 18px;
  color: var(--agency-ink);
  background: #fff;
  box-shadow: 0 16px 52px #202a3814;
}

.agency-preview {
  display: block;
  align-self: center;
}

.agency-preview:hover {
  border-color: #d8765c;
}

.agency-demo-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 20px;
  background: var(--agency-navy);
  color: #fff;
}

.agency-demo-top strong { font-size: .95rem; }
.agency-demo-top > span { color: #dbe4ef; font-size: .75rem; }
.agency-preview-body { padding: clamp(16px, 2.1vw, 26px); background: var(--agency-paper); }
.lead-page .agency-preview h2 { margin: 5px 0 16px; font-size: clamp(1.5rem, 2.3vw, 2.1rem); font-weight: 700; letter-spacing: -.045em; }

.agency-label {
  color: var(--agency-muted);
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.agency-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.agency-preview-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }

.agency-metric,
.agency-metrics > button {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  min-width: 0;
  padding: 12px 13px;
  border: 1px solid var(--agency-line);
  border-radius: 10px;
  color: var(--agency-ink);
  background: #fff;
  text-align: left;
}

.agency-metric > span,
.agency-metrics > button > span { font-size: .77rem; font-weight: 700; line-height: 1.3; }
.agency-metric > strong,
.agency-metrics > button > strong { font-size: 1.65rem; line-height: 1; }
.agency-metrics small { color: var(--agency-muted); font-size: .72rem; line-height: 1.3; }
.agency-preview-metrics .agency-metric { padding: 9px 11px; }
.agency-preview-metrics .agency-metric > strong { font-size: 1.35rem; }

.agency-preview-call {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 11px 12px;
  border: 1px solid var(--agency-line);
  border-radius: 10px;
  background: #fff;
  font-size: .8rem;
}

.agency-preview-call small,
.agency-overview-call small,
.agency-record summary small,
.agency-task-list small,
.agency-entry small {
  display: block;
  margin-top: 4px;
  color: var(--agency-muted);
  font-size: .75rem;
  line-height: 1.4;
}

.agency-preview-link { display: flex; justify-content: space-between; gap: 8px; margin-top: 15px; color: var(--agency-orange-ink); font-size: .86rem; font-weight: 700; }
.agency-preview:hover .agency-preview-link { text-decoration: underline; }

.agency-demo { scroll-margin-top: 85px; }
.agency-demo-intro { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 30px; margin-bottom: 24px; }
.agency-demo-intro .lead-section-head { max-width: 650px; margin: 0; }
.agency-demo-intro .text-link { flex: 0 0 auto; }

.agency-demo-app button,
.agency-demo-app select { font: inherit; }
.agency-demo-app button,
.agency-demo-app summary,
.agency-task-list label { cursor: pointer; }
.agency-demo-app [hidden] { display: none; }
.agency-demo-app :is(button, select, summary, input):focus-visible,
.agency-preview:focus-visible { outline: 2px solid #a83c21; outline-offset: 2px; }

.agency-demo-layout { display: grid; grid-template-columns: 155px minmax(0, 1fr); }
.agency-demo-rail { padding: 18px 10px; border-right: 1px solid var(--agency-line); background: #fff; }
.agency-demo-rail-title { padding: 0 10px 11px; color: var(--agency-muted); font-size: .73rem; font-weight: 700; }
.agency-demo-nav { display: grid; gap: 4px; }
.agency-demo-nav button { padding: 10px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--agency-ink); text-align: left; font-size: .84rem; font-weight: 700; }
.agency-demo-nav button:hover { background: var(--agency-paper); }
.agency-demo-nav button[aria-pressed="true"] { background: var(--agency-orange-light); color: var(--agency-orange-ink); }
.agency-demo-content { min-width: 0; min-height: 375px; padding: clamp(14px, 2.4vw, 28px); background: var(--agency-paper); }

.agency-view-heading { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 16px; margin-bottom: 18px; }
.agency-view h3 { margin: 5px 0 0; font-size: clamp(1.4rem, 2.5vw, 2rem); letter-spacing: -.04em; }
.agency-view h3:focus { outline: none; }
.agency-view-meta { color: var(--agency-muted); font-size: .76rem; }
.agency-metrics > button:hover, .agency-overview-call:hover { background: #fbf2ed; }

.agency-overview-grid { display: grid; grid-template-columns: 1.25fr 1fr; align-items: start; gap: 12px; margin-top: 15px; }
.agency-overview-side { display: grid; gap: 12px; }
.agency-panel, .agency-record, .agency-task-list li, .agency-column { border: 1px solid var(--agency-line); border-radius: 10px; background: #fff; }
.agency-panel { min-width: 0; overflow: hidden; }
.agency-panel-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; padding: 12px; }
.agency-panel-head h4, .agency-column h4 { margin: 0; font-size: .85rem; }
.agency-panel-head .agency-text-button { padding: 0; border: 0; color: var(--agency-orange-ink); background: transparent; font-size: .75rem; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }

.agency-overview-call, .agency-record summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
  width: 100%;
  padding: 12px;
  color: var(--agency-ink);
  text-align: left;
}

.agency-overview-call { border: 0; border-top: 1px solid var(--agency-line); background: #fff; }
.agency-overview-call:focus-visible { outline-offset: -3px; }
.agency-overview-call strong, .agency-record summary strong { font-size: .83rem; }
.agency-badge { flex: 0 0 auto; padding: 4px 7px; border-radius: 20px; font-size: .7rem; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.agency-badge-open { background: var(--agency-orange-light); color: var(--agency-orange-ink); }
.agency-badge-done { background: #e8f6ef; color: #216545; }
.agency-disclosure-mark { flex: 0 0 auto; width: 7px; height: 7px; margin-right: 3px; border-top: 1.5px solid var(--agency-muted); border-right: 1.5px solid var(--agency-muted); transform: rotate(45deg); }

.agency-team, .agency-task-list { padding: 0; margin: 0; list-style: none; }
.agency-team li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; padding: 8px 12px; border-top: 1px solid var(--agency-line); font-size: .76rem; }
.agency-team-status { color: #216545; }
.agency-team-busy { color: var(--agency-orange-ink); }

.agency-filter { display: flex; align-items: center; gap: 7px; color: var(--agency-muted); font-size: .79rem; }
.agency-filter select { padding: 6px 8px; border: 1px solid var(--agency-line); border-radius: 6px; background: #fff; color: var(--agency-ink); }
.agency-records, .agency-task-list { display: grid; gap: 9px; }
.agency-record summary, .agency-entry summary { list-style: none; }
.agency-record summary::-webkit-details-marker, .agency-entry summary::-webkit-details-marker { display: none; }
.agency-record summary::after, .agency-entry summary::after { width: 7px; height: 7px; border-bottom: 1.5px solid var(--agency-muted); border-right: 1.5px solid var(--agency-muted); transform: rotate(45deg); content: ""; }
.agency-record summary::after { flex: 0 0 auto; margin: -4px 2px 0 0; }
.agency-record summary > span:first-child { flex: 1 1 auto; }
.agency-record[open] summary::after, .agency-entry[open] summary::after { transform: rotate(225deg); }
.agency-record-body { padding: 13px; border-top: 1px solid var(--agency-line); }
.agency-record-body p, .agency-entry p, .agency-empty { margin: 0; color: var(--agency-muted); font-size: .84rem; line-height: 1.5; }
.agency-record-body dl { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 12px 0; font-size: .8rem; }
.agency-record-body dt { color: var(--agency-muted); }
.agency-record-body dd { margin: 2px 0 0; font-weight: 700; }
.agency-demo-app .agency-action { padding: 7px 10px; border: 1px solid #efd0c3; border-radius: 7px; color: var(--agency-orange-ink); background: var(--agency-orange-light); font-size: .79rem; font-weight: 700; }
.agency-demo-app .agency-action:hover { border-color: #d8765c; }

.agency-task-list label { display: flex; align-items: center; gap: 10px; padding: 12px; font-size: .86rem; }
.agency-task-list input { flex: 0 0 auto; width: 17px; height: 17px; margin: 0; accent-color: var(--agency-orange-ink); }
.agency-task-list input:checked + span > strong { color: var(--agency-muted); text-decoration: line-through; }

.agency-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 10px; }
.agency-column { padding: 10px; }
.agency-column h4 { padding: 1px 0 9px; }
.agency-entry { margin-top: 6px; border: 1px solid var(--agency-line); border-radius: 8px; background: var(--agency-paper); }
.agency-entry summary { position: relative; padding: 9px 23px 9px 9px; font-size: .8rem; line-height: 1.35; }
.agency-entry summary::after { position: absolute; top: 11px; right: 10px; }
.agency-entry p { padding: 0 9px 9px; }

.agency-demo-footer { padding: 11px 16px; border-top: 1px solid var(--agency-line); color: var(--agency-muted); font-size: .76rem; }
.agency-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 1000px) {
  .agency-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 800px) {
  .agency-demo { scroll-margin-top: 72px; }
  .agency-demo-layout { grid-template-columns: minmax(0, 1fr); }
  .agency-demo-rail { padding: 8px; border-right: 0; border-bottom: 1px solid var(--agency-line); }
  .agency-demo-rail-title { display: none; }
  .agency-demo-nav { display: flex; flex-wrap: wrap; }
  .agency-demo-nav button { min-height: 40px; padding: 7px 9px; }
  .agency-demo-content { min-height: 0; }
}

@media (max-width: 520px) {
  .lead-agentursystem h1 { overflow-wrap: anywhere; }
  .agency-overview-grid, .agency-columns { grid-template-columns: minmax(0, 1fr); }
  .agency-demo-top { padding: 13px 14px; }
  .agency-record summary { gap: 6px; padding: 11px 8px; }
  .agency-record summary strong { font-size: .79rem; }
}

#whatsapp-beispiel { scroll-margin-top: 105px; }

.agency-chat {
  display: grid;
  gap: 10px;
  max-width: 690px;
  padding: clamp(12px, 2vw, 22px);
  border: 1px solid #c7dbcf;
  border-radius: 12px;
  background: #edf5ef;
}

.agency-chat-continuation { display: grid; gap: 10px; }

.agency-chat-message {
  width: fit-content;
  max-width: min(86%, 480px);
  padding: 10px 12px;
  border: 1px solid #d2e1d7;
  border-radius: 10px;
  background: #fff;
}

.agency-chat-bot { justify-self: end; background: #dbf0e2; }
.agency-chat-message > span { color: #20583b; font-size: .75rem; font-weight: 700; }
.agency-chat-message p,
.agency-chat-handoff p {
  margin: 3px 0 0;
  color: var(--agency-ink);
  font-size: .88rem;
  line-height: 1.45;
}

.agency-chat-handoff {
  padding: 10px 12px;
  border-left: 3px solid #488462;
  border-radius: 6px;
  background: #fff;
  color: #20583b;
  font-size: .84rem;
}

.agency-chat .agency-chat-action {
  justify-self: start;
  min-height: 40px;
  border-color: #b4d6c2;
  background: #fff;
  color: #145338;
}

.agency-chat .agency-chat-action:hover { border-color: #488462; }