/*
 * Nexum Cockpit — JadeMind brand CSS.
 * Design tokens, header, hero, sections, cards and pills are ported verbatim
 * from the umbrella's self-contained pages (state-of-smartwear.html /
 * hal-architecture.html) so the console is visually one product with them.
 */

:root, [data-theme="dark"] {
  --bg:            hsl(210 20% 6%);
  --bg-grid:       hsl(210 12% 12% / 0.55);
  --surface:       hsl(210 18% 9%);
  --surface-elev:  hsl(210 16% 12%);
  --surface-2:     hsl(210 16% 15%);
  --surface-3:     hsl(210 16% 19%);
  --border:        hsl(210 12% 18%);
  --border-soft:   hsl(210 12% 24%);
  --border-strong: hsl(210 12% 32%);
  --foreground:    hsl(60 10% 92%);
  --foreground-2:  hsl(60 10% 78%);
  --muted:         hsl(210 10% 55%);
  --muted-2:       hsl(210 10% 40%);
  --jade:          hsl(160 55% 45%);
  --jade-glow:     hsl(160 60% 52%);
  --jade-light:    hsl(160 45% 68%);
  --jade-soft:     hsl(160 55% 45% / 0.10);
  --jade-edge:     hsl(160 55% 45% / 0.32);
  --plan:          hsl(38 90% 60%);
  --plan-soft:     hsl(38 90% 60% / 0.10);
  --lock:          hsl(28 90% 58%);
  --lock-soft:     hsl(28 90% 58% / 0.12);
  --mock:          hsl(220 90% 65%);
  --mock-soft:     hsl(220 90% 65% / 0.12);
  --done:          hsl(150 65% 50%);
  --done-soft:     hsl(150 65% 50% / 0.14);
  --shadow:        0 1px 0 hsl(0 0% 100% / 0.04) inset, 0 12px 36px hsl(0 0% 0% / 0.30);
}

[data-theme="light"] {
  --bg:            hsl(60 10% 96%);
  --bg-grid:       hsl(210 10% 88% / 0.65);
  --surface:       hsl(0 0% 100%);
  --surface-elev:  hsl(60 10% 98%);
  --surface-2:     hsl(60 10% 94%);
  --surface-3:     hsl(60 10% 90%);
  --border:        hsl(210 10% 86%);
  --border-soft:   hsl(210 10% 80%);
  --border-strong: hsl(210 10% 68%);
  --foreground:    hsl(210 20% 14%);
  --foreground-2:  hsl(210 15% 28%);
  --muted:         hsl(210 10% 42%);
  --muted-2:       hsl(210 10% 60%);
  --jade:          hsl(160 55% 36%);
  --jade-glow:     hsl(160 60% 36%);
  --jade-light:    hsl(160 55% 30%);
  --jade-soft:     hsl(160 55% 45% / 0.10);
  --jade-edge:     hsl(160 55% 45% / 0.35);
  --plan:          hsl(32 90% 42%);
  --plan-soft:     hsl(32 90% 60% / 0.14);
  --lock:          hsl(28 80% 42%);
  --lock-soft:     hsl(28 80% 42% / 0.12);
  --mock:          hsl(220 70% 48%);
  --mock-soft:     hsl(220 70% 48% / 0.12);
  --done:          hsl(150 60% 36%);
  --done-soft:     hsl(150 60% 36% / 0.14);
  --shadow:        0 1px 0 hsl(0 0% 100%) inset, 0 6px 24px hsl(210 20% 20% / 0.06);
}

:root { --radius: 0.5rem; --radius-lg: 1rem; --gutter: 32px; --max: 1240px; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg); color: var(--foreground);
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.2s ease, color 0.2s ease;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    linear-gradient(var(--bg-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-grid) 1px, transparent 1px);
  background-size: 48px 48px; background-position: -1px -1px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, black 30%, transparent 75%);
}
a { color: var(--jade); text-decoration: none; }
a:hover { color: var(--jade-glow); }
a[aria-disabled="true"] { color: var(--muted); pointer-events: none; }

.container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); position: relative; z-index: 1; }
.mono { font-family: 'JetBrains Mono', monospace; }
.dim  { color: var(--muted); }

/* ===== Header ===== */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: hsl(from var(--bg) h s l / 0.78);
  border-bottom: 1px solid var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px; padding-bottom: 14px; gap: 24px;
}
.brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--foreground);
  font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em;
}
.brand:hover { color: var(--foreground); }
.brand-mark { width: 26px; height: 26px; display: grid; place-items: center; color: var(--jade); }
.brand-mark svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.brand-sub { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }

nav.toc { display: flex; gap: 6px; flex: 1; }
nav.toc a {
  color: var(--foreground-2); font-size: 13px; padding: 6px 10px; border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
nav.toc a:hover { color: var(--foreground); background: var(--surface-2); }
nav.toc a.active { color: var(--jade); background: var(--jade-soft); }

/* Dropdown-Navigation (REQ-125): neun Einträge nebeneinander plus Konto-Block
   sprengten die Kopfzeile — die Marke brach um und "Melder" lief in den
   Sync-Knopf. details/summary statt eines Frameworks; das JS schließt nur. */
.brand-sub { white-space: nowrap; }
@media (max-width: 900px) { .brand-sub { display: none; } }

.nav-menu { position: relative; }
.nav-menu > summary {
  list-style: none; cursor: pointer;
  color: var(--foreground-2); font-size: 13px; padding: 6px 10px; border-radius: 6px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  transition: color 0.15s ease, background 0.15s ease;
}
.nav-menu > summary::-webkit-details-marker { display: none; }
.nav-menu > summary::after {
  content: ""; width: 5px; height: 5px; margin-top: -2px;
  border-right: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.nav-menu > summary:hover { color: var(--foreground); background: var(--surface-2); }
.nav-menu > summary.active { color: var(--jade); background: var(--jade-soft); }
.nav-menu[open] > summary { color: var(--foreground); background: var(--surface-2); }

.nav-pop {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 190px; display: flex; flex-direction: column; gap: 2px;
  padding: 6px; border-radius: var(--radius);
  background: var(--surface-elev, var(--surface)); border: 1px solid var(--border);
  box-shadow: var(--shadow, 0 12px 32px hsl(0 0% 0% / 0.35));
}
.nav-menu-right .nav-pop { left: auto; right: 0; }
.nav-pop a, .nav-pop .who {
  font-size: 13px; padding: 7px 10px; border-radius: 6px;
  color: var(--foreground-2); white-space: nowrap;
}
.nav-pop a:hover { color: var(--foreground); background: var(--surface-2); }
.nav-pop .who { font-size: 11px; color: var(--muted); border-bottom: 1px solid var(--border-soft); margin-bottom: 4px; }
.nav-pop form { margin: 0; }
.nav-pop-action {
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 6px;
  color: var(--foreground-2); font: inherit; font-size: 13px; padding: 7px 10px;
}
.nav-pop-action:hover { color: var(--foreground); background: var(--surface-2); }
.account-summary { font-family: 'JetBrains Mono', monospace; font-size: 12px; }

/* Telefon: Marke + Konto in Zeile 1, die Navigation bricht in eine eigene
   volle Zeile darunter. Kein overflow-x auf nav.toc — das schnitte die absolut
   positionierten .nav-pop-Menüs ab. Wo ein Menü nach dem Umbruch steht, hängt
   von der Breite ab; deshalb hängen die Menüs hier an nav.toc statt an ihrem
   Eintrag und öffnen unter der Navigation am linken Rand — so ragt keines
   über den rechten Rand. */
@media (max-width: 640px) {
  .site-header .container { flex-wrap: wrap; gap: 10px 16px; }
  nav.toc { order: 3; flex: 1 1 100%; flex-wrap: wrap; gap: 2px; position: relative; }
  nav.toc .nav-menu { position: static; }
  nav.toc .nav-pop { left: 0; right: auto; top: calc(100% + 6px); }
}

.header-actions { display: inline-flex; gap: 10px; align-items: center; }
.who { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }
.tag {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px;
  padding: 4px 8px; border: 1px solid var(--border-soft); border-radius: 999px;
  color: var(--foreground-2); letter-spacing: 0.02em;
}
.theme-toggle {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--foreground); cursor: pointer;
  padding: 6px 8px; display: inline-grid; place-items: center; width: 34px; height: 34px;
}
.theme-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.theme-toggle .icon-sun { display: none; }
[data-theme="light"] .theme-toggle .icon-sun { display: inline; }
[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.btn-ghost button {
  background: var(--surface); border: 1px solid var(--border); border-radius: 999px;
  color: var(--foreground); cursor: pointer; padding: 6px 12px; font-size: 12px; font-family: 'DM Sans', sans-serif;
}
.btn-ghost button:hover { border-color: var(--border-strong); }
.btn-jade button {
  background: var(--jade); color: hsl(210 20% 6%); border: 0; border-radius: 999px;
  padding: 7px 14px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
.btn-jade button:hover { background: var(--jade-glow); }

/* ===== Hero ===== */
.hero { padding: 56px 0 24px; position: relative; z-index: 1; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 0 0 24px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted-2);
}
.hero-meta dt { color: var(--jade); letter-spacing: 0.06em; text-transform: uppercase; font-size: 10px; }
.hero-meta dd { margin: 4px 0 0; color: var(--foreground-2); font-size: 13px; }
.hero h1 {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(30px, 4.5vw, 48px);
  line-height: 1.06; font-weight: 700; letter-spacing: -0.02em; margin: 6px 0 14px;
}
.hero h1 .accent { color: var(--jade); }
.hero .lede { font-size: 17px; color: var(--foreground-2); max-width: 720px; line-height: 1.55; }

/* ===== Sections ===== */
.section { padding: 40px 0; position: relative; z-index: 1; }
.section-head { margin-bottom: 24px; max-width: 820px; }
.rule {
  display: inline-flex; align-items: center; gap: 12px; font-family: 'JetBrains Mono', monospace;
  font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 12px;
}
.section-id { color: var(--jade); font-weight: 600; }
.section-head h2 {
  font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px, 3vw, 30px);
  line-height: 1.15; font-weight: 700; letter-spacing: -0.015em; margin: 0;
}
.section-head .lede { color: var(--foreground-2); font-size: 14px; margin: 10px 0 0; max-width: 720px; }
.crumbs { font-family: 'JetBrains Mono', monospace; font-size: 12px; margin-bottom: 14px; }

/* ===== Stat cards ===== */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.stat {
  display: flex; flex-direction: column; gap: 4px; padding: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
}
.stat:hover { border-color: var(--border-strong); }
.stat-num { font-family: 'Space Grotesk', sans-serif; font-size: 32px; font-weight: 700; color: var(--foreground); line-height: 1; }
.stat-label { font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; }

/* ===== Cards (requirements / decisions) ===== */
.cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 20px 20px 22px; position: relative; overflow: hidden;
}
.card::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--jade); }
a.card:hover { border-color: var(--border-strong); color: var(--foreground); }
.card .id {
  font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.14em;
  color: var(--jade); margin-bottom: 8px; display: block;
}
.card h3 { margin: 0 0 8px; font-family: 'Space Grotesk', sans-serif; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--foreground); }
.card p { color: var(--foreground-2); font-size: 13.5px; line-height: 1.55; margin: 0; }
.card-foot { display: flex; gap: 8px; align-items: center; margin-top: 12px; flex-wrap: wrap; }

/* ===== Pills / badges ===== */
.pill {
  display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500;
  padding: 3px 9px; border-radius: 999px; letter-spacing: 0.04em; border: 1px solid var(--border-soft); color: var(--foreground-2);
}
.st-delivered   { background: var(--done-soft); color: var(--done); border-color: transparent; }
.st-in-progress { background: var(--jade-soft); color: var(--jade); border-color: transparent; }
.st-agreed      { background: var(--mock-soft); color: var(--mock); border-color: transparent; }
.st-proposed    { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.st-superseded  { background: var(--lock-soft); color: var(--lock); border-color: transparent; }
.prio-must   { color: var(--lock); border-color: var(--lock-soft); }
.prio-should { color: var(--plan); border-color: var(--plan-soft); }
.prio-could  { color: var(--muted); }
.pill.issues { color: var(--jade); border-color: var(--jade-edge); }

/* Issue severity / status / category / vendor */
.sev-critical { background: hsl(0 80% 60% / 0.16); color: hsl(0 85% 72%); border-color: transparent; }
.sev-high     { background: var(--lock-soft); color: var(--lock); border-color: transparent; }
.sev-medium   { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.sev-low      { color: var(--muted); }
.is-communicated-to-vendor { background: var(--mock-soft); color: var(--mock); border-color: transparent; }
.is-in-progress { background: var(--jade-soft); color: var(--jade); border-color: transparent; }
.is-mitigated   { background: var(--done-soft); color: var(--done); border-color: transparent; }
.is-resolved    { background: var(--done-soft); color: var(--done); border-color: transparent; }
.is-open        { color: var(--muted); }
.cat-security { color: hsl(0 85% 72%); border-color: hsl(0 80% 60% / 0.4); }
.cat-firmware { color: var(--plan); border-color: var(--plan-soft); }
.cat-sync-data { color: var(--mock); border-color: var(--mock-soft); }
.cat-process  { color: var(--muted); }
.vendor-flag { background: var(--lock-soft); color: var(--lock); border-color: transparent; letter-spacing: 0.08em; }
.dir-outbound { background: var(--jade-soft); color: var(--jade); border-color: transparent; }
.dir-inbound  { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.dir-internal { color: var(--muted); }

/* Communications — direction filter (segmented, mirrors .lang-switch) */
.comm-filter { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 20px; }
.comm-filter button { background: transparent; border: 0; border-right: 1px solid var(--border); color: var(--muted); padding: 6px 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: pointer; letter-spacing: 0.04em; }
.comm-filter button:last-child { border-right: 0; }
.comm-filter button:hover:not(:disabled) { color: var(--foreground); }
.comm-filter button.active { background: var(--jade-soft); color: var(--jade); }
.comm-filter button.active .dim { color: var(--jade); }
.comm-filter button:disabled { color: var(--muted-2); cursor: default; opacity: 0.5; }
/* Filtering: hide rows whose direction doesn't match the selected chip. */
.comm-log[data-comm="outbound"] .comm-row:not([data-direction="outbound"]),
.comm-log[data-comm="inbound"]  .comm-row:not([data-direction="inbound"]),
.comm-log[data-comm="internal"] .comm-row:not([data-direction="internal"]) { display: none; }
.pill.meeting-flag { background: var(--mock-soft); color: var(--mock); border-color: transparent; letter-spacing: 0.06em; }

/* Communications — dated log rows */
.comm-row { display:flex; gap:18px; padding:16px 0; border-bottom:1px solid var(--border); }
.comm-row:last-child { border-bottom:0; }
.comm-date { flex:0 0 110px; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.comm-date .mono { font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--foreground); }
.comm-body { flex:1; min-width:0; }
.comm-body .iss-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:6px; }
.comm-body .iss-id { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--jade); }
.comm-body h4 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; color:var(--foreground); }
@media (max-width:640px){ .comm-row{ flex-direction:column; gap:8px; } .comm-date{ flex-direction:row; align-items:center; } }

/* Issue rows */
.issue-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 12px; position: relative; overflow: hidden; }
.issue-card.crit::before { content:''; position:absolute; inset:0 auto 0 0; width:3px; background: hsl(0 80% 60%); }
.issue-card .iss-top { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.issue-card .iss-id { font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--jade); }
.issue-card h4 { margin:0; font-family:'Space Grotesk',sans-serif; font-size:15px; font-weight:600; color:var(--foreground); flex:1; min-width:200px; }
.issue-card .iss-detail { color: var(--foreground-2); font-size: 13.5px; margin: 0; }
.issue-card .iss-refs { margin-top: 8px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }

/* ===== Roadmap lanes ===== */
.lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; align-items: start; }
.lane { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 14px; }
.lane-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.lane-count { font-family: 'JetBrains Mono', monospace; color: var(--muted); font-size: 12px; }
.lane-empty { color: var(--muted-2); margin: 0; font-size: 13px; }
.rcard {
  display: block; background: var(--surface-elev); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 12px; margin-bottom: 10px;
}
.rcard:hover { border-color: var(--jade-edge); color: var(--foreground); }
.rcard-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.rcard-title { color: var(--foreground); font-size: 13.5px; line-height: 1.4; }
.rcard-meta { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }

/* ===== Table ===== */
.grid { width: 100%; border-collapse: collapse; font-size: 14px; }
.grid th {
  text-align: left; color: var(--muted); font-family: 'JetBrains Mono', monospace; font-weight: 500;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 12px; border-bottom: 1px solid var(--border);
}
.grid td { padding: 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.grid tr:last-child td { border-bottom: 0; }
.grid tbody tr:hover td { background: var(--surface-2); }
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }

/* ===== Lists ===== */
.list { list-style: none; padding: 0; margin: 0; }
.list li { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--border); }
.list li:last-child { border-bottom: 0; }

/* ===== Detail panel + rendered markdown ===== */
.panel { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 26px; }
.panel + .panel { margin-top: 16px; }
.panel h3 { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--jade); margin: 22px 0 6px; }
.meta-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 6px 0 18px; }
.md { color: var(--foreground-2); }
.md p { margin: 0 0 10px; }
.md ul { margin: 0 0 10px; padding-left: 20px; }
.md li { margin: 3px 0; }
.md strong, .md b { color: var(--foreground); }
.md code, code { font-family: 'JetBrains Mono', monospace; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; }

/* ===== Flash ===== */
.flash { padding: 12px 16px; border-radius: var(--radius); margin: 18px 0 0; font-size: 14px; border: 1px solid var(--border); }
.flash.notice { background: var(--jade-soft); border-color: var(--jade-edge); color: var(--foreground); }
.flash.alert  { background: var(--lock-soft); border-color: var(--lock); color: var(--foreground); }

/* ===== Auth (login) ===== */
.auth-wrap { min-height: 70vh; display: grid; place-items: center; }
.auth-card { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px; box-shadow: var(--shadow); }
.auth-card h1 { font-family: 'Space Grotesk', sans-serif; font-size: 22px; margin: 0 0 4px; }
.auth-card .lede { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
form.auth { display: grid; gap: 14px; }
form.auth label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
input[type="email"], input[type="password"], input[type="text"] {
  width: 100%; background: var(--surface-elev); border: 1px solid var(--border); color: var(--foreground);
  border-radius: var(--radius); padding: 11px 13px; font-size: 15px; font-family: 'DM Sans', sans-serif;
}
input:focus { outline: none; border-color: var(--jade); }
input[type="submit"], button.primary {
  background: var(--jade); color: hsl(210 20% 6%); border: 0; border-radius: var(--radius);
  padding: 11px 16px; font-weight: 600; font-size: 15px; cursor: pointer; font-family: 'DM Sans', sans-serif;
}
input[type="submit"]:hover, button.primary:hover { background: var(--jade-glow); }

/* ===== Bilingual toggle (Summary) ===== */
.lang-de { display: none; }
[data-lang="de"] .lang-en { display: none; }
[data-lang="de"] .lang-de { display: revert; }
.lang-switch { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; }
.lang-switch button {
  background: transparent; border: 0; color: var(--muted); padding: 5px 14px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; cursor: pointer; letter-spacing: 0.04em;
}
.lang-switch button.active { background: var(--jade-soft); color: var(--jade); }
.summary-lede { font-size: 16px; color: var(--foreground-2); max-width: 760px; line-height: 1.6; margin: 0 0 8px; }
.progress-track { height: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin: 6px 0 4px; max-width: 520px; display: flex; }
.progress-fill { height: 100%; background: var(--jade); }
/* In-progress segment: hatched, translucent jade — clearly "active, not yet done". */
.progress-fill.in-progress {
  background-color: hsl(160 55% 45% / 0.28);
  background-image: repeating-linear-gradient(45deg, hsl(160 55% 45% / 0.45) 0 5px, transparent 5px 10px);
}

/* ===== Overview extras (merged Dashboard + Summary) ===== */
/* Compact requirement chips inside a roadmap lane. */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips a.pill { color: var(--foreground-2); }
.chips a.pill:hover { border-color: var(--jade-edge); color: var(--jade); }
/* Sub-headers for the Blockers / Plan / Comms groups. */
.blk-head { font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--lock); margin: 22px 0 10px; }
/* Two balanced columns (docs+repos, comms+presentations) that stack on mobile. */
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 32px; }

/* ===== Footer ===== */
.site-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 28px 0 48px; position: relative; z-index: 1; }
.site-footer .container { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-footer span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--muted); }

/* Open-decisions "To decide" group on the Decisions page (native <details>). */
.od-list { display: flex; flex-direction: column; gap: 12px; }
details.od.card { padding: 0; }
details.od.card > summary {
  cursor: pointer; list-style: none;
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 16px 18px;
}
details.od.card > summary::-webkit-details-marker { display: none; }
details.od.card > summary::marker { content: ''; }
/* The shared .card .id is display:block; keep it inline inside the flex summary row. */
details.od.card > summary .id { display: inline; margin: 0; }
details.od.card > summary::after {
  content: '▸'; color: var(--muted); font-size: 12px; margin-left: auto;
}
details.od.card[open] > summary::after { content: '▾'; }
details.od.card > summary strong { color: var(--foreground); font-weight: 600; }
details.od.card > .md { padding: 0 18px 18px; }

/* ── Bug-Report-Intake (REQ-125, D144) ──────────────────────────────────────
   Die Melde-Oberfläche wird überwiegend auf einem Telefon benutzt, oft vom
   Startbildschirm aus. Deshalb: schmalerer Gutter, Sicherheitsabstände für die
   Notch, und 16px Schrift in jedem Eingabefeld — alles darunter lässt iOS beim
   Fokus hineinzoomen, und der Nutzer steht danach in einer verrutschten Seite. */

.melden-body { --gutter: 16px; }
.melden-main {
  max-width: 640px;
  padding-top: max(24px, env(safe-area-inset-top));
  padding-bottom: max(40px, env(safe-area-inset-bottom));
}

.melden-form { display: flex; flex-direction: column; gap: 4px; }
.melden-label { margin-top: 18px; font-weight: 600; font-size: 13px; letter-spacing: .01em; }

.melden-form input[type="text"],
.melden-form input[type="datetime-local"],
.melden-form input[type="file"],
.melden-form textarea,
.melden-form select,
.intake-form input,
.intake-form select {
  width: 100%;
  font: inherit;
  font-size: 16px;                 /* kein Auto-Zoom auf iOS */
  color: var(--foreground);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
}
.melden-form textarea { resize: vertical; min-height: 96px; }
.melden-form input:focus-visible,
.melden-form textarea:focus-visible,
.melden-form select:focus-visible {
  outline: 2px solid var(--jade-edge);
  outline-offset: 1px;
  border-color: var(--jade);
}

.melden-more { margin-top: 20px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.melden-more summary { cursor: pointer; color: var(--muted); font-size: 13px; }
.melden-more summary:hover { color: var(--foreground); }

.melden-form input[type="submit"] {
  margin-top: 24px;
  width: 100%;
  padding: 14px 16px;              /* Daumengröße, nicht Mausgröße */
  font-size: 16px; font-weight: 600;
  color: var(--bg); background: var(--jade);
  border: 0; border-radius: var(--radius); cursor: pointer;
}
.melden-form input[type="submit"]:hover { background: var(--jade-glow); }

/* Der Einrichtungs-Hinweis. Verschwindet von selbst, sobald die Seite als
   Startbildschirm-App läuft — kein "nicht mehr anzeigen" nötig. */
.melden-hint {
  margin: 16px 0; padding: 14px 16px;
  background: var(--jade-soft); border: 1px solid var(--jade-edge);
  border-radius: var(--radius); font-size: 14px;
}
.melden-hint p { margin: 0 0 8px; }
.melden-hint p:last-child { margin-bottom: 0; }
.melden-hint svg { vertical-align: -3px; }

/* Statusseite: eine Zeile je Meldung, vier Stufen als Punkt. */
.melden-status { list-style: none; padding: 0; margin: 0; }
.melden-status li {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.melden-status .stage { font-size: 12px; white-space: nowrap; }
.melden-status .stage::before {
  content: ""; display: inline-block; width: 8px; height: 8px;
  border-radius: 50%; margin-right: 6px; background: var(--muted);
}
.melden-status .stage-offen::before { background: var(--plan); }
.melden-status .stage-in_arbeit::before { background: var(--jade); }
.melden-status .stage-erledigt::before { background: var(--done); }
.melden-status .stage-nicht_weiterverfolgt::before { background: var(--muted); }
.melden-status .stage-in_zustellung::before { background: var(--lock); }

/* Melder-Verwaltung: die Link-Zeile darf nicht umbrechen. */
.intake-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.intake-row input, .intake-row select { flex: 1 1 180px; }
.intake-row input[type="submit"] {
  flex: 0 0 auto; padding: 10px 16px; font-weight: 600;
  color: var(--bg); background: var(--jade); border: 0;
  border-radius: var(--radius); cursor: pointer;
}

/* Alle Meldungen (REQ-125): eine Zeile je Meldung, Status als Punkt. */
.intake-list { list-style: none; padding: 0; margin: 0; }
.intake-list li {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline;
  padding: 12px 0; border-bottom: 1px solid var(--border-soft);
}
.intake-list .what { flex: 1 1 320px; min-width: 0; }
.intake-list .meta { font-size: 11px; color: var(--muted); font-family: 'JetBrains Mono', monospace; }

/* ===== Releases (REQ-139, D163) ===== */
/* Platform colours: the dot on the timeline and the platform name. Status has
   its own colours on the pill, so platform and status never share a hue. */
:root, [data-theme="dark"] { --plat-ios: var(--mock); --plat-android: var(--jade); --plat-backend: hsl(275 60% 72%); --bad: hsl(0 85% 72%); --bad-soft: hsl(0 80% 60% / 0.16); }
[data-theme="light"] { --plat-backend: hsl(275 45% 45%); --bad: hsl(0 70% 42%); --bad-soft: hsl(0 70% 50% / 0.12); }
.plat-ios { --plat: var(--plat-ios); }
.plat-android { --plat: var(--plat-android); }
.plat-backend { --plat: var(--plat-backend); }

.rs-uploaded  { color: var(--muted); }
.rs-submitted { background: var(--plan-soft); color: var(--plan); border-color: transparent; }
.rs-live      { background: var(--done-soft); color: var(--done); border-color: transparent; }
.rs-rejected  { background: var(--bad-soft); color: var(--bad); border-color: transparent; }

/* Platform filter: links, segmented like .comm-filter. */
.seg-filter { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; margin-bottom: 24px; }
.seg-filter a { border-right: 1px solid var(--border); color: var(--muted); padding: 6px 16px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.04em; }
.seg-filter a:last-child { border-right: 0; }
.seg-filter a:hover { color: var(--foreground); }
.seg-filter a.active { background: var(--jade-soft); color: var(--jade); }
.seg-filter a.active .dim { color: var(--jade); }

/* Vertical timeline (time 48 + gap 14 + platform 76 + gap 14 = the 152px indent of notes and lists): one rule per day, a platform-coloured dot per release. */
.rel-day + .rel-day { margin-top: 28px; }
.rel-day-head {
  font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted);
  margin: 0 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.rel-list { list-style: none; margin: 0; padding: 0 0 0 22px; border-left: 1px solid var(--border-soft); margin-left: 6px; }
.rel-entry { position: relative; padding: 14px 0 12px; }
.rel-entry + .rel-entry { border-top: 1px solid var(--border); }
.rel-entry::before {
  content: ''; position: absolute; left: -28px; top: 20px; width: 11px; height: 11px; border-radius: 50%;
  background: var(--plat, var(--muted)); box-shadow: 0 0 0 3px var(--bg);
}
.rel-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.rel-time { font-size: 13px; color: var(--foreground); min-width: 48px; }
.rel-plat { font-weight: 600; font-size: 13px; color: var(--plat, var(--foreground)); min-width: 76px; }
.rel-version { font-size: 14px; color: var(--foreground); }
.rel-links { margin-left: auto; font-size: 11px; display: inline-flex; gap: 12px; }
.rel-notes { margin: 6px 0 0 152px; color: var(--foreground-2); font-size: 13.5px; white-space: pre-line; }
.rel-more-row { margin: 6px 0 0 152px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; font-size: 12.5px; }
.rel-hal { font-size: 12px; }
/* KI-Zusammenfassung (REQ-139): oben im Eintrag, der Store-Text darunter klein. */
.rel-summary-wrap { margin: 8px 0 0 152px; }
.rel-summary { margin: 0; color: var(--foreground); font-size: 14.5px; line-height: 1.55; max-width: 760px; white-space: pre-line; }
.rel-summary-mark { display: inline-block; margin-top: 2px; font-size: 10.5px; color: var(--muted-2); letter-spacing: 0.04em; }
.rel-notes.rel-store { font-size: 12.5px; color: var(--muted); }
.rel-store-label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); margin-right: 6px; }
.rel-note, .rel-orphans { margin: 4px 0 0 152px; font-size: 12px; }
.rel-note { white-space: pre-line; }
.rel-failed { margin-top: 24px; font-size: 12px; color: var(--plan); }
details.rel-more > summary { cursor: pointer; color: var(--foreground-2); list-style: none; }
details.rel-more > summary::-webkit-details-marker { display: none; }
details.rel-more > summary::before { content: '▸ '; color: var(--muted); }
details.rel-more[open] > summary::before { content: '▾ '; }
details.rel-more[open] { flex-basis: 100%; }
.rel-changes { list-style: none; margin: 8px 0 4px; padding: 0; }
.rel-changes li { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; padding: 4px 0; font-size: 13px; color: var(--foreground-2); }
.rel-changes .mono { font-size: 12px; }
.rel-unreadable { margin-top: 24px; font-size: 12px; }
/* Feature-Liste (REQ-139, Plan 2026-10-20): Neu / Verbessert / Behoben, unter jedem Punkt die Screenshots seiner PRs. */
.rel-features, .rel-more-shots { margin: 10px 0 0 152px; max-width: 760px; }
.rel-group + .rel-group { margin-top: 10px; }
.rel-group-head { margin: 0 0 4px; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.rel-group[data-group="new"] .rel-group-head { color: var(--jade); }
.rel-group[data-group="fixed"] .rel-group-head { color: var(--plan); }
.rel-items { list-style: none; margin: 0; padding: 0; }
.rel-item { position: relative; padding: 3px 0 3px 14px; font-size: 13.5px; line-height: 1.5; color: var(--foreground); overflow-wrap: anywhere; }
.rel-item::before { content: '·'; position: absolute; left: 3px; color: var(--muted); }
.rel-shots { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.rel-shot { margin: 0; width: 120px; }
.rel-shot a { display: inline-block; max-width: 100%; border-radius: var(--radius); }
.rel-shot img {
  display: block; height: 120px; width: auto; max-width: 100%; object-fit: contain; background: var(--surface-elev);
  border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .15s;
}
.rel-shot a:hover img, .rel-shot a:focus-visible img { border-color: var(--jade-edge); }
.rel-shot figcaption {
  margin-top: 3px; font-size: 10.5px; line-height: 1.3; color: var(--muted); overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.rel-more-shots .rel-group-head { margin-top: 4px; }
/* Lightbox: ein :target-Overlay, kein JS. Der Schließen-Link deckt alles ab — ein Klick irgendwo schließt. */
.rel-lightbox { display: none; position: fixed; inset: 0; z-index: 1000; background: hsl(210 20% 4% / 0.88); align-items: center; justify-content: center; padding: 16px; }
.rel-lightbox:target { display: flex; }
.rel-lightbox-close { position: absolute; inset: 0; display: flex; justify-content: flex-end; align-items: flex-start; padding: 10px 18px; font-size: 30px; line-height: 1; color: hsl(0 0% 92%); text-decoration: none; }
.rel-lightbox figure { position: relative; margin: 0; max-width: 100%; text-align: center; pointer-events: none; }
.rel-lightbox img { max-width: min(92vw, 520px); max-height: 84vh; width: auto; height: auto; border-radius: var(--radius); }
.rel-lightbox figcaption { margin-top: 8px; font-size: 12.5px; color: hsl(0 0% 85%); }
@media (max-width: 640px) {
  .rel-notes, .rel-more-row, .rel-note, .rel-orphans, .rel-summary-wrap, .rel-features, .rel-more-shots { margin-left: 0; }
  .rel-links { margin-left: 0; }
  .seg-filter { border-radius: var(--radius); } /* wraps on a phone; a pill outline would bulge */
}

/* Overview tile "Zuletzt live". */
.latest-live { margin-top: 22px; }
.latest-live-head { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin: 0 0 10px; }
.latest-live .stat { border-left: 3px solid var(--plat, var(--border)); }
.latest-live .stat-num { font-size: 24px; }
.latest-live .stat-label { text-transform: none; } /* "iOS", not "IOS" */
/* Die KI-Zusammenfassung, an einer Wortgrenze gekürzt, höchstens zwei Zeilen hoch. */
.latest-live .stat-summary {
  font-size: 12.5px; line-height: 1.45; color: var(--foreground-2); margin-top: 4px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}