/* Shared styling for the legal pages (Impressum, Datenschutz) */
:root {
  --gold: #1A1A1A;
  --gold-light: #E9E7E1;
  --bg: #F1F0EB;
  --surface: #FFFFFF;
  --text: #141414;
  --muted: #78756E;
  --border: #DEDBD4;
  /* Same mirrored lettering as the home page, for the wordmark only. */
  --chrome: linear-gradient(180deg,
    #2E2E2E 0%, #232323 11%, #B9B9B9 25%, #EFEFEF 33%, #8A8A8A 43%,
    #1C1C1C 54%, #494949 65%, #A8A8A8 75%, #3A3A3A 89%, #202020 100%);
  --brand-font: 'Bodoni Moda', 'Playfair Display', Georgia, serif;
  --h-font: 'Jost', sans-serif;
  --b-font: 'Jost', sans-serif;
}

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

.chrome {
  background: var(--chrome);
  background-size: 100% 1.2em;
  background-size: 100% 1lh;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.30)) drop-shadow(0 0 1px rgba(0,0,0,.30));
}

@media print {
  .chrome { background: none; color: var(--text); -webkit-text-fill-color: var(--text); filter: none; }
}


body {
  font-family: var(--b-font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

.legal-header {
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 38px 24px 30px;
  text-align: center;
}

.legal-header a.brand {
  font-family: var(--brand-font);
  font-size: 24px;
  letter-spacing: 5px;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
}

.legal-header p {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 3px;
  color: var(--muted);
  text-transform: uppercase;
}

.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: 56px 24px 80px;
}

.legal-wrap h1 {
  font-family: var(--h-font);
  font-size: 38px;
  font-weight: 400;
  margin-bottom: 8px;
}

.legal-wrap h2 {
  font-family: var(--h-font);
  font-size: 24px;
  font-weight: 400;
  margin: 40px 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.legal-wrap h3 {
  font-size: 15px;
  font-weight: 500;
  margin: 24px 0 6px;
}

.legal-wrap p, .legal-wrap li { font-size: 15px; color: #3F3F3F; }
.legal-wrap p + p { margin-top: 12px; }

.legal-wrap ul { margin: 10px 0 10px 22px; }
.legal-wrap li { margin-bottom: 6px; }

.legal-wrap a { color: var(--gold); }

.legal-updated {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 32px;
}

.legal-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 24px;
  margin: 16px 0;
}

/* Fields the salon owner still has to supply before this page is published */
.todo {
  background: #FFF6E5;
  border-left: 3px solid #E0A040;
  padding: 14px 18px;
  margin: 16px 0;
  font-size: 14px;
  border-radius: 0 8px 8px 0;
}

.todo strong { color: #9A6B10; }

.legal-back {
  display: inline-block;
  margin-top: 48px;
  font-size: 13px;
  letter-spacing: 1px;
  color: var(--gold);
  text-decoration: none;
}

.legal-back:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .legal-wrap { padding: 36px 20px 60px; }
  .legal-wrap h1 { font-size: 30px; }
}