/* Gemeinsames Aussehen für Impressum und Datenschutzerklärung.
   Bewusst eigenständig gehalten: diese Seiten müssen auch dann
   funktionieren, wenn am Shop gerade gebaut wird. */

:root {
  --papier:      #f7f4ef;
  --papier-tief: #ebe4d9;
  --tinte:       #2b2320;
  --tinte-leise: #6b5d54;
  --holz:        #a9743f;
  --holz-tief:   #8a5c2e;
  --linie:       #ddd2c4;
  --warnung:     #fdf6e3;
  --warnung-rand:#e0c88a;
  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:  'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --papier:      #1a1613;
    --papier-tief: #221c18;
    --tinte:       #f0e9e1;
    --tinte-leise: #a89685;
    --holz:        #c9924f;
    --holz-tief:   #dbab73;
    --linie:       #38302a;
    --warnung:     #2a2416;
    --warnung-rand:#6b5a2e;
  }
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--tinte);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}

.blatt { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; }

.zurueck {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .9rem; color: var(--tinte-leise);
  text-decoration: none; margin-bottom: 2.5rem;
}
.zurueck:hover { color: var(--holz-tief); }

h1 {
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(1.8rem, 4.5vw, 2.4rem);
  letter-spacing: -.02em; line-height: 1.15;
  margin: 0 0 2rem;
}
h2 {
  font-family: var(--serif); font-weight: 600;
  font-size: 1.25rem; margin: 2.6rem 0 .8rem;
  padding-top: 1.4rem; border-top: 1px solid var(--linie);
}
h3 { font-size: 1rem; font-weight: 600; margin: 1.6rem 0 .4rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--holz-tief); text-underline-offset: .2em; }

address { font-style: normal; margin-bottom: 1rem; }
.zeile { display: flex; gap: .8rem; margin-bottom: .35rem; flex-wrap: wrap; }
.zeile dt {
  flex: 0 0 9.5rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinte-leise); padding-top: .2em;
}
.zeile dd { margin: 0; flex: 1 1 14rem; }

ul { margin: 0 0 1rem; padding-left: 1.2rem; }
li { margin-bottom: .4rem; }

/* Noch auszufüllende Angabe - im Quelltext und auf der Seite sichtbar,
   damit sie nicht übersehen wird. */
.offen {
  background: var(--warnung);
  border: 1px dashed var(--warnung-rand);
  border-radius: 5px;
  padding: .1em .5em;
  font-size: .92em;
  font-weight: 500;
}

.hinweiskasten {
  background: var(--papier-tief);
  border-left: 3px solid var(--holz);
  border-radius: 0 8px 8px 0;
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
  font-size: .93rem;
}
.hinweiskasten p:last-child { margin-bottom: 0; }

footer {
  margin-top: 3.5rem; padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  font-size: .85rem; color: var(--tinte-leise);
  display: flex; gap: 1.2rem; flex-wrap: wrap;
}
footer a { color: var(--tinte-leise); }
footer a:hover { color: var(--holz-tief); }

/* Telefonnummer als Umrissbild. Die Farbe steckt im SVG selbst, das
   dort eine eigene prefers-color-scheme-Abfrage mitbringt - ueber <img>
   eingebunden erbt ein SVG keine Farbe vom umgebenden HTML. */
/* Die Werte stammen aus scripts/telefon_bild.py und sind aus der Schrift
   gerechnet: 0.7471em ist die Ziffernhoehe von Inter, der kleine
   Versatz gleicht den Ueberzug runder Ziffern unter der Grundlinie aus. */
.telefonbild {
  height: 0.7471em;
  width: auto;
  vertical-align: -0.0098em;
}

/* Muster-Widerrufsformular: bewusst wie ein Formular auf Papier. */
.formular-kasten {
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 1.4rem 1.5rem;
  margin: 1.2rem 0;
  background: var(--papier-tief);
  font-size: .93rem;
}
.formular-kasten p { margin-bottom: 1.1rem; }
.formular-kasten .linien { line-height: 2.2; }
.formular-kasten .stern {
  font-size: .84rem; color: var(--tinte-leise); margin-bottom: 0;
}
.stand { color: var(--tinte-leise); font-size: .9rem; margin-top: -1.2rem; }