/* Hub: eigene Akzentfarbe, sonst gleiche Bausteine wie die Rezepte (style.css). */
:root { --akzent: #2f5d73; --akzent-hell: #dde9ef; }
@media (prefers-color-scheme: dark) { :root { --akzent: #6fa8c4; --akzent-hell: #22343d; } }

.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.kachel { display: flex; flex-direction: column; gap: .3rem; padding: 1rem; margin: 0; text-decoration: none; color: inherit; min-height: 130px; }
.kachel:hover { border-color: var(--akzent); }
.kachel .symbol { font-size: 2rem; line-height: 1; }
.kachel strong { font-size: 1rem; }
.kachel .klein { flex: 1; }
.lan { align-self: flex-start; font-size: .75rem; color: var(--leise); border: 1px solid var(--rand); border-radius: 6px; padding: 0 .4rem; }
.hinweis { background: var(--akzent-hell); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; }
.freigaben { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-top: .5rem; width: 100%; }
.freigaben label { white-space: nowrap; }
.nutzer-karte { display: block; }
.nutzer-karte .kopfzeile { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; }
.projekt-form { display: grid; gap: .5rem; grid-template-columns: 4rem 1fr; }
.projekt-form .voll { grid-column: 1 / -1; }
.projekt-form label.voll { display: flex; gap: .5rem; align-items: center; }
.projekt-form .aktionen { grid-column: 1 / -1; }

/* Server-Zustand */
.ampel { display: flex; align-items: center; gap: .8rem; }
.ampel .gross { font-size: 2rem; line-height: 1; }
.ampel.s-fehler { border-color: var(--gefahr); }
.raster-2 { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .raster-2 { grid-template-columns: 1fr 1fr; } }
.messwert { display: flex; justify-content: space-between; gap: .8rem; margin: .35rem 0 .15rem; }
.messwert span:last-child { text-align: right; }
.balken { height: 8px; background: var(--rand); border-radius: 4px; overflow: hidden; margin-bottom: .4rem; }
.fuellung { height: 100%; background: var(--gut); }
.fuellung.gelb { background: #e0a526; }
.fuellung.rot { background: var(--gefahr); }
.tabelle { display: grid; }
.zeile-status { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto auto; gap: .6rem; align-items: baseline;
  padding: .35rem 0; border-top: 1px solid var(--rand); }
.zeile-status:first-child { border-top: none; }
.zeile-status .name { overflow-wrap: anywhere; }
.zeile-status .rechts { text-align: right; min-width: 3.5rem; }
.gedimmt { opacity: .55; }