:root {
  --grund: #F0E9DC;
  --flaeche: #F9F5EE;
  --text: #2B2622;
  --gedaempft: #6B6259;
  --akzent: #3F6B4C;
  --linie: #E0D7C6;
}
@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1A1815;
    --flaeche: #24211C;
    --text: #EDE8E0;
    --gedaempft: #A69C90;
    --akzent: #8FBF9C;
    --linie: #332F28;
  }
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
.seite { max-width: 46rem; margin: 0 auto; padding: 3rem 1.25rem 4rem; }
header.kopf { border-bottom: 1px solid var(--linie); padding-bottom: 1.5rem; margin-bottom: 2.5rem; }
header.kopf h1 { font-size: 1.9rem; margin: 0 0 .3rem; letter-spacing: -.01em; }
.unter { color: var(--gedaempft); margin: 0; }
h2 { font-size: 1.35rem; margin: 2.75rem 0 .75rem; letter-spacing: -.01em; }
h3 { font-size: 1.05rem; margin: 2rem 0 .5rem; }
a { color: var(--akzent); }
.karte {
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin: 1.25rem 0;
}
.karte p:first-child { margin-top: 0; }
.karte p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; margin: 1.25rem 0; font-size: .95rem; }
th, td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--gedaempft); font-weight: 600; }
.klein { color: var(--gedaempft); font-size: .9rem; }
footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  color: var(--gedaempft);
  font-size: .9rem;
}
footer a { margin-right: 1.1rem; }

/* Startseite */
body.start { min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.mitte { max-width: 34rem; padding: 3rem 1.5rem; text-align: center; }
.mitte h1 { font-size: 2.4rem; margin: 0 0 .4rem; letter-spacing: -.02em; }
.satz { font-size: 1.15rem; color: var(--gedaempft); margin: 0 0 2rem; }
.mitte .karte { text-align: left; margin-bottom: 2rem; }
.mitte footer { border-top: none; margin-top: 2rem; padding-top: 0; }

/* Firmenzeile in der Fusszeile. Die Seite gehoert Kuechengeist, die Firma
   steht darunter - nicht daneben. */
.firma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: 1.25rem 0 0;
  color: var(--gedaempft);
  font-size: .85rem;
}
.seite .firma { justify-content: flex-start; }
/* 24 px, nicht kleiner: die Logo-Uebersicht nennt ausdruecklich "ab etwa
   24 px laeuft die Luecke zwischen Querbalken und unterer Waagerechte zu".
   Darunter wird aus der Marke ein Klumpen. Variante B ist die fuer kleine
   Groessen gezeichnete. */
.firma img { height: 24px; width: auto; display: block; }