/* Ertrago Portal — CI v2.0 "Guardian" (Navy/Teal, Inter + IBM Plex Mono)
   Wortmarke im Portal: nur "ertrago" (ohne Guardian-Zusatz). */

@font-face { font-family: 'Inter'; src: url("fonts/inter-latin-400-normal.da03732a27e1.woff2") format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url("fonts/inter-latin-500-normal.51205681a1ba.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url("fonts/inter-latin-600-normal.2ede57db1a3a.woff2") format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url("fonts/inter-latin-700-normal.8ca0a5155296.woff2") format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Inter'; src: url("fonts/inter-latin-800-normal.900ae45e40b8.woff2") format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url("fonts/ibm-plex-mono-latin-500-normal.b1c8a895f5fd.woff2") format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url("fonts/ibm-plex-mono-latin-600-normal.5a2ce7798732.woff2") format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Marke */
  --navy: #081D3A;        /* Ertrago Navy: Primaerfarbe, dunkle Flaechen, Text */
  --navy-2: #0E2A52;      /* hellere Navy-Stufe (Hover auf dunkel) */
  --teal: #00C2A8;        /* Guardian Teal: Verifikation, Erfolg, CTA */
  --teal-dark: #00A18B;   /* Teal-Hover */
  --teal-text: #007A69;   /* Teal als TEXT auf hell (kontrastfest) */
  --blue: #1E4FFF;        /* Signal Blue: Links, Fokus, technische Interaktion */
  --gold: #F2B84B;        /* Revenue Gold: monetaeres Delta */
  --gold-text: #96700F;   /* Gold als Text */
  --coral: #E96C63;       /* Alert Coral: nur kritische Abweichung */
  --coral-text: #C6423A;  /* Coral als Text */
  /* Neutrale */
  --page: #F5F7FA;        /* Cloud */
  --paper: #FFFFFF;
  --ink: #111827;
  --ink-2: #3D4757;
  --muted: #6B7280;       /* Steel */
  --line: #E3E8F0;
  /* Status */
  --status-ok: #008672; --status-warn: #A87413; --status-crit: var(--coral-text);
  /* Typografie */
  --font-ui: 'Inter', system-ui, -apple-system, Arial, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', monospace;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-ui); background: var(--page); color: var(--ink);
  min-height: 100vh; display: flex; flex-direction: column; }  /* Fusszeile auch bei kurzen Seiten unten */

/* Kopfleiste: Marke, Hauptnavigation, Kontomenue; mobil wandert die Navigation als Tab-Leiste nach unten */
.topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 1.5rem;
  height: 60px; padding: 0 max(1.4rem, env(safe-area-inset-left)) 0 max(1.4rem, env(safe-area-inset-right));
  background: var(--navy); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 4px 16px rgba(8,29,58,.12); }
.brand { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand img { display: block; border-radius: 8px; box-shadow: 0 0 0 1px rgba(255,255,255,.14); }
.wordmark { font-size: 1.3rem; font-weight: 800; letter-spacing: -.03em; color: #fff; text-decoration: none; }
.wordmark span { color: inherit; }
.wordmark.big { font-size: 2.2rem; color: var(--navy); }
.ico { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.mainnav { display: flex; align-items: center; gap: .25rem; flex: 1; }
.mainnav a { position: relative; display: inline-flex; align-items: center; gap: .5rem; height: 38px;
  padding: 0 .85rem; border-radius: 9px; color: rgba(255,255,255,.72); text-decoration: none;
  font-size: .9rem; font-weight: 500; transition: background-color .15s, color .15s; }
.mainnav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.mainnav a[aria-current="page"] { color: #fff; background: rgba(255,255,255,.11); }
.mainnav a[aria-current="page"] .ico { color: var(--teal); }
.mainnav a:focus-visible, .nav-more:focus-visible, .account summary:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.nav-more { display: none; }   /* nur in der mobilen Tab-Leiste, am Desktop steht die Fusszeile unten */

.account { position: relative; margin-left: auto; flex: none; }
.account summary { list-style: none; cursor: pointer; display: flex; align-items: center;
  padding: 3px; border-radius: 50%; }
.account summary::-webkit-details-marker { display: none; }
.avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--teal); color: var(--navy); font-size: .8rem; font-weight: 700; letter-spacing: .02em;
  transition: box-shadow .15s; }
.account summary:hover .avatar, .account[open] .avatar { box-shadow: 0 0 0 3px rgba(0,194,168,.35); }
.account-menu { position: absolute; right: 0; top: calc(100% + .55rem); min-width: 240px; max-width: calc(100vw - 1.5rem);
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 40px rgba(8,29,58,.18); padding: .4rem; }
.account-who { padding: .6rem .7rem .7rem; border-bottom: 1px solid var(--line); margin-bottom: .35rem; }
.account-who b { display: block; font-size: .92rem; overflow-wrap: anywhere; }
.account-who span { display: block; font-size: .8rem; color: var(--muted); margin-top: .1rem; overflow-wrap: anywhere; }
.account-menu a, .account-menu button { display: flex; align-items: center; gap: .6rem; width: 100%; padding: .6rem .7rem;
  border: none; border-radius: 8px; background: none; color: var(--ink); font-family: inherit;
  font-size: .9rem; cursor: pointer; text-align: left; text-decoration: none; }
.account-menu a:hover, .account-menu a[aria-current="page"] { background: var(--page); }
.account-menu a[aria-current="page"] .ico { color: var(--teal-text); }
.account-menu form { border-top: 1px solid var(--line); margin-top: .35rem; padding-top: .35rem; }
.account-menu button:hover { background: var(--page); color: var(--coral-text); }
.account-menu .ico { width: 18px; height: 18px; }

.content { flex: 1 0 auto; width: 100%; max-width: 1100px; margin: 0 auto; padding: 1.6rem 1.2rem 3rem; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .4rem 1.5rem;
  width: 100%; max-width: 1100px; margin: 0 auto; padding: 1rem 1.2rem 1.2rem; border-top: 1px solid var(--line);
  font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: var(--ink); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }

/* Kontaktformular (core/contact.html) */
.contact-card { max-width: 760px; }
.contact-card > p.muted { margin-bottom: 1.1rem; }
.contact-card p { margin-bottom: .8rem; }
.contact-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 0 1rem; }
.contact-form label { display: block; font-size: .82rem; color: var(--ink-2); margin-bottom: .9rem; }
.contact-form input, .contact-form select, .contact-form textarea { display: block; width: 100%; margin-top: .25rem;
  padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 8px; background: #fff;
  font-size: .95rem; font-family: inherit; color: var(--ink); }
.contact-form textarea { resize: vertical; min-height: 9rem; line-height: 1.5; }
.contact-form :is(input, select, textarea):focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.contact-form .btn-primary { width: auto; padding: .6rem 1.4rem; margin-bottom: .9rem; }
.contact-form .field-error { display: block; color: var(--status-crit); font-size: .8rem; margin-top: .25rem; }
.contact-form .hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Rechtstexte (Impressum, Datenschutz, Nutzungsbedingungen) */
.legal-text { max-width: 760px; line-height: 1.6; overflow-wrap: anywhere; }
.legal-text h2 { margin: 1.4rem 0 .5rem; }
.legal-text h2:first-child { margin-top: 0; }
.legal-text p { margin-bottom: .8rem; }
h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.02em; margin-bottom: 1rem; }
h2 { font-size: 1.02rem; font-weight: 700; 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(--blue); }

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

/* Kennzahlen (Anlagenseite: Live-Kachel, Energiefluss) */
.tile-stats { display: flex; gap: 2rem; margin: .9rem 0 .6rem; }
.live-card .tile-stats { flex-wrap: wrap; row-gap: .75rem; }
.stat-value { display: block; font-size: 1.45rem; font-weight: 600;
  font-family: var(--font-num); letter-spacing: -.03em; }
.stat-label { color: var(--ink-2); font-size: .78rem; }
.status-badge { font-size: .75rem; white-space: nowrap; font-family: var(--font-ui); }
.s-ok { color: var(--status-ok); }
.s-warn { color: var(--status-warn); }
.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; flex-wrap: wrap; 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(--navy); color: #fff; font-weight: 600; }
.range-switch.small button { padding: .28rem .6rem; font-size: .78rem; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.card-head h2 { margin-bottom: 0; }
.card-head + .chart { margin-top: .6rem; }
#date-picker { border: 1px solid var(--line); border-radius: 8px; padding: .38rem .6rem;
  font-family: var(--font-num); font-size: .82rem; 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; max-width: 100%; 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; }
.login-card input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.btn-primary { width: 100%; background: var(--teal); color: var(--navy); border: none;
  padding: .6rem; border-radius: 8px; font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit; }
.btn-primary:hover { background: var(--teal-dark); }
.form-error { color: var(--status-crit); font-size: .85rem; margin-bottom: .8rem; }
.login-card p.small { font-size: .82rem; margin: .9rem 0 0; }
.login-card p.left { text-align: left; color: var(--ink-2); margin: 0 0 1rem; }
.login-card a.btn-primary { display: inline-block; text-decoration: none; }

/* Seitenkopf + Reiter */
.page-head { display: flex; justify-content: space-between; align-items: center;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .4rem; }
.page-head h1 { margin-bottom: 0; }
.tabs { display: flex; gap: 1.6rem; box-shadow: inset 0 -1px 0 var(--line); margin-bottom: 1.2rem;
  overflow-x: auto; scrollbar-width: none; }  /* schmal: Reiter wischen statt Seite verbreitern;
  Linie als Schatten, damit der aktive Reiter sie ohne negativen Rand ueberdeckt */
.tabs::-webkit-scrollbar { display: none; }
.tabs a { padding: .55rem .15rem; text-decoration: none; white-space: nowrap;
  color: var(--ink-2); font-size: .95rem; border-bottom: 3px solid transparent; transition: color .12s; }
.tabs a:hover { color: var(--ink); }
.tabs a.active { color: var(--blue); border-bottom-color: var(--blue); font-weight: 600; }

/* Stammdaten-Kachel */
.meta-card { display: flex; flex-wrap: wrap; gap: .6rem 2.6rem; padding: 1rem 1.4rem; }
.meta-label { display: block; font-size: .7rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .15rem; }
.meta-value { font-size: .95rem; font-weight: 600; }
.chip { display: inline-block; background: var(--page); color: var(--navy);
  border: 1px solid var(--line); border-radius: 999px; padding: .1rem .65rem;
  font-size: .8rem; font-weight: 500; margin-right: .35rem; }

/* Info-Banner (Abrechnung) */
.info-banner { display: flex; gap: .8rem; align-items: flex-start;
  background: var(--page); border: 1px solid var(--line); border-left: 4px solid var(--teal);
  border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.2rem;
  font-size: .87rem; color: var(--ink-2); line-height: 1.5; }
.info-banner b { color: var(--ink); }
.info-icon { color: var(--teal-text); font-size: 1.05rem; line-height: 1.4; }

/* Jahres-Stepper + Buttons */
.year-stepper { display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: 8px; background: var(--paper); overflow: hidden; }
.year-stepper button { border: none; background: none; padding: .42rem .7rem; font-size: 1rem;
  cursor: pointer; color: var(--blue); font-family: inherit; line-height: 1; }
.year-stepper button:hover:not(:disabled) { background: var(--page); }
.year-stepper button:disabled { color: var(--line); cursor: default; }
.year-stepper span { min-width: 3.4rem; text-align: center; font-weight: 600;
  font-size: .88rem; font-family: var(--font-num); }
.btn-small { display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .95rem;
  border-radius: 8px; font-size: .87rem; background: var(--teal); color: var(--navy);
  text-decoration: none; font-weight: 700; transition: background .12s; }
.btn-small:hover { background: var(--teal-dark); }
.btn-small.ghost { background: none; border: 1px solid var(--line); color: var(--ink-2); font-weight: 500; }
.btn-small.ghost:hover { background: var(--page); border-color: var(--ink-2); }

/* Abgleichs-Tabelle */
.table-scroll { overflow-x: auto; }
.table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; z-index: 1;
  background: var(--paper); }
.check-detail .table-scroll th:first-child, .check-detail .table-scroll td:first-child { background: var(--page); }
.settle-table { width: 100%; border-collapse: collapse; font-size: .87rem; }
.settle-table th, .settle-table td { padding: .58rem .75rem; text-align: left; }
.settle-table thead th { color: var(--ink-2); font-weight: 600; font-size: .76rem;
  text-transform: uppercase; letter-spacing: .03em; border-bottom: 2px solid var(--line); }
.settle-table tbody td { border-bottom: 1px solid #EDF1F7; }
.settle-table tbody tr:nth-child(even) td, .table-scroll tbody tr:nth-child(even) td:first-child { background: #F7F9FC; }
.settle-table td.num, .settle-table th.num { text-align: right; }
.settle-table td.num { font-family: var(--font-num); font-size: .82rem; }
.settle-table td { white-space: nowrap; }
.settle-table .sep { border-left: 1px solid var(--line); }
.settle-table .empty { color: #C3CBD8; }
.settle-table tfoot th { border-top: 2px solid var(--navy); padding-top: .7rem;
  color: var(--ink); font-family: var(--font-num); }
.settle-table tr.clickable { cursor: pointer; }
.settle-table tr.clickable:hover td { background: #F3F6FF !important; }
.settle-table tr.selected td { background: #EBF0FF !important; }
.doc-link { display: inline-block; text-decoration: none; font-size: .8rem;
  border: 1px solid var(--line); border-radius: 6px; padding: .1rem .45rem; margin-right: .3rem; }
.doc-link:hover { border-color: var(--blue); }

/* Einzelpruefungen-Detail */
.check-detail { margin-top: 1rem; background: var(--page); border: 1px solid var(--line);
  border-radius: 10px; padding: .9rem 1.1rem; font-size: .85rem; }
.check-detail > b { display: block; margin-bottom: .5rem; }
.check-row { padding: .18rem 0; color: var(--ink-2); }
.check-row.ok span { color: var(--status-ok); font-weight: 700; }
.check-row.fail span { color: var(--status-crit); font-weight: 700; }
.check-row.fail { color: var(--ink); }

/* Anlagenteil-Filter (Chips) */
.part-filter { display: flex; align-items: center; gap: .45rem; margin: -.4rem 0 1rem; flex-wrap: wrap; }
.part-filter button { border: 1px solid var(--line); background: var(--paper); color: var(--ink-2);
  border-radius: 999px; padding: .3rem .85rem; font-size: .84rem; cursor: pointer; font-family: inherit; }
.part-filter button:hover { border-color: var(--navy); }
.part-filter button.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

/* Info-Button + Erklaer-Modal (Verguetung) */
.info-btn { display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-left: .4rem; vertical-align: text-bottom;
  border-radius: 50%; border: 1px solid var(--blue); background: none;
  color: var(--blue); font-size: .72rem; font-weight: 700; font-style: italic;
  font-family: Georgia, serif; cursor: pointer; line-height: 1; }
.info-btn:hover { background: rgba(30, 79, 255, 0.08); }
.modal-overlay { position: fixed; inset: 0; background: rgba(8, 29, 58, 0.55);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 1rem; }
.modal-overlay[hidden] { display: none; }  /* display:flex wuerde hidden sonst aushebeln */
.modal { background: var(--paper); border-radius: 10px; max-width: 720px; width: 100%;
  max-height: 90vh; max-height: 90dvh; overflow-y: auto; padding: 1.4rem 1.6rem 1.5rem;
  box-shadow: 0 18px 50px rgba(8, 29, 58, 0.35); }
.modal p { margin: .6rem 0; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.modal p b { color: var(--ink); }
.modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.modal-head h2 { margin-bottom: .2rem; font-size: 1.1rem; }
.modal-close { border: none; background: none; font-size: 1.5rem; line-height: 1;
  color: var(--muted); cursor: pointer; padding: 0 .2rem; }
.modal-close:hover { color: var(--ink); }
.dot { display: inline-block; width: .7rem; height: .7rem; border-radius: 3px;
  margin-right: .3rem; vertical-align: baseline; }
.dot-mw { background: var(--blue); }
.dot-pm { background: var(--teal); }
.info-svgs { display: flex; flex-wrap: wrap; justify-content: center; margin: .8rem 0 .2rem; }
.info-svg { flex: 1 1 260px; max-width: 330px; height: auto; }
.info-svg .svg-title { font-size: 13px; font-weight: 600; fill: var(--ink); }
.info-svg .svg-aw { stroke: var(--navy); stroke-width: 1.5; stroke-dasharray: 6 4; }
.info-svg .svg-awlabel { font-size: 11px; fill: var(--navy); font-weight: 600; }
.info-svg .svg-base { stroke: var(--line); stroke-width: 2; }
.info-svg .svg-mw { fill: var(--blue); rx: 3; }
.info-svg .svg-pm { fill: var(--teal); rx: 3; }
.info-svg .svg-seg { font-size: 12px; font-weight: 700; fill: #fff; }
.info-svg .svg-seg-dark { fill: var(--navy); }
.info-svg .svg-segsub { font-size: 9.5px; fill: var(--ink-2); }
.info-svg .svg-seg-light { fill: #fff; opacity: .95; }
.info-svg .svg-segsub.svg-seg-light { fill: #E7EDFB; }
.info-svg .svg-segsub.svg-seg-dark { fill: var(--navy-2); }
.info-svg .svg-sum { font-size: 11.5px; font-weight: 600; fill: var(--ink); }
.info-svg text { font-family: var(--font-ui); }

/* Live-Kacheln + Datums-Stepper */
.live-card { padding: .9rem 1.4rem; }
.date-stepper { display: flex; align-items: center; border: 1px solid var(--line);
  border-radius: 8px; background: var(--paper); overflow: hidden; }
.date-stepper input { border: none; background: none; padding: .38rem .3rem;
  font-family: var(--font-num); font-size: .82rem; color: var(--ink); }
.date-stepper button { border: none; background: none; padding: .38rem .65rem; font-size: 1rem;
  cursor: pointer; color: var(--blue); font-family: inherit; line-height: 1; }
.date-stepper button:hover:not(:disabled) { background: var(--page); }
.date-stepper button:disabled { color: var(--line); cursor: default; }

/* WR-Status-Ampel */
[hidden] { display: none !important; }
.inv-list { display: flex; flex-direction: column; gap: .15rem; }
.inv-summary { font-size: .85rem; color: var(--ink-2); margin: .2rem 0 .5rem; }
.dc-detail { border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .8rem; }
.dc-detail .card-head { gap: .6rem; }
.dc-detail h3 { margin: 0; font-size: .95rem; flex: 1; }
.dc-detail .modal-close { font-size: 1.3rem; }
.inv-row { display: grid; grid-template-columns: 14px minmax(140px, 240px) 1fr auto; gap: .7rem; align-items: center;
  padding: .38rem .5rem; border-radius: 8px; font-size: .9rem; }
.inv-row:nth-child(even) { background: var(--cloud, #F5F7FA); }
.inv-row .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--status-ok); display: inline-block; }
.inv-row.auffaellig .dot { background: var(--status-warn); }
.inv-row.ausfall .dot { background: var(--status-crit); }
.inv-row.lernphase .dot, .inv-row.keine_daten .dot { background: var(--baseline, #C9D3E0); }
.inv-row .inv-name { font-weight: 600; color: var(--ink); }
.inv-row .inv-name small { color: var(--muted); font-weight: 400; }
.inv-row .inv-text { color: var(--ink-2); overflow-wrap: anywhere; }
.badge-recur { display: inline-block; font-size: .68rem; font-weight: 600; padding: .05rem .4rem; border-radius: 999px;
  background: rgba(242, 184, 75, 0.18); color: #8A5A00; vertical-align: middle; white-space: nowrap; }
.events-table td { white-space: normal; vertical-align: top; }
.events-table td:nth-child(-n+3) { white-space: nowrap; }
.events-table td.ev-title { min-width: 150px; }
.events-table td.ev-msg { color: var(--ink-2); }
.inv-row.auffaellig .inv-text, .inv-row.ausfall .inv-text { font-weight: 600; }
.inv-row.ausfall .inv-text { color: var(--status-crit); }
.inv-row.auffaellig .inv-text { color: var(--status-warn); }
.inv-row .inv-kwh { font-family: var(--font-num); font-size: .85rem; color: var(--muted); white-space: nowrap; }
.info-banner.flash { border-color: var(--teal, #00C2A8); margin-bottom: 1rem; }
/* Formulare (Beleg-Upload, Benachrichtigungen) */
.bu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.7rem 1rem; }
.bu-grid label { display:block; font-size:.78rem; color:var(--steel,#6B7280); margin-bottom:.15rem; }
.bu-grid input, .bu-grid select, .bu-grid textarea {
    width:100%; padding:.4rem .5rem; border:1px solid #d6dbe3; border-radius:8px;
    font:inherit; background:#fff; }
.bu-grid .full { grid-column:1 / -1; }
.bu-field-err { color:var(--coral,#E96C63); font-size:.78rem; margin-top:.15rem; }
.bu-section { grid-column:1 / -1; font-weight:700; font-size:.8rem; color:var(--navy,#081D3A);
    border-bottom:1px solid #e5e9f0; padding-bottom:.2rem; margin-top:.4rem; }
.bu-drop { border:2px dashed #c8d0dc; border-radius:10px; padding:2.2rem 1rem; text-align:center; }
.bu-actions { margin-top:1rem; display:flex; gap:.6rem; align-items:center; }
.bu-model { font-size:.75rem; color:var(--steel,#6B7280); }
.bu-grid label input[type=checkbox] { width: auto; margin-right: .5rem; vertical-align: middle; }

/* Neuigkeiten (Changelog) */
.changelog-kind { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em;
  margin: 1rem 0 .3rem; color: var(--ink-2); }
.changelog-kind.changelog-wichtig { color: var(--coral-text); }
.changelog-kind.changelog-neu { color: var(--teal-text); }
.changelog-list { margin: 0; padding-left: 1.2rem; }
.changelog-list li { margin: .25rem 0; }
.changelog-commits { margin-top: 1rem; font-size: .88rem; }
.changelog-commits summary { cursor: pointer; color: var(--ink-2); }
.changelog-commits ul { list-style: none; padding-left: 0; }
.changelog-commits li { margin: .3rem 0; }

/* Mobil: Kopfleiste nur Marke + Konto, Navigation als Tab-Leiste am unteren Rand */
@media (max-width: 760px) {
  .topbar { height: 54px; padding: 0 max(1rem, env(safe-area-inset-left)) 0 max(1rem, env(safe-area-inset-right)); }
  .brand img { width: 28px; height: 28px; }
  .wordmark { font-size: 1.2rem; }
  .mainnav { position: fixed; z-index: 30; left: 0; right: 0; bottom: 0; gap: 0; justify-content: space-around;
    padding: .3rem max(.4rem, env(safe-area-inset-right)) calc(.3rem + env(safe-area-inset-bottom)) max(.4rem, env(safe-area-inset-left));
    background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px);
    border-top: 1px solid var(--line); }
  .mainnav a, .nav-more { flex: 1 1 0; max-width: 120px; flex-direction: column; justify-content: center; gap: .2rem;
    height: 54px; padding: 0 .2rem; color: var(--muted); font-size: .7rem; font-weight: 600; border-radius: 12px; }
  .nav-more { display: flex; align-items: center; border: none; background: none; font-family: inherit; cursor: pointer; }
  .mainnav a:hover, .nav-more:hover { color: var(--navy); background: none; }
  .mainnav .ico { width: 44px; height: 26px; padding: 3px 12px; border-radius: 13px; box-sizing: border-box;
    transition: background-color .15s; }
  .mainnav a[aria-current="page"], .mainnav .nav-more:is([aria-current="page"], [aria-expanded="true"]) { color: var(--navy); background: none; }
  .mainnav a[aria-current="page"] .ico, .mainnav .nav-more:is([aria-current="page"], [aria-expanded="true"]) .ico {
    color: var(--teal-text); background: rgba(0,194,168,.16); }
  .has-nav .content { padding-bottom: calc(2rem + 62px + env(safe-area-inset-bottom)); }
  .has-nav .install-banner { bottom: calc(1rem + 62px + env(safe-area-inset-bottom)); }
  /* Fusszeile steckt hinter "Mehr": Blatt direkt ueber der Tab-Leiste, Seite dahinter abgedunkelt */
  .has-nav .site-footer { display: none; }
  .has-nav .site-footer.open { display: flex; position: fixed; z-index: 29; left: 0; right: 0;
    bottom: calc(62px + env(safe-area-inset-bottom)); max-width: none; flex-direction: column; align-items: stretch; gap: 0;
    padding: .4rem max(.75rem, env(safe-area-inset-right)) .8rem max(.75rem, env(safe-area-inset-left));
    background: var(--paper); border: none; border-radius: 16px 16px 0 0; font-size: .95rem; color: var(--ink);
    box-shadow: 0 -8px 30px rgba(8,29,58,.14), 0 0 0 100vmax rgba(8,29,58,.32); }
  .site-footer.open .footer-links { flex-direction: column; gap: 0; }
  .site-footer.open .footer-links a { display: block; padding: .85rem .4rem; border-bottom: 1px solid var(--line); }
  body:has(.site-footer.open) .install-banner { display: none; }
  .site-footer.open .footer-version { order: 1; padding: .8rem .4rem 0; font-size: .8rem; color: var(--muted); }
}

/* Mobil (Smartphone hochkant) */
@media (max-width: 640px) {
  .content { padding: 1rem .75rem 3rem; }
  .site-footer { padding-left: .75rem; padding-right: .75rem; }
  h1 { font-size: 1.25rem; }
  .card { padding: 1rem; }
  .meta-card { gap: .6rem 1.6rem; padding: .9rem 1rem; }
  .live-card { padding: .9rem 1rem; }
  .live-card .tile-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1rem; }
  .chart { height: 280px; }
  .modal { padding: 1rem 1rem 1.2rem; }
  .info-banner { padding: .8rem .9rem; }
  /* Steuerung volle Breite: Zeitraum-Schalter und Datum je eine Zeile */
  .page-head .controls { width: 100%; }
  .page-head .range-switch, .page-head .date-stepper { flex: 1 1 auto; }
  .page-head .range-switch button { flex: 1; }
  .page-head .date-stepper input { flex: 1; min-width: 0; text-align: center; }
  /* Tabellen bis an den Kartenrand wischen */
  .table-scroll { margin: 0 -1rem; padding: 0 1rem; }
  .check-detail .table-scroll { margin: 0 -1.1rem; padding: 0 1.1rem; }
  /* sticky rechnet ab Innenrand -> bis an die Kante kleben, sonst scheint der Rand durch */
  .table-scroll th:first-child, .table-scroll td:first-child { left: -1rem; box-shadow: 1px 0 0 var(--line); }
  .check-detail .table-scroll th:first-child, .check-detail .table-scroll td:first-child { left: -1.1rem; }
  /* WR-/Ereignis-Zeilen: Text unter Name + kWh statt eigener Spalte */
  .inv-row { grid-template-columns: 14px minmax(0, 1fr) auto; row-gap: .15rem; align-items: start; }
  .inv-row .dot { margin-top: .35rem; }
  .inv-row .inv-text { grid-column: 2 / -1; grid-row: 2; }
  .inv-row .inv-kwh { white-space: normal; text-align: right; }
  .inv-row .inv-kwh .muted { display: block; white-space: nowrap; }
  /* Ereignis-Verlauf als Liste: Zeitraum + Dauer oben (bricht um), darunter Titel und Meldung */
  .events-table thead { display: none; }
  .events-table, .events-table tbody { display: block; }
  .events-table tr { display: flex; flex-wrap: wrap; column-gap: .3rem; padding: .55rem .2rem .6rem;
    border-bottom: 1px solid #EDF1F7; }
  .events-table tbody tr:nth-child(even) { background: #F7F9FC; }
  .events-table tbody td, .events-table tbody td:nth-child(-n+3) { position: static; box-shadow: none;
    background: none; border-bottom: none; padding: 0; font-size: .82rem; }
  .events-table td:nth-child(2)::before { content: '– '; }
  .events-table td:nth-child(3) { color: var(--muted); white-space: normal; }
  .events-table td:nth-child(3)::before { content: '· '; }
  .events-table td.ev-title, .events-table td.ev-msg { flex-basis: 100%; min-width: 0; }
  .events-table td.ev-title { margin-top: .2rem; }
  /* iOS zoomt bei Feldern unter 16 px beim Antippen in die Seite */
  input, select, textarea, #date-picker, .date-stepper input { font-size: 16px; }
}

/* Touch: Bedienelemente mind. ~40 px hoch */
@media (pointer: coarse) {
  .range-switch button, .date-stepper button, .year-stepper button { min-height: 40px; min-width: 40px; }
  .part-filter button { min-height: 36px; }
  .tabs a { padding: .75rem .15rem; }
  .info-btn { width: 1.5rem; height: 1.5rem; font-size: .85rem; }
  .modal-close { min-width: 44px; min-height: 44px; }
  .btn-small { min-height: 40px; }
  .footer-links a, .footer-version a { display: inline-block; padding: .45rem 0; }
}

/* Energiesystem: Piktogramm in der Stammdaten-Kachel + Energiefluss */
.meta-pict { margin-left: auto; width: 230px; max-width: 100%; }
.meta-pict svg { width: 100%; height: auto; display: block; }
.meta-pict text, .flow-svg text { font-family: var(--font-ui); }
.energy-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1.2rem; align-items: center; }
.energy-flow svg { width: 100%; height: auto; display: block; }
.flow-svg .fn-title { font-size: 12px; fill: var(--ink-2); font-weight: 600; }
.flow-svg .fn-value { font-size: 17px; fill: var(--ink); font-family: var(--font-num); font-weight: 600; }
.flow-svg .fn-sub { font-size: 10.5px; fill: var(--muted); }
.flow-line.fwd, .flow-line.rev { stroke-dasharray: 7 7; }
.flow-line.fwd { animation: flow-fwd 1.1s linear infinite; }
.flow-line.rev { animation: flow-rev 1.1s linear infinite; }
@keyframes flow-fwd { to { stroke-dashoffset: -28; } }
@keyframes flow-rev { to { stroke-dashoffset: 28; } }
@media (prefers-reduced-motion: reduce) { .flow-line.fwd, .flow-line.rev { animation: none; } }
.energy-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem 1.4rem; margin: 0 0 1rem; }
.energy-kpis .stat-value { font-size: 1.2rem; }
.share { margin-bottom: .9rem; }
.share-head { display: flex; justify-content: space-between; font-size: .82rem; color: var(--ink-2); margin-bottom: .3rem; }
.share-head span { font-family: var(--font-num); }
.share-bar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; background: var(--line); }
.share-bar span { display: block; height: 100%; }
.share-legend { display: flex; flex-wrap: wrap; gap: .2rem .9rem; font-size: .76rem; color: var(--ink-2); margin-top: .35rem; }
.share-legend i { display: inline-block; width: .65rem; height: .65rem; border-radius: 2px; margin-right: .3rem; vertical-align: baseline; }
#chart-energy { margin-top: 1rem; }
@media (max-width: 760px) {
  .energy-grid { grid-template-columns: 1fr; }
  .meta-pict { margin-left: 0; width: 100%; max-width: 320px; }
}

/* App-Installation (PWA): Hinweis unten, unter Modals; siehe core/pwa.js */
.install-banner { position: fixed; z-index: 40; left: 50%; bottom: calc(1rem + env(safe-area-inset-bottom));
  width: min(520px, calc(100% - 1.5rem)); display: flex; align-items: center; gap: .9rem;
  background: var(--navy); color: #fff; border-radius: 14px; padding: .85rem .9rem .85rem 1rem;
  box-shadow: 0 12px 32px rgba(8, 29, 58, .28);
  transform: translate(-50%, 1.5rem); opacity: 0; transition: transform .25s ease, opacity .25s ease; }
.install-banner.visible { transform: translate(-50%, 0); opacity: 1; }
.install-banner img { flex: none; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.install-text { flex: 1; min-width: 0; font-size: .84rem; line-height: 1.4; color: rgba(255,255,255,.8); }
.install-text b { display: block; color: #fff; font-size: .92rem; margin-bottom: .1rem; }
.install-banner .btn-small { flex: none; border: none; cursor: pointer; font-family: inherit; }
.install-close { flex: none; align-self: flex-start; background: none; border: none; cursor: pointer;
  color: rgba(255,255,255,.7); font-size: 1.3rem; line-height: 1; padding: .1rem .25rem; font-family: inherit; }
.install-close:hover { color: #fff; }
.ios-share { width: .8em; height: 1em; vertical-align: -.1em; color: var(--teal); }
.offline-icon { display: block; margin: 0 auto 1rem; border-radius: 14px; }
@media (pointer: coarse) { .install-close { min-width: 40px; min-height: 40px; } }
@media (prefers-reduced-motion: reduce) { .install-banner { transition: none; } }

/* Anlagenuebersicht (core/dashboard.html, core/dashboard.js) */
.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; }
.dash-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: .2rem 1rem; margin-bottom: 1rem; }
.dash-head h1 { margin: 0; }
.dash-updated { font-variant-numeric: tabular-nums; }

/* Summen ueber alle Anlagen; die erste Kachel (Leistung jetzt) dunkel als Blickfang */
.fleet { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.4rem; }
.fleet-kpi { flex: 1 1 200px; display: flex; flex-direction: column; gap: .25rem; min-width: 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: .95rem 1.15rem 1rem;
  color: var(--ink); font: inherit; text-align: left; }
.fleet-label { font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.fleet-value { font-size: .9rem; color: var(--ink-2); white-space: nowrap; }
.fleet-value b { font-family: var(--font-num); font-size: 1.65rem; font-weight: 600; letter-spacing: -.03em; color: var(--ink); }
.fleet-note { font-size: .78rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fleet-note.s-warn { color: var(--status-warn); font-weight: 600; }
.fleet-note.s-crit { color: var(--status-crit); font-weight: 600; }
.fleet-kpi:first-child { background: var(--navy); border-color: var(--navy); color: #fff;
  background-image: radial-gradient(120% 140% at 100% 0%, rgba(0,194,168,.22), transparent 60%); }
.fleet-kpi:first-child .fleet-label { color: rgba(255,255,255,.6); }
.fleet-kpi:first-child .fleet-value, .fleet-kpi:first-child .fleet-note { color: rgba(255,255,255,.75); }
.fleet-kpi:first-child .fleet-value b { color: #fff; }
.meter { display: block; height: 6px; border-radius: 3px; background: rgba(255,255,255,.14); overflow: hidden; margin: .3rem 0 .1rem; }
.meter span { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--teal); transition: width .6s ease; }
button.fleet-status { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.fleet-status:hover { border-color: var(--teal); }
button.fleet-status[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
button.fleet-status:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* Werkzeugleiste: Suche, Status-Filter, Sortierung, Gruppen je Kunde */
.plant-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; margin-bottom: .5rem; }
.search-field { position: relative; flex: 1 1 260px; max-width: 420px; }
.search-field input { width: 100%; height: 36px; padding: 0 2rem 0 2.1rem; border: 1px solid var(--line);
  border-radius: 9px; background: var(--paper); font-family: inherit; font-size: .9rem; color: var(--ink); }
.search-field input:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.search-icon { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px;
  fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.search-hint { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); pointer-events: none;
  font-family: var(--font-num); font-size: .72rem; color: var(--muted); border: 1px solid var(--line);
  border-radius: 4px; padding: 0 .3rem; background: var(--page); }
.search-field input:focus + .search-hint, .search-field input:not(:placeholder-shown) + .search-hint { display: none; }
.plant-toolbar .range-switch { border-radius: 9px; }
.plant-toolbar .range-switch button { height: 34px; padding: 0 .75rem; }
.range-switch [data-count] { font-family: var(--font-num); font-size: .9em; opacity: .7; margin-left: .15rem; }
.toolbar-select, .toolbar-check { display: inline-flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--ink-2); }
.toolbar-select select { height: 36px; border: 1px solid var(--line); border-radius: 9px; padding: 0 .5rem;
  background: var(--paper); font-family: inherit; font-size: .85rem; color: var(--ink); }
.toolbar-check input { accent-color: var(--navy); width: 1rem; height: 1rem; }
.toolbar-filters { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.filter-toggle { display: none; position: relative; flex: none; place-items: center; width: 40px; height: 40px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink-2); cursor: pointer; }
.filter-toggle[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.filter-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.filter-dot { position: absolute; top: 5px; right: 5px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 2px var(--paper); }
.plant-result { margin-bottom: 1rem; min-height: 1.1em; }
.plant-group { margin-bottom: 1.8rem; }
.plant-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .8rem;
  padding-bottom: .45rem; margin-bottom: .9rem; border-bottom: 1px solid var(--line); }
.plant-group-head h2 { margin: 0; }
.plant-group .tile-customer { display: none; }   /* steht schon in der Gruppen-Ueberschrift */
.plant-empty { text-align: center; padding: 2rem 1rem; color: var(--ink-2); }
.plant-empty p { margin-bottom: .8rem; }
.plant-empty button { cursor: pointer; font-family: inherit; }

/* Anlagen-Kachel: Kopf mit Status, aktuelle Leistung gross, Tageskurve, Kennzahlen, Fuss */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 1rem; }
.tile { position: relative; display: flex; flex-direction: column; overflow: hidden;
  background: var(--paper); border: 1px solid var(--line); border-radius: 14px;
  padding: 1rem 1.15rem .85rem; text-decoration: none; color: var(--ink);
  box-shadow: 0 1px 2px rgba(8,29,58,.04); transition: border-color .15s, box-shadow .15s, transform .15s; }
.tile:hover { border-color: rgba(0,194,168,.7); box-shadow: 0 10px 28px rgba(8,29,58,.09); transform: translateY(-1px); }
.tile:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* auffaellige Anlagen: farbige Kante oben */
.tile::before { content: ''; position: absolute; inset: 0 0 auto; height: 3px; }
.tile[data-tone="warn"]::before { background: var(--gold); }
.tile[data-tone="crit"]::before { background: var(--coral); }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }
.tile-title { min-width: 0; }
.tile-name { display: block; font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; overflow-wrap: anywhere; }
.tile-sub { display: block; color: var(--ink-2); font-size: .8rem; margin-top: .1rem; }
.tile .status-badge { flex: none; display: inline-flex; align-items: center; gap: .38rem; margin-top: .1rem;
  padding: .2rem .6rem .2rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 600;
  background: var(--page); color: var(--muted); }
.tile .status-badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.tile .status-badge.s-ok { background: rgba(0,134,114,.1); color: var(--status-ok); }
.tile .status-badge.s-warn { background: rgba(242,184,75,.2); color: var(--status-warn); }
.tile .status-badge.s-crit { background: rgba(233,108,99,.13); color: var(--status-crit); }
.tile .status-badge.s-ok::before { animation: live-pulse 2.4s ease-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,134,114,.45); } 70%, 100% { box-shadow: 0 0 0 5px rgba(0,134,114,0); } }
.tile-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: .1rem .6rem; margin-top: .85rem; }
.hero-value { font-family: var(--font-num); font-size: 1.9rem; font-weight: 600; letter-spacing: -.035em; line-height: 1.1; }
.hero-value small { margin-left: .3rem; font-family: var(--font-ui); font-size: .9rem; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.hero-note { font-size: .76rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
/* Tageskurve bis an die Kachelraender */
.spark { position: relative; height: 64px; margin: .45rem -1.15rem 0; }
.spark svg { display: block; width: 100%; height: 100%; }
.spark-area { fill: rgba(0,194,168,.13); }
.spark-line { fill: none; stroke: var(--teal); stroke-width: 1.7; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.spark-now { position: absolute; top: 4px; bottom: 0; border-left: 1px dashed #C9D3E0; }
.spark-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(0,194,168,.35); }
.spark[data-empty]::after { content: 'Heute noch keine Leistung'; position: absolute; inset: 0; display: grid;
  place-items: center; font-size: .75rem; color: var(--muted); }
.tile[data-tone="crit"] .spark-area { fill: rgba(233,108,99,.12); }
.tile[data-tone="crit"] .spark-line { stroke: var(--coral); }
.tile[data-tone="crit"] .spark-dot { background: var(--coral); box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px rgba(233,108,99,.35); }
.tile .tile-stats { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .8rem;
  margin: 0 -1.15rem; padding: .75rem 1.15rem 0; border-top: 1px solid var(--line); }
.tile .stat-value { font-size: 1.05rem; letter-spacing: -.02em; }
.tile .stat-value.s-crit { color: var(--status-crit); }
.tile .stat-label { display: block; font-size: .72rem; line-height: 1.3; margin-top: .1rem; }
.tile-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem .8rem;
  margin-top: auto; padding-top: .8rem; font-size: .74rem; }
.tile-alerts { font-weight: 600; white-space: nowrap; padding: .15rem .55rem; border-radius: 999px; }
.tile-alerts.s-warn { background: rgba(242,184,75,.2); }
.tile-alerts.s-crit { background: rgba(233,108,99,.13); }
/* bis die Live-Werte da sind: Platzhalter statt Striche */
.tile[data-loading] .hero-value > span, .tile[data-loading] [data-role="e_day"] {
  color: transparent; border-radius: 6px; }
.tile[data-loading] .hero-value > span, .tile[data-loading] [data-role="e_day"], .tile[data-loading] .spark {
  background: linear-gradient(90deg, #EEF2F7 25%, #F7F9FC 50%, #EEF2F7 75%) 0 0 / 200% 100%;
  animation: skeleton 1.3s linear infinite; }
.tile[data-loading] .spark { margin-left: 0; margin-right: 0; border-radius: 8px; }
@keyframes skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .tile, .meter span { transition: none; }
  .tile:hover { transform: none; }
  .tile .status-badge.s-ok::before, .tile[data-loading] .hero-value > span,
  .tile[data-loading] [data-role="e_day"], .tile[data-loading] .spark { animation: none; }
}
@media (max-width: 640px) {
  .fleet { gap: .6rem; margin-bottom: 1.1rem; }
  .fleet-kpi { flex-basis: 9rem; padding: .8rem .9rem; }
  .fleet-kpi:first-child { flex-basis: 100%; }
  .fleet-value b { font-size: 1.35rem; }
  /* Werkzeugleiste: Suche + Filter-Knopf, der Rest klappt darunter auf */
  .search-field { flex: 1 1 0; min-width: 0; max-width: none; }
  .search-field input { height: 40px; }
  .filter-toggle { display: grid; }
  .toolbar-filters { display: none; flex-basis: 100%; padding: .2rem 0 .3rem; }
  .plant-toolbar.filters-open .toolbar-filters { display: flex; }
  .plant-toolbar { margin-bottom: 1rem; }
  .plant-result { margin-top: -.4rem; }
  .plant-result:not(.filtered) { display: none; }   /* "12 Anlagen" steht schon in der Summe oben */
  .plant-toolbar .range-switch { flex: 1 1 100%; }
  .plant-toolbar .range-switch button { flex: 1; }
  .search-hint { display: none; }
  .tile { padding: .9rem 1rem .8rem; }
  .spark { margin: .45rem -1rem 0; }
  .tile .tile-stats { margin: 0 -1rem; padding: .75rem 1rem 0; }
}

/* Testinstanz (ERTRAGO_INSTANCE=test): nicht mit der Produktion verwechseln */
.instance-banner { background: repeating-linear-gradient(-45deg, var(--gold), var(--gold) 14px, #F5C66B 14px, #F5C66B 28px);
  color: var(--navy); font-size: .82rem; font-weight: 600; text-align: center; padding: .35rem 1rem; }