/* Gemeinsames Layout für Impressum und Datenschutzerklärung.
   Nutzt dieselben Marken-Token wie index.html. */

:root {
  --gelb: #e7b836;
  --nacht: #0f1521;
  --nacht-hoch: #161d2b;
  --kontur: #34425f;
  --creme: #eef0f4;
  --creme-still: #8c9aae;
  --font-display: "Bricolage Grotesque", "Hanken Grotesk", sans-serif;
  --font-body: "Hanken Grotesk", "Bricolage Grotesque", sans-serif;
  --maxw: 1320px;
  --pad: clamp(24px, 5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--nacht);
  color: var(--creme);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.kopf {
  border-bottom: 1px solid var(--kontur);
  background: var(--nacht-hoch);
}
.kopf-inner {
  max-width: var(--maxw); margin: 0 auto;
  padding: 24px var(--pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.marke { display: flex; align-items: center; gap: 14px; text-decoration: none; }
.marke svg { flex: none; }
.marke .txt { display: flex; flex-direction: column; line-height: 1.1; }
.marke .ueber {
  font-family: var(--font-display); font-weight: 500; font-size: 12px;
  letter-spacing: 0.08em; color: var(--creme-still);
}
.marke .name {
  font-family: var(--font-display); font-weight: 800; font-size: 22px;
  letter-spacing: 0.04em; color: var(--gelb);
}
.zurueck {
  font-size: 14px; font-weight: 600; color: var(--creme-still);
  text-decoration: none; white-space: nowrap;
}
.zurueck:hover { color: var(--gelb); }

main {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) var(--pad) 96px;
}

h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(34px, 6vw, 48px); line-height: 1.1; letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.stand { color: var(--creme-still); font-size: 14px; margin-bottom: 48px; }

h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 25px; line-height: 1.25; letter-spacing: -0.01em;
  margin: 48px 0 12px; padding-top: 24px;
  border-top: 1px solid var(--kontur);
}
h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

h3 {
  font-family: var(--font-display); font-weight: 700; font-size: 18px;
  margin: 24px 0 8px;
}

p { margin-bottom: 16px; color: var(--creme-still); }
p strong, li strong { color: var(--creme); font-weight: 600; }

ul { margin: 0 0 16px 20px; color: var(--creme-still); }
li { margin-bottom: 8px; }

a { color: var(--gelb); text-decoration: underline; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

dl.daten { margin-bottom: 24px; }
dl.daten div {
  display: grid; grid-template-columns: 180px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid var(--kontur);
}
dl.daten dt {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--creme-still); padding-top: 2px;
}
dl.daten dd { color: var(--creme); }

.offen {
  background: var(--nacht-hoch);
  border: 1px solid var(--gelb);
  border-radius: 16px;
  padding: 24px; margin: 32px 0;
}
.offen p { color: var(--creme); margin-bottom: 8px; }
.offen p:last-child { margin-bottom: 0; }
.offen .titel {
  font-family: var(--font-display); font-weight: 700; font-size: 16px;
  color: var(--gelb); margin-bottom: 12px;
}

footer {
  border-top: 1px solid var(--kontur);
  padding: 32px clamp(20px, 5vw, 32px);
  text-align: center; color: var(--creme-still); font-size: 14px;
}
footer a { margin: 0 10px; }

@media (max-width: 600px) {
  dl.daten div { grid-template-columns: 1fr; gap: 4px; }
}