/* Startseite: App- und Web-Screens mit conyx-Marke (ADR-008).
   iPhone- und Browser-Rahmen, iOS-nahe Oberfläche im dunklen Modus. Alle Maße in
   Container-Einheiten (cqw): Derselbe Screen skaliert im Film-Overlay, auf der
   Leistungsbühne und inline. Inhalte sind Demo-Daten (beispielhafte Darstellung). */

/* ---------- Rahmen ---------- */
.device-iphone { position: relative; width: 100%; max-width: 18rem; aspect-ratio: 393 / 852; margin-inline: auto; padding: 3.4%; border-radius: 14% / 6.5%; background: #1b1c20; box-shadow: inset 0 0 0 1.5px #3a3c43, inset 0 0 0 4px #0c0d10, 0 28px 60px -24px rgba(0, 0, 0, 0.9); }
.device-iphone::before, .device-iphone::after { content: ""; position: absolute; width: 1.2%; border-radius: 2px; background: #2a2c31; }
.device-iphone::before { left: -1%; top: 18%; height: 7%; box-shadow: 0 170% 0 #2a2c31, 0 330% 0 #2a2c31; }
.device-iphone::after { right: -1%; top: 26%; height: 11%; }
.device-iphone > .app-screen { height: 100%; border-radius: 11.5% / 5.3%; }
.app-island { position: absolute; left: 50%; top: 1.6%; z-index: 3; width: 31%; height: 4.1%; transform: translateX(-50%); border-radius: 999px; background: #000; }

.device-browser { width: 100%; border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden; background: #0e0f13; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.9); }
.browser-bar { display: flex; align-items: center; gap: 0.5rem; height: 2.1rem; padding: 0 0.8rem; background: #17181d; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 0.6rem; height: 0.6rem; border-radius: 50%; background: #3a3c43; }
.browser-url { flex: 1; max-width: 60%; margin-inline: auto; padding: 0.2rem 0.8rem; border-radius: 6px; background: #0e0f13; font-size: 0.72rem; color: var(--text-2); text-align: center; }

/* ---------- Oberfläche ---------- */
/* cqw eines Elements bezieht sich auf den äußeren Container – deshalb setzen erst die
   Kinder von .app-screen die Grundschrift (bezogen auf die Screen-Breite). */
.app-screen { container-type: inline-size; position: relative; display: flex; flex-direction: column; overflow: hidden; background: #0e0f13; color: var(--text); font-family: var(--font-sans); line-height: 1.35; text-align: left; }
.app-screen > * { font-size: 4cqw; }
.app-status { display: flex; justify-content: space-between; align-items: center; height: 12.5cqw; padding: 3.2cqw 8cqw 0; font-size: 4.1cqw; font-weight: 600; }
.app-status svg { height: 3.4cqw; width: auto; fill: var(--text); }
.app-status .app-sys { display: inline-flex; align-items: center; gap: 1.4cqw; }
.app-bar { display: flex; justify-content: space-between; align-items: center; padding: 3cqw 6cqw 0; }
.app-logo { height: 5.6cqw; width: auto; }
/* App-Symbol: conyx-Gecko statt Wortmarke (bleibt auch klein erkennbar). */
.app-mark { width: 9cqw; height: 9cqw; }
.app-icon-btn { display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #1b1c22; }
.app-icon-btn svg { width: 4.6cqw; height: 4.6cqw; fill: none; stroke: var(--text); stroke-width: 1.8; }
.app-body { flex: 1; display: flex; flex-direction: column; gap: 3.4cqw; padding: 4cqw 6cqw 0; }
.app-title { margin: 0; font-size: 8.6cqw; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; }
.app-meta { margin: -1.6cqw 0 0; font-size: 3.6cqw; color: var(--text-2); }
.app-card { position: relative; padding: 4.4cqw; border-radius: 5cqw; background: #17181e; }
.app-card.is-ki, .app-card.is-ok { border: 1.5px solid var(--lime); }
.app-card-head { display: flex; align-items: center; gap: 2.6cqw; font-weight: 600; }
.app-dot { flex: none; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: var(--lime); box-shadow: 0 0 3cqw color-mix(in srgb, var(--lime) 60%, transparent); }
.app-badge { margin-left: auto; padding: 0.6cqw 2.4cqw; border-radius: 999px; background: var(--lime); color: var(--on-lime); font-size: 3cqw; font-weight: 800; letter-spacing: 0.06em; }
.app-list { display: grid; gap: 2.8cqw; margin: 3.6cqw 0 0; padding: 0; list-style: none; }
.app-list li { display: grid; grid-template-columns: 7cqw 1fr; gap: 2.4cqw; align-items: start; }
.app-list b { display: block; font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.app-list span { font-size: 3.9cqw; }
.app-list svg { width: 6cqw; height: 6cqw; fill: none; stroke: var(--lime); stroke-width: 1.7; }
.app-btn { display: block; margin-top: 4cqw; padding: 3.2cqw; border-radius: 3.6cqw; background: var(--lime); color: var(--on-lime); font-weight: 800; text-align: center; }
.app-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3cqw; }
.app-kpi b { display: block; font-size: 3.1cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.app-kpi span { margin-top: 1cqw; font-size: 5.4cqw; font-weight: 800; }
/* Nur direkte Werte als Block – im Zustandswechsel (.phase-swap) gilt sonst display:block auch
   für den früheren Wert (.phase-was), der außerhalb der Bühne verborgen bleiben muss. */
.app-kpi > span { display: block; }
.app-steps { display: grid; gap: 2.6cqw; margin: 3.4cqw 0 0; padding: 0; list-style: none; }
.app-steps li { display: grid; grid-template-columns: 3cqw 12cqw 1fr; gap: 2.4cqw; align-items: center; font-size: 3.8cqw; color: var(--text-2); }
.app-steps li::before { content: ""; width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 1.5px solid var(--line-2); }
.app-steps li.is-done::before { border-color: var(--lime); background: var(--lime); }
.app-steps li.is-next { color: var(--text); }
.app-steps li.is-next::before { border-color: var(--lime); }
.app-steps time { font-weight: 600; font-variant-numeric: tabular-nums; }
.app-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding: 3cqw 3cqw 8cqw; border-top: 1px solid var(--line); background: #121318; }
.app-tabs span { display: grid; justify-items: center; gap: 1cqw; font-size: 2.8cqw; color: var(--text-2); }
.app-tabs span.is-on { color: var(--lime); }
.app-tabs svg { width: 6cqw; height: 6cqw; fill: none; stroke: currentColor; stroke-width: 1.7; }
.app-home { position: absolute; left: 50%; bottom: 2.2cqw; width: 36%; height: 1.3cqw; transform: translateX(-50%); border-radius: 999px; background: var(--text); opacity: 0.85; }

/* ---------- Bausteine der Leistungs-Screens ---------- */
.app-rows { display: grid; gap: 2.4cqw; margin: 0; padding: 0; list-style: none; }
.app-rows li { display: grid; grid-template-columns: 11cqw 1fr 3cqw; gap: 3cqw; align-items: center; padding: 3.2cqw 3.6cqw; border-radius: 4cqw; background: #17181e; }
.app-rows time { font-weight: 700; font-variant-numeric: tabular-nums; }
.app-rows span { font-weight: 600; }
.app-rows small { display: block; font-size: 3.2cqw; font-weight: 400; color: var(--text-2); }
.app-rows i { width: 2.6cqw; height: 2.6cqw; border-radius: 50%; border: 1.5px solid var(--line-2); }
.app-rows li.is-focus { box-shadow: inset 0.8cqw 0 0 var(--lime); }
.app-scan { position: relative; height: 34cqw; border: 1.5px dashed var(--line-2); border-radius: 5cqw; }
.app-scan-line { position: absolute; left: 8%; right: 8%; top: 48%; height: 2px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 3cqw var(--lime); }
/* Akkreditierung (Leistung 02): Häkchen und Ergebnisplatz gibt es nur auf der Bühne (home.css). */
.accred-slot { position: relative; }
.accred-check { display: none; position: absolute; inset: 0; width: 12cqw; height: 12cqw; margin: auto; color: var(--lime); }
.app-list--plain li { grid-template-columns: 1fr; }
.app-shifts { display: grid; gap: 2.4cqw; margin: 0; padding: 0; list-style: none; }
.app-shifts li { display: grid; grid-template-columns: 1fr auto; gap: 0.6cqw 3cqw; padding: 3.4cqw 4cqw; border-radius: 4cqw; background: #17181e; }
.app-shifts b { font-weight: 700; }
.app-shifts span { grid-column: 1; font-size: 3.4cqw; color: var(--text-2); }
.app-shifts em { grid-row: 1 / span 2; grid-column: 2; align-self: center; padding: 0.8cqw 2.4cqw; border: 1px solid var(--line-2); border-radius: 999px; font-style: normal; font-size: 3cqw; color: var(--text-2); }
.app-shifts li.is-ok em { border-color: var(--lime); color: var(--lime); }
/* Schichten (Leistung 04): Eine bestätigte Schicht trägt den Ton des bestätigten Zustands
   (--app-confirmed, home.css :root). Der frühere Status (.phase-was) bleibt grau. */
.app-shifts li { position: relative; isolation: isolate; }
.app-shifts li.is-ok::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--app-confirmed); }
.app-shifts em { justify-self: end; }
.app-shifts li.is-ok .phase-was { border-color: var(--line-2); color: var(--text-2); }
.app-note { margin: 2.4cqw 0 0; font-size: 3.6cqw; color: var(--text-2); }
.app-screen--image picture, .app-screen--image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Web-Anwendung im Browser-Rahmen */
.web-app { container-type: inline-size; display: grid; grid-template-columns: 22% 1fr; aspect-ratio: 16 / 10; font-family: var(--font-sans); line-height: 1.35; color: var(--text); text-align: left; }
.web-app > * { font-size: 1.6cqw; }
.web-nav { display: grid; align-content: start; gap: 1.2cqw; padding: 2.4cqw 2cqw; background: #121318; border-right: 1px solid var(--line); }
.web-nav .app-logo { height: 2.4cqw; margin-bottom: 1.6cqw; }
.web-nav .app-mark { width: 3.6cqw; height: 3.6cqw; }
.web-nav span { padding: 0.8cqw 1.2cqw; border-radius: 0.8cqw; color: var(--text-2); }
.web-nav span.is-on { background: #1d1e25; color: var(--text); box-shadow: inset 2px 0 0 var(--lime); }
.web-main { display: grid; align-content: start; gap: 2cqw; padding: 2.4cqw 3cqw; }
.web-title { margin: 0; font-size: 2.8cqw; font-weight: 800; }
.web-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6cqw; }
.web-kpis div { padding: 1.6cqw; border-radius: 1.2cqw; background: #17181e; }
.web-kpis b { display: block; font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.web-kpis span { display: block; margin-top: 0.4cqw; font-size: 3.2cqw; font-weight: 800; }
.web-table { display: grid; overflow: hidden; border-radius: 1.2cqw; background: #17181e; }
.web-tr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; padding: 1.2cqw 1.6cqw; border-top: 1px solid var(--line); }
.web-th { border-top: 0; font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.web-ok { color: var(--lime); }
/* Tagesplan (Leistung 01) und Status-Pillen der Web-Screens */
.web-meta { margin: -1.2cqw 0 0; font-size: 1.3cqw; color: var(--text-2); }
.web-table--plan .web-tr { grid-template-columns: 0.55fr 1.6fr 1fr 1fr; align-items: center; }
.web-tr.is-focus { background: #1d1e25; box-shadow: inset 2px 0 0 var(--lime); }
.web-pill { justify-self: start; padding: 0.2cqw 1cqw; border: 1px solid var(--line-2); border-radius: 999px; line-height: 1.3; color: var(--text-2); }
.web-pill.is-ok { border-color: var(--lime); color: var(--lime); }
/* Integration (Leistung 05): Fachanwendung und bestehende Standardsoftware. Endzustand
   „verbunden“; „ausstehend“ zeigt nur die Bühne. Maße in cqw von .web-app. */
.web-link { display: grid; gap: 1.4cqw; padding: 1.6cqw; border-radius: 1.2cqw; background: #17181e; }
.web-link-label { margin: 0; font-size: 1.3cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); }
.web-link-map { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
.web-node { position: relative; display: inline-flex; align-items: center; gap: 1cqw; padding: 1.3cqw 1.8cqw; border-radius: 1cqw; background: #1d1e25; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 1.8cqw; font-weight: 700; white-space: nowrap; }
.web-node::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px var(--lime); pointer-events: none; }
.web-node .app-mark, .web-node svg { flex: none; width: 3cqw; height: 3cqw; }
.web-node svg { fill: none; stroke: var(--text); stroke-width: 1.6; }
.web-link-line { position: relative; display: grid; place-items: center; height: 3.2cqw; }
.web-link-line::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.75px); border-top: 1.5px dashed var(--line-2); }
.web-link-on { position: absolute; left: 0; right: 0; top: calc(50% - 0.75px); height: 1.5px; background: var(--lime); box-shadow: 0 0 0.8cqw color-mix(in srgb, var(--lime) 55%, transparent); }
/* Pille über der Leitung: positioniert (malt nach der Linie), mittig, deckender Grund. */
.web-link-line > .phase-swap { position: relative; justify-items: center; }
.web-link-line .web-pill { background: #17181e; }

/* ---------- Zustandswechsel der Leistungs-Screens ----------
   [data-at] markiert, was sich in Phase b bzw. c ändert. .phase-was ist der frühere Zustand:
   Er steht im HTML, erscheint aber nur auf der Bühne (home.css). Ohne JS, schmal und bei
   reduzierter Bewegung gilt der Endzustand (.phase-now). Beide teilen eine Rasterzelle. */
.phase-swap { display: grid; justify-items: start; }
.phase-swap > * { grid-area: 1 / 1; }
.phase-was { display: none; }