/* Neteler Konsole - calm house style of the PMS (petrol, sand gold, Georgia headings), no framework. */
:root {
  --petrol: #2c4a47;
  --sand: #b8956b;
  --grund: #f6f4f0;
  --karte: #ffffff;
  --text: #1f2a29;
  --leise: #6b7473;
  --linie: #e2ddd5;
  --ok: #2f8f5b;
  --warnung: #c98a1b;
  --fehler: #b3261e;
  --info: #8a9493;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #141a19;
    --karte: #1c2423;
    --text: #e6ebea;
    --leise: #9aa5a3;
    --linie: #2e3a38;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--grund); color: var(--text); font: 15px/1.5 Arial, system-ui, sans-serif; }
h1, h2, h3 { font-family: Georgia, serif; color: var(--petrol); font-weight: normal; margin: 0 0 .6rem; }
@media (prefers-color-scheme: dark) { h1, h2, h3 { color: #9cc7c1; } }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.25rem; margin-top: .4rem; }
h3 { font-size: 1.05rem; }
a { color: var(--petrol); }
@media (prefers-color-scheme: dark) { a { color: #9cc7c1; } }
small, .klein { color: var(--leise); font-size: .85rem; }

.kopf { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; align-items: center; justify-content: space-between;
  padding: .7rem 1.5rem; background: var(--petrol); color: #fff; }
.kopf .marke { color: #fff; text-decoration: none; font-family: Georgia, serif; font-size: 1.2rem; }
.kopf nav { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; }
.kopf nav a, .kopf nav .link { color: #e8efee; text-decoration: none; font-size: .95rem; }
.kopf nav a.aktiv { color: #fff; border-bottom: 2px solid var(--sand); }
.kopf form { margin: 0; }
.inhalt { max-width: 1200px; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1rem; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-left: 4px solid var(--linie);
  border-radius: 8px; padding: 1rem 1.2rem; margin-bottom: 1rem; }
.karte.ok { border-left-color: var(--ok); }
.karte.warnung { border-left-color: var(--warnung); }
.karte.fehler { border-left-color: var(--fehler); }
.karte p { margin: .3rem 0; }
.karte ul { margin: .3rem 0; padding-left: 1.1rem; }

.punkt { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .45rem;
  background: var(--info); vertical-align: baseline; }
.punkt.ok { background: var(--ok); }
.punkt.warnung { background: var(--warnung); }
.punkt.fehler { background: var(--fehler); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .35rem .4rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-weight: normal; color: var(--leise); width: 42%; }
table.liste th { width: auto; }

.knopf, .knopf-zweit { display: inline-block; border-radius: 6px; padding: .5rem 1rem; font: inherit; cursor: pointer;
  text-decoration: none; text-align: center; }
.knopf { background: var(--petrol); color: #fff; border: 1px solid var(--petrol); }
.knopf-zweit { background: transparent; color: var(--petrol); border: 1px solid var(--petrol); }
.link { background: none; border: 0; padding: 0; color: var(--petrol); cursor: pointer; font: inherit; text-decoration: underline; }
.breit { width: 100%; margin: .4rem 0; }
.mitte { text-align: center; }
.inline { display: inline; }

.anmeldung { max-width: 380px; margin: 3rem auto; background: var(--karte); border: 1px solid var(--linie);
  border-radius: 10px; padding: 2rem; }
.anmeldung.breit { max-width: 560px; }
label { display: block; margin: .6rem 0; font-size: .95rem; }
input, select, textarea { display: block; width: 100%; margin-top: .25rem; padding: .5rem .6rem; font: inherit;
  border: 1px solid var(--linie); border-radius: 6px; background: var(--grund); color: var(--text); }
input.code { text-align: center; letter-spacing: .3em; font-size: 1.2rem; }
.formular p { margin: .5rem 0; }
.qr { display: flex; justify-content: center; margin: .8rem 0; }
.mono { font-family: ui-monospace, monospace; user-select: all; }
.codes { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; padding: 0; list-style: none;
  font-family: ui-monospace, monospace; font-size: 1.1rem; text-align: center; }
.codes li { border: 1px solid var(--linie); border-radius: 4px; padding: .2rem; }

.meldung { padding: .6rem .9rem; border-radius: 6px; background: var(--karte); border: 1px solid var(--linie); }
.meldung.success { border-color: var(--ok); }
.meldung.error { border-color: var(--fehler); }
.meldung.warning { border-color: var(--warnung); }
.fehlertext { color: var(--fehler); }
.warntext { color: var(--warnung); }

.dokument { background: var(--karte); border: 1px solid var(--linie); border-radius: 8px; padding: 1.5rem 2rem; }
.dokument table { margin: .8rem 0; font-size: .92rem; }
.dokument pre { background: var(--grund); padding: .8rem; overflow-x: auto; border-radius: 6px; font-size: .85rem; }
.aktionen { text-align: right; }

@media print {
  .kopf, .aktionen, .meldungen { display: none; }
  body { background: #fff; color: #000; }
  .dokument, .karte { border: 0; padding: 0; }
}