/*
 * Live-Demo (/live-demo und /live-demo/login) — und seit dem 27.09.2026 die
 * Startseite und die vier Produktseiten, die dieselben Klassen tragen (Wrapper
 * "kaplai-demo kaplai-demo-home" bzw. "kaplai-demo kaplai-demo-product"; dort nur
 * dieses Stylesheet, ohne demo.js).
 *
 * Die Seiten bestehen aus Core-Blöcken (Vorlagen in services/live_demo_patterns.php)
 * plus fünf Blöcken des Plugins (blocks/live-demo-*). Dieses Stylesheet hängt an
 * den CSS-Klassen, die die Vorlage den Blöcken mitgibt („Zusätzliche CSS-Klasse“
 * im Editor) — wer eine Gruppe im Editor entfernt oder umbenennt, verliert
 * deren Gestaltung, nicht die Seite. Geladen im Theme (nie kaplai-base) auf jeder
 * Seite mit Demo-Markup und im Block-Editor (services/live_demo_blocks.php).
 *
 * Farben und Maße stammen aus der Astra-Palette der Website
 * (--ast-global-color-*), damit die Demo-Seiten neben den Marketing-Seiten
 * nicht wie ein Fremdkörper wirken; die Hex-Werte dahinter sind nur der
 * Rückfall, falls das Theme einmal ein anderes ist:
 *
 *   0 #046bd2 Akzent/Links · 1 #045cb4 · 2 #1e293b Überschriften
 *   3 #334155 Fließtext · 4 #ffffff · 5 #F0F5FA Flächen · 7 #D1D5DB Linien
 *
 * Abstände zwischen den Blöcken setzt WordPress über den Block-Abstand der
 * Gruppen (:where-Regeln ohne Spezifität); jede Regel hier gewinnt dagegen.
 * Die Trennlinien zwischen den Abschnitten sind echte Separator-Blöcke wie
 * auf den Marketing-Seiten (kurz, zentriert, Akzentfarbe, 60 px Luft).
 */

.kaplai-demo {
  --kd-accent: var(--ast-global-color-0, #046bd2);
  --kd-accent-hover: #03539e;
  --kd-accent-soft: #eaf2fc;
  --kd-heading: var(--ast-global-color-2, #1e293b);
  --kd-ink: var(--ast-global-color-3, #334155);
  --kd-line: var(--ast-global-color-7, #d1d5db);
  --kd-surface: var(--ast-global-color-4, #ffffff);
  --kd-surface-2: var(--ast-global-color-5, #f0f5fa);
  color: var(--kd-ink);
}

.kaplai-demo h2, .kaplai-demo h3, .kaplai-demo h4 { color: var(--kd-heading); }
/* Abschnittsüberschrift = "has-medium-font-size" der Website (20 px, 700). */
.kaplai-demo h2 { font-size: 18px!important; margin-top:24px!important; margin-bottom:0px!important;}
.kaplai-demo h3 { font-size: 20px; font-weight: 700; margin: 0; line-height: 1.35; }
.kaplai-demo h4 { font-size: 18px; font-weight: 700; margin: 0; line-height: 1.35; }
.kaplai-demo p { margin: 0; }
.kaplai-demo p + p { margin-top: 20px; }
.kaplai-demo ul, .kaplai-demo ol { margin: 14px 0 0; padding-left: 22px; }
.kaplai-demo li + li { margin-top: 8px; }
.kaplai-demo strong { font-weight: 700; }
.kaplai-demo h3 + p, .kaplai-demo h3 + ul, .kaplai-demo h3 + ol, .kaplai-demo h3 + .wp-block-columns { margin-top: 14px; }

.kaplai-demo-greeting{
  margin-block-start:20px!important;
}

.kaplai-demo .swpm-remember-me {
  display:none;
}
.kaplai-demo .swpm-login-submit {
  margin-top:40px;
}

.kaplai-demo-eyebrow {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kd-accent);
  margin: 0 0 8px;
}
.kaplai-demo-eyebrow + h2, .kaplai-demo-eyebrow + h3 { margin-top: 0; }
/* Wie die Seitentitel der Website (h2_startseite: 30 px, Zeilenhöhe 42 px). */
.kaplai-demo-title { margin-bottom: 20px;}
.kaplai-demo-lede { margin-top: 16px;}
.kaplai-demo-meta { margin-top: 12px; }
.kaplai-demo-meta a { margin-left: 8px; }
.kaplai-demo-meta a:first-child { margin-left: 0; }
.kaplai-demo-meta a + a { margin-left: 16px; }
.kaplai-demo-caption { font-size: 14px; margin-top: 12px;}
.kaplai-demo-admin-note { font-size: 14px; color: var(--kd-accent-hover); }
.kaplai-demo-block-note { font-size: 14px; color: var(--kd-ink); background: var(--kd-surface-2); border: 1px dashed var(--kd-line); padding: 12px 14px; }

/* Schaltflächen: Core-Buttons trägt das Theme (blau, 4 px Radius); die
   Outline-Variante und die eigenen Buttons der Plugin-Blöcke ziehen nach. */
.kaplai-demo .wp-block-buttons { gap: 14px; }
.kaplai-demo .kaplai-demo-cta { margin-top: 26px; }
.kaplai-demo .is-style-outline .wp-block-button__link {
  background: var(--kd-surface);
  border: 1px solid var(--kd-accent);
  color: var(--kd-accent);
  padding: 13px 27px;
}
/* Astra colours the label of a focused outline button white, but its own rule
   "background transparent" outranks its focus background - a link that keeps the focus
   after its click (new tab, anchor on the page) shows white on white until the next click
   elsewhere. Focus left over from a mouse click looks like the button at rest (Astra
   leaves its background transparent, without its dotted focus outline); hover and
   keyboard focus get the filled look the theme shows on hover. Five classes, so these
   rules outrank Astra's. */
.kaplai-demo .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus:not(:focus-visible):not(:hover) {
  background-color: transparent;
  border-color: var(--kd-accent);
  color: var(--kd-accent);
  outline: none;
}
.kaplai-demo .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:hover,
.kaplai-demo .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background-color: var(--kd-accent-hover);
  border-color: var(--kd-accent-hover);
  color: #fff;
}
.kaplai-demo .wp-block-buttons .wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  outline: 2px solid var(--kd-accent-hover);
  outline-offset: 2px;
}
.kaplai-demo-btn {
  display: inline-block;
  padding: 14px 28px;
  border: 1px solid var(--kd-accent);
  border-radius: 4px;
  background: var(--kd-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  text-decoration: none!important;
  cursor: pointer;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
.kaplai-demo-btn:hover, .kaplai-demo-btn:focus {
  background: var(--kd-accent-hover);
  border-color: var(--kd-accent-hover);
  color: #fff;
}
.kaplai-demo-btn:focus-visible { outline: 2px solid var(--kd-accent-hover); outline-offset: 2px; }
.kaplai-demo-link { color: var(--kd-accent); text-decoration: underline; text-underline-offset: 2px; }
.kaplai-demo-link:hover { color: var(--kd-accent-hover); }

/* Zweispaltige Abschnitte sind Spalten-Blöcke; nur der Abstand ist eigen. */
.kaplai-demo .wp-block-columns.kaplai-demo-section { gap: 40px; }
.kaplai-demo .wp-block-columns .wp-block-column > * + * { margin-top: 14px; }

/* Gebäudeschnitt */
.kaplai-demo-building { width: 100%; height: auto; display: block; max-width: 640px; margin-left: auto; margin-right: auto; }
.kaplai-demo-building .kd-wall { fill: var(--kd-surface); stroke: var(--kd-heading); stroke-width: 1.5; }
.kaplai-demo-building .kd-roof { fill: var(--kd-surface-2); stroke: var(--kd-heading); stroke-width: 1.5; }
.kaplai-demo-building .kd-floor { stroke: var(--kd-line); stroke-width: 1; }
.kaplai-demo-building .kd-ground { stroke: var(--kd-heading); stroke-width: 1.5; }
.kaplai-demo-building .kd-basement { fill: var(--kd-surface-2); stroke: var(--kd-ink); stroke-width: 1; stroke-dasharray: 4 3; }
.kaplai-demo-building .kd-window { fill: var(--kd-surface-2); stroke: var(--kd-line); stroke-width: 1; }
.kaplai-demo-building .kd-flat { fill: var(--kd-accent-soft); stroke: var(--kd-accent); stroke-width: 1.5; }
.kaplai-demo-building .kd-label { fill: var(--kd-heading); font-size: 14px; }
.kaplai-demo-building .kd-label-strong { font-weight: 700; }
.kaplai-demo-building .kd-label-small { font-size: 14px; fill: var(--kd-ink); }
.kaplai-demo-building .kd-label-floor { fill: var(--kd-ink); font-size: 14px; }
.kaplai-demo-building .kd-label-temp { font-size: 20px; font-weight: 700; fill: var(--kd-accent); }
.kaplai-demo-steps li::marker { font-weight: 700; color: var(--kd-accent); }

/* Ablauf in vier Schritten: ein Spalten-Block mit vier Spalten */
.kaplai-demo .kaplai-demo-flow-steps { gap: 20px; margin-top: 24px; }
.kaplai-demo .kaplai-demo-flow-steps .wp-block-column { padding-top: 16px; border-top: 2px solid var(--kd-line); }
.kaplai-demo .kaplai-demo-flow-steps .wp-block-column > * + * { margin-top: 6px; }
.kaplai-demo-flow-no { font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--kd-accent); margin: 0; }
.kaplai-demo-flow-title { color: var(--kd-heading); }

/* Rollenkarte: eine Gruppe mit Eyebrow, Überschrift, Rollenliste, Sprechtext,
   im Loginbereich zusätzlich Ablauf, Ergebnis und Aktion */
.kaplai-demo-act {
  background: var(--kd-surface);
  border: 1px solid var(--kd-line);
  border-top: 3px solid var(--kd-accent);
  border-radius: 4px;
  padding: 18px 22px 22px;
  height: 100%;
  box-sizing: border-box;
}
.kaplai-demo-act > * + * { margin-top: 14px; }
.kaplai-demo-act > .kaplai-demo-eyebrow { margin-bottom: 4px; }
.kaplai-demo-act > h3 { margin-top: 0; }
.kaplai-demo-role {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 18px;
}
.kaplai-demo-role dt { font-size: 14px; padding-top: 3px; }
.kaplai-demo-role dd { margin: 0; color: var(--kd-heading); }
.kaplai-demo-contract,
.kaplai-demo-pin {
  font-family: Consolas, "Courier New", monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-right: 10px;
}
/* PIN of the phone act (stage 2): typed on the keypad, never spoken. */
.kaplai-demo-pin-hint { font-size: 14px; color: var(--kd-ink); }
/* The role block before the visitor's slot is known (block kaplai/live-demo-role). */
.kaplai-demo-contract.is-pending { font: inherit; font-size: 14px; color: var(--kd-ink); opacity: .7; }
.kaplai-demo-slot-note { font-size: 14px; color: var(--kd-ink); margin: 6px 0 0; }
.kaplai-demo-say { background: var(--kd-surface-2); padding: 14px 16px; border-radius: 4px; }
.kaplai-demo-say > * + *, .kaplai-demo-act-block > * + * { margin-top: 6px; }
.kaplai-demo-say-label {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kd-accent);
  margin: 0;
}
.kaplai-demo-say-text { font-style: italic; }
.kaplai-demo-act-block .kaplai-demo-say-label { color: var(--kd-ink); }
.kaplai-demo-act-result p:last-child {
  background: var(--kd-accent-soft);
  border-left: 3px solid var(--kd-accent);
  padding: 12px 14px;
  border-radius: 0 4px 4px 0;
}
.kaplai-demo .kaplai-demo-act-action { margin-top: 18px; }

/* Loginbereich: Kanäle (Plugin-Block) und Akte (Spalten-Block) */
.kaplai-demo-channels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.kaplai-demo-channel {
  background: var(--kd-surface-2);
  border-radius: 4px;
  padding: 20px 22px 22px;
  display: grid;
  gap: 10px;
  align-content: start;
}
/* Die drei Kanal-Links (Chat, Telefon, E-Mail) sehen gleich aus: schwarz, beim
   Überfahren die Link-Hover-Farbe der Website, nie unterstrichen. */
.kaplai-demo-phone, .kaplai-demo-email, .kaplai-demo-channel-big {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  color: #000;
  text-decoration: none!important;
  word-break: break-word;
  margin: 0;
}
.kaplai-demo-phone:hover, .kaplai-demo-email:hover, .kaplai-demo-channel-big:hover,
.kaplai-demo-phone:focus, .kaplai-demo-email:focus, .kaplai-demo-channel-big:focus {
  color: var(--kd-accent-hover);
}
.kaplai-demo .wp-block-columns.kaplai-demo-acts { gap: 20px; }
/* Play area, cards side by side (since 27.09.2026): the blocks of the three role cards
   line up row by row - eyebrow, heading, role list, say box, "Was passiert", result and
   button each start at the same height in every card, whatever the text above them
   (the phone card's role list has an extra PIN line). The columns block becomes a grid,
   column and card are subgrids of its rows, so each row is as tall as its tallest block.
   Twelve rows leave room for blocks the operator adds in the editor; rows nobody uses
   collapse to 0. The empty ::after sits in the last row of every card and carries the
   card's bottom padding there - a subgrid's padding is only applied to items in its
   edge rows. The existing margins stay the spacing (row-gap 0). Not in the block
   editor: its block wrappers and appenders would become grid items too. */
@media (min-width: 782px) {
  .kaplai-demo-play .wp-block-columns.kaplai-demo-acts:not(.block-editor-block-list__block) {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    grid-template-rows: repeat(12, auto);
    row-gap: 0;
  }
  .kaplai-demo-play .kaplai-demo-acts:not(.block-editor-block-list__block) > .wp-block-column,
  .kaplai-demo-play .kaplai-demo-acts:not(.block-editor-block-list__block) .kaplai-demo-act {
    display: grid;
    grid-row: 1 / -1;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
  }
  .kaplai-demo-play .kaplai-demo-acts:not(.block-editor-block-list__block) .kaplai-demo-act::after {
    content: "";
    grid-row: -2 / -1;
  }
  /* The blue result box fills its row, so the three boxes end on one line as well. */
  .kaplai-demo-play .kaplai-demo-acts:not(.block-editor-block-list__block) .kaplai-demo-act-result {
    display: flex;
    flex-direction: column;
  }
  .kaplai-demo-play .kaplai-demo-acts:not(.block-editor-block-list__block) .kaplai-demo-act-result > p:last-child { flex-grow: 1; }
  /* A button row added in the editor lacks the class "kaplai-demo-act-action"; it gets
     that class's distance, otherwise its button sits 4 px above the others. */
  .kaplai-demo-play .kaplai-demo-acts:not(.block-editor-block-list__block) .kaplai-demo-act > .wp-block-buttons { margin-top: 18px; }
}
.kaplai-demo-notes ul { margin-top: 16px; }
.kaplai-demo-notes strong { color: var(--kd-heading); }
.kaplai-demo .kaplai-demo-next {
  margin-top: 48px;
  background: var(--kd-surface-2);
  border-top: 3px solid var(--kd-accent);
  border-radius: 4px;
  padding: 26px 30px 28px;
}
.kaplai-demo-next p { margin-top: 12px; }
.kaplai-demo-next .wp-block-buttons { margin-top: 18px; }

/* Homepage (wrapper "kaplai-demo kaplai-demo-home", since 27.09.2026): the product
   cards are role cards of unequal length - their button sits at the bottom, so the
   three line up. */
.kaplai-demo-home .kaplai-demo-act { display: flex; flex-direction: column; }
.kaplai-demo-home .kaplai-demo-act > .kaplai-demo-act-action { margin-top: auto; padding-top: 18px; }

/* Product pages (wrapper "kaplai-demo kaplai-demo-product", since 27.09.2026: KI-Voiceflows,
   KI-Textflows, KI-Workflows, E-Commerce). The diagram video under the hero buttons gets
   air, and a paragraph after a list, a box or a row of columns keeps the paragraph
   spacing - ".kaplai-demo p" resets every paragraph margin to 0. */
.kaplai-demo-product .kaplai-demo-hero > .wp-block-video { margin-top: 32px; }
.kaplai-demo-product .kaplai-demo-section > :is(ul, ol, .wp-block-columns, .wp-block-group) + p { margin-top: 20px; }
/* Grey boxes that start with their list (use cases), and two boxes side by side. */
.kaplai-demo .kaplai-demo-say > :is(ul, ol):first-child { margin-top: 0; }
.kaplai-demo .wp-block-columns.kaplai-demo-boxes { gap: 20px; }
.kaplai-demo .kaplai-demo-boxes .kaplai-demo-say { height: 100%; box-sizing: border-box; }
/* Long lists in two columns while the page is wide enough for columns at all. The item
   spacing sits below each item, so the second column starts flush with the first. */
@media (min-width: 782px) {
  .kaplai-demo .kaplai-demo-list-cols { columns: 2; column-gap: 40px; }
  .kaplai-demo .kaplai-demo-list-cols li { break-inside: avoid; margin-bottom: 8px; }
  .kaplai-demo .kaplai-demo-list-cols li + li { margin-top: 0; }
}

/* Gesperrter Loginbereich: eigenes Anmeldeformular neben dem Zugangshinweis */
.kaplai-demo-locked-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 32px; align-items: start; }
.kaplai-demo-login { background: var(--kd-surface-2); border-radius: 4px; padding: 24px 26px 26px; }
.kaplai-demo-login h3, .kaplai-demo-login-aside h3 { margin-bottom: 16px; }
.kaplai-demo-login-aside p { margin-top: 14px; }
/* SWPM-Formular: Die Demo hat keine Selbstregistrierung, der "Join Us"-Link entfällt. */
.kaplai-demo-login .swpm-login-form-register-link { display: none; }
.kaplai-demo-login .swpm-login-widget-form { max-width: none; }
.kaplai-demo-login .swpm-text-field { width: 100%; box-sizing: border-box; }

/* Zugang: aktiver Zugang bzw. Anfrageformular (Plugin-Block) */
.kaplai-demo-access-active > * + * { margin-top: 14px; }
.kaplai-demo-access-active h3 { margin-top: 38px; }
.kaplai-demo-form { display: grid; gap: 16px; background: var(--kd-surface-2); border-radius: 4px; padding: 24px 26px 26px; }
.kaplai-demo-field { display: grid; gap: 6px; }
.kaplai-demo-field label { font-size: 14px; font-weight: 700; color: var(--kd-heading); }
.kaplai-demo-field input, .kaplai-demo-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--kd-line);
  border-radius: 4px;
  font: inherit;
  background: var(--kd-surface);
  color: var(--kd-ink);
}
.kaplai-demo-field input:focus, .kaplai-demo-field textarea:focus { outline: 2px solid var(--kd-accent); outline-offset: 1px; border-color: var(--kd-accent); }
.kaplai-demo-field-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.kaplai-demo-consent { font-size: 14px; }
.kaplai-demo-form-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.kaplai-demo-form-status { font-size: 14px; }
.kaplai-demo-form-status.is-error { color: #b32d2e; }
.kaplai-demo-form-status.is-ok { color: var(--kd-accent); }
.kaplai-demo-form.is-sent .kaplai-demo-field,
.kaplai-demo-form.is-sent .kaplai-demo-consent,
.kaplai-demo-form.is-sent button { display: none; }

/* Fragen und Antworten (Details-Blöcke) */
.kaplai-demo-faq .wp-block-details { border-bottom: 1px solid var(--kd-line); padding: 16px 0; margin: 0; }
.kaplai-demo-faq h3 + .wp-block-details { margin-top: 14px; border-top: 1px solid var(--kd-line); }
.kaplai-demo-faq summary { cursor: pointer; font-weight: 700; color: var(--kd-heading); }
.kaplai-demo-faq summary:hover { color: var(--kd-accent); }
.kaplai-demo-faq .wp-block-details p { margin-top: 10px;}

@media (max-width: 921px) {
  .kaplai-demo-locked-grid { grid-template-columns: 1fr; gap: 28px; }
  .kaplai-demo-channels { grid-template-columns: 1fr; }
}
@media (max-width: 544px) {
  .kaplai-demo-title { font-size: 26px; }
}

.kaplai-demo ol li {
  padding-left: 5px!important;
}

/* Standardpunkte entfernen */
.kaplai-demo ul {
  list-style: none;
  padding-left: 25px;
}

/* Neues Symbol voranstellen */
.kaplai-demo ul li::before {
  content: "➤"; /* Hier dein Wunschsymbol einfügen (z. B. ➤, ➔, ✓) */
  color: #046bd2; /* Deine Wunschfarbe */
  font-weight: bold;
  display: inline-block; 
  width: 25px;
  margin-left: -25px;
}

/* Stand der Demo (Block kaplai/live-demo-status, Stufe 2): Akt-Chips, die letzten
   Vorgänge mit ihrer Rückmeldung, der Reset-Knopf. */
.kaplai-demo-status {
  background: var(--kd-surface-2);
  border: 1px solid var(--kd-line);
  border-radius: 4px;
  padding: 18px 22px 20px;
  margin-top: 20px;
}
.kaplai-demo-status-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.kaplai-demo-status-tools { display: inline-flex; align-items: center; gap: 10px; }
.kaplai-demo-status-updated { font-size: 13px; font-weight: 600; color: var(--kd-ink); opacity: 0.75; white-space: nowrap; }
/* The spinner next to the clicked button; the body dims while a request runs. */
.kaplai-demo-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid var(--kd-line);
  border-top-color: var(--kd-accent);
  border-radius: 50%;
  animation: kaplai-demo-spin 0.8s linear infinite;
  flex: 0 0 auto;
}
.kaplai-demo-spinner[hidden] { display: none; }
@keyframes kaplai-demo-spin { to { transform: rotate(360deg); } }
.kaplai-demo-status-body.is-busy { opacity: 0.55; pointer-events: none; transition: opacity 0.15s; }
.kaplai-demo-status-refresh[disabled] { opacity: 0.5; cursor: default; }
.kaplai-demo-status-head .kaplai-demo-eyebrow { margin-bottom: 0; }
.kaplai-demo-status-refresh, .kaplai-demo-status-reset {
  font-size: 14px;
  padding: 6px 14px;
  border: 1px solid var(--kd-accent);
  border-radius: 4px;
  background: var(--kd-surface);
  color: var(--kd-accent);
  cursor: pointer;
  line-height: 1.2;
}
.kaplai-demo-status-refresh:hover:not([disabled]), .kaplai-demo-status-reset:hover:not([disabled]) {
  background: var(--kd-accent);
  color: #fff;
}
.kaplai-demo-status-reset[disabled] { opacity: 0.5; cursor: default; }
.kaplai-demo-act-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.kaplai-demo-act-chip {
  font-size: 14px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid var(--kd-line);
  background: var(--kd-surface);
  color: var(--kd-ink);
}
.kaplai-demo-act-chip.is-done { background: var(--kd-accent); border-color: var(--kd-accent); color: #fff; }
.kaplai-demo-act-chip.is-next { border-color: var(--kd-accent); color: var(--kd-accent); }
.kaplai-demo-status-line { margin-top: 12px!important; font-weight: 600; color: var(--kd-heading); }
.kaplai-demo-status-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.kaplai-demo-status-table th, .kaplai-demo-status-table td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--kd-line);
  vertical-align: top;
}
.kaplai-demo-status-table th { font-weight: 600; color: var(--kd-heading); }
.kaplai-demo-status-id { font-family: Consolas, "Courier New", monospace; font-size: 13px; color: var(--kd-ink); }
/* The runs table keeps its columns from the bare header ("Wird geladen …") through every
   state of a run; sized by content they jumped with each step. Auto layout on purpose: a
   cell still grows past its share rather than break a word. */
.kaplai-demo-runs-table th:nth-child(1) { width: 15%; }
.kaplai-demo-runs-table th:nth-child(2) { width: 27%; }
@media (max-width: 544px) {
  .kaplai-demo-runs-table th:nth-child(1) { width: 27%; }
  .kaplai-demo-runs-table th:nth-child(2) { width: 40%; }
}
/* A run still in progress carries a small spinner next to its state; it goes with the
   poll that reads the run as finished. */
.kaplai-demo-run-status { font-weight: 600; color: var(--kd-heading); }
.kaplai-demo-run-state { display: inline-flex; align-items: center; gap: 8px; }
.kaplai-demo-run-state .kaplai-demo-spinner { width: 13px; height: 13px; }
/* The orders the process placed: firm, state, what for. */
.kaplai-demo-orders[hidden] { display: none; }
.kaplai-demo-orders-title { margin: 18px 0 0!important; font-size: 14px; font-weight: 600; color: var(--kd-heading); }
.kaplai-demo-orders-table { margin-top: 6px; }
.kaplai-demo-order-state { font-weight: 600; color: var(--kd-heading); }
.kaplai-demo-order-what { display: block; font-weight: 600; color: var(--kd-heading); }
.kaplai-demo-order-summary { display: block; color: var(--kd-ink); }
.kaplai-demo-status-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px; }
.kaplai-demo-status-note { font-size: 14px; }

/* Hinweise beim Öffnen des Loginbereichs (templates/demo/demo_intro.php, seit 03.10.2026):
   ein modaler Dialog im Footer. Er trägt selbst die Klasse "kaplai-demo", weil er außerhalb
   des Seiten-Wrappers liegt. Die eigenen Knöpfe setzen die Button-Gestaltung des Themes
   (blau gefüllt, auch bei :focus) ausdrücklich zurück. Gescrollt wird im Kasten, nicht im
   Dialog: Ein Klick auf dessen Scrollleiste träfe sonst den Dialog und schlösse ihn. */
.kaplai-demo-intro {
  box-sizing: border-box;
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 1px solid var(--kd-line);
  border-top: 3px solid var(--kd-accent);
  border-radius: 4px;
  background: var(--kd-surface);
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}
.kaplai-demo-intro[open] { display: flex; flex-direction: column; }
.kaplai-demo-intro::backdrop { background: rgba(15, 23, 42, 0.55); }
.kaplai-demo-intro-box { position: relative; min-height: 0; overflow-y: auto; padding: 26px 30px 28px; }
.kaplai-demo-intro-box:focus { outline: none; }
.kaplai-demo-intro .kaplai-demo-nowrap { white-space: nowrap; }
.kaplai-demo-intro .kaplai-demo-eyebrow, .kaplai-demo-intro h3 { padding-right: 44px; }
.kaplai-demo-intro .kaplai-demo-intro-list { display: grid; gap: 16px; margin-top: 18px; font-size: 16px; line-height: 1.55; }
.kaplai-demo-intro .kaplai-demo-intro-list li + li { margin-top: 0; }
.kaplai-demo-intro strong { color: var(--kd-heading); }
.kaplai-demo-intro .kaplai-demo-intro-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--kd-ink);
  font-size: 28px;
  font-weight: 400;
  line-height: 1;
  box-shadow: none;
  cursor: pointer;
}
.kaplai-demo-intro .kaplai-demo-intro-close:focus { background: transparent; color: var(--kd-ink); outline: none; }
.kaplai-demo-intro .kaplai-demo-intro-close:hover,
.kaplai-demo-intro .kaplai-demo-intro-close:focus-visible { background: var(--kd-surface-2); color: var(--kd-accent-hover); }
.kaplai-demo-intro .kaplai-demo-intro-close:focus-visible { outline: 2px solid var(--kd-accent-hover); outline-offset: 2px; }
/* "Video ansehen": eine Zeile unter dem ersten Hinweis, im Outline-Stil der Seite. */
.kaplai-demo-intro .kaplai-demo-intro-video {
  display: flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 10px;
  padding: 9px 18px;
  border: 1px solid var(--kd-accent);
  border-radius: 4px;
  background: var(--kd-surface);
  color: var(--kd-accent);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.2;
  box-shadow: none;
  cursor: pointer;
}
/* The triangle is decoration: the second value keeps it out of the button's name where
   the browser knows the syntax; older ones drop that line and keep the first. */
.kaplai-demo-intro .kaplai-demo-intro-video::before { content: "\25B6"; content: "\25B6" / ""; font-size: 0.75em; }
.kaplai-demo-intro .kaplai-demo-intro-video:focus { background: var(--kd-surface); border-color: var(--kd-accent); color: var(--kd-accent); }
.kaplai-demo-intro .kaplai-demo-intro-video:hover,
.kaplai-demo-intro .kaplai-demo-intro-video:focus-visible { background: var(--kd-accent-hover); border-color: var(--kd-accent-hover); color: #fff; }
.kaplai-demo-intro .kaplai-demo-intro-video:focus-visible { outline: 2px solid var(--kd-accent-hover); outline-offset: 2px; }
.kaplai-demo-intro-actions { display: flex; justify-content: flex-end; margin-top: 24px; }
@media (max-width: 544px) {
  .kaplai-demo-intro-box { padding: 22px 18px; }
  .kaplai-demo-intro-actions .kaplai-demo-btn { width: 100%; text-align: center; }
}