/* ONYX · Command Cockpit — monochrom, ruhig, präzise.
   Redesign 2026-07-07 gemäß BUILD REPORT.

   Grundregeln:
   - schwarz / weiß / monochrom, keine Akzentfarben, keine bunten Statusfarben
   - Dashboard-Hintergrund weiß
   - Agent Cards: weiß mit schwarzer Kontur; hover/aktiv: schwarz mit weißer Schrift
   - Masken: immer schwarz, weiße Schrift
   - SYSTEM: weiß, einklappbare Blöcke, dünne Linien
   - Animationen ruhig, 150–250 ms
   - keine Karte scrollt intern                                            */

:root {
  --black: #0a0a0a;
  --white: #ffffff;
  --grey-1: #f4f4f4;
  --grey-2: #d9d9d9;
  --grey-3: #999999;
  --grey-4: #555555;
  --line: 1px solid var(--black);
  --line-thin: 1px solid var(--grey-2);
  --t-fast: 150ms ease;
  --t-slow: 250ms ease;
  /* Typografie wie franklyn-busse.com: die Site nutzt die Wix-Webfonts
     helvetica-w01-light/roman (lizenzierte Helvetica). Nicht frei einbindbar —
     nativer Helvetica-Neue-Stack ist auf Apple-Geräten dieselbe Schrift;
     Headlines laufen im Light-Schnitt (300). */
  --font: 'Helvetica Neue', 'HelveticaNeue-Light', Helvetica, Arial, sans-serif;
  --w-light: 300;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.frame {
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 24px 0;
}

.muted { color: var(--grey-3); }

/* ------------------------------------------------------------ masthead -- */

.masthead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 16px 0 28px;
  border-bottom: var(--line);
}

.brand { display: flex; align-items: baseline; gap: 12px; }

.wordmark {
  font-size: 24px;
  font-weight: var(--w-light);
  letter-spacing: 7px;
}

.kicker {
  font-size: 11px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--grey-4);
}

.meta {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--grey-3);
}

/* -------------------------------------------------------------- levels -- */

.level { padding: 64px 0 8px; }

.level-title {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 6px;
  text-transform: uppercase;
  margin: 0 0 36px;
  color: var(--black);
}

/* ------------------------------------------------------ Aktuelle Phase -- */
/* Tägliche Orientierung, vor den operativen COMMAND-Blöcken.               */

.phase { margin: 0 0 40px; }

.phase-label {
  font-size: 10px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--grey-3);
  margin-bottom: 10px;
}

.phase-name {
  margin: 0;
  font-size: 44px;
  font-weight: var(--w-light);
  letter-spacing: 5px;
  text-transform: uppercase;
  line-height: 1.1;
}

.phase-sub {
  margin-top: 8px;
  font-size: 14px;
  font-weight: var(--w-light);
  color: var(--grey-4);
}

/* ---------------------------------------- dunkle Inline-Masken (COMMAND) -- */
/* Dieselbe Designsprache wie die Agent-Masken: schwarz, weiße Schrift,      */
/* klarer Arbeitsmodus — eingebettet statt als Overlay.                      */

.dark-mask {
  background: var(--black);
  color: var(--white);
  padding: 26px 28px;
  margin-bottom: 20px;
}

.dark-mask-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.dark-mask-head h2 {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.dark-mask-meta {
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--grey-3);
}

.dark-mask input[type="text"],
.dark-mask select,
.dark-mask textarea {
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color var(--t-fast);
}
.dark-mask input:focus,
.dark-mask select:focus,
.dark-mask textarea:focus { outline: none; border-color: var(--white); }
.dark-mask select option { background: var(--black); color: var(--white); }

.dark-mask .fold.dark { border-top: 1px solid rgba(255, 255, 255, 0.12); margin-top: 18px; }
.dark-mask .fold-head { color: var(--white); }

/* ChatGPT · Insights */

.ci-form { display: flex; flex-direction: column; gap: 14px; }
.ci-counter { font-size: 10px; letter-spacing: 1px; color: var(--grey-4); align-self: flex-end; }
.ci-promise { font-size: 11.5px; color: var(--grey-4); }

.ci-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.ci-list li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ci-list li:first-child { border-top: none; }
.ci-list li.processed { color: var(--grey-4); }
.ci-rubric {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-3);
  white-space: nowrap;
}
.ci-text { flex: 1; }
.ci-done {
  background: none;
  border: none;
  color: var(--grey-4);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast);
}
.ci-done:hover { color: var(--white); }

/* Einklappbare dunkle Masken (ChatGPT · Insights, Events) */

.dark-mask.foldable { padding-top: 6px; padding-bottom: 6px; }
.dark-mask.foldable > .fold-head {
  padding: 14px 0;
  font-size: 12px;
  justify-content: flex-start;
  gap: 10px;
  display: flex;
  align-items: baseline;
  width: 100%;
}
.dark-mask.foldable > .fold-head .dark-mask-meta { margin-left: auto; }
.dark-mask.foldable:not(.collapsed) { padding-bottom: 24px; }
.ci-mask:not(.collapsed) > .fold-body { padding-top: 14px; }

/* Events — operative Wochenübersicht, keine Monatsansicht */

.week-days { display: flex; flex-direction: column; }

.week-day {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.week-day.today .week-day-label { color: var(--white); }

.week-day-label {
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-3);
  padding-top: 2px;
}

.week-day-list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.week-day-list li { display: flex; align-items: baseline; gap: 10px; padding: 2px 0; }
.week-time { font-size: 11px; color: var(--grey-3); min-width: 38px; }
.week-empty { color: var(--grey-4); }

.week-note-text { flex: 1; color: var(--grey-2); font-weight: var(--w-light); }
.week-note-del {
  background: none;
  border: none;
  color: var(--grey-4);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast);
}
.week-note-del:hover { color: var(--white); }

.week-note-form,
.week-cal-cmd {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.week-note-form input[type="text"],
.week-cal-cmd input[type="text"] { flex: 1; min-width: 200px; }

.week-todos { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.week-todos li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.week-todos li:first-child { border-top: none; }
.week-planner .sub-label { margin-top: 20px; }

/* ------------------------------------------------------------- COMMAND -- */

.command-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.command-block {
  border: var(--line-thin);
  padding: 20px 22px;
  background: var(--white);
}

.command-label {
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey-4);
}

.command-item { display: flex; flex-direction: column; gap: 2px; }

.command-domain {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-3);
}

.command-text { font-size: 17px; font-weight: var(--w-light); line-height: 1.45; }

.command-more { margin-top: 8px; font-size: 12px; color: var(--grey-3); }

.command-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.command-list li { display: flex; flex-direction: column; gap: 1px; }
.command-list .command-text { font-size: 14px; }

/* Signals */

.command-signals { margin-top: 20px; }

.command-signals-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.signal-counts { font-size: 11px; letter-spacing: 1px; color: var(--grey-3); }

.signal-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.signal-list li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-top: var(--line-thin);
}
.signal-list li:first-child { border-top: none; }
.signal-dot { font-size: 9px; }
.signal-title { flex: 1; font-size: 14px; }
.signal-meta {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey-3);
}
/* Signal-Lifecycle: dezente Text-Aktionen (gesehen · → Loop · → Erkenntnis · ×) */
.signal-new-badge {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border: 1px solid var(--grey-2);
  padding: 1px 6px;
  margin-left: 8px;
  color: var(--grey-4);
  vertical-align: middle;
}
.signal-actions { display: flex; gap: 4px; white-space: nowrap; }
.signal-actions button {
  background: none;
  border: none;
  color: var(--grey-3);
  font-family: var(--font);
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 2px 6px;
  cursor: pointer;
  transition: color var(--t-fast);
}
.signal-actions button:hover { color: var(--black); }

/* Marker-Tags an Loops (aus der OPEN_LOOPS.md-Konvention ⭐ ❓ ⏸) */
.loop-tags {
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey-4);
  margin-left: 8px;
  white-space: nowrap;
}

/* CLIENTS · Nervensystem Check (Liste in der Agent-Karte, dunkler Kontext) */
.check-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.check-list li {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.check-list li:first-child { border-top: none; }
.check-main { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.check-name { font-weight: 600; }
.check-meta { font-size: 11px; color: var(--grey-3); }
.check-result { display: flex; gap: 14px; font-size: 12px; color: var(--grey-2); flex-wrap: wrap; }
.check-next { font-size: 11.5px; }

/* CLIENTS · Analysen (Pipeline-Liste + Detail-Maske) */
.analyse-list { list-style: none; margin: 0; padding: 0; }
.analyse-list li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.analyse-list li:first-child { border-top: none; }
.analyse-open {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font-family: var(--font);
  font-size: 14px;
  padding: 9px 0;
  cursor: pointer;
  text-align: left;
  transition: color var(--t-fast);
}
.analyse-open:hover .analyse-name { text-decoration: underline; }
.analyse-status {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-3);
  white-space: nowrap;
}

.analyse-statusline { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.analyse-statusline .mask-field-label,
.mask-field-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-3);
}
.mask .sub-label { color: var(--grey-3); }

.analyse-intake { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.intake-row { display: flex; gap: 10px; }
.intake-key {
  min-width: 130px;
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--grey-3);
  padding-top: 2px;
}

.analyse-prompt {
  border: 1px solid rgba(255, 255, 255, 0.25);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  max-height: 220px;
  overflow-y: auto;
}

/* Kalenderrelevante Loops im Events-Planer */
.week-loop .command-domain { padding-top: 2px; }

/* CONTENT · Produktionsaufträge (Episode Drafts) */
.episode-group {
  margin: 16px 0 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey-3);
}
.episode-list { list-style: none; margin: 0; padding: 0; }
.episode-list li { border-top: 1px solid rgba(255, 255, 255, 0.1); }
.episode-list li:first-child { border-top: none; }
.episode-open {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font-family: var(--font);
  font-size: 14px;
  padding: 9px 0;
  cursor: pointer;
  text-align: left;
  flex-wrap: wrap;
}
.episode-open:hover .episode-title { text-decoration: underline; }
.episode-folge {
  font-size: 10px;
  letter-spacing: 1px;
  color: var(--grey-3);
  min-width: 28px;
}
.episode-title { flex: 1; min-width: 160px; }
.episode-states { display: flex; gap: 5px; flex-wrap: wrap; }

.asset-badge {
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 1px 7px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.asset-badge.ok { color: var(--white); border-color: var(--white); }
.asset-badge.missing { color: var(--grey-4); border-color: rgba(255, 255, 255, 0.15); }

.episode-assets { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; }

/* Publishing-Datenmodell in der Episode-Maske */
.pub-list { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.pub-list li {
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
  padding: 7px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.pub-list li:first-child { border-top: none; }
.pub-platform {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  min-width: 78px;
  color: var(--grey-3);
}
.pub-caption { flex: 1; min-width: 160px; }
.pub-meta { font-size: 11px; color: var(--grey-3); white-space: nowrap; }
.drive-link {
  color: var(--white);
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 8px;
}

/* Manueller Loop */

.manual-loop {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 20px;
}
.manual-loop input[type="text"] {
  flex: 1;
  border: var(--line-thin);
  padding: 11px 14px;
  font-family: var(--font);
  font-size: 14px;
  background: var(--white);
  color: var(--black);
  transition: border-color var(--t-fast);
}
.manual-loop input[type="text"]:focus { outline: none; border-color: var(--black); }
.manual-loop button {
  border: var(--line);
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 20px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.manual-loop button:hover { background: var(--black); color: var(--white); }
.manual-loop-status { font-size: 12px; color: var(--grey-3); white-space: nowrap; }

/* Unternehmensstatus — Synthese am Ende von COMMAND */

.unternehmensstatus {
  margin-top: 20px;
  border: var(--line);
  padding: 24px 26px;
}

.status-line { display: flex; align-items: center; gap: 14px; }
.status-dot { font-size: 13px; }
.status-text { font-size: 26px; font-weight: var(--w-light); letter-spacing: 0.5px; }
.status-reasons { margin-top: 6px; font-size: 12px; color: var(--grey-4); }

.unternehmensstatus.attention { background: var(--black); color: var(--white); }
.unternehmensstatus.attention .command-label,
.unternehmensstatus.attention .status-reasons { color: var(--grey-3); }

/* ----------------------------------------------------------- OPERATION -- */

.agent-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.agent-card {
  border: var(--line);
  background: var(--white);
  color: var(--black);
  padding: 0 22px 20px;
  transition: background var(--t-slow), color var(--t-slow);
}

/* Aktiv: Agent wird aktiviert — schwarz mit weißer Schrift */
.agent-card:not(.collapsed) {
  background: var(--black);
  color: var(--white);
}
.agent-card:not(.collapsed) .agent-leitsatz,
.agent-card:not(.collapsed) .agent-status,
.agent-card:not(.collapsed) .agent-loops { color: var(--grey-3); }

/* Hover-Aktivierung nur auf Geräten mit echtem Hover — auf Touch würde der
   Zustand nach dem Tippen "kleben" und die Karte fälschlich schwarz lassen. */
@media (hover: hover) {
  .agent-card:hover {
    background: var(--black);
    color: var(--white);
  }
  .agent-card:hover .agent-leitsatz,
  .agent-card:hover .agent-status,
  .agent-card:hover .agent-loops { color: var(--grey-3); }
}

.agent-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: calc(100% + 44px);
  margin: 0 -22px;
  padding: 20px 22px 0;
  background: none;
  border: none;
  color: inherit;
  font-family: var(--font);
  cursor: pointer;
  text-align: left;
}

.agent-dot { font-size: 11px; }
.agent-title { font-size: 23px; font-weight: var(--w-light); letter-spacing: 1px; flex: 1; }
.agent-loops { font-size: 11px; letter-spacing: 1px; text-transform: uppercase; color: var(--grey-4); }

.chev {
  display: inline-block;
  font-size: 16px;
  transition: transform var(--t-fast);
}
.agent-card:not(.collapsed) .agent-head .chev,
.fold:not(.collapsed) > .fold-head .chev,
.interactions:not(.collapsed) .fold-head .chev,
.dark-mask.foldable:not(.collapsed) > .fold-head .chev,
.system-block:not(.collapsed) .fold-head .chev { transform: rotate(90deg); }

.agent-leitsatz {
  margin-top: 10px;
  font-size: 13px;
  font-style: italic;
  color: var(--grey-4);
  transition: color var(--t-slow);
}

.agent-status { margin-top: 4px; font-size: 14px; color: var(--grey-4); transition: color var(--t-slow); }

.agent-detail { display: none; }
.agent-card:not(.collapsed) .agent-detail { display: block; margin-top: 18px; }

.sub-label {
  margin: 18px 0 8px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--grey-3);
}

.bereiche {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.bereiche li {
  border: 1px solid var(--grey-4);
  padding: 4px 12px;
  font-size: 12px;
  letter-spacing: 0.5px;
}

.agent-loop-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.agent-loop-list li {
  padding: 6px 0 6px 18px;
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.agent-loop-list li:first-child { border-top: none; }
.agent-loop-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.agent-loop-list li.crit::before { background: var(--white); }
.agent-loop-list li.open::before { border: 1px solid var(--white); }
.agent-loop-list li.watch::before { border: 1px solid var(--grey-4); }

.mask-open {
  margin-top: 20px;
  border: 1px solid var(--white);
  background: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.mask-open:hover { background: var(--white); color: var(--black); }

/* Einklappbare Unterbereiche (Workflow, Verantwortlichkeiten) */

.fold { margin-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.12); }

.fold-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  color: inherit;
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 0;
  cursor: pointer;
  text-align: left;
}

.fold-body { padding: 2px 0 14px; }
.collapsed > .fold-body { display: none; }
.fold.collapsed .fold-body { display: none; }

.fold-md { white-space: pre-wrap; font-size: 13.5px; line-height: 1.6; }

/* Agent Interactions */

.interactions {
  margin-top: 32px;
  border-top: var(--line);
  border-bottom: var(--line);
}
.interactions .fold-head { padding: 16px 0; font-size: 12px; }
.interactions.collapsed .fold-body { display: none; }

.interaction-list {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  font-size: 14px;
}
.interaction-list li {
  padding: 7px 0;
  border-top: var(--line-thin);
  display: flex;
  gap: 12px;
  align-items: baseline;
  flex-wrap: wrap;
}
.interaction-list li:first-child { border-top: none; }
.int-pair { font-weight: 600; font-size: 13px; letter-spacing: 0.3px; white-space: nowrap; }

.interaction-note {
  font-size: 12px;
  color: var(--grey-3);
  border-top: var(--line-thin);
  padding-top: 12px;
  margin: 4px 0 16px;
}

/* -------------------------------------------------------------- SYSTEM -- */

.system-blocks { display: flex; flex-direction: column; }

.system-block { border-top: var(--line-thin); }
.system-block:last-child { border-bottom: var(--line-thin); }
.system-block .fold-head { padding: 15px 0; color: var(--black); }
.system-block.collapsed .fold-body { display: none; }
.system-block .fold-body { font-size: 13.5px; color: var(--grey-4); }
.system-block .fold-body p { margin: 0 0 8px; }
.system-block .fold-body strong { color: var(--black); font-weight: 600; }

.plain-list { list-style: none; margin: 0; padding: 0; }
.plain-list li { padding: 4px 0; border-top: 1px dotted var(--grey-2); }
.plain-list li:first-child { border-top: none; }

/* -------------------------------------------------------------- footer -- */

.onyx-footer {
  margin-top: 56px;
  padding: 20px 0 28px;
  border-top: var(--line);
  font-size: 11px;
  letter-spacing: 1px;
  color: var(--grey-3);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.foot-sep { color: var(--grey-2); }

/* -------------------------------------------------------------- Masken -- */
/* Masken sind immer schwarz mit weißer Schrift: Arbeiten, nicht Betrachten. */

.mask-backdrop {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px;
  overflow-y: auto;
}
.mask-backdrop[hidden] { display: none; }

.mask {
  background: var(--black);
  color: var(--white);
  width: 100%;
  max-width: 560px;
  padding: 26px 28px 30px;
  animation: maskIn 200ms ease;
}

@keyframes maskIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.mask-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 14px;
  margin-bottom: 18px;
}
.mask-head h2 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: 0.5px; }

.mask-close {
  background: none;
  border: none;
  color: var(--grey-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast);
}
.mask-close:hover { color: var(--white); }

.mask-hint { margin: 0 0 14px; font-size: 12px; color: var(--grey-3); }

.mask-actions { display: flex; flex-direction: column; gap: 14px; }

.mask-field { display: flex; flex-direction: column; gap: 5px; }
.mask-field > span {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--grey-3);
}

.mask input[type="text"],
.mask input[type="email"],
.mask input[type="number"],
.mask input[type="date"],
.mask input[type="file"],
.mask select,
.mask textarea {
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
  font-family: var(--font);
  font-size: 14px;
  padding: 10px 12px;
  transition: border-color var(--t-fast);
}
.mask input:focus, .mask select:focus, .mask textarea:focus {
  outline: none;
  border-color: var(--white);
}
.mask select option { background: var(--black); color: var(--white); }

.mask-row { display: flex; gap: 10px; flex-wrap: wrap; }

.mask-submit {
  align-self: flex-start;
  border: 1px solid var(--white);
  background: var(--white);
  color: var(--black);
  font-family: var(--font);
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 12px 24px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.mask-submit:hover { background: var(--black); color: var(--white); }
.mask-submit.secondary { background: var(--black); color: var(--white); }
.mask-submit.secondary:hover { background: var(--white); color: var(--black); }

.mask-status { font-size: 12.5px; color: var(--grey-3); min-height: 18px; }
.mask-status.error { color: var(--white); font-weight: 600; }

.example-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: none;
  color: var(--white);
  font-family: var(--font);
  font-size: 12px;
  padding: 6px 12px;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.chip:hover { background: var(--white); color: var(--black); }

body.mask-open-body { overflow: hidden; }

/* ----------------------------------------------------------- TODO-Note -- */

.todo-note {
  border: 1px dashed var(--grey-3);
  padding: 10px 14px;
  font-size: 12.5px;
  color: var(--grey-4);
}
.mask .todo-note, .agent-card:not(.collapsed) .todo-note { color: var(--grey-3); }
.todo-inline { font-size: 12.5px; color: var(--grey-3); }

/* ----------------------------------------------------------- responsiv -- */

@media (max-width: 720px) {
  .frame { padding: 24px 16px 0; }
  .command-grid { grid-template-columns: 1fr; gap: 14px; }
  .level { padding: 40px 0 6px; }
  .phase-name { font-size: 32px; }
  .agent-title { font-size: 19px; }
  .status-text { font-size: 20px; }
  .dark-mask { padding: 20px 18px; }
  .week-day { grid-template-columns: 76px 1fr; gap: 10px; }
  .manual-loop { flex-wrap: wrap; }
  .manual-loop input[type="text"] { min-width: 100%; }
  .mask-backdrop { padding: 0; align-items: stretch; }
  .mask { max-width: none; min-height: 100vh; }
}

/* ------------------------------------------------- PIN-Sperrseite -------- */
/* Funktional unverändert übernommen; Fehlerfarbe monochrom angepasst.       */

#pinOverlay {
  position: fixed; inset: 0; z-index: 9999;
  background: #000;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 32px;
  transition: opacity 0.4s;
}
#pinOverlay.hidden { opacity: 0; pointer-events: none; }

.pin-logo {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #444; font-family: var(--font);
}

.pin-dots { display: flex; gap: 16px; }
.pin-dot {
  width: 14px; height: 14px; border-radius: 50%;
  background: #222; border: 1px solid #333;
  transition: background 0.15s;
}
.pin-dot.filled { background: #fff; border-color: #fff; }

.pin-keypad {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 12px; width: 216px;
}
.pin-key {
  background: #111; border: 1px solid #222; color: #fff;
  font-size: 18px; font-weight: 300;
  height: 60px; border-radius: 4px;
  cursor: pointer; transition: background 0.1s;
  font-family: var(--font);
  letter-spacing: 0.5px;
}
.pin-key:hover { background: #1a1a1a; border-color: #333; }
.pin-key:active { background: #252525; }
.pin-key.wide { grid-column: span 2; }
.pin-key.del { font-size: 14px; color: #555; }

.pin-error {
  font-size: 11px; letter-spacing: 2px; text-transform: uppercase;
  color: #999; height: 16px; text-align: center;
  font-family: var(--font);
}
@keyframes pinShake {
  0%,100% { transform: translateX(0); }
  25% { transform: translateX(-8px); }
  75% { transform: translateX(8px); }
}
.pin-dots.shake { animation: pinShake 0.3s ease; }