:root {
  --blau: #305496; --hellblau: #dce6f1; --rand: #d0d7e2;
  --text: #1c2733; --muted: #67748a; --bg: #f6f8fb;
  --gruen: #1e8a4c; --rot: #c0392b; --orange: #b9770e;
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text); background: var(--bg); line-height: 1.45;
}
main { max-width: 1080px; margin: 1.5rem auto 3rem; padding: 0 1rem; }
footer { max-width: 1080px; margin: 0 auto 2rem; padding: 0 1rem; font-size: .85rem; }

.topbar {
  background: var(--blau); color: #fff; display: flex; align-items: center;
  justify-content: space-between; padding: .6rem 1.2rem; flex-wrap: wrap; gap: .5rem;
}
.topbar a { color: #fff; text-decoration: none; margin-left: 1rem; }
.topbar a:first-child { margin-left: 0; }
.topbar .brand { font-weight: 700; font-size: 1.05rem; }
.topbar nav { display: flex; align-items: center; gap: .2rem; }
.topbar .muted { color: #c9d6ef; margin-left: 1rem; }
.pill {
  background: #fff; color: var(--blau); border-radius: 999px;
  font-size: .7rem; padding: .1rem .5rem; vertical-align: middle;
}

h1 { font-size: 1.5rem; margin: .2rem 0 1rem; }
h2 { font-size: 1.15rem; margin: 1.4rem 0 .6rem; }
.muted { color: var(--muted); }
.klein { font-size: .85rem; }

.card {
  background: #fff; border: 1px solid var(--rand); border-radius: 10px;
  padding: 1.1rem 1.3rem; margin-bottom: 1rem;
}

table.liste { width: 100%; border-collapse: collapse; background: #fff; }
table.liste th, table.liste td {
  border: 1px solid var(--rand); padding: .45rem .6rem; text-align: left;
  vertical-align: top; font-size: .92rem;
}
table.liste th { background: var(--hellblau); }
table.liste tr:nth-child(even) td { background: #fafbfd; }

.btn {
  display: inline-block; background: var(--blau); color: #fff; border: 0;
  border-radius: 7px; padding: .5rem 1rem; font-size: .95rem; cursor: pointer;
  text-decoration: none;
}
.btn:hover { filter: brightness(1.1); }
.btn-sekundaer { background: #fff; color: var(--blau); border: 1px solid var(--blau); }
.btn-gruen { background: var(--gruen); }
.btn-rot { background: var(--rot); }
.btn-klein { padding: .25rem .6rem; font-size: .82rem; }

form.zeile { display: inline; }
label { display: block; font-weight: 600; margin: .7rem 0 .2rem; }
label.inline { display: inline; font-weight: 400; }
input[type=text], input[type=password], input[type=number], select, textarea {
  width: 100%; padding: .45rem .6rem; border: 1px solid var(--rand);
  border-radius: 6px; font-size: .95rem; font-family: inherit; background: #fff;
}
textarea.code { font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
input.schmal { width: 5.5rem; }
.hilfe { font-size: .82rem; color: var(--muted); margin-top: .15rem; }

.alert { border-radius: 8px; padding: .6rem 1rem; margin-bottom: 1rem; }
.alert-error { background: #fdecea; color: var(--rot); border: 1px solid #f5c6c0; }
.alert-ok { background: #e8f6ee; color: var(--gruen); border: 1px solid #bfe6cf; }

.status { font-weight: 600; }
.status-done, .status-review { color: var(--gruen); }
.status-running, .status-rendering, .status-queued { color: var(--orange); }
.status-error { color: var(--rot); }
.status-mapping { color: var(--muted); }

.progress { background: var(--hellblau); border-radius: 999px; height: 14px; overflow: hidden; }
.progress > div { background: var(--blau); height: 100%; transition: width .4s; }

.fehler-hinweis { font-size: .82rem; padding: .1rem .4rem; border-radius: 5px; margin: 0 .2rem .2rem 0; display: inline-block; }
.fh-spelling { background: #fdecea; color: var(--rot); }
.fh-grammar { background: #fff4e0; color: var(--orange); }
.fh-punctuation { background: #eef2fa; color: var(--blau); }

.antwort { background: #fafbfd; border-left: 3px solid var(--rand); padding: .4rem .7rem; margin: .3rem 0; font-size: .9rem; white-space: pre-wrap; }

/* Hover-Infoboxen: <span class="tip" data-tip="Erklaerung">?</span> */
.tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.05rem; height: 1.05rem; border-radius: 50%;
  background: var(--blau); color: #fff; font-size: .72rem; font-weight: 700;
  cursor: help; position: relative; margin-left: .35rem; vertical-align: middle;
  font-style: normal;
}
.tip::after {
  content: attr(data-tip);
  position: absolute; left: 50%; top: 135%; transform: translateX(-50%);
  width: max-content; max-width: min(340px, 78vw);
  background: #223047; color: #fff; font-weight: 400; font-size: .8rem;
  line-height: 1.35; padding: .5rem .7rem; border-radius: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,.25); text-align: left; white-space: normal;
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 20;
  pointer-events: none;
}
.tip::before {
  content: ""; position: absolute; left: 50%; top: 108%;
  transform: translateX(-50%);
  border: 6px solid transparent; border-bottom-color: #223047;
  opacity: 0; visibility: hidden; transition: opacity .12s; z-index: 20;
}
.tip:hover::after, .tip:hover::before,
.tip:focus::after, .tip:focus::before { opacity: 1; visibility: visible; }
.review-kopf { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.note-badge { background: var(--hellblau); color: var(--blau); font-weight: 700; border-radius: 7px; padding: .25rem .7rem; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.5rem; }
@media (max-width: 760px) { .grid2 { grid-template-columns: 1fr; } }