/* ==========================================================================
   MARKENTRIX OS — Basis, Reset, Typografie, App-Shell-Grid
   ========================================================================== */

* { box-sizing: border-box; }
html { height: 100%; }
html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--page); color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  /* Verhindert horizontalen Scroll durch das per transform ausgeblendete
     Off-Canvas-Sidebar-Panel auf Tablet/Mobile (siehe .sidebar @900px). */
  overflow-x: hidden;
}
h1, h2, h3, h4, .font-display, .kpi-value, .brand-wordmark {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}
h1 { font-size: 20px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 12px; }
h3 { font-size: 13.5px; font-weight: 700; margin: 0 0 8px; }
p  { margin: 0 0 8px; line-height: 1.5; }
a  { color: var(--bar-hue); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { margin: 0; padding: 0; }
button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }
img, svg { display: block; max-width: 100%; }

/* ---- Fokuszustände (Tastaturbedienbarkeit) ---- */
:focus { outline: none; }
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--r-sm);
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  box-shadow: var(--focus-ring);
}

/* ---- Scrollbars ---- */
* { scrollbar-width: thin; scrollbar-color: var(--baseline) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--baseline); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

/* ---- Utility ---- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 8px; top: -48px; background: var(--bar-hue); color: #05070B;
  padding: 10px 16px; border-radius: var(--r-sm); z-index: var(--z-palette); font-weight: 600;
  transition: top var(--dur-base) var(--ease);
}
.skip-link:focus { top: 8px; }
.text-muted { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.mono { font-variant-numeric: tabular-nums; }
.demo-flag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
  color: var(--status-warning); background: rgba(250,178,25,0.12);
  border: 1px solid rgba(250,178,25,0.35); border-radius: var(--r-pill);
  padding: 2px 8px;
}

/* ---- App-Shell Grid ---- */
.app-shell[hidden] { display: none; }
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  grid-template-rows: var(--topbar-h) 1fr;
  grid-template-areas: "sidebar topbar" "sidebar main";
  height: 100vh;
  transition: grid-template-columns var(--dur-slow) var(--ease);
}
.app-shell.sidebar-collapsed { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }

.app-main {
  grid-area: main;
  overflow-y: auto;
  padding: var(--sp-6) var(--sp-7) var(--sp-9);
  min-width: 0;
}
.view { display: none; }
.view.active { display: block; animation: view-in var(--dur-base) var(--ease); }
@keyframes view-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap; }
.view-title-group .eyebrow { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin-bottom: 4px; }
.view-subtitle { color: var(--text-secondary); font-size: 13px; margin: 0; }
.view-actions { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }

/* ---- Grid / Layout Helpers ---- */
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }
.grid-auto-240 { grid-template-columns: repeat(auto-fill, minmax(240px,1fr)); }
.grid-auto-280 { grid-template-columns: repeat(auto-fill, minmax(280px,1fr)); }
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); }
.mt-2 { margin-top: var(--sp-2); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); }

/* ---- Responsive Breakpoints ---- */
@media (max-width: 1279px) {
  .app-shell { grid-template-columns: var(--sidebar-w-collapsed) 1fr; }
  .grid-6 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas: "topbar" "main";
  }
  .app-shell .sidebar { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); z-index: var(--z-sidebar); box-shadow: var(--shadow-lg); }
  .app-shell.sidebar-open .sidebar { transform: translateX(0); }
  .grid-6, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .app-main { padding: var(--sp-4) var(--sp-4) var(--sp-8); }
}
@media (max-width: 560px) {
  .grid-6, .grid-4, .grid-3, .grid-2 { grid-template-columns: 1fr; }
}