:root {
  --creme: #f7f4ee;
  --papier: #ffffff;
  --tinte: #2b2723;
  --tinte-weich: #5f574c;
  --terracotta: #b2542f;
  --terracotta-dunkel: #8e3f21;
  --gruen: #3f6b47;
  --rot: #a33227;
  --linie: #ddd4c6;
  --radius: 10px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}

h1 { font-size: 1.6rem; margin: 0; }
h2 { font-size: 1.25rem; margin: 2.5rem 0 0.75rem; }
code { background: #eee7db; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.85em; }
a { color: var(--terracotta-dunkel); }

.admin-wrap { width: min(100% - 2rem, 1060px); margin-inline: auto; }
main { padding: 1.5rem 0 4rem; }

.admin-top { background: var(--tinte); color: #f4ede2; position: sticky; top: 0; z-index: 10; }
.admin-top-inner { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.7rem 0; }
.admin-marke { font-weight: 700; }
.admin-top nav ul { display: flex; gap: 0.4rem; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.admin-top nav a {
  color: #f4ede2; text-decoration: none; padding: 0.35rem 0.7rem;
  border-radius: 999px; font-size: 0.92rem; display: block;
}
.admin-top nav a:hover { background: rgba(255,255,255,0.12); }
.admin-top nav a.aktiv { background: var(--terracotta); }

.admin-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; }

.button {
  display: inline-block; background: var(--terracotta); color: #fff; border: 1px solid var(--terracotta);
  padding: 0.55rem 1.1rem; border-radius: 999px; text-decoration: none; font: inherit;
  font-size: 0.95rem; cursor: pointer;
}
.button:hover { background: var(--terracotta-dunkel); color: #fff; }
.button.geist { background: transparent; color: var(--terracotta-dunkel); }
.button.geist:hover { background: var(--terracotta); color: #fff; }
.button.klein { padding: 0.3rem 0.7rem; font-size: 0.85rem; }
.button.rot { background: var(--rot); border-color: var(--rot); }
.button.rot:hover { background: #8a281f; }

.hinweis { padding: 0.8rem 1rem; border-radius: var(--radius); margin: 0 0 1.2rem; }
.hinweis.erfolg { background: #e4f0e4; border: 1px solid #b9d6bb; color: #23491f; }
.hinweis.fehler { background: #fbe6e2; border: 1px solid #e9b6ac; color: #7d251b; }
.warnung { color: var(--rot); font-size: 0.82rem; }

.tabelle { width: 100%; border-collapse: collapse; background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; }
.tabelle th, .tabelle td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--linie); vertical-align: middle; }
.tabelle th { background: #f0e9dd; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.tabelle tr:last-child td { border-bottom: 0; }
.rechts { text-align: right; }
.nowrap { white-space: nowrap; }
.inline { display: inline; }
.minibild { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; vertical-align: middle; margin-right: 0.5rem; }

.pill { background: #eae2d4; border-radius: 999px; padding: 0.15rem 0.65rem; font-size: 0.8rem; }
.pill.gruen { background: #dff0df; color: var(--gruen); }

.formular { background: var(--papier); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.4rem; margin-top: 1rem; }
.feld { display: grid; gap: 0.3rem; margin: 0 0 1.1rem; }
.feld label { font-weight: 600; font-size: 0.92rem; }
.feld input, .feld select, .feld textarea {
  font: inherit; padding: 0.6rem 0.75rem; border: 1px solid var(--linie);
  border-radius: 8px; background: #fdfbf7; width: 100%;
}
.feld textarea { resize: vertical; line-height: 1.6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92rem; }
.hilfe { font-size: 0.82rem; color: var(--tinte-weich); }
.raster-2 { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

fieldset { border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.1rem 0.2rem; margin: 0 0 1.4rem; }
legend { font-weight: 600; padding: 0 0.4rem; }
.vorschau { max-width: 260px; border-radius: 8px; }

.produktzeile { display: grid; grid-template-columns: minmax(200px, 1fr) 2fr; gap: 0.6rem; align-items: center; margin-bottom: 0.55rem; }
.produktzeile input[type="text"] { font: inherit; padding: 0.45rem 0.6rem; border: 1px solid var(--linie); border-radius: 8px; background: #fdfbf7; }
.schalter { display: flex; align-items: center; gap: 0.5rem; }

.liste { list-style: none; padding: 0; display: grid; gap: 0.4rem; }
.aktionen { margin: 1.2rem 0 0; }

.anmeldung { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 1.5rem; }
.karte { width: min(100%, 420px); }

:focus-visible { outline: 3px solid var(--gruen); outline-offset: 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

@media (max-width: 640px) {
  .produktzeile { grid-template-columns: 1fr; }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; width: 100%; }
  .tabelle thead { display: none; }
  .tabelle tr { border-bottom: 1px solid var(--linie); padding: 0.5rem 0; }
  .tabelle td { border: 0; padding: 0.3rem 0.8rem; }
  .rechts { text-align: left; }
}