/* Gemeinsame Gestaltung der Rechtsseiten (Impressum, Datenschutz,
   Teilnahmebedingungen).

   Bewusst eine eigene, schmale Datei statt der Landingpage-Styles: diese Seiten
   werden gelesen, nicht ueberflogen. Sie brauchen eine ruhige Spalte, klare
   Ueberschriftenstufen und keine Animation. Die Farb- und Schriftwahl stammt
   aber aus derselben Marke, damit der Wechsel nicht wie ein Fremdkoerper wirkt. */

:root {
  --creme: #FDFAF7;
  --creme-2: #F5F1E6;
  --tinte: #094A19;
  --tinte-tief: #013B0D;
  --gold: #F8D304;
  --gold-tief: #B37104;
  --grau: #5D6B58;
}

*, *::before, *::after { box-sizing: border-box }

body {
  margin: 0;
  background: var(--creme);
  color: var(--tinte);
  font: 400 1.0625rem/1.72 Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { width: min(46rem, 100% - 2.5rem); margin-inline: auto }

h1, h2, h3 {
  font-family: Outfit, system-ui, sans-serif;
  letter-spacing: -.02em;
  line-height: 1.15;
  margin: 0;
}
h1 { font-weight: 800; font-size: clamp(2rem, 5vw, 2.75rem) }
h2 { font-weight: 700; font-size: 1.3rem; margin-block: 2.75rem .75rem }
h3 { font-weight: 700; font-size: 1.0625rem; margin-block: 1.5rem .35rem }

p, ul, ol, dl { margin-block: 0 .9rem }
ul, ol { padding-inline-start: 1.3rem }
li { margin-block: .3rem }

a { color: var(--tinte); text-underline-offset: .18em }
a:hover { color: var(--gold-tief) }
:focus-visible { outline: 3px solid var(--gold-tief); outline-offset: 3px; border-radius: 4px }

img { max-width: 100%; height: auto; display: block }

/* Kopf: Logo zurueck zur Startseite, sonst nichts. */
.kopf { padding-block: 1.5rem; border-bottom: 1px solid rgba(9, 74, 25, .1) }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem }
.kopf img { height: 46px; width: auto }
.zurueck {
  font-family: Outfit, system-ui, sans-serif; font-weight: 700; font-size: .95rem;
  text-decoration: none; color: var(--grau);
}
.zurueck:hover { color: var(--tinte) }

main { padding-block: 3rem 4rem }

.stand {
  color: var(--grau); font-size: .95rem;
  margin-block: .6rem 2.5rem;
}

/* Begriffspaare (Anbieter, Kontakt, Register ...) */
dl.felder { display: grid; grid-template-columns: max-content 1fr; gap: .35rem 1.5rem }
dl.felder dt { font-weight: 500; color: var(--grau) }
dl.felder dd { margin: 0 }
@media (max-width: 32rem) {
  dl.felder { grid-template-columns: 1fr; gap: 0 }
  dl.felder dt { margin-top: .8rem }
}

/* Hervorgehobener Hinweis, z. B. dass Grovi kein Shop ist. */
.merke {
  background: var(--creme-2);
  border-left: 4px solid var(--gold);
  padding: 1rem 1.25rem;
  border-radius: 0 8px 8px 0;
  margin-block: 1.5rem;
}
.merke p:last-child { margin-bottom: 0 }

table.tab { border-collapse: collapse; width: 100%; margin-block: 1rem 1.5rem; font-size: .98rem }
table.tab th, table.tab td { text-align: left; padding: .5rem .7rem; border-bottom: 1px solid rgba(9, 74, 25, .12) }
table.tab th { font-family: Outfit, system-ui, sans-serif; font-weight: 700; color: var(--grau) }
.tabhuelle { overflow-x: auto }

.fuss {
  border-top: 1px solid rgba(9, 74, 25, .1);
  padding-block: 2rem 3rem;
  color: var(--grau);
  font-size: .95rem;
}
.fuss .wrap { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem }
.fuss a { text-decoration: none }
.fuss a:hover { text-decoration: underline }