/* Isolierte IXIT-Appdemo: App-artige, dunkle Oberflaeche ohne Eingriff in das Website-Design. */
.appdemo-page {
  --app-bg: #121016;
  --app-surface: #1c1820;
  --app-surface-alt: #27212c;
  --app-text: #f5eff7;
  --app-muted: #c9bfce;
  --app-primary: #b99ad7;
  --app-primary-deep: #654287;
  --app-success: #75c8a3;
  --app-line: #51475a;
  background: var(--app-bg);
  color: var(--app-text);
}

.appdemo-page .site-header { background: rgba(18, 16, 22, .94); border-bottom-color: rgba(185, 154, 215, .26); backdrop-filter: blur(12px); }
.appdemo-page .brand, .appdemo-page .site-nav a, .appdemo-page .nav-toggle { color: var(--app-text); }
.appdemo-page .brand-mark { background: var(--app-primary); color: #1c1522; }
.appdemo-page .site-nav a:hover, .appdemo-page .site-nav a:focus-visible { color: var(--app-primary); }

.appdemo-page .page-hero, .appdemo-page .soft-section { background: transparent; }
.appdemo-hero { min-height: auto; padding-top: calc(var(--header-height) + 62px); padding-bottom: 38px; }
.appdemo-hero-layout { max-width: 800px; }
.appdemo-page .eyebrow { color: var(--app-primary); }
.appdemo-page h1, .appdemo-page h2, .appdemo-page h3 { color: var(--app-text); }
.appdemo-page .subtitle { margin-bottom: 14px; color: var(--app-primary); font-weight: 720; }
.appdemo-status-line { display: inline-flex; margin: 0; padding: 8px 12px; border: 1px solid var(--app-line); border-radius: 999px; color: var(--app-muted); font-size: .9rem; }

.appdemo-section { padding-top: 28px; }
.appdemo-page .section-heading { margin-bottom: 24px; }
.appdemo-page .section-heading h2 { max-width: 28ch; }
.appdemo-layout { display: grid; grid-template-columns: minmax(0, .84fr) minmax(410px, 1.16fr); gap: clamp(22px, 4vw, 52px); align-items: start; }
.appdemo-form, .appdemo-results { border: 1px solid var(--app-line); border-radius: 12px; background: var(--app-surface); box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
.appdemo-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; padding: 22px; }
.appdemo-field { display: grid; gap: 7px; }
.appdemo-field-wide, .appdemo-mode-field, .appdemo-form > .button, .appdemo-service-status { grid-column: 1 / -1; }
.appdemo-field label, .appdemo-mode-field legend { color: var(--app-primary); font-size: .78rem; font-weight: 800; letter-spacing: 0; }
.appdemo-field select { width: 100%; min-height: 52px; border: 2px solid var(--app-primary-deep); border-radius: 8px; background: #17141b; color: var(--app-text); font: inherit; padding: 0 12px; }
.appdemo-field select:focus-visible { outline: 3px solid rgba(185, 154, 215, .28); outline-offset: 2px; }
.appdemo-field select:disabled { border-color: var(--app-line); color: var(--app-muted); }
.field-help, .appdemo-service-status { margin: 0; color: var(--app-muted); font-size: .9rem; }
.appdemo-service-status { color: var(--app-success); }
.appdemo-mode-field { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.appdemo-mode-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.appdemo-mode-options label { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 14px; border: 1px solid var(--app-line); border-radius: 999px; background: #17141b; color: var(--app-text); cursor: pointer; }
.appdemo-mode-options input { accent-color: var(--app-primary); }
.appdemo-page .button.primary { min-height: 48px; border-radius: 999px; background: var(--app-primary); color: #1c1522; box-shadow: none; }
.appdemo-page .button.primary:hover, .appdemo-page .button.primary:focus-visible { background: #d2b7ed; }
.appdemo-page .button.primary:disabled { background: #5a5061; color: #cfc5d4; }

.appdemo-results { min-height: 500px; padding: 24px; }
.appdemo-results-empty { max-width: 34rem; padding: 36px 4px; }
.appdemo-results-empty h2 { margin-bottom: 12px; font-size: clamp(1.5rem, 3vw, 2.2rem); }
.appdemo-results-empty p { color: var(--app-muted); }
.appdemo-retry { margin-top: 18px; }
.appdemo-result-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.appdemo-result-head h2 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.45rem); font-variant-numeric: tabular-nums; }
.appdemo-data-badge { flex: 0 0 auto; padding: 6px 10px; border-radius: 999px; background: #17382d; color: var(--app-success); font-size: .72rem; font-weight: 800; letter-spacing: 0; }

.appdemo-connection-list { display: grid; gap: 10px; margin-bottom: 22px; }
.appdemo-connection { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; width: 100%; min-height: 82px; border: 1px solid transparent; border-radius: 10px; background: var(--app-surface-alt); color: var(--app-text); padding: 13px 15px; text-align: left; font: inherit; cursor: pointer; }
.appdemo-connection strong { font-size: 1.13rem; font-variant-numeric: tabular-nums; }
.appdemo-connection > span:not(.appdemo-line-badge) { color: var(--app-muted); }
.appdemo-connection.is-selected { border-color: var(--app-primary); background: #342a3d; }
.appdemo-connection:focus-visible { outline: 3px solid rgba(185, 154, 215, .28); outline-offset: 2px; }
.appdemo-connection .appdemo-line-badge { grid-row: span 2; justify-self: end; display: inline-flex; align-items: center; justify-content: center; width: fit-content; min-width: 38px; min-height: 30px; padding: 0 8px; clip-path: polygon(14% 0, 86% 0, 100% 50%, 86% 100%, 14% 100%, 0 50%); background: #654287; color: #fff; font-weight: 850; font-variant-numeric: tabular-nums; }

.appdemo-timechain { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin-top: 2px; border: 1px solid var(--app-line); border-radius: 10px; overflow: hidden; }
.appdemo-timechain article { position: relative; min-height: 96px; padding: 14px 11px; background: #211c25; }
.appdemo-timechain article + article { border-left: 1px solid var(--app-line); }
.appdemo-timechain article + article::before { position: absolute; top: 50%; left: -5px; z-index: 1; width: 9px; height: 9px; border-radius: 50%; background: var(--app-primary); content: ''; }
.appdemo-timechain span, .appdemo-timechain strong { display: block; }
.appdemo-timechain span { color: var(--app-muted); font-size: .76rem; }
.appdemo-timechain strong { margin-top: 8px; color: var(--app-text); font-size: 1.25rem; font-variant-numeric: tabular-nums; }
.appdemo-plan-context { margin: 12px 0 0; color: var(--app-muted); font-size: .88rem; }
.appdemo-chain { margin-top: 22px; padding: 18px; border-radius: 10px; background: #20251f; }
.appdemo-chain h3 { margin-bottom: 14px; font-size: 1.15rem; }
.appdemo-chain ol { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.appdemo-chain li { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding-left: 14px; border-left: 2px solid var(--app-primary); color: var(--app-muted); }
.appdemo-chain b { color: var(--app-text); }
.appdemo-leg-time { color: #ffb3b6; font-weight: 800; font-variant-numeric: tabular-nums; }
.appdemo-alarm-preview { display: grid; gap: 10px; margin-top: 22px; padding: 18px; border-radius: 10px; background: #1f2b25; color: var(--app-text); }
.appdemo-alarm-preview strong { color: var(--app-success); }
.appdemo-alarm-preview p { margin: 0; }
.appdemo-alarm-preview small { color: var(--app-muted); }
.appdemo-alarm-preview .button { width: fit-content; }
.appdemo-alarm-stage { margin-top: 14px; }
.appdemo-notification { max-width: 440px; padding: 16px; border: 1px solid #8a72a3; border-radius: 10px; background: #302839; box-shadow: 0 12px 28px rgba(0, 0, 0, .24); }
.appdemo-notification-header { display: flex; justify-content: space-between; gap: 12px; color: var(--app-primary); font-size: .84rem; }
.appdemo-notification-header span { color: var(--app-muted); }
.appdemo-notification-title { margin: 12px 0; color: var(--app-text); font-size: 1.35rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.appdemo-notification dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; margin: 0; }
.appdemo-notification dl div { display: grid; gap: 2px; }
.appdemo-notification dt { color: var(--app-muted); font-size: .75rem; }
.appdemo-notification dd { margin: 0; color: var(--app-text); font-weight: 720; }
.appdemo-notification > p:last-child { margin: 14px 0 0; color: var(--app-muted); font-size: .86rem; }

.appdemo-info-section { padding: 68px 0; }
.appdemo-info-layout { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 88px); align-items: start; }
.appdemo-info-layout h2 { max-width: 20ch; }
.appdemo-info-layout > p, .appdemo-info-layout > div > p, .appdemo-technical-copy { color: var(--app-muted); }
.appdemo-technical-section { border-top: 1px solid rgba(185, 154, 215, .2); }
.appdemo-technical-copy ul { display: grid; gap: 9px; margin: 18px 0 0; padding-left: 20px; color: var(--app-muted); }
.appdemo-keetson-section { padding-top: 20px; padding-bottom: 76px; }
.appdemo-keetson-section .button { margin-top: 8px; padding: 0 18px; text-decoration: none; }
.appdemo-page .site-footer { border-top-color: rgba(185, 154, 215, .26); background: #17141b; color: var(--app-text); }
.appdemo-page .site-footer a, .appdemo-page .footer-note { color: var(--app-muted); }

@media (max-width: 960px) { .appdemo-layout, .appdemo-info-layout { grid-template-columns: 1fr; } .appdemo-results { min-height: 0; } }
@media (max-width: 700px) { .appdemo-timechain { grid-template-columns: 1fr; } .appdemo-timechain article { display: grid; grid-template-columns: minmax(110px, .9fr) 1fr; align-items: center; min-height: 52px; } .appdemo-timechain article + article { border-top: 1px solid var(--app-line); border-left: 0; } .appdemo-timechain article + article::before { top: -5px; left: 24px; } .appdemo-timechain strong { margin-top: 0; } }
@media (max-width: 640px) { .appdemo-hero { padding-top: calc(var(--header-height) + 34px); } .appdemo-status-line { display: block; border-radius: 8px; line-height: 1.45; } .appdemo-form, .appdemo-results { padding: 18px; border-radius: 10px; } .appdemo-form { grid-template-columns: 1fr; } .appdemo-result-head { flex-direction: column; } .appdemo-connection { grid-template-columns: minmax(0, 1fr) auto; } .appdemo-chain { padding: 16px; } .appdemo-chain li { grid-template-columns: 1fr; gap: 3px; } .appdemo-notification dl { grid-template-columns: 1fr; } .appdemo-info-section { padding: 52px 0; } }