/* Schmucklos, aber lesbar. Kein Build-Schritt, keine Bibliothek, kein JavaScript. */

:root {
  --grund: #fbfaf8;
  --flaeche: #ffffff;
  --linie: #ddd8d0;
  --text: #1c1a17;
  --leise: #6b665e;
  --akzent: #1f4b3f;
  --gut: #1f5c3d;
  --schlecht: #8c2f22;
  --warnung: #7a5410;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.55 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
}

header {
  background: var(--akzent);
  padding: 0.9rem 1.25rem;
}
.marke { color: #fff; text-decoration: none; font-weight: 600; letter-spacing: 0.02em; }

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 1.25rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--linie);
  font-size: 0.92rem;
}
nav a { color: var(--akzent); text-decoration: none; font-weight: 500; }
nav a:hover { text-decoration: underline; }
nav .wer { margin-left: auto; color: var(--leise); }
nav .rollen { display: block; font-size: 0.8rem; }

main {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 4rem;
}

h1 { font-size: 1.5rem; margin: 0 0 1.2rem; }
h2 { font-size: 1.1rem; margin: 2rem 0 0.6rem; }
h2:first-child { margin-top: 0; }

a { color: var(--akzent); }

table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.5rem; font-size: 0.95rem; }
th, td { text-align: left; padding: 0.55rem 0.7rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--leise); font-weight: 600; }
tbody tr:hover { background: #f4f1ec; }

.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 6px;
  padding: 1rem 1.1rem;
  margin-bottom: 1.2rem;
}

.marke-status {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: #eeeae3;
  font-size: 0.8rem;
  white-space: nowrap;
}
.marke-status.eigen { background: #dde9e2; }

.leise { color: var(--leise); }
.klein { font-size: 0.86rem; }
.leer { color: var(--leise); font-style: italic; }
.ueberfaellig { color: var(--schlecht); font-weight: 600; }

.hinweis { padding: 0.7rem 0.9rem; border-radius: 5px; margin: 0 0 1.2rem; }
.hinweis.gut { background: #e3efe7; color: var(--gut); border: 1px solid #bcd8c6; }
.hinweis.schlecht { background: #f6e4e1; color: var(--schlecht); border: 1px solid #e0bdb6; }

form { margin: 0; }
form.inline { display: inline; }

label { display: block; font-size: 0.88rem; font-weight: 600; margin: 0.9rem 0 0.25rem; }
input[type="text"], input[type="email"], textarea, select {
  width: 100%;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--linie);
  border-radius: 4px;
  font: inherit;
  background: #fff;
}
textarea { min-height: 5rem; resize: vertical; }
input.code { font-size: 1.6rem; letter-spacing: 0.5rem; text-align: center; font-family: ui-monospace, monospace; }

button {
  font: inherit;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--akzent);
  border-radius: 4px;
  background: var(--akzent);
  color: #fff;
  cursor: pointer;
}
button:hover { background: #17372e; }
button.leise { background: none; color: var(--leise); border-color: transparent; padding: 0.2rem 0.4rem; }
button.leise:hover { color: var(--text); text-decoration: underline; }
button.warnung { background: var(--warnung); border-color: var(--warnung); }

.aktionen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

.protokoll { list-style: none; padding: 0; margin: 0; font-size: 0.92rem; }
.protokoll li { padding: 0.5rem 0; border-bottom: 1px solid var(--linie); }
.protokoll .zeit { color: var(--leise); font-size: 0.84rem; }
.protokoll .uebergehung { color: var(--warnung); font-weight: 600; }
.protokoll blockquote { margin: 0.3rem 0 0; padding-left: 0.8rem; border-left: 3px solid var(--linie); color: var(--leise); }

.anmerkung { border-left: 3px solid var(--warnung); padding: 0.4rem 0 0.4rem 0.8rem; margin-bottom: 0.7rem; }
.anmerkung.erledigt { border-left-color: var(--linie); color: var(--leise); text-decoration: line-through; }

footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1rem 1.25rem 3rem;
  color: var(--leise);
  font-size: 0.82rem;
}

.anmeldung { max-width: 24rem; margin: 3rem auto; }