/* Impressum und Datenschutz: ruhige Textseiten im Stil der Landingpage (Wunsch Manuel 02.11.: eigene Seiten statt Verweis auf die alte Website) */
@font-face { font-family: Montserrat; src: url(fonts/Montserrat-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: Montserrat; src: url(fonts/Montserrat-500.woff2) format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: Montserrat; src: url(fonts/Montserrat-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --nacht: #06080D;
  --licht: #F4F2EC;
  --orange: #EDA469;
  --claim: Montserrat, 'Helvetica Neue', Arial, sans-serif;
  --rand: max(24px, env(safe-area-inset-left, 0px));
  --rand-r: max(24px, env(safe-area-inset-right, 0px));
  --innen-l: max(var(--rand), calc((100vw - 1360px) / 2));
  --innen-r: max(var(--rand-r), calc((100vw - 1360px) / 2));
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--nacht); -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; color: var(--licht); font: 300 17px/1.6 var(--claim); -webkit-font-smoothing: antialiased;
  background: linear-gradient(180deg, #141a25 0%, #10131A 35%, #0a0d13 70%, #06080D 100%) no-repeat, var(--nacht); }
a { color: inherit; text-decoration-color: rgba(244, 242, 236, .4); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--orange); }
h1, h2, p, dl, dd { margin: 0; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: calc(env(safe-area-inset-top, 0px) + 28px) var(--innen-r) 0 var(--innen-l); }
.kopf img { width: 150px; height: auto; display: block; }
.kopf .zurueck { font-size: 15px; font-weight: 500; text-decoration: none; color: rgba(244, 242, 236, .8); }
.kopf .zurueck:hover { color: var(--licht); }
.kopf a { padding: 10px 0; margin: -10px 0; }

main { flex: 1; width: 100%; padding: clamp(56px, 10vw, 112px) var(--innen-r) clamp(64px, 10vw, 112px) var(--innen-l); display: flex; flex-direction: column; gap: 40px; }
main > * { max-width: 68ch; }
h1 { font: 700 clamp(40px, 7vw, 76px)/1 var(--claim); letter-spacing: -.012em; text-wrap: balance; }
.vorweg { font-size: clamp(18px, 1.4vw, 20px); color: rgba(244, 242, 236, .86); max-width: 52ch; text-wrap: pretty; }
section { display: flex; flex-direction: column; gap: 12px; padding-top: 28px; border-top: 1px solid rgba(244, 242, 236, .12); }
h2 { font: 700 20px/1.3 var(--claim); }
section p, section li { color: rgba(244, 242, 236, .84); text-wrap: pretty; }
section ul { margin: 0; padding-left: 1.1em; display: flex; flex-direction: column; gap: 6px; }
.hervor { color: var(--licht); font-weight: 500; }
dl { display: grid; grid-template-columns: minmax(0, 13em) minmax(0, 1fr); gap: 10px 24px; }
dt { color: rgba(244, 242, 236, .6); }
dd { color: rgba(244, 242, 236, .9); }
.stand { font-size: 14px; color: rgba(244, 242, 236, .6); }

.fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px; padding: 20px var(--innen-r) calc(env(safe-area-inset-bottom, 0px) + 22px) var(--innen-l); border-top: 1px solid rgba(244, 242, 236, .14); background: rgba(6, 8, 13, .6); font-size: 14px; color: rgba(244, 242, 236, .78); }
.fuss nav { display: flex; gap: 24px; margin-left: auto; }
.fuss a { text-decoration: none; }
.fuss a:hover, .fuss a[aria-current] { color: var(--licht); }
.fuss a[aria-current] { text-decoration: underline; text-decoration-color: var(--orange); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .kopf img { width: 120px; }
  dl { grid-template-columns: 1fr; gap: 2px; }
  dd + dt { margin-top: 12px; }
}
/* Fuß wie auf Start- und Partnerseite: auf Telefon und Tablet hochkant mittig */
@media (max-width: 860px) and (orientation: portrait), (max-width: 560px), (max-height: 480px) and (orientation: landscape) {
  .fuss { flex-direction: column; justify-content: center; text-align: center; gap: 12px; }
  .fuss nav { margin-left: 0; justify-content: center; }
  .fuss nav a { padding: 12px 6px; margin: -12px -6px; }
}
