/* Gemeinsames Erscheinungsbild für das ERP: gleiche Farben, Schrift, Kopfleiste und Leiste unten wie die Montageplanung.
   Liegt über app.css und mobile.css. Die Firmenfarbe kommt aus --brand (siehe base.html). */
@font-face { font-family: "Poppins"; font-weight: 400; font-style: normal; font-display: swap; src: url("montage/fonts/poppins-400.9212f6f9860f.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 500; font-style: normal; font-display: swap; src: url("montage/fonts/poppins-500.a09f2fccfee3.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 600; font-style: normal; font-display: swap; src: url("montage/fonts/poppins-600.72993dddf88a.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-weight: 700; font-style: normal; font-display: swap; src: url("montage/fonts/poppins-700.25b0e113ca7c.woff2") format("woff2"); }

:root {
  --brand: #16469b;
  --brand-dark: #0f3375;
  --brand-soft: #e8eef8;
  --link: #0170b9;
  --ink: #282f39;
  --muted: #505769;
  --line: #dfe3e8;
  --bg: #f1f2f3;
  --ok: #1a8a4a;
  --warn: #d97706;
  --danger: #c62828;
  --radius: 14px;
  --shadow: 0 1px 2px rgba(40, 47, 57, .06), 0 4px 14px rgba(40, 47, 57, .06);
  /* ERP-Farbnamen auf die Firmenfarbe umbiegen */
  --green: var(--brand); --green2: var(--brand); --lime: var(--brand-soft);
  --gold: var(--brand); --gold-light: var(--brand-soft);
  --accent-soft: var(--brand-soft); --accent-tint: #cfdcf3; --accent-ink: var(--brand-dark);
  --black: var(--ink); --white: #fff;
}

body { background: var(--bg); color: var(--ink); font-family: "Poppins", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; }
body a { color: var(--link); }
body h1 { color: var(--brand); font-weight: 600; letter-spacing: 0; font-size: 1.6rem; }
body h2, body h3 { font-weight: 600; }
body .eyebrow { color: var(--muted); letter-spacing: .06em; }
body .muted { color: var(--muted); }

/* ---------- Kopfleiste ---------- */
body .topbar { height: auto; min-height: 64px; background: #fff; border-bottom: 1px solid var(--line); box-shadow: none; padding: 0 20px; gap: 14px; align-items: center; }
@media (max-width: 1180px) {
  body .topbar { flex-wrap: wrap; padding: 8px 16px; }
  body .topbar nav { order: 3; width: 100%; flex-wrap: wrap; overflow: visible; }
}
body .brand { color: var(--brand); min-width: 0; height: auto; overflow: visible; gap: 10px; }
body .brand:hover { text-decoration: none; }
body .brand-art { width: 190px; height: 44px; border-radius: 10px; background: #111; }
body .brand-art img { width: 420px; left: -86px; top: -108px; }
body .brand-name { color: var(--brand); font-size: 1.1rem; font-weight: 700; max-width: 260px; }
body .brand-logo { height: 36px; background: none; padding: 0; border-radius: 0; }
body .brand-product { align-self: center; margin: 0; padding-left: 10px; border-left: 2px solid var(--line); color: var(--muted); font-size: .8rem; font-weight: 500; letter-spacing: 0; }
body .topbar nav { gap: 4px; }
body .topbar nav a, body .nav-more summary { color: var(--ink); font-weight: 500; border-radius: 50px; padding: 10px 14px; }
body .topbar nav a:hover, body .nav-more[open] summary, body .nav-more summary:hover, body .topbar .nav-more:focus-within summary { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
body .admin-link { border: 0 !important; }
body .nav-more .quick-menu, body .quick-menu { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
body .topbar nav .nav-more .quick-menu a, body .quick-menu a { color: var(--ink); border-radius: 10px; }
body .topbar nav .nav-more .quick-menu a:hover, body .quick-menu a:hover { background: var(--brand-soft); color: var(--brand); }
body .quick-menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
body .quick-create summary, body .help-fab { background: var(--brand); color: #fff; box-shadow: none; }
body .topbar .gs-open { background: #fff; border: 2px solid var(--line); color: var(--muted); border-radius: 50px; padding: 8px 14px; font: inherit; cursor: pointer; }
body .topbar .gs-open:hover { border-color: var(--brand); color: var(--brand); }
body .topbar .gs-open kbd { background: var(--bg); border: 0; border-radius: 6px; padding: 1px 6px; color: var(--muted); font-size: .72rem; }
body .link-button { color: var(--link); text-decoration: underline; }
body .link-button:hover { color: var(--brand); }
body .tenant-switcher label { color: var(--muted); opacity: 1; }
body .tenant-switcher select { border: 2px solid var(--line); border-radius: 50px; }
body .feedback-fab { background: #fff; color: var(--brand); border: 2px solid var(--line); box-shadow: var(--shadow); font-family: inherit; }

/* ---------- Inhalt ---------- */
body .container { max-width: 1480px; padding: 22px 20px 48px; }
body .page-head { margin-bottom: 18px; }
body .card { background: #fff; border: 0; border-top: 0; border-radius: var(--radius); box-shadow: var(--shadow); }
body .metric:hover { border: 0; transform: none; box-shadow: 0 2px 4px rgba(40, 47, 57, .08), 0 8px 22px rgba(40, 47, 57, .10); }
body .metric.warning, body .task-important { border-left: 5px solid var(--warn); }
body .button { border-radius: 50px; min-height: 44px; padding: 10px 22px; font-weight: 600; font-family: inherit; background: #fff; color: var(--brand); border: 2px solid var(--brand); box-shadow: none; }
body .button:hover { background: var(--brand-soft); color: var(--brand); text-decoration: none; }
body .button.primary { background: var(--brand); border-color: var(--brand); color: #fff; background-image: none; }
body .button.primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
body .button.secondary { background: #fff; border: 2px solid var(--line); color: var(--brand); }
body .button.secondary:hover { background: var(--brand-soft); }
body .button.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
body input, body select, body textarea { border: 2px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-family: inherit; padding: 10px 14px; }
body input[type=checkbox], body input[type=radio] { width: 20px; height: 20px; padding: 0; accent-color: var(--brand); }
body input:focus, body select:focus, body textarea:focus { outline: 0; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(22, 70, 155, .15); }
body .field label, body .line-row label, body .card form p label { color: var(--ink); font-weight: 600; }
body table { background: transparent; }
body th { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
body td, body th { border-bottom: 1px solid var(--line); }
body .tabs a { border-radius: 50px; border: 2px solid var(--line); background: #fff; color: var(--ink); padding: 8px 16px; font-weight: 500; }
body .tabs a.active { background: var(--brand); border-color: var(--brand); color: #fff; }
body .badge, body .status { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
body .message { background: var(--brand-soft); color: var(--ink); border-left: 5px solid var(--brand); border-radius: 12px; }
body .message.error { background: #fdeaea; border-left-color: var(--danger); color: #7d1f1f; }
body .message.warning, body .message.warn { background: #fff4e0; border-left-color: var(--warn); color: #7a4a05; }
body .message.success { background: #e6f5ec; border-left-color: var(--ok); color: #11663a; }
body .line-row { background: #fafbfd; border-color: var(--line); }
body .searchable-option.active, body .searchable-option:hover, body .item-option.active, body .item-option:hover { background: var(--brand-soft); }
body .searchable-results, body .item-results { border-color: var(--line); border-radius: 12px; box-shadow: var(--shadow); }
body .sticky-save { background: rgba(255, 255, 255, .96); border-color: var(--line); }
body .drop-zone { border-color: var(--line); }
body .drop-zone.dragging { border-color: var(--brand); background: var(--brand-soft); }
body .help-dialog { border-radius: 18px; }
body .photo-pick { border-color: var(--brand); }
body .demo-ribbon { background: var(--brand-soft); color: var(--ink); }
body .demo-ribbon button { background: var(--brand); color: #fff; }
body .demo-ribbon .demo-update { background: var(--brand); color: #fff; }

/* ---------- Anmeldung ---------- */
body .login-page { background: var(--bg); }
body .login-page::before { display: none; }
body .login-page .container { justify-content: center; }
body .login-card { background: #fff; color: var(--ink); border: 0; border-top: 4px solid var(--brand); border-radius: 18px; box-shadow: var(--shadow); backdrop-filter: none; }
body .login-card h1 { color: var(--brand); }
body .login-card .muted { color: var(--muted); }
body .login-card label, body .login-kicker { color: var(--ink); }
body .login-card input { background: #fff; }

/* ---------- Handy ---------- */
.ic { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 700px) {
  body .topbar { height: auto; padding: 8px 12px; }
  body .brand-art { width: 150px; height: 36px; }
  body .brand-art img { width: 330px; left: -68px; top: -85px; }
  body .mobile-bar { background: #fff; border-top: 1px solid var(--line); gap: 0; padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); }
  body .mobile-bar a { color: var(--muted); font-weight: 600; border-radius: 12px; min-height: 56px; justify-content: center; }
  body .mobile-bar a:hover, body .mobile-bar a.more { color: var(--brand); text-decoration: none; }
  body .mobile-bar a.camera { background: var(--brand); color: #fff; }
  body .mobile-bar a .icon { font-size: 0; display: block; }
  body .mobile-menu { background: #fff; }
  body .mobile-menu-grid a { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
  body .mobile-menu-grid h3 { color: var(--muted); }
  body .help-fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ---------- Bereichs-Umschalter (Start, Montage, ERP, Projekte) ---------- */
body .areas { display: flex; gap: 2px; align-items: center; background: var(--bg); border-radius: 50px; padding: 3px; flex: none; }
body .areas a, body .areas .soon { padding: 6px 14px; border-radius: 50px; font-weight: 600; font-size: .85rem; line-height: 1.3; text-decoration: none; color: var(--muted); white-space: nowrap; }
body .areas a:hover { background: #fff; color: var(--brand); text-decoration: none; }
body .areas a.on, body .areas a.on:hover { background: var(--brand); color: #fff; }
body .areas .soon { opacity: .55; cursor: default; }
@media (max-width: 860px) {
  body .topbar .areas { order: 3; width: 100%; }
  body .topbar .areas a, body .topbar .areas .soon { flex: 1; text-align: center; padding: 8px 6px; }
}

/* Heinemann: Anmeldeseite mit größerem Logo, Firmenname in Blau (nicht Gold) */
body .login-card .login-kicker { color: var(--brand); }
body .login-card .login-brand-logo { height: 84px; padding: 4px 0; margin-bottom: 14px; }
body.login-page, body.login-page.login-neutral { background: var(--brand-soft); }
body.login-page::before { display: none; }
body.login-page .login-card { transform: none; margin: 8vh auto 0; }

/* Anmeldeseite mit Foto: blaue Leiste oben und unten, Foto in der Mitte, Anmeldefenster darauf */
body.login-has-image .container { display: block; max-width: none; padding: 0; }
body.login-has-image .login-stage { width: 100%; }
body.login-has-image .login-stage { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; }
.login-band { display: flex; align-items: center; justify-content: space-around; gap: 10px; background: var(--brand); color: #fff; font-weight: 700; font-size: 1.05rem; padding: 15px 24px; }
.login-band i { flex: none; width: 3px; height: 20px; background: #e0262f; transform: skewX(-20deg); }
.login-photo { display: flex; align-items: center; justify-content: center; min-height: 500px; padding: 30px 16px; background-size: cover; background-position: center; background-color: var(--brand-soft); }
body.login-has-image .login-photo .login-card { margin: 0; }
@media (max-width: 760px) {
  .login-band { display: none; }
  .login-photo { min-height: 100vh; padding: 16px; }
}
body .topbar .zt-quick { background: #fff; border: 2px solid var(--line); color: var(--brand); }
body .topbar .zt-quick:hover { border-color: var(--brand); }