/* =======================================================================
   Gemeinsame Gestaltung der Rechtsseiten (Impressum, Datenschutz,
   Erstinformation). Nutzt dieselben Farbwerte wie die Startseite.
   ======================================================================= */

:root {
  --gold:        #b8952c;
  --gold-matt:   #f3ecd8;
  --petrol:      #1c5c74;
  --grund:       #fbfaf7;
  --flaeche:     #ffffff;
  --flaeche-2:   #f4f2ec;
  --linie:       #e2ded3;
  --linie-stark: #cec9ba;
  --text:        #23211d;
  --text-leise:  #6b665c;
  --radius:      14px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --zahlen: "SF Mono", ui-monospace, "Menlo", "Consolas", monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gold:        #d9b64a;
    --gold-matt:   #35301f;
    --petrol:      #5aa8c4;
    --grund:       #16150f;
    --flaeche:     #1e1d16;
    --flaeche-2:   #26251c;
    --linie:       #35342a;
    --linie-stark: #4a4839;
    --text:        #f0eee6;
    --text-leise:  #a8a396;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--schrift);
  background: var(--grund);
  color: var(--text);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}

.huelle { max-width: 800px; margin: 0 auto; padding: 0 22px; }

header.kopf {
  border-bottom: 1px solid var(--linie);
  background: var(--flaeche);
}
.kopf .huelle {
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; padding-top: 13px; padding-bottom: 13px;
}
.marke { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; }
.marke .zeichen {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: linear-gradient(140deg, #d9b64a, #b8952c);
  display: grid; place-items: center;
}
.marke .zeichen svg { width: 21px; height: 21px; }
.marke b { font-size: 1.08rem; letter-spacing: -.02em; display: block; line-height: 1.15; }
.marke .unter { font-size: .74rem; color: var(--text-leise); letter-spacing: .06em; text-transform: uppercase; }
.zurueck { font-size: .88rem; color: var(--text-leise); text-decoration: none; white-space: nowrap; }
.zurueck:hover { color: var(--gold); }

main { padding: 46px 0 60px; }

h1 {
  font-size: clamp(1.75rem, 4.5vw, 2.3rem);
  letter-spacing: -.02em; margin: 0 0 .35em; line-height: 1.2;
}
.vorspann { color: var(--text-leise); margin: 0 0 34px; font-size: 1.02rem; }

h2 {
  font-size: 1.16rem; margin: 38px 0 12px; letter-spacing: -.01em;
  padding-bottom: 8px; border-bottom: 1px solid var(--linie);
}
h3 { font-size: .99rem; margin: 24px 0 6px; color: var(--gold); }

p, li { font-size: .94rem; }
p { margin: 0 0 1em; }
ul { padding-left: 1.2em; margin: 0 0 1em; }
li { margin-bottom: .38em; }
a { color: var(--petrol); }
strong { color: var(--text); }

.block {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 19px 22px; margin-bottom: 16px;
}
.block p:last-child, .block ul:last-child { margin-bottom: 0; }

dl.angaben { margin: 0; display: grid; gap: 11px; }
dl.angaben > div {
  display: grid; grid-template-columns: 208px 1fr; gap: 16px;
  padding-bottom: 10px; border-bottom: 1px dashed var(--linie);
}
dl.angaben > div:last-child { border-bottom: 0; padding-bottom: 0; }
dl.angaben dt { color: var(--text-leise); font-size: .88rem; }
dl.angaben dd { margin: 0; font-size: .94rem; }
dl.angaben dd.kennung { font-family: var(--zahlen); letter-spacing: -.01em; }
@media (max-width: 620px) {
  dl.angaben > div { grid-template-columns: 1fr; gap: 2px; }
}

.hinweis {
  border-left: 3px solid var(--gold); background: var(--gold-matt);
  padding: 15px 19px; border-radius: 0 8px 8px 0; margin: 0 0 22px;
}
.hinweis p { margin: 0; font-size: .92rem; }

footer {
  border-top: 1px solid var(--linie); background: var(--flaeche);
  padding: 30px 0; font-size: .84rem; color: var(--text-leise);
}
footer .huelle { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
footer a { color: var(--text-leise); }
footer .links { display: flex; gap: 18px; flex-wrap: wrap; }