/* Arbeitsplatz, eigener KI-Agent und Angebot als lesbare Module. */
.startseite { --seitenzoom: 1; }
@media(min-width:981px) { .startseite { --seitenzoom: .9; } }
.startseite .held { min-height: calc(100dvh / var(--seitenzoom) - var(--kopf) + 2px); }
.startseite h2 { line-height: 1.12; }
.startseite h3 { line-height: 1.2; }
.startseite .knopf { white-space: normal; text-align: center; padding-block: 12px; }
.startseite .eyebrow { margin-bottom: 24px; }
.startseite .held .hinweis { color: var(--paper-soft); }
.arbeitsplatz-modul, .bruecke-modul, .preise-modul { padding: clamp(24px,3vw,40px); border: 1px solid var(--auf-papier-line); border-radius: var(--rund); text-shadow: none; }
.arbeitsplatz-modul, .bruecke-modul { background: #f4f1ea; }
.start-entdecken-kopf { gap: 20px; }
.start-entdecken-kopf .lead { max-width: 70ch; }
.arbeitsplatz-fenster { margin-top: 32px; border: 1px solid #48464f; border-radius: 10px; overflow: hidden; background: #141418; color: #f4f1ea; }
.arbeitsplatz-leiste { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 24px; border-bottom: 1px solid #45434e; }
.arbeitsplatz-leiste b { font-size: 19px; }
.arbeitsplatz-leiste b span { margin-left: 16px; font-weight: 400; font-size: 14px; color: #c3c1cb; }
.arbeitsplatz-leiste small { color: #c3c1cb; font-size: 12px; }
.arbeitsplatz-inhalt { display: grid; grid-template-columns: 160px minmax(0,1fr); }
.arbeitsplatz-auswahl { display: grid; align-content: start; gap: 4px; padding: 20px 12px; border-right: 1px solid #45434e; }
.arbeitsplatz-auswahl button { display: flex; justify-content: space-between; align-items: center; gap: 6px; min-width: 0; min-height: 48px; padding: 10px; border-radius: 6px; font-size: 14px; text-align: left; }
.arbeitsplatz-auswahl button span { color: #b7b1ff; }
.arbeitsplatz-auswahl button[aria-pressed="true"] { background: #7c7cf5; color: #080816; font-weight: 650; }
.arbeitsplatz-auswahl button[aria-pressed="true"] span { color: inherit; }
.arbeitsplatz-auswahl button:hover { outline: 1px solid #b7b1ff; }
.arbeitsplatz-auswahl button:focus-visible { outline: 2px solid #d8f24b; outline-offset: 1px; }
.arbeitsplatz-ansicht { padding: 24px; min-width: 0; }
.arbeitsplatz-panel { min-height: 310px; }
.arbeitsplatz-panel[hidden] { display: none; }
.arbeitsplatz-kontext { display: flex; flex-wrap: wrap; gap: 8px; color: #c3c1cb; font-size: 13px; margin-bottom: 24px; }
.arbeitsplatz-panel h3 { font-size: clamp(24px,2.4vw,32px); margin-bottom: 16px; }
.arbeitsplatz-panel > p:not(.arbeitsplatz-kontext) { color: #d1ced6; line-height: 1.65; font-size: 16px; }
.arbeitsplatz-panel dl { margin: 24px 0; border-top: 1px solid #45434e; }
.arbeitsplatz-panel dl > div { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 14px 0; border-bottom: 1px solid #45434e; font-size: 15px; }
.arbeitsplatz-panel dt { font-weight: 600; }
.arbeitsplatz-panel dd { color: #c3c1cb; }
.arbeitsplatz-panel p.arbeitsplatz-vorteil { color: #d8f24b; }
.arbeitsplatz-basis { display: flex; flex-wrap: wrap; gap: 12px 28px; padding: 16px 24px; background: #222129; font-size: 13px; color: #d5d2df; }
.arbeitsplatz-basis span::before { content: ''; display: inline-block; width: 6px; height: 6px; background: #b7b1ff; border-radius: 50%; margin-right: 8px; }
.spur-kopf { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 24px; margin-top: 36px; }
.spur-kopf h3 { font-size: clamp(24px,2.3vw,30px); }
.spur-kopf p { font-size: 16px; line-height: 1.65; color: #4a5058; }
.arbeits-spur { display: grid; grid-template-columns: repeat(9,minmax(0,1fr)); list-style: none; margin-top: 28px; padding: 0; }
.arbeits-spur li { position: relative; border-top: 2px solid #6661b0; padding: 18px 4px 0 0; }
.arbeits-spur li::before { content: ''; position: absolute; top: -5px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: #5751a4; }
.arbeits-spur span { display: block; color: #57515f; font-size: 12px; margin-bottom: 6px; }
.arbeits-spur b { font-size: 14px; font-weight: 600; }
.spur-schluss { margin-top: 24px; color: #4a5058; font-size: 15px; }
.galerie-hinweis { margin-top: 44px; }
.galerie-hinweis h3 { font-size: 30px; margin-bottom: 12px; }
.galerie-hinweis p { color: #4a5058; }
.startseite .start-entdecken { margin-top: 24px; }
.bruecke-einstieg { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.bruecke-einstieg h2 { font-size: clamp(32px,3.6vw,46px); }
.bruecke-einstieg .lead { margin-top: 0; }
.bruecke-spur { list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; margin: 36px 0; padding: 0; }
.bruecke-spur li { position: relative; padding-top: 24px; border-top: 2px solid #716ab1; }
.bruecke-nummer { display: block; color: #5751a4; font-size: 16px; margin-bottom: 20px; }
.bruecke-spur h3 { font-size: 24px; margin-bottom: 16px; }
.bruecke-spur p { font-size: 16px; line-height: 1.7; }
.bruecke-kosten { display: grid; grid-template-columns: 1fr 2fr; gap: 32px; padding-top: 28px; border-top: 1px solid #c3bdc9; }
.bruecke-kosten h3 { font-size: 26px; }
.bruecke-kosten p { font-size: 16px; line-height: 1.7; }
.betrieb-details { border-block: 1px solid #c3bdc9; margin: 28px 0; }
.betrieb-details summary { cursor: pointer; padding: 18px 0; font-weight: 600; }
.betrieb-details p { padding-bottom: 24px; max-width: 75ch; font-size: 15px; line-height: 1.75; }
.preise-modul { background: #151519; border-color: #4b4654; }
.preise-modul h2 { font-size: clamp(32px,3.8vw,48px); }
.preise-modul > .lead { margin-top: 20px; }
.startseite .preis-raster { gap: 32px; margin: 32px 0; }
.startseite .preis-raster > div { padding: 28px 0 0; border-color: #686171; }
.preis-label { font-size: 16px; font-weight: 550; color: #c8c3cf; }
.startseite .preis-raster .preis-wert { font: 650 clamp(44px,4.8vw,68px)/1.15 var(--display); margin: 20px 0 28px; color: #f4f1ea; }
.startseite .preis-raster .preis-wert span { display: inline-block; font: 400 16px/1.5 var(--text); margin: 0; color: #c8c3cf; }
.startseite .preis-raster h3 { margin-bottom: 20px; }
.startseite .preis-raster p { line-height: 1.7; }
.preis-raster ul { margin-top: 24px; padding-left: 20px; display: grid; gap: 12px; font-size: 16px; color: #d1ced6; }
.startseite .preis-betrieb { max-width: none; border-block: 1px solid #4b4654; padding: 24px 0; margin-bottom: 28px; }
.preis-betrieb h3 { font-size: 24px; margin-bottom: 16px; }
.preis-betrieb p { max-width: 85ch; color: #c8c3cf; font-size: 15px; line-height: 1.75; }
.preis-betrieb p + p { margin-top: 16px; }
.startseite .schritte h3 { margin-bottom: 18px; }
.startseite .schritte p { line-height: 1.65; }
@media(prefers-reduced-motion:reduce) {
 .startseite *, .startseite *::before, .startseite *::after { animation: none !important; transition: none !important; }
}
@media(max-width:1000px) {
 .arbeitsplatz-leiste { align-items: start; flex-direction: column; gap: 8px; }
 .arbeits-spur { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 0; }
 .arbeits-spur b { font-size: 16px; }
 .bruecke-einstieg { grid-template-columns: 1fr; gap: 24px; }
}
@media(max-width:760px) {
 .arbeitsplatz-modul, .bruecke-modul, .preise-modul { padding: 24px 18px; }
 .arbeitsplatz-leiste { padding: 18px; }
 .arbeitsplatz-leiste b span { display: block; margin: 4px 0 0; }
 .arbeitsplatz-inhalt { grid-template-columns: 1fr; }
 .arbeitsplatz-auswahl { grid-template-columns: 1fr 1fr; border-right: 0; border-bottom: 1px solid #45434e; padding: 12px; gap: 6px; }
 .arbeitsplatz-auswahl button { font-size: 14px; padding: 10px; }
 .arbeitsplatz-auswahl button span { display: none; }
 .arbeitsplatz-ansicht { padding: 20px 18px; }
 .arbeitsplatz-panel { min-height: 0; }
 .arbeitsplatz-panel dl > div { grid-template-columns: 1fr; gap: 6px; }
 .arbeitsplatz-basis { padding: 18px; gap: 10px; flex-direction: column; }
 .spur-kopf, .bruecke-spur, .bruecke-kosten { grid-template-columns: 1fr; gap: 24px; }
 .bruecke-spur { margin-block: 28px; }
 .bruecke-spur li { padding-top: 20px; }
 .bruecke-nummer { margin-bottom: 16px; }
 .startseite .preis-raster { gap: 32px; }
 .startseite .preis-raster .preis-wert span { display: block; margin-top: 8px; }
 .startseite .held .lead { font-size: 18px; }
}

/* Entwurf 37: Arbeitsansichten aus der App, mit bedienbaren Beispielen. */
.arbeitsplatz-fenster { color-scheme: dark; }
.arbeitsplatz-fenster [hidden] { display: none !important; }
.demo-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; }
.arbeitsplatz-panel .demo-heading h3 { margin: 0; font-size: 26px; }
.demo-muted { color: #bcb8c9; font-size: 13px; line-height: 1.6; }
.demo-button,.demo-month-nav button { border: 1px solid #53505e; background: #22212a; border-radius: 6px; padding: 10px 12px; min-height: 40px; font-size: 13px; color: #f4f1ea; }
.demo-button:hover,.demo-month-nav button:hover { background: #353242; }
.arbeitsplatz-fenster button:focus-visible,.arbeitsplatz-fenster select:focus-visible,.arbeitsplatz-fenster input:focus-visible,.demo-scroll:focus-visible,.arbeitsplatz-fenster summary:focus-visible { outline: 2px solid #d8f24b; outline-offset: 3px; }
.demo-calendar-controls { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.demo-month-nav { display: flex; align-items: center; gap: 12px; }
.demo-month-nav strong { min-width: 132px; text-align: center; font-size: 15px; }
.demo-select-label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: #c3bfce; font-size: 13px; }
.arbeitsplatz-fenster select,.arbeitsplatz-fenster input { border: 1px solid #53505e; background: #1c1b23; color: #f4f1ea; border-radius: 6px; font: inherit; min-height: 40px; padding: 8px 10px; max-width: 100%; }
.demo-scroll { max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #676277 #24222d; scrollbar-width: thin; padding-bottom: 8px; }
.demo-calendar { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); min-width: 630px; border: 1px solid #3d3949; border-radius: 7px; overflow: hidden; }
.demo-weekday { text-align: center; padding: 10px 4px; color: #c8c3d6; background: #24222d; font-size: 12px; }
.demo-day { min-height: 70px; border-top: 1px solid #3d3949; border-right: 1px solid #3d3949; padding: 6px; }
.demo-day:nth-child(7n) { border-right: 0; }
.demo-day--outside { background: #101014; }
.demo-day-number { display: block; font-size: 12px; margin-bottom: 5px; color: #c8c3d6; }
.demo-event { display: block; border: 0; border-left: 2px solid currentColor; padding: 5px; border-radius: 3px; background: #2c283e; color: #cbc0ff; width: 100%; text-align: left; font-size: 11px; line-height: 1.5; }
.demo-event span:first-child { white-space: nowrap; }
.demo-event--ben { background: #193634; color: #8ddcc4; }
.demo-event--call { background: #3b3020; color: #efc17c; }
.demo-event:hover { filter: brightness(1.22); }
.demo-agenda { margin-top: 22px; }
.demo-agenda h4,.demo-customer-history h4 { margin-bottom: 16px; font-size: 17px; }
#demo-events { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.demo-agenda .demo-event { display: flex; gap: 12px; align-items: center; padding: 12px; }
.demo-agenda time { min-width: 42px; color: #eee8f7; font-size: 12px; }
.demo-agenda b { display: block; color: #f4f1ea; font-size: 12px; font-weight: 550; }
.demo-agenda small { display: block; font-size: 11px; margin-top: 4px; }
.demo-agenda .demo-event > span:last-child { margin-left: auto; font-size: 17px; }
.arbeitsplatz-panel p.arbeitsplatz-vorteil { margin-top: 24px; padding-top: 20px; border-top: 1px solid #45414f; font-size: 14px; line-height: 1.65; }
.arbeitsplatz-panel > .demo-scroll-hint { color: #bcb8c9; font-size: 12px; margin-bottom: 14px; }
.arbeitsplatz-panel > .demo-instruction { margin-bottom: 20px; font-size: 14px; }
.demo-board { min-width: 700px; display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 10px; }
.demo-column { padding: 10px; border: 1px solid #3e3a4a; border-radius: 7px; background: #1a1921; transition: background .15s ease; min-height: 380px; }
.demo-column-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 18px; border-top: 2px solid #8d86b3; padding-top: 12px; }
.demo-column:nth-child(2) .demo-column-heading { border-color: #ac95fc; }
.demo-column:nth-child(3) .demo-column-heading { border-color: #eac074; }
.demo-column:nth-child(4) .demo-column-heading { border-color: #7edbb6; }
.demo-column-heading h4 { font-size: 14px; font-weight: 600; }
.demo-column-heading span { font-size: 12px; color: #bcb8c9; }
.demo-task-list { display: grid; align-content: start; gap: 12px; min-height: 290px; }
.demo-task { padding: 12px; border: 1px solid #514c61; background: #292631; border-radius: 6px; cursor: grab; }
.demo-task:active { cursor: grabbing; }
.demo-task-project { color: #c1b4ee; font-size: 11px; margin-bottom: 18px; }
.demo-task h5 { font-family: var(--text); font-size: 14px; font-weight: 550; line-height: 1.5; }
.demo-task-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0; color: #c3bfce; font-size: 11px; }
.demo-task-meta time { margin-left: auto; }
.demo-avatar { display: inline-grid; place-items: center; width: 22px; height: 22px; background: #4b425d; color: #eee8f7; border-radius: 50%; font-size: 11px; }
.demo-task label { display: block; color: #c3bfce; font-size: 11px; }
.demo-task select { width: 100%; margin-top: 6px; font-size: 12px; }
.demo-column.is-target { background: #3a324f; outline: 2px solid #a79afb; outline-offset: -2px; }
.demo-task.is-dragging { opacity: .45; }
.arbeitsplatz-panel > .demo-status { color: #bcb8c9; font-size: 12px; margin-top: 16px; }
.demo-search { display: grid; gap: 8px; margin-bottom: 24px; font-size: 13px; color: #c3bfce; }
.demo-documents details { border-block-start: 1px solid #45414f; }
.demo-documents details:last-child { border-bottom: 1px solid #45414f; }
.demo-documents summary { display: flex; align-items: center; gap: 14px; padding: 18px 0; cursor: pointer; list-style: none; }
.demo-documents summary > span:last-child { margin-left: auto; }
.demo-documents summary b { font-size: 15px; font-weight: 550; }
.demo-documents summary small { display: block; color: #bcb8c9; font-size: 12px; margin-top: 6px; }
.demo-file-icon { padding: 10px 7px; border: 1px solid #696074; border-radius: 4px; color: #d4c0eb; font-size: 11px; }
.demo-document-body { padding: 6px 0 24px; font-size: 14px; line-height: 1.7; }
.demo-document-body h4 { margin-bottom: 16px; font-size: 19px; }
.demo-link { display: inline-block; margin-top: 20px; padding: 10px 0; color: #c3baff; font-size: 14px; text-decoration: underline; text-underline-offset: 4px; }
.demo-tag { display: inline-block; background: #2c283e; border: 1px solid #51486b; border-radius: 4px; padding: 5px 8px; color: #d0c6ff; font-size: 12px; }
.demo-tag--amber { color: #efc17c; background: #342b20; border-color: #675434; }
.demo-tag--green { color: #8ddcc4; background: #19312b; border-color: #345a4e; }
.demo-customer-facts,.demo-finance-facts { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; padding: 20px 0; border-block: 1px solid #45414f; margin-bottom: 24px; }
.demo-customer-facts small,.demo-finance-facts small { display: block; font-size: 12px; color: #bcb8c9; margin-bottom: 12px; }
.demo-customer-facts b { font-size: 15px; font-weight: 550; }
.demo-finance-facts b { font-size: clamp(20px,2.1vw,28px); font-family: var(--display); }
.demo-customer-history ol { list-style: none; padding-left: 18px; border-left: 1px solid #696074; display: grid; gap: 22px; }
.demo-customer-history small { display: block; color: #c1b4ee; font-size: 12px; margin-bottom: 8px; }
.demo-customer-history p { font-size: 14px; line-height: 1.6; }
.demo-related { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.demo-knowledge-layout { display: grid; grid-template-columns: 135px minmax(0,1fr); gap: 20px; }
.demo-knowledge-nav { display: grid; align-content: start; gap: 6px; }
.demo-knowledge-nav button { padding: 12px 10px; border-radius: 5px; text-align: left; font-size: 13px; }
.demo-knowledge-nav button[aria-pressed="true"] { background: #3a314f; color: #dfd0ff; }
.demo-knowledge-sheet { background: #1d1b24; border: 1px solid #45414f; border-radius: 6px; padding: 22px; }
.demo-knowledge-sheet h4 { font-size: 21px; line-height: 1.3; margin: 20px 0; }
.demo-knowledge-sheet p,.demo-knowledge-sheet li { font-size: 14px; line-height: 1.7; }
.demo-knowledge-sheet ul { display: grid; gap: 10px; padding-left: 18px; margin-top: 20px; }
.demo-invoices { width: 100%; min-width: 520px; border-collapse: collapse; margin: 0; font-size: 13px; }
.demo-invoices th { color: #bcb8c9; font-size: 12px; font-weight: 500; text-align: left; }
.demo-invoices th,.demo-invoices td { padding: 14px 10px; border-bottom: 1px solid #45414f; }
.demo-invoice-detail { border: 1px solid #45414f; margin-top: 24px; border-radius: 6px; }
.demo-invoice-detail summary { display: flex; justify-content: space-between; gap: 12px; cursor: pointer; padding: 18px; font-size: 14px; }
.demo-invoice-detail > div { padding: 0 18px 18px; font-size: 14px; line-height: 1.7; }
.demo-invoice-detail h4 { margin: 20px 0; font-size: 20px; }
.demo-event-dialog { margin: auto; border: 1px solid #716779; border-radius: 12px; background: #19171e; color: #f4f1ea; width: min(560px,calc(100% - 36px)); max-height: calc(100dvh - 40px); overflow: auto; padding: 24px; color-scheme: dark; }
.demo-event-dialog::backdrop { background: #07060dba; }
.demo-dialog-bar { display: flex; justify-content: space-between; gap: 20px; align-items: center; padding-bottom: 20px; border-bottom: 1px solid #45414f; margin-bottom: 24px; font-size: 13px; }
#demo-event-detail h3 { font-size: 28px; line-height: 1.2; margin: 20px 0 24px; }
#demo-event-detail dl { display: grid; gap: 16px; }
#demo-event-detail dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 20px; padding-bottom: 16px; border-bottom: 1px solid #45414f; font-size: 14px; line-height: 1.65; }
#demo-event-detail dt { color: #bcb8c9; }
.preis-einrichtung { display: grid; grid-template-columns: .85fr 1.15fr; gap: 36px; border-block: 1px solid #686171; padding: 32px 0; margin: 32px 0; }
.preis-einstieg { font: 650 clamp(40px,4.3vw,60px)/1.15 var(--display); margin-top: 20px; }
.preis-einstieg small { font: 450 24px/1.2 var(--text); }
.preis-einstieg span { display: block; font: 400 15px/1.5 var(--text); color: #c8c3cf; margin-top: 12px; }
.preis-einrichtung h3 { font-size: 27px; margin-bottom: 20px; }
.preis-einrichtung p:not(.preis-einstieg) { font-size: 16px; line-height: 1.7; }
.preis-einrichtung .demo-muted { margin-top: 16px; }
.lizenz-kopf h3 { font-size: 28px; margin-bottom: 20px; }
.lizenz-kopf p { max-width: 75ch; color: #c8c3cf; line-height: 1.7; }
.lizenz-raster { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px; margin-top: 28px; }
.lizenz { display: flex; flex-direction: column; padding: 24px 20px; border: 1px solid #595061; border-radius: 8px; background: #1d1b22; min-width: 0; }
.lizenz--team { border-color: #9384ef; background: #252132; }
.lizenz .preis-label { font-size: 13px; margin-bottom: 20px; }
.lizenz h4 { font: 600 clamp(22px,2.1vw,28px)/1.25 var(--display); }
.lizenz-personen { margin-top: 12px; color: #d6d0e1; font-size: 15px; }
.lizenz-wert { font: 600 clamp(36px,3.7vw,52px)/1.1 var(--display); margin: 28px 0 24px; }
.lizenz-wert span { display: block; font: 400 13px/1.5 var(--text); color: #c8c3cf; margin-top: 10px; }
.lizenz-wert + p { color: #c8c3cf; font-size: 14px; line-height: 1.7; margin-bottom: 28px; }
.lizenz .knopf { margin-top: auto; width: 100%; font-size: 13px; gap: 10px; }
.lizenz-erweiterung { font-size: 15px; line-height: 1.7; margin: 24px 0 32px; color: #c8c3cf; }
.lizenz-erweiterung a { color: #cec4ff; text-underline-offset: 4px; }
@media(min-width:1400px) { .demo-scroll-hint { display: none; } }
@media(max-width:760px) {
 .demo-heading { align-items: flex-start; }
 .arbeitsplatz-ansicht { padding: 24px 14px; }
 .arbeitsplatz-panel .demo-heading h3 { font-size: 25px; }
 #demo-events { grid-template-columns: 1fr; }
 .demo-calendar-controls { align-items: flex-start; flex-direction: column; }
 .demo-month-nav { gap: 8px; }
 .demo-month-nav strong { min-width: 120px; font-size: 14px; }
 .demo-day { min-height: 76px; }
 .demo-board { min-width: 760px; }
 .demo-customer-facts { grid-template-columns: 1fr; gap: 20px; }
 .demo-customer-facts small { margin-bottom: 6px; }
 .demo-finance-facts { grid-template-columns: 1fr; }
 .demo-finance-facts > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
 .demo-finance-facts small { margin: 0; }
 .demo-knowledge-layout { grid-template-columns: 1fr; }
 .demo-knowledge-nav { grid-template-columns: 1fr; }
 .demo-knowledge-sheet { padding: 18px; }
 .demo-documents summary { gap: 10px; }
 .demo-documents summary b { font-size: 14px; }
 .demo-documents summary small { font-size: 11px; }
 #demo-event-detail dl > div { grid-template-columns: 1fr; gap: 6px; }
 .preis-einrichtung { grid-template-columns: 1fr; gap: 32px; }
 .lizenz-raster { grid-template-columns: 1fr; }
 .lizenz { padding: 26px 22px; }
 .lizenz h4 { font-size: 28px; }
 .lizenz-wert { font-size: 48px; }
}

/* Wechselnde Empfehlungen: gemeinsame Flächen, ruhige Schrift und bedienbare Auswahl. */
.highlight-card { grid-template-rows: auto 1fr auto auto; gap: 24px; min-width: 0; }
.highlight-card header p { color: var(--paper-soft); margin-top: 16px; font-size: 15px; line-height: 1.6; }
.highlight-panels { display: grid; min-width: 0; }
.highlight-panel { grid-area: 1 / 1; display: grid; grid-template-rows: auto auto minmax(80px,auto) 224px auto auto; align-content: start; min-width: 0; visibility: hidden; opacity: 0; transition: opacity 240ms ease; pointer-events: none; }
.highlight-panel.is-active { opacity: 1; visibility: visible; pointer-events: auto; }
.highlight-status { color: #bbb6ff; font-size: 12px; line-height: 1.5; margin-bottom: 20px; }
.highlight-panel h4 { font: 600 clamp(23px,2.3vw,29px)/1.2 var(--display); margin: 0 0 16px; min-height: 2.4em; }
.highlight-description { color: var(--paper-soft); font-size: 15px; line-height: 1.65; }
.highlight-scene { display: grid; align-content: center; justify-items: center; padding-block: 18px; min-width: 0; color: var(--paper); }
.highlight-scene svg { display: block; width: 100%; max-width: 310px; max-height: 204px; overflow: visible; }
.highlight-scene svg text { font: 16px var(--text); fill: var(--paper); text-anchor: middle; }
.highlight-scene svg .links { text-anchor: start; }
.highlight-scene svg .gross { font-size: 26px; }
.highlight-scene svg .akzent { fill: #d8f24b; }
.highlight-scene svg .route,.highlight-scene svg .ring { fill: none; stroke: #807d8b; stroke-width: 1.5; }
.highlight-scene svg .ring { opacity: .5; }
.highlight-scene svg .flaeche,.highlight-scene svg .tisch { fill: #25223b; stroke: #a8a0ff; stroke-width: 1.5; }
.highlight-scene svg .papier { fill: #17171c; stroke: #9a97a3; stroke-width: 1.5; }
.highlight-scene svg .agent { fill: #9e95ff; }
.highlight-scene svg .treffer { fill: #d8f24b; }
.highlight-scene svg .rest { fill: #75727c; }
.highlight-scene svg .strahl { fill: #d8f24b; opacity: .18; transform-origin: 0 0; animation: highlight-radar 4s linear infinite; }
.highlight-scene .bild-legende { font-size: 12px; color: var(--paper-soft); margin-top: 8px; }
.highlight-example { color: #aaa6b1; font-size: 12px; margin: 12px 0 20px; }
.highlight-link { align-self: end; display: flex; justify-content: space-between; gap: 16px; color: #d8f24b; font-size: 16px; font-weight: 600; text-decoration: none; min-height: 44px; align-items: center; }
.highlight-link:hover { text-decoration: underline; }
.highlight-controls { display: flex; align-items: center; gap: 8px; border-top: 1px solid var(--line-strong); padding-top: 16px; }
.highlight-controls[hidden] { display: none; }
.highlight-controls button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border: 1px solid #5b5664; border-radius: 7px; color: var(--paper); padding: 8px 12px; }
.highlight-controls button:hover { background: #2c283d; }
.highlight-controls button:focus-visible,.highlight-card a:focus-visible { outline: 2px solid #d8f24b; outline-offset: 3px; }
.highlight-controls [data-pause] { margin-left: auto; gap: 8px; font-size: 13px; }
.highlight-controls [data-counter] { font: 13px var(--text); color: var(--paper-soft); font-variant-numeric: tabular-nums; min-width: 50px; text-align: center; }
.highlight-card .start-weiter { font-size: 14px; min-height: 44px; }
.highlight-trainer { display: grid; grid-template-columns: minmax(80px,140px) minmax(0,1fr); gap: 14px; align-items: center; width: 100%; }
.highlight-trainer .trainer-portrait { width: 100%; max-height: 150px; }
.highlight-trainer .trainer-zitat { font: 600 22px/1.3 var(--display); margin-bottom: 16px; }
.highlight-trainer .trainer-du,.highlight-trainer .trainer-feedback { font-size: 13px; line-height: 1.6; }
.highlight-trainer .trainer-feedback { margin-top: 14px; color: #d8f24b; }
.highlight-trainer .trainer-ton { animation: highlight-voice 1.2s ease-in-out infinite alternate; }
.highlight-trainer .trainer-ton:nth-last-child(2n) { animation-delay: 400ms; }
.highlight-doku { display: flex; align-items: center; justify-content: center; gap: 5px; height: 50px; width: 85%; }
.highlight-doku i { display: block; flex: 1; height: var(--bar); background: #bbb6ff; border-radius: 2px; transform-origin: center; animation: highlight-voice 1.2s ease-in-out var(--delay) infinite alternate; }
.highlight-note { margin-top: 22px; display: grid; gap: 12px; width: 100%; border-left: 2px solid #bcb5ff; padding: 12px 18px; background: #201e2b; font-size: 13px; }
.highlight-note span { color: #bbb7c5; }
.highlight-note span:last-child { color: #d8f24b; }
.highlight-scene svg .agent,.highlight-scene svg .wissens-zeile,.highlight-scene .bild-agency .flaeche,.highlight-scene .bild-aufmass .flaeche { animation: highlight-glow 3s ease-in-out infinite; }
.highlight-scene * { animation-play-state: paused !important; }
.highlight-card[data-motion="running"] .is-active .highlight-scene * { animation-play-state: running !important; }
@keyframes highlight-radar { to { transform: rotate(360deg); } }
@keyframes highlight-voice { from { opacity: .45; transform: scaleY(.5); } to { opacity: 1; transform: scaleY(1); } }
@keyframes highlight-glow { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@media(max-width:760px) {
 .highlight-card { gap: 22px; }
 .highlight-panel { grid-template-rows: auto auto minmax(108px,auto) 224px auto auto; }
 .highlight-trainer { grid-template-columns: 88px minmax(0,1fr); }
 .highlight-trainer .trainer-zitat { font-size: 21px; }
}
@media(prefers-reduced-motion:reduce) { .highlight-panel { transition: none; } .highlight-scene * { animation: none !important; } }

/* Konkrete Wechselwege: Die vorhandene Vorschau öffnet den passenden Bereich. */
.ersetzt-raster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin-top: 36px; }
.ersetzt-raster article { display: flex; flex-direction: column; align-items: flex-start; border-top: 2px solid #7066a6; padding-top: 24px; }
.ersetzt-label { color: #55498a; font-size: 14px; font-weight: 650; margin-bottom: 24px; }
.ersetzt-raster h3 { font-size: clamp(24px,2.3vw,30px); margin-bottom: 18px; }
.ersetzt-raster article > p:not(.ersetzt-label) { font-size: 16px; line-height: 1.75; color: #444951; margin-bottom: 22px; }
.ersetzt-link { margin-top: auto; min-height: 44px; padding-block: 10px; color: #403374; font-weight: 650; text-align: left; text-decoration: underline; text-underline-offset: 5px; }
.ersetzt-link:hover { color: #191520; }
.ersetzt-link:focus-visible { outline: 2px solid #594991; outline-offset: 4px; }
.ersetzt-hinweis { margin-top: 24px; color: #57565d; font-size: 13px; line-height: 1.65; max-width: 80ch; }
.server-stand { color: #55498a; font-size: 14px; font-weight: 600; margin-bottom: 24px; }
@media(max-width:700px) { .ersetzt-raster { grid-template-columns: 1fr; gap: 28px; } }

/* Rechnungen im Zusammenhang: feste Beispielwerte statt dekorativer Diagramme. */
.highlight-finance { width: 100%; max-width: 390px; font-variant-numeric: tabular-nums; }
.finance-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 16px; }
.finance-totals span { display: block; color: #bdb8c8; font-size: 12px; margin-bottom: 8px; }
.finance-totals strong { font: 600 clamp(25px,2.7vw,34px)/1.2 var(--display); }
.finance-totals > div:first-child strong { color: #a6debd; }
.finance-totals > div:last-child strong { color: #f0ce85; }
.finance-list { font-size: 13px; }
.finance-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 11px 0; border-top: 1px solid #4e4858; }
.finance-list dt { color: #d4cedd; }
.finance-list dd { text-align: right; }
.finance-paid { color: #a6debd; }
.finance-open { color: #f0ce85; }
.finance-paid i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: currentColor; margin-right: 7px; animation: highlight-glow 3s ease-in-out infinite; }

/* Gemeinsame Basis, getrennt wählbare Teamgröße und Spezialbereiche. */
.basis-umfang { margin-bottom: 44px; }
.basis-umfang h3 { font-size: 28px; margin-bottom: 26px; }
.basis-gruppen { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 28px; }
.basis-gruppen h4 { font: 600 22px/1.25 var(--display); margin-bottom: 12px; }
.basis-gruppen p, .preis-erklaerung { color: #c8c3cf; font-size: 16px; line-height: 1.75; }
.basis-werkzeuge { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 28px; list-style: none; padding: 24px 0; margin-top: 28px; border-block: 1px solid #4b4654; }
.basis-werkzeuge li { display: flex; gap: 12px; font-size: 15px; line-height: 1.6; }
.basis-werkzeuge li::before { content: '✓'; color: #d8f24b; }
.preis-auswahl { border: 0; padding: 0; margin: 0; min-width: 0; }
.preis-auswahl legend { float: none; width: 100%; font: 600 clamp(24px,2.5vw,30px)/1.25 var(--display); padding: 0; margin-bottom: 20px; }
.preis-erklaerung { max-width: 80ch; }
.preis-option { cursor: pointer; }
.preis-option:hover { border-color: #b6aae5; }
.preis-option:has(input:checked) { border-color: #a79aff; background: #292438; }
.preis-option:has(input:focus-visible) { outline: 2px solid #d8f24b; outline-offset: 4px; }
.preis-waehlen { display: flex; align-items: center; gap: 12px; min-height: 32px; font: 600 clamp(21px,2.1vw,27px)/1.3 var(--display); }
.preis-waehlen input { appearance: auto; flex: 0 0 20px; width: 20px; height: 20px; margin: 0; accent-color: #a99aff; cursor: pointer; }
.preis-option-text { display: block; color: #d5cedf; font-size: 15px; line-height: 1.7; }
.preis-zusatz { margin-top: 44px; }
.zusatz-raster { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; margin-top: 28px; }
.zusatz-option { display: flex; flex-direction: column; gap: 18px; padding: 24px; border: 1px solid #595061; border-radius: 8px; background: #1d1b22; min-width: 0; }
.zusatz-zweck { color: #c8bef5; font-size: 14px; line-height: 1.6; }
.zusatz-preis { display: flex; flex-wrap: wrap; gap: 16px 32px; border-top: 1px solid #595061; padding-top: 20px; margin-top: auto; }
.zusatz-preis b { font-size: 21px; font-weight: 600; font-variant-numeric: tabular-nums; }
.zusatz-preis small { display: block; color: #c8c3cf; font-size: 13px; font-weight: 400; margin-top: 6px; }
.zusatz-fuss { font-size: 14px; margin-top: 24px; }
.preis-summe { margin: 36px 0; padding: clamp(22px,3vw,36px); background: #f4f1ea; color: #17191d; border-radius: 8px; }
.preis-summe[hidden], .preis-vormerkung[hidden] { display: none; }
.preis-summe h3 { font-size: clamp(26px,2.8vw,34px); margin-bottom: 18px; }
.preis-summe [data-price-selection] { color: #4d4754; font-size: 16px; line-height: 1.7; }
.preis-gesamt { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin: 28px 0 24px; }
.preis-gesamt span { display: block; color: #4d4754; font-size: 14px; line-height: 1.5; margin-bottom: 16px; }
.preis-gesamt strong { display: block; font: 650 clamp(35px,4vw,52px)/1.15 var(--display); font-variant-numeric: tabular-nums; }
.preis-rechnung, .preis-vormerkung { font-size: 14px; line-height: 1.75; color: #4d4754; }
.preis-vormerkung { margin-top: 16px; padding-top: 16px; border-top: 1px solid #bfb7c8; }
.preis-summe-aktion { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 28px; }
.preis-summe-aktion > span { color: #4d4754; font-size: 13px; }
.preis-ohne-js { padding: 24px 0; }
.preis-ohne-js a { text-decoration: underline; }
@media(max-width:760px) {
 .basis-gruppen, .zusatz-raster { grid-template-columns: 1fr; }
 .basis-gruppen { gap: 24px; }
 .basis-werkzeuge { grid-template-columns: 1fr; }
 .preis-waehlen { font-size: 25px; }
 .preis-option .lizenz-wert { margin: 22px 0 18px; }
 .zusatz-option { padding: 24px 20px; }
 .preis-gesamt { grid-template-columns: 1fr; gap: 26px; }
 .preis-summe-aktion .knopf { width: 100%; }
}

/* Alle Arbeitsbereiche bleiben im Einstieg lesbar, auch auf schmalen Geräten. */
.arbeitsplatz-bereiche { color: #4a5058; font-size: clamp(14px,1.4vw,16px); line-height: 1.7; margin: 20px 0; }
.arbeitsplatz-vertiefung { margin-top: 28px; border-top: 1px solid var(--auf-papier-line); }
.arbeitsplatz-vertiefung > summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 0; cursor: pointer; list-style: none; }
.arbeitsplatz-vertiefung > summary::-webkit-details-marker { display: none; }
.arbeitsplatz-vertiefung > summary b { display: block; font: 600 clamp(20px,2vw,24px)/1.3 var(--display); }
.arbeitsplatz-vertiefung > summary small { display: block; margin-top: 8px; color: #57565d; font-size: 14px; line-height: 1.6; }
.arbeitsplatz-vertiefung > summary:focus-visible { outline: 2px solid #594991; outline-offset: 6px; }
.vertiefung-zeichen { color: #55498a; font: 400 30px/1 var(--text); }
.vertiefung-zeichen::before { content: '+'; }
.arbeitsplatz-vertiefung[open] > summary .vertiefung-zeichen::before { content: '−'; }

/* Tarifmengen bleiben ohne JavaScript lesbar; Details öffnen sich nativ. */
.lizenz-kontingent { display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #595061; padding-top: 22px; margin-top: 24px; font-size: 14px; line-height: 1.6; color: #d5cedf; }
.kontingent-status { color: #d8f24b; font-size: 13px; }
.lizenz-kontingent strong { color: #f4f1ea; font: 600 27px/1.3 var(--display); margin-top: 8px; }
.lizenz-kontingent small { font-size: 13px; color: #c8c3cf; }
.ki-kontingente { padding: 32px 0; border-block: 1px solid #595061; scroll-margin-top: 110px; }
.ki-kontingente h3 { font-size: clamp(25px,2.6vw,32px); line-height: 1.3; margin-bottom: 20px; }
.kontingent-regeln { margin: 28px 0; }
.kontingent-regeln > div { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,2fr); gap: 24px; padding: 20px 0; border-top: 1px solid #45414f; }
.kontingent-regeln dt { color: #f4f1ea; font-size: 17px; font-weight: 600; line-height: 1.6; }
.kontingent-regeln dd, .kontingent-details { color: #d5cedf; font-size: 15px; line-height: 1.75; }
.kontingent-details summary { cursor: pointer; color: #cec4ff; padding: 12px 0; font-weight: 600; }
.kontingent-details summary:focus-visible { outline: 2px solid #d8f24b; outline-offset: 5px; }
.kontingent-details p { margin-top: 20px; max-width: 80ch; }
.kontingent-details table { width: 100%; margin: 28px 0; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
.kontingent-details caption { text-align: left; color: #f4f1ea; margin-bottom: 16px; font-weight: 600; }
.kontingent-details th, .kontingent-details td { text-align: right; padding: 14px 10px; border-bottom: 1px solid #595061; }
.kontingent-details th:first-child { text-align: left; padding-left: 0; }
.kontingent-details th:last-child, .kontingent-details td:last-child { padding-right: 0; }
.kontingent-details thead span { font-weight: 400; }
@media(max-width:760px) {
 .kontingent-regeln > div { grid-template-columns: 1fr; gap: 10px; }
 .kontingent-details table { font-size: 12px; }
 .kontingent-details th, .kontingent-details td { padding: 12px 4px; }
 .kontingent-details th:first-child { overflow-wrap: anywhere; }
}

/* Die Meeting-Welt steht vor den sechs weiteren optionalen Bausteinen. */
.zusatz-option--welt { grid-column: 1 / -1; }
.zusatz-option--welt .preis-option-text { max-width: 70ch; }

.vead-aussage { margin-bottom: 32px; }
.vead-aussage h2 { max-width: 30ch; }
.vead-aussage .lead { max-width: 70ch; }