/* Shared styles for Onelop legal pages (Impressum / Datenschutz / Nutzungsbedingungen) */
:root {
  --canvas: #f6f4f1;
  --paper: #ffffff;
  --parchment: #f1eee9;
  --fog: #d9d7d5;
  --stone: #727272;
  --ink: #262626;
  --charcoal: #2d2d2d;
  --accent: #22d3c5;
  --max: 780px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
html[lang="ar"] body { font-family: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; }
html[dir="rtl"] { direction: rtl; }
a { color: inherit; }
a:hover { color: var(--stone); }
button { font-family: inherit; cursor: pointer; }

/* Top bar */
.bar {
  position: sticky; top: 0; z-index: 10;
  background: rgba(246,244,241,.85); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--fog);
}
.bar-inner {
  max-width: var(--max); margin: 0 auto; padding: 16px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.brand { font-size: 19px; font-weight: 600; letter-spacing: -0.03em; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); opacity: .7; }
.lang { display: inline-flex; gap: 2px; background: var(--parchment); border-radius: 24px; padding: 4px; }
.lang button {
  border: none; background: transparent; color: var(--stone);
  font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 20px; line-height: 1;
}
.lang button:hover { color: var(--ink); }
.lang button.active { background: var(--ink); color: var(--paper); }

/* Content */
main { flex: 1; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 48px 24px 72px; }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
h1 { font-size: clamp(30px, 5vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 10px 0 8px; }
.updated { color: var(--stone); font-size: 14px; margin-bottom: 32px; }
h2 { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 34px 0 10px; }
h3 { font-size: 16px; font-weight: 600; margin: 20px 0 6px; }
p, li { font-size: 15.5px; color: #333; }
p { margin: 10px 0; }
ul, ol { margin: 10px 0 10px 22px; }
li { margin: 6px 0; }
.card {
  background: var(--paper); border: 1px solid var(--fog); border-radius: 16px;
  padding: 22px 24px; margin: 16px 0;
}
address { font-style: normal; line-height: 1.7; }
.todo { background: #fff3c4; color: #6b5900; padding: 1px 7px; border-radius: 5px; font-weight: 500; white-space: nowrap; }
hr { border: none; border-top: 1px solid var(--fog); margin: 40px 0; }

/* Footer */
footer { border-top: 1px solid var(--fog); background: var(--canvas); }
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 22px 24px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 13px; color: var(--stone);
}
.footer-inner nav { display: flex; gap: 20px; flex-wrap: wrap; }
.footer-inner a { text-decoration: none; }
.footer-inner a:hover { color: var(--ink); }

[data-lang-block] { display: none; }
[data-lang-block].active { display: block; }

@media (max-width: 520px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
}