/* ============================================================
   O&O Syspectr — interaktive Demo
   Nur Demo-spezifische Styles (Fake-Cursor, Tour-Bubbles,
   Steuerleiste, kleine statische Ergänzungen).
   Die eigentliche App-Optik kommt 1:1 aus complete.min.css.
   ============================================================ */

/* ---------- DEMO-Badge in der Navbar ---------- */
.demo-badge {
	display: inline-block;
	background: #ffd356;
	color: #333;
	font-size: 11px;
	font-weight: bold;
	letter-spacing: 1px;
	padding: 2px 8px;
	border-radius: 9px;
	vertical-align: middle;
	align-self: center; /* Navbar-Container ist flex — mittig statt zu tief */
	margin-left: 2px; /* direkt neben dem Logo (kein Lizenz-Badge in der Demo) */
	margin-top: 1px;
}
@media (max-width: 767.98px) {
	/* mobil: kleines Logo ohne Lizenz-Badge; margin-right:auto hält das Badge am Logo – der Navbar-Container
	   verteilt sonst mit space-between (das Menü ist dort absolut positioniert) und schob es nach rechts über die Symbole */
	.demo-badge { margin-left: 14px; margin-right: auto; }
}

/* ---------- Call-to-Action: Registrierung (in der Demo-Leiste unten) ---------- */
#demo-controls .demo-cta {
	display: inline-block;
	background: #ffd356;
	color: #333 !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	padding: 6px 16px;
	border-radius: 15px;
	white-space: nowrap;
	text-decoration: none !important;
	transition: background .15s ease, transform .15s ease;
}
#demo-controls .demo-cta:hover { background: #ffe28a; transform: translateY(-1px); }

/* Trenner + Textlink ("Neu starten") in der Demo-Leiste */
#demo-controls .demo-bar-sep {
	width: 1px;
	height: 20px;
	background: rgba(255,255,255,.25);
	margin: 0 4px;
}
#demo-controls .demo-bar-link {
	color: #cfd8df !important;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none !important;
	padding: 6px 8px;
	border-radius: 14px;
}
#demo-controls .demo-bar-link:hover { color: #fff !important; background: rgba(255,255,255,.12); }

/* ---------- Dark Mode ----------
   KEINE eigenen Styles: Der Umschalter in der Demo-Leiste setzt wie die
   echte App die Klasse `theme2` am <body> (master.tpl.php:
   <body class="theme{user_theme}">) — die Farben kommen 1:1 aus
   complete.min.css. Logik in demo.js (window.demoTheme). */

/* ---------- Fake-Mauszeiger ---------- */
#demo-cursor {
	position: fixed;
	left: 0;
	top: 0;
	width: 28px;
	height: 28px;
	z-index: 100000;
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease;
	filter: drop-shadow(1px 2px 2px rgba(0,0,0,.35));
	will-change: transform;
}
#demo-cursor.visible { opacity: 1; }
#demo-cursor svg { display: block; }
#demo-cursor.clicking { animation: demo-cursor-click .28s ease; }
@keyframes demo-cursor-click {
	0%   { transform: scale(1); }
	40%  { transform: scale(.78); }
	100% { transform: scale(1); }
}

/* Klick-Welle */
.demo-ripple {
	position: fixed;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid #4797c2;
	border-radius: 50%;
	z-index: 99999;
	pointer-events: none;
	animation: demo-ripple .55s ease-out forwards;
}
@keyframes demo-ripple {
	0%   { transform: scale(.25); opacity: .9; }
	100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Hervorhebung des Ziel-Elements ---------- */
.demo-highlight {
	position: relative;
	z-index: 9990;
	border-radius: 8px;
	box-shadow: 0 0 0 3px rgba(71,151,194,.85), 0 0 22px 6px rgba(71,151,194,.45) !important;
	animation: demo-pulse 1.4s ease-in-out infinite;
}
@keyframes demo-pulse {
	0%, 100% { box-shadow: 0 0 0 3px rgba(71,151,194,.85), 0 0 22px 6px rgba(71,151,194,.45); }
	50%      { box-shadow: 0 0 0 5px rgba(71,151,194,.55), 0 0 30px 10px rgba(71,151,194,.25); }
}

/* ---------- Sprechblase ---------- */
#demo-caption {
	position: fixed;
	max-width: 380px;
	background: #fff;
	color: #333;
	border: 1px solid #d7dee4;
	border-top: 4px solid #4797c2;
	border-radius: 10px;
	box-shadow: 0 10px 40px rgba(0,0,0,.22);
	padding: 16px 20px;
	font-size: 15px;
	line-height: 1.5;
	z-index: 99998;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s ease;
	pointer-events: none;
}
#demo-caption.visible { opacity: 1; transform: translateY(0); }
#demo-caption .demo-caption-title {
	font-weight: bold;
	font-size: 16px;
	color: #4797c2;
	margin-bottom: 6px;
}
#demo-caption.demo-caption-center {
	left: 50% !important;
	top: 40% !important;
	transform: translate(-50%, -50%) translateY(8px);
	max-width: 460px;
	text-align: center;
	padding: 26px 30px;
}
#demo-caption.demo-caption-center.visible { transform: translate(-50%, -50%); }

/* ---------- Steuerleiste ---------- */
#demo-controls {
	position: fixed;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	background: rgba(38,50,61,.94);
	border-radius: 24px;
	padding: 8px 14px;
	display: none;
	align-items: center;
	gap: 6px;
	z-index: 99997;
	box-shadow: 0 6px 24px rgba(0,0,0,.35);
}
#demo-controls.visible { display: flex; }
#demo-controls button {
	background: transparent;
	border: none;
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
#demo-controls button:hover { background: rgba(255,255,255,.18); }
#demo-controls button svg { width: 16px; height: 16px; fill: #fff; }
#demo-controls .demo-progress {
	color: #cfd8df;
	font-size: 12px;
	padding: 0 8px;
	white-space: nowrap;
}

/* Abschluss-Buttons in der zentrierten Bubble */
#demo-caption .demo-caption-actions { margin-top: 18px; pointer-events: auto; }
#demo-caption .demo-caption-actions .btn { margin: 0 5px; }
#demo-caption.has-actions { pointer-events: auto; }

/* Registrieren-CTA im Tour-Abschluss: die klar dominante Aktion */
#demo-caption .demo-caption-cta {
	display: inline-block;
	font-size: 17px;
	font-weight: 600;
	padding: 10px 26px;
	margin-bottom: 24px !important;
	box-shadow: 0 4px 14px rgba(111,186,90,.45);
}


/* ---------- Statische Ergänzungen für die Demo-Seiten ---------- */

/* Kachel-/Listen-Umschaltung */
.demo-hidden { display: none !important; }

/* Startseite (index.html) */
.demo-intro {
	max-width: 640px;
	margin: 90px auto 40px;
	text-align: center;
	background: #fff;
	border: 1px solid #d7dee4;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0,0,0,.12);
	padding: 44px 48px;
}
.demo-intro .demo-intro-logo {
	background: url("../svg/logo_black.svg") no-repeat center; /* komplett schwarze Variante nur hier */
	background-size: contain;
	height: 44px;
	margin-bottom: 24px;
}
.demo-intro h1 { font-size: 26px; margin-bottom: 14px; }
.demo-intro p { font-size: 15px; line-height: 1.6; color: #555; }
.demo-intro .btn { margin-top: 18px; }
.demo-intro .demo-intro-note { font-size: 12px; color: #999; margin-top: 22px; }

/* Widget-Charts: feste Höhen wie im Original */
.widget-chart { height: 170px; position: relative; }
.widget-weekday { height: 210px; position: relative; }

/* Fake-Screenshots (Fernwartung, Rettungsumgebung) */
.demo-shot {
	max-width: 760px;
	border: 1px solid #d7dee4;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 18px rgba(0,0,0,.15);
}
.demo-shot svg { display: block; width: 100%; height: auto; }

/* Doughnut-Diagramm (Datenträgerbereinigung) ohne Chart.js:
   Farbverteilung kommt als inline conic-gradient, das Loch per ::after */
.demo-doughnut {
	width: 160px;
	height: 160px;
	border-radius: 50%;
	position: relative;
}
.demo-doughnut::after {
	content: "";
	position: absolute;
	top: 28px; right: 28px; bottom: 28px; left: 28px;
	background: #f9f9f9;
	border-radius: 50%;
}

/* Terminal-Mock (Eingabeaufforderung) */
.demo-terminal {
	max-width: 760px;
	background: #0c0c0c;
	color: #cccccc;
	font-family: Consolas, "Courier New", monospace;
	font-size: 14px;
	line-height: 1.5;
	padding: 14px 16px;
	border-radius: 8px;
	box-shadow: 0 4px 18px rgba(0,0,0,.25);
	white-space: nowrap;
	overflow-x: auto;
}
.demo-terminal .demo-caret { animation: demo-caret-blink 1.1s steps(1) infinite; }
@keyframes demo-caret-blink { 50% { opacity: 0; } }

/* oo-dropdown (statisch nachgebaut, ohne die Web-Component) */
oo-dropdown { position: relative; display: block; }
oo-dropdown .oo-dropdown-menu { width: 100%; }
oo-dropdown .oo-dropdown-item { display: block; }

/* ---------- MSP-Demo „Kunden“ (kunden.html, kunde*.html, nutzer.html, rollen.html) ---------- */
/* Lizenz-Kennzeichen „Enterprise“ neben dem Logo: das DEMO-Badge rückt dahinter (die App hält dafür
   98 px vor der Kundenauswahl frei), die Kundenauswahl folgt mit normalem Abstand. */
@media (min-width: 992px) {
	.navbar-brand.lic-enterprise ~ .demo-badge { margin-left: 98px; }
	.navbar-brand.lic-enterprise ~ .demo-badge ~ .client-picker-nav { margin-left: 14px !important; }
}
/* statische Dialoge (demo.js setzt .sys-modal-visible aus dem App-CSS) über dem App-Backdrop */
.demo-modal { z-index: 1055; }

/* Hinweis für Stellen, die in der Demo nicht ausgearbeitet sind (data-demo-note) */
#demo-toast {
	position: fixed;
	left: 50%;
	bottom: 78px;
	transform: translate(-50%, 12px);
	max-width: min(520px, calc(100vw - 32px));
	background: #1c1c1c;
	color: #fff;
	font-size: 13px;
	line-height: 1.45;
	padding: 10px 16px;
	border-radius: 10px;
	box-shadow: 0 8px 28px rgba(0,0,0,.28);
	z-index: 99996;
	opacity: 0;
	pointer-events: none;
	transition: opacity .25s ease, transform .25s ease;
}
#demo-toast.visible { opacity: 1; transform: translate(-50%, 0); }
/* Unter 992 px (Container 720 px) braucht die Kundenauswahl den Platz neben Logo und Lizenz-Kennzeichen (die App kürzt den Namen,
   unter 576 px auf 96 px); das DEMO-Badge entfällt dort, die Demo-Leiste unten kennzeichnet die Demo weiterhin. */
@media (max-width: 991.98px) {
	.demo-badge.demo-badge-picker { display: none; }
}

/* ---------- Resilience-Demo „Der Ernstfall“ (Seiten aus demo/tools/build-resilience-pages.js) ---------- */
/* Lizenz-Kennzeichen „Resilience“ (94 px, ab 768 px hinter dem Logo): das DEMO-Badge rückt dahinter */
@media (min-width: 768px) {
	.navbar-brand.lic-resilience ~ .demo-badge { margin-left: 94px; }
}

/* Einstiegsseite resilience.html */
.demo-intro-resilience { max-width: 720px; }
.demo-intro-resilience .demo-intro-edition { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #4797c2; margin-bottom: 10px; }
.demo-intro-resilience h1 { font-size: 28px; line-height: 1.25; }
.demo-intro-resilience .demo-intro-lead { font-size: 16px; color: #444; }
.demo-intro-facts { list-style: none; padding: 0; margin: 18px auto 6px; text-align: left; max-width: 520px; }
.demo-intro-facts li { position: relative; padding: 5px 0 5px 30px; font-size: 15px; color: #333; }
.demo-intro-facts li::before { content: ""; position: absolute; left: 4px; top: 11px; width: 14px; height: 8px; border-left: 3px solid #6fba5a; border-bottom: 3px solid #6fba5a; transform: rotate(-45deg); }
.demo-intro-story { font-size: 14px; line-height: 1.6; color: #555; background: #f4f7f9; border-radius: 8px; padding: 14px 18px; text-align: left; margin-top: 14px; }
.demo-intro-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.demo-intro-buttons .btn { margin-top: 12px; }
.demo-intro-hint { font-size: 14px; color: #4797c2; font-weight: 600; margin-top: 22px; }
.theme2 .demo-intro-story { background: #3d3d3d; color: #ccc; }
.theme2 .demo-intro-facts li { color: #ddd; }

/* Einstiegsseite der Premium-Tour (index.html, Playbook 1): drei Vorteile, Kapitel, Segment-Weiche */
.demo-intro-premium { max-width: 720px; }
.demo-intro-premium h1 { font-size: 28px; }
.demo-intro-benefits { list-style: none; padding: 0; margin: 20px 0 6px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.demo-intro-benefits li { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px 12px; border: 1px solid #e3e8ec; border-radius: 10px; background: #f8fafb; font-size: 13px; color: #555; line-height: 1.35; }
.demo-intro-benefits svg { width: 30px; height: 30px; color: #4797c2; margin-bottom: 4px; }
.demo-intro-benefits strong { color: #333; font-size: 14px; }
@media (max-width: 575.98px) { .demo-intro-benefits { grid-template-columns: 1fr; } }
.demo-intro-chapters { margin-top: 22px; text-align: left; font-size: 13px; color: #555; }
.demo-intro-chapters summary { cursor: pointer; color: #4797c2; font-weight: 600; text-align: center; list-style: none; }
.demo-intro-chapters summary::-webkit-details-marker { display: none; }
.demo-intro-chapters summary::after { content: " ▾"; }
.demo-intro-chapters[open] summary::after { content: " ▴"; }
.demo-intro-chapters ol { margin: 10px auto 0; padding-left: 22px; max-width: 420px; line-height: 1.7; }
.demo-intro-segments { margin-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; font-size: 14px; color: #555; }
.demo-intro-segments p { margin: 0; padding: 12px; border-radius: 10px; background: #f4f7f9; line-height: 1.5; }
@media (max-width: 575.98px) { .demo-intro-segments { grid-template-columns: 1fr; } }
.theme2 .demo-intro-benefits li { background: #3d3d3d; border-color: #4f4f4f; color: #ccc; }
.theme2 .demo-intro-benefits strong { color: #eee; }
.theme2 .demo-intro-segments p { background: #3d3d3d; color: #ccc; }

/* MSP-Demo: Remote Desktop auf den Server des Kunden – Windows-Server-Desktop mit „Dienste“ (HTML, cqw) */
.demo-srv { position: relative; background: #1a3b5d; aspect-ratio: 980 / 560; font-family: "Segoe UI", Segoe, system-ui, sans-serif; font-size: 1.35cqw; color: #222; overflow: hidden; }
.demo-srv-window { position: absolute; left: 6cqw; top: 4cqw; right: 6cqw; bottom: 8cqw; background: #fff; border: 1px solid #7a8a99; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.35); display: flex; flex-direction: column; }
.demo-srv-titlebar { display: flex; align-items: center; gap: .8cqw; padding: .5cqw 1cqw; background: #fff; border-bottom: 1px solid #e5e5e5; font-size: 1.3cqw; }
.demo-srv-ico { width: 1.6cqw; height: 1.6cqw; border-radius: .3cqw; background: linear-gradient(135deg, #4797c2, #1f4a85); }
.demo-srv-winbtns { margin-left: auto; display: flex; gap: 1.6cqw; }
.demo-srv-winbtns i { width: 1cqw; height: 1cqw; border: 1px solid #666; display: inline-block; }
.demo-srv-menubar { display: flex; gap: 1.8cqw; padding: .4cqw 1cqw; font-size: 1.25cqw; background: #f3f3f3; border-bottom: 1px solid #e5e5e5; }
.demo-srv-toolbar { display: flex; gap: .8cqw; padding: .6cqw 1cqw; border-bottom: 1px solid #e5e5e5; background: #fafafa; }
.demo-srv-btn { display: inline-block; padding: .35cqw 1cqw; border: 1px solid #adadad; border-radius: .25cqw; background: #e1e1e1; color: #222 !important; text-decoration: none !important; font-size: 1.2cqw; }
.demo-srv-btn-primary { background: #0067c0; border-color: #0067c0; color: #fff !important; }
.demo-srv-btn:hover { filter: brightness(1.06); }
.demo-srv-table { width: 100%; border-collapse: collapse; font-size: 1.2cqw; flex: 1 1 auto; }
.demo-srv-table th { text-align: left; font-weight: 400; color: #333; padding: .4cqw .9cqw; border-bottom: 1px solid #e5e5e5; background: #fff; }
.demo-srv-table td { padding: .45cqw .9cqw; border-bottom: 1px solid #f1f1f1; white-space: nowrap; }
.demo-srv-table td.demo-srv-desc { color: #666; max-width: 32cqw; overflow: hidden; text-overflow: ellipsis; }
.demo-srv-table tr.demo-srv-selected td { background: #cce4f7; }
.demo-srv-statusbar { padding: .35cqw 1cqw; font-size: 1.15cqw; color: #555; background: #f3f3f3; border-top: 1px solid #e5e5e5; }
.demo-srv-dialog { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); width: 52%; background: #fff; border: 1px solid #999; box-shadow: 0 .8cqw 2.4cqw rgba(0,0,0,.3); padding: 0 0 1.4cqw; font-size: 1.25cqw; }
.demo-srv-dialog-title { padding: .6cqw 1.2cqw; background: #fff; border-bottom: 1px solid #e5e5e5; margin-bottom: 1.2cqw; font-size: 1.3cqw; }
.demo-srv-dialog p { margin: 0 1.2cqw 1cqw; line-height: 1.4; }
.demo-srv-progress { height: 1.2cqw; margin: 0 1.2cqw; background: #e6e6e6; border: 1px solid #bcbcbc; overflow: hidden; }
.demo-srv-progress .demo-bc-progress-bar { background: #06b025; }
.demo-srv-taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: 4.2cqw; background: #101d2b; display: flex; align-items: center; gap: 1.2cqw; padding: 0 1.2cqw; color: #dfe6ee; font-size: 1.2cqw; }
.demo-srv-start { width: 2cqw; height: 2cqw; background: linear-gradient(135deg, #4797c2, #1f4a85); border-radius: .3cqw; }
.demo-srv-task { padding: .4cqw 1cqw; background: rgba(255,255,255,.12); border-bottom: .25cqw solid #4797c2; }
.demo-srv-clock { margin-left: auto; }

/* MSP-Demo: Reiter „Berichte“ (Optik der Komponente <sys-report> und der Formatkacheln) */
.demo-report .report-options { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.demo-report .report-options .selectCheckBoxAndText { min-width: 180px; }
.demo-report .report-formats { display: flex; gap: 12px; flex-wrap: wrap; margin: 18px 0 6px 0; }
.demo-report .report-format { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 96px; padding: 14px 12px 11px 12px; background: rgba(0,0,0,0.06); border: 2px solid transparent; border-radius: 6px; cursor: pointer; color: inherit; }
.demo-report .report-format:hover { background: #fff; border-color: #4797c2; }
.demo-report .report-format .format-icon { width: 28px; height: 28px; color: #9e9e9e; }
.demo-report .report-format .format-label { font-weight: 600; line-height: 1; }
.demo-report .report-format .format-check { position: absolute; top: -9px; right: -6px; width: 20px; height: 20px; border-radius: 50%; background: #4797c2; display: none; align-items: center; justify-content: center; }
.demo-report .report-format .format-check svg { width: 12px; height: 12px; display: block; }
.demo-report .report-format.selected { background: #fff; border-color: #4797c2; }
.demo-report .report-format.selected .format-icon { color: #4797c2; }
.demo-report .report-format.selected .format-check { display: flex; }
.theme2 .demo-report .report-format { background: rgba(255,255,255,0.08); }
.theme2 .demo-report .report-format.selected, .theme2 .demo-report .report-format:hover { background: rgba(255,255,255,0.14); border-color: #4797c2; }

/* Abschluss-Overlay Premium: Editionen und Preise */
#demo-caption .demo-final-editions { width: 100%; border-collapse: collapse; font-size: 13px; }
#demo-caption .demo-final-editions th { text-align: left; padding: 4px 8px 4px 0; color: #333; white-space: nowrap; vertical-align: top; }
#demo-caption .demo-final-editions td { padding: 4px 6px 4px 0; vertical-align: top; }
#demo-caption .demo-final-editions td:first-of-type { white-space: nowrap; font-weight: 600; color: #4797c2; }
#demo-caption .demo-final-editions tr + tr th, #demo-caption .demo-final-editions tr + tr td { border-top: 1px solid #e3e8ec; }

/* Sprechblase: Info-Ebene „Ihr Vorteil“ */
#demo-caption.demo-caption-wide { max-width: 440px; }
#demo-caption .demo-caption-why { margin-top: 10px; padding: 8px 12px; border-left: 3px solid #ffd356; background: #fff9e6; border-radius: 0 6px 6px 0; font-size: 14px; line-height: 1.45; color: #444; }
#demo-caption .demo-caption-why-lbl { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #a67c00; margin-bottom: 2px; }

/* Abschluss-Overlay der Resilience-Tour: breit, scrollbar, linksbündig */
#demo-caption.demo-caption-final-wide { max-width: 840px; width: calc(100vw - 32px); max-height: calc(100vh - 48px); overflow: auto; text-align: left; top: 50% !important; padding: 26px 30px 22px; }
#demo-caption.demo-caption-final-wide .demo-caption-title { font-size: 22px; text-align: center; }
#demo-caption.demo-caption-final-wide .demo-caption-text { display: none; }
#demo-caption .demo-final-intro { font-size: 15px; color: #333; text-align: center; margin: 4px 0 14px; }
#demo-caption .demo-final-reasons { padding-left: 22px; margin: 0 0 16px; font-size: 14px; line-height: 1.5; }
#demo-caption .demo-final-reasons li { padding: 2px 0; }
#demo-caption .demo-final-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 6px; }
@media (max-width: 767.98px) { #demo-caption .demo-final-cols { grid-template-columns: 1fr; } }
#demo-caption .demo-final-box { border: 1px solid #d7dee4; border-radius: 8px; padding: 12px 14px; font-size: 13.5px; line-height: 1.45; background: #fafbfc; }
#demo-caption .demo-final-box p { margin: 0 0 8px; }
#demo-caption .demo-final-box-title { font-weight: 700; font-size: 14px; color: #4797c2; margin-bottom: 8px; }
#demo-caption .demo-calc-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 6px; font-weight: normal; }
#demo-caption .demo-calc-field > span:first-child { flex: 1 1 auto; }
#demo-caption .demo-calc-input { display: inline-flex; align-items: center; gap: 6px; }
#demo-caption .demo-calc-input input { width: 84px; height: 30px; border: 1px solid #ccd5dc; border-radius: 6px; padding: 2px 8px; font-size: 14px; text-align: right; }
#demo-caption .demo-calc-input em { font-style: normal; color: #777; min-width: 48px; font-size: 12px; }
#demo-caption .demo-calc-result { margin-top: 10px; border-top: 1px solid #d7dee4; padding-top: 8px; }
#demo-caption .demo-calc-result > div { display: flex; justify-content: space-between; padding: 3px 0; }
#demo-caption .demo-calc-result strong { font-size: 15px; }
#demo-caption .demo-calc-saving { border-top: 1px dashed #d7dee4; margin-top: 4px; padding-top: 6px !important; color: #3d8a2c; }
#demo-caption .demo-calc-note { margin-top: 8px; font-size: 11.5px; color: #888; line-height: 1.4; }
#demo-caption.demo-caption-final-wide .demo-caption-actions { text-align: center; margin-top: 16px; }
#demo-caption.demo-caption-final-wide .demo-caption-cta { margin-bottom: 14px !important; }
#demo-caption .demo-caption-actions-secondary .btn { margin: 4px 5px; }
#demo-caption .demo-caption-actions-tertiary { margin-top: 12px; font-size: 13px; color: #777; }
#demo-caption .demo-caption-actions-tertiary a { color: #4797c2; }

/* Remote-Desktop-Rahmen: Container für cqw-Einheiten, „Sitzung beendet“ wie #rmdesktop #content #error */
.demo-rd { container-type: inline-size; max-width: 1120px; }
.demo-shot-rd { max-width: none; }
.demo-rd-ended { position: relative; min-height: 420px; border: 1px solid #d7dee4; border-radius: 8px; background: #fff url("../images/rd/cross.png") no-repeat center 34%; box-shadow: 0 4px 18px rgba(0,0,0,.15); }
.demo-rd-ended .message { position: absolute; top: 50%; left: 0; width: 100%; margin-top: 70px; text-align: center; font-size: 16px; padding: 0 20px; }
.theme2 .demo-rd-ended { background-color: #333; }

/* Windows-Rettungsumgebung „Option auswählen“ (HTML-Nachbau, klickbare Kacheln) */
.demo-winre { position: relative; background: #1c6cbf; color: #fff; aspect-ratio: 980 / 560; padding: 5cqw 6cqw 0; font-family: "Segoe UI", Segoe, system-ui, sans-serif; overflow: hidden; }
.demo-winre h1 { font-size: 4.3cqw; font-weight: 300; margin: 0 0 3.2cqw; color: #fff; line-height: 1.1; }
.demo-winre-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4cqw 5cqw; }
.demo-winre-tile { display: flex; align-items: center; gap: 1.8cqw; color: #fff !important; text-decoration: none !important; min-width: 0; }
.demo-winre-ico { flex: none; width: 9.5cqw; height: 9.5cqw; background: rgba(255,255,255,.14); display: flex; align-items: center; justify-content: center; transition: background .15s ease; }
.demo-winre-tile:hover .demo-winre-ico, .demo-winre-tile:focus .demo-winre-ico { background: rgba(255,255,255,.3); }
.demo-winre-ico svg { width: 7cqw; height: 7cqw; display: block; }
.demo-winre-text { display: flex; flex-direction: column; min-width: 0; }
.demo-winre-title { font-size: 2.35cqw; line-height: 1.2; }
.demo-winre-sub { font-size: 1.45cqw; line-height: 1.3; color: #cfe2f6; margin-top: .4cqw; }
.demo-winre-foot { position: absolute; left: 6cqw; bottom: 2.2cqw; font-size: 1.3cqw; color: #a9cdee; }

/* O&O BlueCon in der Rettungsumgebung (schematisches Fenster) */
.demo-bluecon { position: relative; aspect-ratio: 980 / 560; display: flex; flex-direction: column; background: #e9edf1; color: #222; font-family: "Segoe UI", Segoe, system-ui, sans-serif; font-size: 1.4cqw; overflow: hidden; }
.demo-bc-titlebar { display: flex; align-items: center; gap: 1.2cqw; background: #15345e; color: #fff; padding: 1cqw 1.6cqw; font-size: 1.5cqw; }
.demo-bc-logo { font-weight: 800; background: #fff; color: #15345e; border-radius: .4cqw; padding: .15cqw .6cqw; font-size: 1.4cqw; }
.demo-bc-title { flex: 1 1 auto; font-weight: 600; }
.demo-bc-host { color: #a9c3e6; }
.demo-bc-body { flex: 1 1 auto; display: flex; min-height: 0; }
.demo-bc-nav { flex: 0 0 24%; background: #1f4a85; padding: 1cqw 0; display: flex; flex-direction: column; gap: .15cqw; overflow: hidden; }
.demo-bc-nav-item { display: flex; align-items: center; gap: 1cqw; color: #dbe7f6 !important; text-decoration: none !important; padding: .7cqw 1.6cqw; font-size: 1.35cqw; white-space: nowrap; }
.demo-bc-nav-item svg { width: 1.7cqw; height: 1.7cqw; flex: none; }
.demo-bc-nav-item:hover { background: rgba(255,255,255,.12); color: #fff !important; }
.demo-bc-main { flex: 1 1 auto; padding: 1.8cqw 2.4cqw; overflow: hidden; position: relative; }
.demo-bc-main h2 { font-size: 2.2cqw; font-weight: 600; margin: 0 0 .6cqw; color: #15345e; }
.demo-bc-intro { margin: 0 0 1.4cqw; color: #555; }
.demo-bc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2cqw; }
.demo-bc-tile { display: flex; flex-direction: column; gap: .3cqw; background: #fff; border: 1px solid #d3dae2; border-radius: .6cqw; padding: 1cqw 1.2cqw; color: #222 !important; text-decoration: none !important; min-height: 8.6cqw; transition: box-shadow .15s ease, border-color .15s ease; }
.demo-bc-tile:hover { border-color: #4797c2; box-shadow: 0 0 0 2px rgba(71,151,194,.35); }
.demo-bc-tile-ico { color: #1f4a85; }
.demo-bc-tile-ico svg { width: 2.6cqw; height: 2.6cqw; }
.demo-bc-tile-title { font-weight: 600; font-size: 1.45cqw; }
.demo-bc-tile-desc { font-size: 1.15cqw; color: #666; line-height: 1.3; }
.demo-bc-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 1.3cqw; }
.demo-bc-table th { text-align: left; font-weight: 600; color: #555; padding: .6cqw .9cqw; border-bottom: 1px solid #d3dae2; background: #f4f6f8; }
.demo-bc-table td { padding: .7cqw .9cqw; border-bottom: 1px solid #e6eaef; }
.demo-bc-row-current td { background: #e3eef9; font-weight: 600; }
.demo-bc-radio { display: inline-block; width: 1.3cqw; height: 1.3cqw; border: 2px solid #8a98a8; border-radius: 50%; vertical-align: middle; position: relative; }
.demo-bc-radio.on { border-color: #1f4a85; }
.demo-bc-radio.on::after { content: ""; position: absolute; left: .22cqw; top: .22cqw; width: .5cqw; height: .5cqw; border-radius: 50%; background: #1f4a85; }
.demo-bc-actions { margin-top: 1.4cqw; display: flex; gap: 1cqw; }
.demo-bc-btn { display: inline-block; padding: .6cqw 1.6cqw; border-radius: .4cqw; border: 1px solid #b9c3cf; background: #fff; color: #222 !important; text-decoration: none !important; font-size: 1.35cqw; }
.demo-bc-btn-primary { background: #1f4a85; border-color: #1f4a85; color: #fff !important; }
.demo-bc-btn:hover { filter: brightness(1.08); }
.demo-bc-dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 60%; background: #fff; border: 1px solid #b9c3cf; border-radius: .6cqw; box-shadow: 0 1cqw 3cqw rgba(0,0,0,.25); padding: 1.6cqw 2cqw; }
.demo-bc-dialog h3 { font-size: 1.8cqw; font-weight: 600; margin: 0 0 .8cqw; color: #15345e; }
.demo-bc-dialog p { margin: 0 0 .8cqw; line-height: 1.4; }
.demo-bc-dialog-done h3::before { content: "✓ "; color: #3d8a2c; }
.demo-bc-progress { height: 1.2cqw; background: #e3e8ee; border-radius: .6cqw; overflow: hidden; margin: .8cqw 0; }
.demo-bc-progress-bar { display: block; height: 100%; background: #1f4a85; width: 0; transition: width .2s linear; }
.demo-bc-progress-text { color: #555; margin: 0; }
.demo-bc-status { background: #15345e; color: #a9c3e6; font-size: 1.2cqw; padding: .5cqw 1.6cqw; }

/* Sprachumschalter der Einstiegsseiten (index/msp/resilience) */
.demo-intro-lang { margin-top: 18px; font-size: 13px; }
.demo-intro-lang a { color: #6b8aa8; }