/* Ertrago Portal — CI v1.0 (helle Welt) */
:root {
  --e-green: #5cc46a; --e-green-ui: #2f9e44; --e-green-text: #1f7f34;
  --e-deep: #0d1b12; --e-forest: #16301f; --e-sage: #9ab3a0;
  --e-offwhite: #eef5ef; --paper: #fbfcfa; --page: #f3f5f2;
  --ink: #14201a; --ink-2: #4e5e54; --muted: #7b8a80; --line: #dfe7e0;
  --status-ok: #0ca30c; --status-warn: #fab219; --status-serious: #ec835a; --status-crit: #d03b3b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page); color: var(--ink); }

.topbar { display: flex; justify-content: space-between; align-items: center;
  background: radial-gradient(800px 300px at 80% -50%, var(--e-forest) 0%, var(--e-deep) 70%);
  color: var(--e-offwhite); padding: .7rem 1.4rem; }
.wordmark { font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: inherit; text-decoration: none; }
.wordmark span { color: var(--e-green); }
.wordmark.big { font-size: 2.2rem; color: var(--ink); }
.wordmark.big span { color: var(--e-green-ui); }
.topbar nav { display: flex; gap: 1.1rem; align-items: center; }
.topbar nav a { color: var(--e-offwhite); text-decoration: none; font-size: .92rem; opacity: .9; }
.topbar nav a:hover { opacity: 1; }
.inline-form { display: inline; }
.linklike { background: none; border: none; color: var(--e-sage); font-size: .92rem; cursor: pointer; font-family: inherit; }

.content { max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem 4rem; }
h1 { font-size: 1.45rem; letter-spacing: -.02em; margin-bottom: 1rem; }
h2 { font-size: 1.02rem; letter-spacing: -.01em; margin-bottom: .8rem; }
h2 .muted { font-weight: 400; font-size: .85rem; }
.muted { color: var(--ink-2); }
.small { font-size: .82rem; }
a { color: var(--e-green-text); }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.3rem 1.4rem; margin-bottom: 1.3rem; }

/* Dashboard-Kacheln */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.tile { display: block; background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.2rem; text-decoration: none; color: var(--ink); transition: border-color .15s; }
.tile:hover { border-color: var(--e-green-ui); }
.tile-head { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; }
.tile-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.tile-sub { color: var(--ink-2); font-size: .82rem; margin-top: .15rem; }
.tile-stats { display: flex; gap: 2rem; margin: .9rem 0 .6rem; }
.stat-value { display: block; font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.stat-label { color: var(--ink-2); font-size: .78rem; }
.tile-foot { font-size: .75rem; }
.status-badge { font-size: .75rem; white-space: nowrap; }
.s-ok { color: var(--status-ok); }
.s-warn { color: #b07900; }
.s-crit { color: var(--status-crit); }
.s-none { color: var(--muted); }

/* Anlagen-Detail */
.plant-head { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.controls { display: flex; gap: .6rem; align-items: center; }
.range-switch { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.range-switch button { border: none; background: none; padding: .42rem .85rem; font-size: .85rem;
  cursor: pointer; color: var(--ink-2); font-family: inherit; }
.range-switch button.active { background: var(--e-green-ui); color: #fff; font-weight: 600; }
#date-picker { border: 1px solid var(--line); border-radius: 8px; padding: .38rem .6rem;
  font-family: inherit; font-size: .85rem; background: var(--paper); color: var(--ink); }
.chart { width: 100%; height: 340px; }
.chart.tall { height: 420px; }

/* Login */
.login-wrap { display: flex; justify-content: center; padding-top: 8vh; }
.login-card { width: 340px; text-align: center; }
.login-card p { margin: .3rem 0 1.2rem; }
.login-card label { display: block; text-align: left; font-size: .82rem; color: var(--ink-2); margin-bottom: .8rem; }
.login-card input[type=text], .login-card input[type=password] { width: 100%; margin-top: .25rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; font-size: .95rem; font-family: inherit; }
.btn-primary { width: 100%; background: var(--e-green-ui); color: #fff; border: none;
  padding: .6rem; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: var(--e-green-text); }
.form-error { color: var(--status-crit); font-size: .85rem; margin-bottom: .8rem; }