:root {
  --elfenbein: #f6f1e7;
  --papier: #fffdf8;
  --ebenholz: #1f1a17;
  --nussbaum: #6b4a32;
  --messing: #b08d3c;
  --grau: #5d5750;
  --linie: #ddd3c2;
}

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  background: var(--elfenbein);
  color: var(--ebenholz);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.6;
}

.leiste {
  background: var(--ebenholz);
  color: var(--elfenbein);
  border-bottom: 4px solid var(--messing);
}

.leiste .innen {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.9rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.name {
  color: var(--elfenbein);
  text-decoration: none;
  font-size: 1.25rem;
  letter-spacing: 0.04em;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}

.name svg { width: 1.6rem; height: 1.6rem; }

.menue a {
  color: #e9dfcb;
  text-decoration: none;
  font-family: "Trebuchet MS", Arial, sans-serif;
  font-size: 0.88rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-left: 1.1rem;
}

.menue a:hover, .menue a[aria-current] { color: var(--messing); }

.tasten {
  height: 18px;
  background: repeating-linear-gradient(90deg, var(--papier) 0 22px, var(--ebenholz) 22px 24px);
  border-bottom: 1px solid var(--linie);
}

.inhalt {
  max-width: 62rem;
  margin: 0 auto;
  padding: 2.2rem 1.2rem 3rem;
}

h1 { font-size: 2.1rem; font-weight: normal; margin: 0 0 0.6rem; }
h2 { font-size: 1.35rem; font-weight: normal; color: var(--nussbaum); margin: 2rem 0 0.5rem; }

.vorspann { font-size: 1.12rem; color: var(--grau); max-width: 44rem; }

.spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1.2rem;
  margin-top: 1.6rem;
}

.karte {
  background: var(--papier);
  border: 1px solid var(--linie);
  border-top: 3px solid var(--nussbaum);
  padding: 1.1rem 1.2rem;
}

.karte h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }

table.preise { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--papier); }
table.preise th, table.preise td { text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--linie); }
table.preise td:last-child, table.preise th:last-child { text-align: right; white-space: nowrap; }
table.preise th { font-family: "Trebuchet MS", Arial, sans-serif; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--grau); }

.anmerkung { font-size: 0.9rem; color: var(--grau); }

.zeiten { list-style: none; padding: 0; margin: 0.4rem 0; }
.zeiten li { display: flex; justify-content: space-between; max-width: 20rem; border-bottom: 1px dotted var(--linie); padding: 0.2rem 0; }

.anmeldung {
  background: var(--papier);
  border: 1px solid var(--linie);
  padding: 1.4rem;
  max-width: 26rem;
  margin-top: 1.4rem;
}

.anmeldung label { display: block; font-family: "Trebuchet MS", Arial, sans-serif; font-size: 0.85rem; margin: 0.8rem 0 0.25rem; }
.anmeldung input { width: 100%; padding: 0.55rem 0.6rem; border: 1px solid #bfb4a1; background: #fff; font: inherit; }
.anmeldung input[aria-invalid] { border-color: #9b2c1f; }
.anmeldung button {
  margin-top: 1.2rem;
  padding: 0.6rem 1.4rem;
  background: var(--nussbaum);
  color: #fff;
  border: 0;
  font: inherit;
  cursor: pointer;
}
.anmeldung button:disabled { opacity: 0.6; cursor: default; }

.feldhinweis { display: block; color: #9b2c1f; font-size: 0.82rem; margin-top: 0.2rem; }

.antwort { margin-top: 1rem; padding: 0.7rem 0.9rem; border-left: 3px solid var(--messing); background: #fbf6ea; max-width: 26rem; }

.fuss {
  border-top: 1px solid var(--linie);
  color: var(--grau);
  font-size: 0.88rem;
}

.fuss .innen { max-width: 62rem; margin: 0 auto; padding: 1.2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; }

@media (max-width: 40rem) {
  .menue a { margin: 0 0.9rem 0 0; }
  h1 { font-size: 1.7rem; }
}