/* EP-Cube-CI für die Konzeptdemo: Roboto, Schwarz/Weiß, Akzentgrün #00C85A, Pill-Buttons.
   Gemeinsam genutzt von Assistent, Dashboard und AR-Ansicht. */
@font-face { font-family: "Roboto"; font-weight: 300; font-display: swap; src: url(/fonts/roboto-latin-300-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 400; font-display: swap; src: url(/fonts/roboto-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 500; font-display: swap; src: url(/fonts/roboto-latin-500-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 700; font-display: swap; src: url(/fonts/roboto-latin-700-normal.woff2) format("woff2"); }
@font-face { font-family: "Roboto"; font-weight: 900; font-display: swap; src: url(/fonts/roboto-latin-900-normal.woff2) format("woff2"); }

:root {
  --ep-black: #000000;
  --ep-ink: #111111;
  --ep-ink-2: #555555;
  --ep-ink-3: #8a8a8a;
  --ep-green: #00c85a;        /* CI-Akzent: Flächen, Buttons (Text darauf schwarz) */
  --ep-green-strong: #00a34a; /* Grün für Linien/Balken auf Weiß (≥ 3:1) */
  --ep-green-text: #00803a;   /* Grün als Schrift auf Weiß (≥ 4.5:1) */
  --ep-green-soft: #e5f9ee;
  --ep-bg: #f5f5f5;
  --ep-surface: #ffffff;
  --ep-line: #e6e6e6;
  --ep-radius: 14px;
  --ep-pill: 999px;
  --ep-font: "Roboto", "Helvetica Neue", Arial, sans-serif;
}

/* Kopfzeile wie auf epcube.com: schwarz, weiße Wortmarke, grüner Akzent */
.ep-topbar {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 18px;
  height: 64px; padding: 0 28px;
  background: var(--ep-black); color: #fff;
  font-family: var(--ep-font);
}
.ep-brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: #fff; }
.ep-wordmark { font-weight: 900; font-size: 22px; letter-spacing: .04em; line-height: 1; }
.ep-product {
  font-weight: 400; font-size: 14px; color: rgba(255,255,255,.72);
  padding-left: 14px; border-left: 1px solid rgba(255,255,255,.28); line-height: 1.2;
}
.ep-badge {
  font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase;
  color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.3);
  padding: 3px 9px; border-radius: var(--ep-pill);
}
.ep-nav { display: flex; gap: 6px; margin-left: auto; align-items: center; }
.ep-nav a {
  color: rgba(255,255,255,.82); text-decoration: none; font-size: 15px; font-weight: 500;
  padding: 8px 14px; border-radius: var(--ep-pill); transition: background .15s, color .15s;
}
.ep-nav a:hover { color: #fff; background: rgba(255,255,255,.1); }
.ep-nav a.active { background: var(--ep-green); color: #000; }

/* Pill-Buttons */
.ep-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--ep-font); font-weight: 500; font-size: 15px;
  border-radius: var(--ep-pill); padding: 10px 22px; cursor: pointer; text-decoration: none;
  border: 1.5px solid transparent; transition: background .15s, border-color .15s, color .15s;
}
.ep-btn-primary { background: var(--ep-green); color: #000; }
.ep-btn-primary:hover { background: #00b350; }
.ep-btn-dark { background: #000; color: #fff; }
.ep-btn-dark:hover { background: #222; }
.ep-btn-outline { background: #fff; color: #000; border-color: #000; }
.ep-btn-outline:hover { background: #000; color: #fff; }

@media (max-width: 760px) {
  .ep-topbar { padding: 0 14px; gap: 10px; height: 56px; }
  .ep-wordmark { font-size: 18px; }
  .ep-product, .ep-badge { display: none; }
  .ep-nav a { padding: 6px 10px; font-size: 13.5px; }
}