/* MEYNEXA Cockpit, Demo-Fassung. Gestaltung angelehnt an das echte Cockpit: dunkle Leiste, helle Karten. */
.cd {
  --cd-flaeche: #F4F7FA; --cd-leiste: #0B1A27; --cd-rand: #E1E8EF;
  margin-top: 28px; border-radius: var(--radius-buehne); overflow: hidden; border: 1px solid var(--linie);
  background: var(--cd-flaeche); color: var(--text); font-size: 0.95rem; position: relative;
  box-shadow: 0 40px 80px -50px rgba(7, 28, 43, 0.55); container-type: inline-size;
}
.cd button { font: inherit; }
.cd-kopf { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: var(--cd-leiste); color: #fff; }
.cd-marke { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.02em; }
.cd-marke b { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; background: var(--blau); }
.cd-laden { color: rgba(255, 255, 255, 0.6); font-size: 0.85rem; }
.cd-demo { margin-left: auto; font: 400 0.68rem var(--mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 5px 10px; border-radius: 999px; background: rgba(47, 147, 214, 0.2); color: #9CCBEE; white-space: nowrap; }
.cd-rumpf { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 520px; }
.cd-nav { background: var(--cd-leiste); padding: 10px 8px 16px; display: grid; align-content: start; gap: 2px; }
.cd-nav-knopf {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; cursor: pointer;
  padding: 10px 12px; border-radius: 10px; background: transparent; color: rgba(255, 255, 255, 0.72); font-weight: 700;
}
.cd-nav-knopf svg { width: 18px; height: 18px; flex: none; }
.cd-nav-knopf:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.cd-nav-knopf[aria-current="page"] { background: rgba(0, 113, 188, 0.28); color: #fff; box-shadow: inset 3px 0 0 var(--hell); }
.cd-haupt { padding: 20px 22px 24px; min-width: 0; }
.cd-titel { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.cd-titel h4 { margin: 0; font-size: 1.25rem; color: var(--tinte); }
.cd-tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--cd-rand); border-radius: 999px; padding: 3px; }
.cd-tabs button { border: 0; background: transparent; padding: 7px 12px; border-radius: 999px; cursor: pointer; font-weight: 700; color: var(--navy); font-size: 0.85rem; }
.cd-tabs button[aria-pressed="true"] { background: var(--blau); color: #fff; }
.cd-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.cd-kacheln.drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cd-kachel { background: #fff; border: 1px solid var(--cd-rand); border-radius: 14px; padding: 14px; display: grid; gap: 4px; }
.cd-kachel span { font-size: 0.8rem; color: var(--grau); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-kachel strong { font-size: clamp(1.05rem, 2.4cqi, 1.35rem); white-space: nowrap; color: var(--tinte); font-variant-numeric: tabular-nums; }
.cd-kachel small { font-size: 0.75rem; color: var(--grau); }
.cd-kachel small.gut { color: #2E7D32; }
.cd-zwei { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.cd-karte { background: #fff; border: 1px solid var(--cd-rand); border-radius: 14px; padding: 16px; }
.cd-karte h5 { margin: 0 0 12px; font-size: 0.92rem; color: var(--tinte); }
.cd-karte p { margin: 0 0 12px; }
.cd-balken {
  height: 160px; display: flex; align-items: flex-end; gap: 6px; padding: 0 2px; border-bottom: 1px solid var(--cd-rand);
  background: repeating-linear-gradient(to top, transparent 0 39px, #EEF2F6 39px 40px);
}
.cd-balken.dicht { gap: 3px; }
.cd-balken i { flex: 1 1 0; min-width: 0; max-width: 34px; min-height: 4px; border-radius: 4px 4px 0 0; background: var(--blau); opacity: 0.85; transition: opacity 0.2s; }
.cd-balken i:hover { opacity: 1; background: var(--navy); }
.cd-achse { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.72rem; color: var(--grau); }
.cd-statusliste { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cd-statusliste li { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; border-radius: 10px; cursor: pointer; }
.cd-statusliste li:hover { background: var(--cd-flaeche); }
.cd-pille { display: inline-block; font-style: normal; font-size: 0.75rem; font-weight: 800; padding: 4px 10px; border-radius: 999px; }
.cd-pille.bezahlt { background: #E8F1FB; color: #0B5FA5; }
.cd-pille.verpackt { background: #FFF3E0; color: #B25400; }
.cd-pille.versendet { background: #E8F7EE; color: #2E7D32; }
.cd-pille.retoure { background: #FDECEA; color: #C62828; }
.cd-warnung {
  margin-top: 12px; width: 100%; text-align: left; border: 1px dashed #E8A13A; background: #FFF8EC; color: #8A4B00;
  padding: 12px 14px; border-radius: 12px; cursor: pointer; font-weight: 700;
}
.cd-tabelle { background: #fff; border: 1px solid var(--cd-rand); border-radius: 14px; overflow: hidden; }
.cd-zeile {
  display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1.6fr) 90px 110px; gap: 10px; align-items: center;
  width: 100%; text-align: left; border: 0; border-top: 1px solid var(--cd-rand); background: #fff; padding: 12px 14px; cursor: pointer; color: var(--text);
}
.cd-zeile:hover { background: #F7FAFD; }
.cd-zeile-kopf { border-top: 0; cursor: default; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--grau); background: #FAFCFD; }
.cd-zeile span:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-tipp { margin: 12px 0 0; font-size: 0.85rem; color: var(--grau); }
.cd-zurueck { border: 0; background: transparent; color: var(--blau); font-weight: 800; cursor: pointer; padding: 0 0 12px; }
.cd-weg { list-style: none; padding: 0; margin: 6px 0 16px; display: flex; gap: 8px; flex-wrap: wrap; }
.cd-weg li { padding: 6px 12px; border-radius: 999px; background: var(--cd-flaeche); color: var(--grau); font-weight: 700; font-size: 0.82rem; }
.cd-weg li.erledigt { background: #E8F7EE; color: #2E7D32; }
.cd-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cd-knopf { border: 0; cursor: pointer; padding: 10px 16px; border-radius: 999px; background: var(--blau); color: #fff; font-weight: 800; }
.cd-knopf:hover { background: var(--navy); }
.cd-knopf.hell { background: #fff; color: var(--navy); border: 1px solid var(--cd-rand); }
.cd-knopf.hell:hover { border-color: var(--blau); }
.cd-knopf.klein { padding: 7px 12px; font-size: 0.82rem; }
.cd-lagerzeile > .cd-knopf { justify-self: end; }
.cd-lager { display: grid; gap: 8px; }
.cd-lagerzeile { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(80px, 1fr) 132px 132px; gap: 14px; align-items: center; background: #fff; border: 1px solid var(--cd-rand); border-radius: 12px; padding: 12px 14px; }
.cd-lagerzeile div small { display: block; font: 400 0.7rem var(--mono); color: var(--grau); }
.cd-lagerzeile > span { white-space: nowrap; font-size: 0.82rem; color: var(--grau); font-variant-numeric: tabular-nums; }
.cd-reichweite { height: 8px; border-radius: 99px; background: var(--cd-flaeche); overflow: hidden; }
.cd-reichweite i { display: block; height: 100%; border-radius: 99px; background: #2E7D32; }
.cd-lagerzeile.knapp .cd-reichweite i { background: #E8A13A; }
.cd-lagerzeile.kritisch .cd-reichweite i { background: #C62828; }
.cd-lagerzeile.kritisch { border-color: #F3C3BF; }
.cd-auswahl { font: inherit; font-weight: 700; padding: 8px 12px; border-radius: 10px; border: 1px solid var(--cd-rand); background: #fff; color: var(--navy); }
.cd-linie { width: 100%; height: 150px; display: block; overflow: visible; }
.cd-linie polyline { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.cd-linie .ist { stroke: var(--blau); }
.cd-linie .vorschau { stroke: #E8A13A; stroke-dasharray: 4 4; }
.cd-linie line { stroke-width: 1; vector-effect: non-scaling-stroke; }
.cd-linie .raster { stroke: #EEF2F6; }
.cd-linie .heute { stroke: var(--cd-rand); stroke-dasharray: 2 3; }
.cd-linie polyline { stroke-width: 2; }
.cd-legende { display: flex; gap: 16px; font-size: 0.78rem; color: var(--grau); margin-top: 8px; }
.cd-legende span::before { content: ''; display: inline-block; width: 14px; height: 3px; margin-right: 6px; vertical-align: middle; background: var(--blau); }
.cd-legende .vorschau::before { background: #E8A13A; }
.cd-kalk { display: grid; gap: 14px; background: #fff; border: 1px solid var(--cd-rand); border-radius: 14px; padding: 16px; }
.cd-regler { display: grid; grid-template-columns: minmax(0, 1fr) 80px; gap: 6px 12px; align-items: center; font-size: 0.88rem; }
.cd-regler span { grid-column: 1 / -1; color: var(--grau); }
.cd-regler input { width: 100%; accent-color: var(--blau); }
.cd-regler b { text-align: right; font-variant-numeric: tabular-nums; color: var(--tinte); }
.cd-ergebnis { display: grid; gap: 10px; align-content: start; }
.cd-ergebnis b { white-space: nowrap; font-variant-numeric: tabular-nums; }
.cd-ergebnis div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--cd-rand); }
.cd-ergebnis span { color: var(--grau); }
.cd-ergebnis .schild { border: 0; background: var(--navy); color: #fff; padding: 14px; border-radius: 12px; margin-top: 4px; }
.cd-ergebnis .schild span { color: rgba(255, 255, 255, 0.7); }
.cd-ergebnis .schild b { font-size: 1.4rem; }
.cd-post { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 12px; }
.cd-postliste { display: grid; gap: 6px; align-content: start; }
.cd-mail { display: grid; gap: 2px; text-align: left; border: 1px solid var(--cd-rand); background: #fff; border-radius: 12px; padding: 12px; cursor: pointer; color: var(--text); }
.cd-mail span { font-size: 0.85rem; color: var(--grau); }
.cd-mail[aria-current="true"] { border-color: var(--blau); box-shadow: inset 3px 0 0 var(--blau); }
.cd-antwort { width: 100%; min-height: 90px; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--cd-rand); margin-bottom: 10px; resize: vertical; }
.cd-meldung {
  position: absolute; left: 50%; bottom: 16px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 999px; font-weight: 700; font-size: 0.85rem;
  transition: opacity 0.3s, transform 0.4s var(--kurve); white-space: nowrap;
}
.cd-meldung.an { opacity: 1; transform: translate(-50%, 0); }

@container (max-width: 820px) {
  .cd-rumpf { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .cd-nav { display: flex; overflow-x: auto; gap: 4px; padding: 8px; scrollbar-width: none; }
  .cd-nav::-webkit-scrollbar { display: none; }
  .cd-nav-knopf { flex: none; width: auto; padding: 9px 12px; }
  .cd-nav-knopf[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--hell); }
  .cd-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cd-zwei, .cd-post { grid-template-columns: minmax(0, 1fr); }
  .cd-zeile { grid-template-columns: 56px minmax(0, 1fr) 96px; }
  .cd-zeile span:nth-child(3), .cd-zeile span:nth-child(4) { display: none; }
  .cd-lagerzeile { grid-template-columns: minmax(0, 1fr) auto; }
  .cd-lagerzeile .cd-reichweite { grid-column: 1 / -1; grid-row: 2; }
  .cd-lagerzeile > span { grid-column: 1; grid-row: 3; }
  .cd-lagerzeile > .cd-knopf { grid-column: 2; grid-row: 1; }
  .cd-laden { display: none; }
  .cd-haupt { padding: 16px 14px 20px; }
  .cd-meldung { white-space: normal; text-align: center; width: calc(100% - 32px); }
}
@container (max-width: 460px) {
  .cd-kacheln.drei { grid-template-columns: minmax(0, 1fr); }
  .cd-demo-lang { display: none; }
  .cd-kopf { padding: 12px 14px; }
}