/* cxdb.de – eigene Bausteine auf Basis der conyx-Stile (main.css, header-footer.css, screens.css,
   home.css). Erscheinungsbild wie conyx.de (Sven Jungwirth, 2026-10-06, Fragerunde 3).
   Hier nur, was es auf conyx.de nicht gibt: Marke mit Wortmarke, Hero-Raster, Eckdaten,
   Plattform-Komposition, neue Demo-Screens, Einsatzbereiche, Referenzen, Einführung,
   Hersteller, FAQ. Zustände der Mini-Geschichten: Endzustand ist der Grundzustand (ohne JS,
   reduzierte Bewegung, Druck). */

/* Farbe: typisches conyx-Grün (Sven Jungwirth, 2026-10-06: „die Farbe sollten wir dann im typischen
   conyx Grün belassen“). Rollen innerhalb des Grüns (eingeführt von Claude):
   --cx / --cx-2 = Bestand und Daten (Plätze, Raster, Punktspur, Kicker), Lime;
   --hot = Neues und gerade Erreichtes (neue Bewerbung, Ereignis, aktueller Platz), helles Grünweiß
   mit stärkerem Schein; --cx-dim = gedämpfter Platz. */
:root {
  --cx: var(--lime);
  --cx-2: var(--lime);
  --cx-glow: color-mix(in srgb, var(--lime) 55%, transparent);
  --cx-dim: color-mix(in srgb, var(--lime) 34%, #16171c);
  --hot: #ecffc4;
  --hot-glow: 0 0 12px 3px color-mix(in srgb, var(--lime) 85%, transparent);
  --conflict: #e5484d;
  --conflict-bg: color-mix(in srgb, #e5484d 14%, #17181e);
}

/* ---------- Marke: Gecko + Wortmarke (Fragerunde 6) ---------- */
.brand { gap: 0.7rem; text-decoration: none; color: var(--text); }
.brand-word { font-weight: 800; font-size: 1.35rem; letter-spacing: -0.03em; line-height: 1; }
.brand-word b { color: var(--lime); font-weight: 800; }
.footer-brand-word { display: inline-flex; align-items: center; gap: 0.6rem; margin: 0 0 var(--s-4); }
.footer-brand-word img { width: 2.25rem; height: 2.25rem; }
.footer-brand-word .brand-word { font-size: 1.5rem; }

/* ---------- Hero: Belegungsraster (Fragerunde 6, Variante B) ---------- */
.cx-hero {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: var(--header-h);
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(60rem 36rem at 62% 24%, color-mix(in srgb, var(--lime) 8%, transparent), transparent 70%),
    radial-gradient(circle, color-mix(in srgb, var(--line) 55%, transparent) 1px, transparent 1.5px);
  background-size: auto, 28px 28px;
}
.cx-hero .display { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem); max-width: 14ch; margin-top: var(--s-3); }
.cx-hero .hero-theme { display: block; margin-bottom: var(--s-3); font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); line-height: 1.3; letter-spacing: -0.01em; }
.cx-hero .hl-text { color: var(--lime); }
.cx-hero .kicker { max-width: none; }
.cx-hero .lede { font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); }
.cx-hero .hero-actions { margin-top: var(--s-5); }
.hero-bottom { position: relative; z-index: 2; align-self: end; padding-block: var(--s-6) clamp(2.5rem, 6vh, 4.5rem); }
.hero-inner { display: grid; gap: var(--s-5); }
@media (min-width: 60rem) { .hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: end; gap: var(--s-7); } }
/* Ist das Fenster flach (Querformat am Handy), nicht auf volle Höhe strecken. */
@media (max-height: 34rem) { .cx-hero { min-height: 0; } }

.wall-wrap { position: relative; padding-top: var(--s-5); }
.wall-figure { margin: 0; }
.wall { --cols: 14; display: grid; grid-template-columns: 9.5rem repeat(var(--cols), minmax(0, 1fr)); gap: 0.6rem 0.55rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); }
.wall-head { padding-bottom: 0.2rem; text-align: center; white-space: nowrap; }
.wall-head.is-day { color: var(--text); }
.wall-row-label { align-self: center; white-space: nowrap; color: var(--text); }
.wall-cell { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; padding: 8px; border: 1px solid var(--line); border-radius: 7px; background: color-mix(in srgb, var(--bg-2) 80%, transparent); }
.wall-cell i { aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line-2); }
.wall-cell i.on { border-color: transparent; background: var(--cx-2); box-shadow: 0 0 7px 0 var(--cx-glow); }
.wall-cell i.dim { border-color: transparent; background: var(--cx-dim); }
.wall-cell.is-full { border-color: color-mix(in srgb, var(--lime) 28%, var(--line)); }
.wall-cell.is-empty { background: transparent; }
.wall-cell.is-event { border-color: var(--lime); box-shadow: 0 0 0 1px var(--lime), 0 0 24px -4px color-mix(in srgb, var(--lime) 60%, transparent); }
.wall-cell i.new { background: var(--hot); box-shadow: var(--hot-glow); }
/* Ohne Bewegung zeigt nur das erste Ereignis sein Etikett; mit Bewegung jeweils das jüngste (hero-wall.js). */
.wall-tag--later { display: none; }
.wall-live .wall-tag--later { display: block; }
.wall-tag { position: absolute; z-index: 2; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; padding: 0.45rem 0.7rem; border: 1px solid var(--lime); border-radius: 8px; background: var(--bg-2); font-size: 0.66rem; letter-spacing: 0.08em; color: var(--text); box-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.9); }
.wall-tag b { color: var(--lime); font-weight: 400; }
.wall-tag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: 10px; background: var(--lime); }
.wall-kpis { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-6); margin-top: var(--s-5); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.wall-kpis b { margin-right: 0.5rem; font-family: var(--font-sans); font-size: 1.35rem; letter-spacing: -0.02em; color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.wall-kpis .is-lime b { color: var(--lime); }
.wall-kpis b { min-width: 2.2ch; display: inline-block; text-align: right; }
.wall-caption { margin-left: auto; }
@media (max-width: 47.99rem) {
  .wall { --cols: 5; grid-template-columns: 5.4rem repeat(var(--cols), minmax(0, 1fr)); gap: 0.45rem 0.4rem; font-size: 0.56rem; letter-spacing: 0.05em; }
  .wall .wide-only { display: none; }
  .wall-cell { padding: 5px; gap: 3px; }
  .wall-tag { font-size: 0.6rem; }
  .wall-tag .tag-more { display: none; }
  .wall-kpis { gap: var(--s-2) var(--s-5); }
  .wall-kpis b { font-size: 1.1rem; }
  .wall-caption { margin-left: 0; flex-basis: 100%; }
}
/* Bewegung (hero-wall.js): Plätze gehen nacheinander an, das Etikett erscheint mit der neuen Bewerbung. */
.wall-live .wall-cell i { transition: background-color 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; }
.wall-live .wall-cell i.is-off { border-color: var(--line-2); background: transparent; box-shadow: none; }
.wall-live .wall-tag { transition: opacity 0.45s var(--ease-out), translate 0.45s var(--ease-out); }
.wall-live .wall-tag.is-off { opacity: 0; translate: 0 6px; }
.wall-live .wall-cell.is-event { transition: box-shadow 0.5s ease, border-color 0.5s ease; }
.wall-live .wall-cell.is-event.is-off { border-color: var(--line); box-shadow: none; }
.wall-live .wall-figure, .wall-live .hero-bottom { will-change: transform, opacity; transform-origin: 50% 100%; }
/* Übergang nach unten: Punkte fließen als Spur aus dem Raster in die Seite (--flow von hero-wall.js). */
.hero-stream { --flow: 0; position: absolute; left: 50%; top: 56%; bottom: 0; z-index: 1; width: 8px; margin-left: -4px; pointer-events: none; opacity: var(--flow); background: radial-gradient(circle, var(--cx-2) 2.2px, transparent 2.8px) 50% calc(var(--flow) * 132px) / 8px 11px repeat-y; clip-path: inset(0 0 calc((1 - var(--flow)) * 100%) 0); filter: drop-shadow(0 0 3px var(--cx-glow)); }

/* Einleitung unter der Überschrift eines Abschnitts (conyx setzt dort keine eigene). */
.section-head .lede { margin-top: var(--s-4); }

/* Zustandswechsel in Kennzahlen: screens.css setzt .web-kpis span auf block – der frühere Wert
   (.phase-was) bleibt außerhalb der Mini-Geschichte trotzdem verborgen. */
.web-kpis .phase-swap > .phase-was { display: none; }
.screen-story .web-kpis .phase-swap > .phase-was { display: block; }
.web-kpis .phase-swap { display: grid; }
.web-kpis .phase-swap > span { margin-top: 0; }

/* ---------- Eckdaten ---------- */
.facts-section { padding-block: var(--s-6) 0; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); border-top: 1px solid var(--line); padding-top: var(--s-5); }
@media (min-width: 60rem) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { display: grid; gap: 0.35rem; }
.fact-num { font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); }
.fact-text { color: var(--text-2); max-width: 22ch; }

/* ---------- Plattform: Geräte-Komposition (Fragerunde 6, „A später“) ---------- */
.platform-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 60rem) { .platform-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.25fr); gap: var(--s-7); } }
.platform-text .lede { margin-top: var(--s-5); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
.cx-devices { position: relative; margin: 0; padding: 0 27% 10% 0; }
.cx-devices .device-browser { position: relative; z-index: 1; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 0 1px var(--line); }
.cx-devices .device-iphone { position: absolute; z-index: 3; right: 0; bottom: 0; width: 25%; max-width: none; }
.cx-devices .web-app { aspect-ratio: 16 / 9.6; }
.cx-devices .browser-url, .step-media .browser-url { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cx-devices > figcaption { margin-top: var(--s-3); font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
.cx-wire { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.cx-wire path { fill: none; stroke: var(--lime); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.cx-wire .halo { stroke-width: 6px; stroke-opacity: 0.14; }
.cx-wire circle { fill: var(--lime-2); }
@media (max-width: 59.99rem) { .cx-devices { padding: 0 30% 14% 0; } .cx-devices .device-iphone { width: 28%; } }
.cx-portal-url { margin: 0 6cqw; padding: 1.2cqw 3cqw; border-radius: 999px; background: #1b1c22; font-size: 3cqw; color: var(--text-2); text-align: center; max-width: none; }
.web-pill.is-new { border-color: var(--lime); background: var(--lime); color: var(--on-lime); font-weight: 800; }
.web-count { font-variant-numeric: tabular-nums; }
.web-tr.is-focus .web-count { color: var(--lime); font-weight: 700; }
.web-table--shifts .web-tr { grid-template-columns: 1.25fr 1fr 0.7fr 0.8fr; align-items: center; }
.app-shifts li.is-fresh { box-shadow: 0 0 0 1.5px var(--lime), 0 0 4cqw -1cqw color-mix(in srgb, var(--lime) 70%, transparent); }
/* Geschichte der Plattform (platform-story in cxdb-main.js): a = beworben, b = bestätigt, c = in der Planung besetzt. */
.cx-devices .cx-wire { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .cx-devices.screen-story:is([data-phase="a"], [data-phase="b"]) .cx-wire { opacity: 0; }
  .cx-devices.screen-story[data-phase="a"] .app-shifts li.is-fresh { box-shadow: none; }
  .cx-devices.screen-story.is-live .cx-wire { transition: opacity 0.4s ease; }
  .cx-devices.screen-story.is-live .app-shifts li.is-fresh { transition: box-shadow 0.5s ease; }
}

/* ---------- Demo-Screens der Funktionen ---------- */
/* Registrierung */
.reg-form { display: grid; gap: 2.6cqw; }
.reg-checks { display: grid; gap: 1.8cqw; margin: 0; padding: 0; list-style: none; font-size: 3.6cqw; color: var(--text-2); }
.reg-checks li { display: flex; align-items: center; gap: 2.2cqw; }
.reg-checks li::before { content: ""; flex: none; width: 3.6cqw; height: 3.6cqw; border-radius: 1cqw; border: 1.5px solid var(--line-2); }
.reg-checks li.is-on { color: var(--text); }
.reg-checks li.is-on::before { border-color: var(--lime); background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%230b0b0e' stroke-width='3'/%3E%3C/svg%3E") center / 80% no-repeat; }
.reg-send { margin-top: 0; }
.reg-send.phase-swap { display: grid; justify-items: center; }

/* Schichtplanung */
.plan-app { grid-template-columns: 19% 1fr; }
.plan-app .web-main { gap: 1.6cqw; }
.plan-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2cqw; }
.plan-filter { display: flex; gap: 0.8cqw; }
.plan-filter span { padding: 0.3cqw 1.2cqw; border: 1px solid var(--line-2); border-radius: 999px; font-size: 1.25cqw; color: var(--text-2); }
.plan-filter span.is-on { border-color: var(--lime); color: var(--lime); }
.plan-body { display: grid; grid-template-columns: 1fr 31%; gap: 1.6cqw; align-items: start; }
.plan-table .web-tr { grid-template-columns: 1.3fr 0.95fr 1fr 1.25fr; column-gap: 1cqw; align-items: center; }
.plan-table .web-tr > span:is(:first-child, :nth-child(2)) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-table .web-tr > span:last-child { display: flex; align-items: center; gap: 0.6cqw; white-space: nowrap; }
.plan-table .web-pill { padding: 0 0.8cqw; font-size: 1.15cqw; }
.plan-quali { display: inline-flex; align-items: center; gap: 0.6cqw; color: var(--text-2); }
.plan-quali::before { content: ""; width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: var(--lime); }
.plan-side { display: grid; gap: 1.2cqw; }
.plan-card { padding: 1.6cqw; border-radius: 1.2cqw; background: #17181e; }
.plan-card.is-lime { box-shadow: inset 0 0 0 1px var(--lime); }
.plan-card.is-conflict { box-shadow: inset 0 0 0 1px var(--conflict); background: var(--conflict-bg); }
.plan-card-head { margin: 0 0 1cqw; font-size: 1.25cqw; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-2); max-width: none; }
.plan-card.is-lime .plan-card-head { color: var(--lime); }
.plan-card.is-conflict .plan-card-head { color: var(--conflict); }
.plan-fields { margin: 0; }
.plan-field { display: grid; grid-template-columns: 38% 1fr; gap: 0.6cqw 1cqw; padding: 0.55cqw 0; border-top: 1px solid var(--line); font-size: 1.4cqw; }
.plan-field:first-child { border-top: 0; }
.plan-field dt { color: var(--text-2); }
.plan-field dd { margin: 0; font-weight: 600; }
.plan-people { display: grid; gap: 0.8cqw; margin: 0; padding: 0; list-style: none; }
.plan-people li { display: grid; grid-template-columns: 3.2cqw 1fr auto; gap: 1cqw; align-items: center; font-size: 1.4cqw; }
.plan-people .av { display: grid; place-items: center; width: 3.2cqw; height: 3.2cqw; border-radius: 50%; background: #262833; font-size: 1.15cqw; font-weight: 800; color: var(--text); }
.plan-people .tag { padding: 0.15cqw 0.9cqw; border: 1px solid var(--lime); border-radius: 999px; font-size: 1.1cqw; color: var(--lime); }
.plan-people .tag-conflict { border-color: var(--conflict); color: var(--conflict); }
.plan-person-conflict .av { box-shadow: 0 0 0 1.5px var(--conflict); }
.plan-note { margin: 0; font-size: 1.3cqw; color: var(--text); max-width: none; }
.web-pill.is-conflict { border-color: var(--conflict); color: var(--conflict); }
.plan-bar { display: inline-grid; grid-template-columns: repeat(6, 1fr); gap: 0.35cqw; width: 6.4cqw; vertical-align: middle; }
.plan-bar--4 { grid-template-columns: repeat(4, 1fr); width: 4.3cqw; }
.plan-bar--8 { grid-template-columns: repeat(8, 1fr); width: 8.5cqw; }
.plan-bar i { height: 0.7cqw; border-radius: 0.35cqw; background: #2a2c35; }
.plan-bar i.on { background: var(--lime); }
.plan-fill i.warn-at-c { background: var(--conflict); }
/* Endzustand (c): Karte „Neue Schicht“ ist eingeklappt; sie gehört zu Phase a. */
.plan-newcard { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .screen-story[data-phase="a"] .plan-newcard { display: block; }
  .screen-story[data-phase="a"] .plan-fill i[data-at="b"] { background: #2a2c35; }
  .screen-story:is([data-phase="a"], [data-phase="b"]) .plan-fill i.warn-at-c { background: var(--lime); }
  .screen-story:is([data-phase="a"], [data-phase="b"]) .plan-person-conflict .av { box-shadow: none; }
  .screen-story[data-phase="a"] .plan-new { animation: none; }
  .screen-story.is-live .plan-fill i { transition: background-color 0.3s ease; }
  .screen-story.is-live .plan-fill i:nth-child(2) { transition-delay: 0.08s; }
  .screen-story.is-live .plan-fill i:nth-child(3) { transition-delay: 0.16s; }
  .screen-story.is-live .plan-fill i:nth-child(4) { transition-delay: 0.24s; }
  .screen-story.is-live .plan-fill i:nth-child(5) { transition-delay: 0.32s; }
}

/* Reporting */
.rep-body { display: grid; grid-template-columns: 1fr 34%; gap: 1.6cqw; align-items: start; }
.rep-card { padding: 1.6cqw; border-radius: 1.2cqw; background: #17181e; }
.rep-bars { display: grid; gap: 1.1cqw; margin: 0; padding: 0; list-style: none; font-size: 1.4cqw; }
.rep-bars li { display: grid; grid-template-columns: 30% 1fr 3.6em; gap: 1cqw; align-items: center; }
.rep-bars i { display: block; height: 1.1cqw; border-radius: 0.6cqw; background: linear-gradient(90deg, var(--lime) calc(var(--v) * 100%), #2a2c35 0); }
.rep-bars b { text-align: right; font-variant-numeric: tabular-nums; }
.rep-export { display: grid; gap: 1cqw; }
.rep-file { display: flex; align-items: center; gap: 1cqw; padding: 1cqw 1.2cqw; border-radius: 0.9cqw; background: #1d1e25; font-size: 1.5cqw; font-weight: 700; }
.rep-file svg { width: 2.4cqw; height: 2.4cqw; fill: none; stroke: var(--lime); stroke-width: 1.7; }
.rep-state { justify-self: start; }

/* ---------- Weitere Funktionen ---------- */
.more-section { padding-top: 0; }
.more-title { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.7rem); }
.more-index .index-num, .thread-live .more-index .index-num { color: var(--lime); }
.section-head--sm { margin-bottom: var(--s-5); }

/* ---------- Einsatzbereiche ---------- */
.areas { display: grid; gap: var(--s-5); }
@media (min-width: 60rem) { .areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.area { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--line); border-radius: 14px; background: var(--bg); }
.area-title { font-size: clamp(1.25rem, 1rem + 0.6vw, 1.55rem); }
.area-text { color: var(--text-2); }
.tags { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: auto; padding-top: var(--s-3); }
.tags li { padding: 0.2rem 0.7rem; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }

/* ---------- Referenzen ---------- */
.refs { display: grid; gap: var(--s-5); }
@media (min-width: 40rem) { .refs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .refs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ref { display: flex; flex-direction: column; gap: var(--s-2); }
.ref-visual { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; margin-bottom: var(--s-3); border: 1px solid var(--line); border-radius: 12px; background: var(--bg-2); overflow: hidden; }
.ref-visual .dots { position: absolute; inset: 0.9rem; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap: 0; align-content: space-between; justify-items: center; }
.ref-visual .dots i { width: 7px; height: 7px; }
.ref-logo { position: relative; z-index: 1; display: grid; place-items: center; min-height: 4.2rem; padding: 0.55rem 1rem; border-radius: 10px; background: color-mix(in srgb, var(--bg) 86%, transparent); box-shadow: 0 0 0 1px var(--line); transition: opacity 0.6s ease, filter 0.6s ease, box-shadow 0.6s ease; }
.ref-logo img { width: auto; height: 3.2rem; max-width: 9rem; object-fit: contain; }
.ref-logo-text { font-family: var(--font-mono); font-size: 1.5rem; letter-spacing: 0.18em; color: var(--text); }
.ref-visual.is-lit .ref-logo { box-shadow: 0 0 0 1px var(--cx-2), 0 0 28px -6px var(--cx-glow); }
.ref-live:not(.is-lit) .ref-logo { opacity: 0.4; filter: grayscale(1); }
.ref-title { font-size: 1.3rem; }
.ref-sub { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cx-2); }
.ref-text { color: var(--text-2); }
.refs-note { margin-top: var(--s-6); max-width: 60ch; color: var(--text-2); font-size: 0.95rem; }

/* ---------- Einführung ---------- */
.steps4 { display: grid; gap: var(--s-5); counter-reset: none; }
@media (min-width: 48rem) { .steps4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72rem) { .steps4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.step4 { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--s-2); padding-top: var(--s-5); }
/* Punktleiste über den Schritten: füllt sich Schritt für Schritt (scenes.js). */
.step4::before { content: ""; position: absolute; left: 0; right: calc(-1 * var(--s-5)); top: 0; height: 8px; background: radial-gradient(circle, var(--cx-2) 2.2px, transparent 2.8px) 0 50% / 12px 8px repeat-x; transform-origin: left center; transition: transform 0.6s var(--ease-out, ease), opacity 0.4s ease; }
.step4:last-child::before { right: 0; }
.step4-num { margin-bottom: var(--s-2); }
.steps4.is-armed .step4::before { transform: scaleX(0); opacity: 0.2; }
.steps4.is-armed .place-cell i.on { background: transparent; border-color: var(--line-2); box-shadow: none; }
.steps4.is-playing .step4::before { transition-delay: calc(var(--k) * 520ms); }
.steps4.is-playing .place-cell i { transition-delay: calc(var(--k) * 520ms + 380ms); }
.step4-title { font-size: 1.3rem; }
.step4 p { color: var(--text-2); }

/* ---------- Hersteller ---------- */
.maker-grid { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) { .maker-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-7); align-items: start; } }
.maker-text .about-body { max-width: 60ch; }
.maker-text .arrow-link { margin-top: var(--s-4); }
.maker-points { display: grid; gap: var(--s-4); }
.maker-points li { padding: var(--s-4) 0; border-top: 1px solid var(--line-2); }
.maker-points h3 { font-size: 1.15rem; }
.maker-points p { margin-top: 0.3rem; color: var(--text-2); }

/* ---------- FAQ ---------- */
.faq-grid { display: grid; gap: var(--s-6); }
@media (min-width: 60rem) { .faq-grid { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--s-7); align-items: start; } }
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; padding-block: var(--s-4); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary h3 { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); line-height: 1.35; letter-spacing: -0.01em; font-weight: 600; }
.faq-item summary::after { content: ""; flex: none; width: 0.6rem; height: 0.6rem; margin-right: 0.3rem; border-right: 2px solid var(--lime); border-bottom: 2px solid var(--lime); transform: rotate(45deg) translateY(-25%); transition: transform 0.25s var(--ease-out); }
.faq-item[open] summary::after { transform: rotate(-135deg) translateY(-25%); }
.faq-item summary:hover h3 { color: var(--lime); }
.faq-item p { padding-bottom: var(--s-5); color: var(--text-2); max-width: 62ch; }

/* ---------- Druck ---------- */
@media print {
  .site-header, .thread, .thread-tip, .page-loader, .footer-motion { display: none !important; }
  .cx-hero { min-height: 0; }
  .faq-item p { display: block; }
}

/* ==========================================================================
   cx:DB-eigene Bausteine (Fragerunde 7): Raster als Leitmotiv, Punktspur, Platz-Zellen,
   Kacheln mit Mini-Szenen. Überschreibt die conyx-Stile, wo sie als Kopie wirkten.
   ========================================================================== */

/* Kicker und Abschnittsmarke in Petrol; die Marke ist eine Reihe von vier Plätzen. */
.kicker { color: var(--cx-2); }
.lime-bar { width: 2.4rem; height: 8px; background: radial-gradient(circle, var(--cx-2) 2.6px, transparent 3.2px) 0 50% / 10px 8px repeat-x; filter: drop-shadow(0 0 3px var(--cx-glow)); }

/* Punktspur (trail.js): gedämpfte Plätze über die ganze Strecke, leuchtende bis zur Spitze. Die
   Linie, der Lichthof und die Zweige des conyx-Fadens bleiben unsichtbar (die Geometrie bleibt). */
.thread-scope .thread-path, .thread-scope .thread-halo, .thread-scope .thread-branch { display: none; }
.trail-base, .trail-lit { fill: none; stroke-linecap: round; stroke-dasharray: 0 11; }
.trail-base { stroke: color-mix(in srgb, var(--text) 16%, transparent); stroke-width: 3px; }
.trail-lit { stroke: var(--cx-2); stroke-width: 4px; filter: drop-shadow(0 0 3px var(--cx-glow)); }
.trail-mask { fill: none; stroke: #fff; stroke-width: 18px; }
.trail-fx { position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; overflow: visible; overflow-anchor: none; pointer-events: none; }
.trail-place { position: absolute; left: 0; top: 0; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 3px; border: 1.5px solid var(--line-2); background: var(--bg); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.trail-place.is-on { border-color: var(--cx-2); background: var(--cx-2); box-shadow: 0 0 10px 1px var(--cx-glow); }
.trail-place.is-hit { border-color: var(--hot); background: var(--hot); box-shadow: 0 0 14px 3px color-mix(in srgb, var(--lime) 55%, transparent); animation: place-pop 480ms cubic-bezier(0.34, 1.56, 0.64, 1); }
.trail-place--end { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; }
@keyframes place-pop { 0% { scale: 0.6; } 55% { scale: 1.45; } 100% { scale: 1; } }
/* Leitung zur Bühne als Punktreihe. */
.chapter-wire { height: 8px; margin-top: -4px; }
.chapter-wire-line { background: radial-gradient(circle, var(--cx-2) 2.2px, transparent 2.8px) 0 50% / 11px 8px repeat-x; box-shadow: none; }
.chapter-stage.is-powered { border-color: color-mix(in srgb, var(--cx) 55%, var(--line-2)); }
.stage-frame path { stroke: var(--cx-2); }
.stage-flash { box-shadow: inset 0 0 0 1px var(--cx-2); }
/* Zähler der Bühne: Plätze statt „01 / 04“ (chapter-scrolly.js setCount). */
.stage-progress { display: none; }
.stage-count { display: flex; gap: 6px; top: 18px; }
.stage-count i { width: 10px; height: 10px; border-radius: 3px; border: 1.5px solid var(--line-2); background: var(--bg-2); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.stage-count i.on { background: var(--cx-2); border-color: var(--cx-2); box-shadow: 0 0 8px var(--cx-glow); }
.stage-count i.is-now { background: var(--hot); border-color: var(--hot); box-shadow: var(--hot-glow); }

/* Platz-Zelle statt Nummer: wie eine Zelle des Hero-Rasters, n von 4 Plätzen belegt. */
.place-cell { display: inline-grid; grid-template-columns: repeat(2, 8px); gap: 4px; padding: 5px; border: 1px solid var(--line-2); border-radius: 7px; background: var(--bg-2); line-height: 0; }
.place-cell i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; }
.place-cell i.on { background: var(--cx-2); border-color: transparent; box-shadow: 0 0 6px var(--cx-glow); }
.chapter-steps .index-num.place-cell { padding: 5px; margin-top: 0.35rem; }
.thread-live .index-num.place-cell { padding: 5px; border-radius: 7px; }
.thread-live .chapter-step:not(.is-current) .place-cell i.on { background: var(--cx-dim); box-shadow: none; }
.chapter-step.is-current .index-num.place-cell { background: var(--bg-2); box-shadow: 0 0 0 1px var(--lime), 0 0 16px -2px color-mix(in srgb, var(--lime) 55%, transparent); }
.chapter-step.is-current .place-cell i.on:last-of-type { background: var(--hot); box-shadow: var(--hot-glow); }
/* Schritte ohne conyx-Trennlinien: Abstand statt Linie. */
.chapter-steps.index { border-top: 0; }
.chapter-steps .index-row { border-bottom: 0; }

/* Punktfelder der Mini-Szenen (Plätze; Klassen vom Build: on, hit, dim, leer). */
.dots { display: grid; grid-template-columns: repeat(var(--cols), 10px); gap: 7px; justify-content: center; }
.dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--line-2); transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease; }
.dots i.on { background: var(--cx-2); border-color: transparent; box-shadow: 0 0 6px var(--cx-glow); }
.dots i.hit { background: var(--hot); border-color: transparent; box-shadow: var(--hot-glow); }
.dots i.dim { background: var(--cx-dim); border-color: transparent; }
.dots i.is-off { background: transparent; border-color: var(--line-2); box-shadow: none; }
.is-playing .dots i { transition-delay: var(--d, 0ms); }

/* Kacheln „Weitere Funktionen“ */
.more-section { padding-top: var(--s-6); }
.tiles { display: grid; gap: var(--s-5); }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--line); border-radius: 16px; background: var(--bg-2); }
.tile-title { margin-top: var(--s-2); font-size: clamp(1.2rem, 1rem + 0.5vw, 1.45rem); overflow-wrap: break-word; }
.tile-text { color: var(--text-2); }
.scene { position: relative; display: grid; place-content: center; justify-items: center; gap: var(--s-4); min-height: 12rem; padding: var(--s-5) var(--s-4); border: 1px solid var(--line); border-radius: 12px; background-color: var(--bg); background-image: radial-gradient(circle, color-mix(in srgb, var(--line) 60%, transparent) 1px, transparent 1.5px); background-size: 22px 22px; overflow: hidden; }
.scene-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; border: 1px solid var(--line-2); border-radius: 999px; background: var(--bg-2); font-size: 0.82rem; color: var(--text-2); white-space: nowrap; transition: border-color 0.35s ease, color 0.35s ease, box-shadow 0.35s ease; }
.scene-chip b { font-weight: 700; color: var(--text); }
.scene-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-2); }
.scene--comm .scene-chip, .scene-chip.is-active { border-color: var(--lime); color: var(--text); box-shadow: 0 0 14px -4px color-mix(in srgb, var(--lime) 60%, transparent); }
.scene-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); }
/* Kommunikation: Nachricht geht raus, das Team (Lime) wird erreicht. */
.scene--comm.is-armed .scene-chip { border-color: var(--line-2); box-shadow: none; }
.scene--comm.is-armed .dots i.hit { background: var(--cx-2); box-shadow: 0 0 6px var(--cx-glow); }
.scene--comm.is-playing .scene-chip { animation: chip-send 0.9s var(--ease-out, ease) both; }
@keyframes chip-send { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--lime) 70%, transparent); } 100% { box-shadow: 0 0 0 14px transparent; } }
/* Qualifikation: Filter greift, passende Plätze bleiben (Lime), andere treten zurück. */
.scene--quali.is-armed .scene-chip.is-active { border-color: var(--line-2); color: var(--text-2); box-shadow: none; }
.scene--quali.is-armed .dots i:is(.hit, .dim) { background: var(--cx-2); box-shadow: 0 0 6px var(--cx-glow); }
.scene--quali.is-playing .scene-chip.is-active { transition-delay: 250ms; }
/* Multi-Projekt: der gemeinsame Pool verteilt sich auf die Projekte. */
.scene-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-3); }
.scene-group { display: grid; justify-items: center; gap: 0.45rem; padding: 0.6rem 0.7rem; border: 1px dashed var(--line-2); border-radius: 10px; }
.scene-group .dots { grid-template-columns: repeat(var(--cols), 8px); gap: 5px; }
.scene-group .dots i { width: 8px; height: 8px; }
.dots--pool { grid-template-columns: repeat(var(--cols), 8px); gap: 5px; }
.dots--pool i { width: 8px; height: 8px; }
.scene--projects.is-armed .dots--pool i.dim { background: var(--cx-2); box-shadow: 0 0 6px var(--cx-glow); }
.scene--projects.is-armed .scene-group .dots i.on { background: transparent; border-color: var(--line-2); box-shadow: none; }
/* API: Daten laufen über die Leitungen an die angebundenen Systeme. */
.scene--api { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: stretch; gap: 0; width: 100%; padding-inline: var(--s-5); }
.api-core { display: grid; justify-items: center; gap: 0.5rem; padding: 0.7rem 0.8rem; border: 1px solid color-mix(in srgb, var(--cx) 55%, var(--line-2)); border-radius: 10px; background: var(--bg-2); }
.api-core b { font-weight: 800; letter-spacing: -0.02em; }
.api-core .dots { grid-template-columns: repeat(var(--cols), 7px); gap: 4px; }
.api-core .dots i { width: 7px; height: 7px; }
.api-links { display: grid; gap: var(--s-3); }
.api-link { display: grid; grid-template-columns: minmax(1.5rem, 1fr) auto; align-items: center; }
.api-wire { position: relative; height: 8px; background: radial-gradient(circle, var(--cx-2) 2px, transparent 2.6px) 0 50% / 10px 8px repeat-x; transform-origin: left center; transition: transform 0.5s var(--ease-out, ease), opacity 0.4s ease; }
.api-wire::after { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px 2px color-mix(in srgb, var(--lime) 60%, transparent); opacity: 0; }
.api-target { position: relative; padding: 0.3rem 0.7rem 0.3rem 1.4rem; border: 1px solid color-mix(in srgb, var(--cx) 55%, var(--line-2)); border-radius: 8px; background: var(--bg-2); font-size: 0.82rem; white-space: nowrap; transition: border-color 0.4s ease; }
.api-target::before { content: ""; position: absolute; left: 0.55rem; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--cx-2); box-shadow: 0 0 6px var(--cx-glow); transition: background-color 0.4s ease, box-shadow 0.4s ease; }
.scene--api.is-armed .api-wire { transform: scaleX(0); opacity: 0.3; }
.scene--api.is-armed .api-target { border-color: var(--line-2); }
.scene--api.is-armed .api-target::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.scene--api.is-playing .api-wire { transition-delay: calc(300ms + var(--k) * 380ms); }
.scene--api.is-playing .api-target, .scene--api.is-playing .api-target::before { transition-delay: calc(750ms + var(--k) * 380ms); }
.scene--api.is-playing .api-wire::after { animation: api-packet 0.8s var(--ease-in-out, ease) calc(450ms + var(--k) * 380ms) both; }
@keyframes api-packet { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }

/* Einsatzbereiche: Raster-Ausschnitt oben in der Karte. */
.area { overflow: hidden; }
.area-visual { min-height: 0; margin: calc(-1 * var(--s-5)) calc(-1 * var(--s-5)) var(--s-2); padding: var(--s-4); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.area-visual .dots { grid-template-columns: repeat(var(--cols), minmax(0, 8px)); gap: 6px; }
.area-visual .dots i { width: 8px; height: 8px; }
.area-visual.is-armed .dots i:is(.on, .dim) { background: transparent; border-color: var(--line-2); box-shadow: none; }

/* Eckdaten: Zahlen in Weiß, Petrol-Marke darunter. */
.fact-num { font-variant-numeric: tabular-nums; }
.fact::before { content: ""; display: block; width: 2.4rem; height: 8px; margin-bottom: var(--s-2); background: radial-gradient(circle, var(--cx-2) 2.6px, transparent 3.2px) 0 50% / 10px 8px repeat-x; }

@media (max-width: 30rem) {
  .scene--api { grid-template-columns: 1fr; justify-items: center; gap: var(--s-3); }
  .api-link { grid-template-columns: 2rem auto; }
}
/* Bewegung aus: alle Szenen im Endzustand (scenes.js arbeitet dann nicht). */
@media (prefers-reduced-motion: reduce) {
  .is-armed .dots i, .is-armed .api-wire, .steps4.is-armed .step4::before { transition: none; }
}

/* Hersteller: Szene „über 20 Jahre“ neben dem Fließtext. */
.maker-grid { align-items: center; }
.years { min-height: 14rem; }
.years .dots { grid-template-columns: repeat(var(--cols), 14px); gap: 10px; }
.years .dots i { width: 14px; height: 14px; }
.years-plus { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--lime); text-shadow: 0 0 18px color-mix(in srgb, var(--lime) 50%, transparent); transition: opacity 0.4s ease 2.2s; }
.years.is-armed .dots i.on { background: transparent; border-color: var(--line-2); box-shadow: none; }
.years.is-armed .years-plus { opacity: 0; transition-delay: 0s; }
/* OSM-Nachweis: größere Klickfläche ohne Layoutänderung. */
.contact-map-credit a { display: inline-block; padding-block: 15px; margin-block: -15px; }

/* Niedrige Fenster (übliche Laptops 1366×768, 1536×864, 1280×800): Hero kompakter, damit er ins Bild
   passt und beim Scrollen gehalten wird (hero-wall.js pinnt nur dann). */
@media (max-height: 58rem) and (min-width: 48rem) {
  .wall-wrap { padding-top: var(--s-3); }
  .wall { row-gap: 0.4rem; }
  .wall-cell { padding: 5px 6px; gap: 4px; }
  .wall-kpis { margin-top: var(--s-3); }
  .cx-hero .display { font-size: min(clamp(2.3rem, 1.2rem + 3.6vw, 4.4rem), 7.4vh); max-width: 18ch; }
  .cx-hero .hero-theme { margin-bottom: var(--s-2); }
  .cx-hero .lime-bar { margin-bottom: var(--s-3); }
  .hero-bottom { padding-block: var(--s-4) clamp(1.5rem, 4vh, 3rem); }
}
@media (max-height: 46rem) and (min-width: 48rem) {
  .wall-head { padding-bottom: 0; }
  .wall-cell { padding: 4px 5px; gap: 3px; }
  .wall-caption { display: none; }
  .cx-hero .kicker { display: none; }
  .cx-hero .display { font-size: min(clamp(2.1rem, 1.1rem + 3.2vw, 4rem), 7vh); }
}

/* Punktleiste der Einführung: Brücke zur Nachbarspalte nur, wo ein Nachbar folgt (kein Überlauf). */
.step4::before { right: 0; }
@media (min-width: 48rem) and (max-width: 71.99rem) { .step4:nth-child(odd)::before { right: calc(-1 * var(--s-5)); } }
@media (min-width: 72rem) { .step4:not(:last-child)::before { right: calc(-1 * var(--s-5)); } }

/* Lange Wörter in Abschnittsüberschriften (320 px: „Großveranstaltungen,“) trennen statt abschneiden. */
.section-title { overflow-wrap: break-word; hyphens: auto; }

/* Betrieb in Ruhe (hero-wall.js): Meldungen an Zellen und Aufblitzen neuer Plätze. Ohne Bewegung aus. */
.wall-toast { display: none; }
.wall-live .wall-toast { display: block; z-index: 3; }
.wall-cell.is-ping::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1.5px solid var(--hot); box-shadow: 0 0 14px -2px color-mix(in srgb, var(--lime) 70%, transparent); pointer-events: none; animation: cell-ping 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes cell-ping { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.28); } }
.motion-paused .wall-cell.is-ping::after { animation: none; opacity: 0; }
/* Oberste Zeile: Etikett unter die Zelle, sonst verdeckt es die Uhrzeiten. */
.wall-cell[data-row="0"] .wall-tag { top: calc(100% + 10px); bottom: auto; }
.wall-cell[data-row="0"] .wall-tag::after { top: auto; bottom: 100%; }