/* Verwaltung des Appservers – schlicht, gut lesbar auf Handy und PC, hell und dunkel */
:root {
  --hg: #f6f5f2; --flaeche: #ffffff; --text: #1d1b16; --leise: #6b675e; --rand: #dedad1;
  --akzent: #2e6b4a; --ok: #2e7d4f; --warn: #b7791f; --fehler: #b42318; --info: #3b5b85;
}
@media (prefers-color-scheme: dark) {
  :root { --hg: #151513; --flaeche: #1f1f1c; --text: #ecebe6; --leise: #a29e94; --rand: #34332e;
          --akzent: #6fbf93; --ok: #6fbf93; --warn: #e3b25a; --fehler: #f07b6f; --info: #8fb0dc; }
}
* { box-sizing: border-box; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--hg); color: var(--text); }
header { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .75rem 1rem;
         background: var(--flaeche); border-bottom: 1px solid var(--rand); }
.marke { font-weight: 700; color: var(--text); text-decoration: none; margin-right: auto; }
nav { display: flex; flex-wrap: wrap; gap: .25rem; }
nav a { color: var(--leise); text-decoration: none; padding: .3rem .6rem; border-radius: .4rem; }
nav a.aktiv, nav a:hover { color: var(--text); background: var(--hg); }
form.abmelden { margin: 0; }
main { max-width: 64rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.75rem 0 .5rem; }
p.klein, .klein { font-size: .85rem; color: var(--leise); }
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .75rem; }
.kachel { background: var(--flaeche); border: 1px solid var(--rand); border-left: .35rem solid var(--info);
          border-radius: .5rem; padding: .75rem .9rem; }
.kachel.ok { border-left-color: var(--ok); } .kachel.warn { border-left-color: var(--warn); }
.kachel.error { border-left-color: var(--fehler); }
.kachel .titel { font-size: .8rem; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.kachel .wert { font-size: 1.25rem; font-weight: 600; margin: .15rem 0; }
.kachel .hinweis { font-size: .85rem; color: var(--leise); }
table { width: 100%; border-collapse: collapse; background: var(--flaeche); border: 1px solid var(--rand); border-radius: .5rem; overflow: hidden; }
th, td { text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--rand); vertical-align: top; font-size: .95rem; }
th { font-size: .8rem; color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
tr:last-child td { border-bottom: none; }
@media (max-width: 40rem) { table { display: block; overflow-x: auto; } }
button { font: inherit; cursor: pointer; border: 1px solid var(--rand); background: var(--flaeche); color: var(--text);
         padding: .45rem .9rem; border-radius: .45rem; }
button:hover { border-color: var(--leise); }
button.haupt { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; padding: .65rem 1.2rem; margin: .5rem 0; }
button.klein { padding: .2rem .6rem; font-size: .85rem; }
label { display: block; margin: .75rem 0 .25rem; color: var(--leise); font-size: .9rem; }
input[type=text] { display: block; width: 100%; max-width: 24rem; font: inherit; padding: .5rem .6rem; margin-top: .25rem;
                   border: 1px solid var(--rand); border-radius: .45rem; background: var(--flaeche); color: var(--text); }
.meldung { min-height: 1.5rem; }
.meldung.fehler { color: var(--fehler); }
.meldung.ok { color: var(--ok); }