/* Legal notice + privacy policy: the same world as the home page, tuned for reading.
   Backstage in the arena: the contact shot of the stage, blurred and darkened, behind a calm reading column. */
:root {
  --teal: #24706F; --teal-light: #2d8e8c; --teal-dark: #1a524f;
  --teal-border: rgba(36,112,111,0.22); --teal-border-hi: rgba(36,112,111,0.5);
  --off-white: #f7f7f7; --raised-black: #0e0f0f; --text: #e8eded; --text-mid: #8aacac; --text-muted: #6f8f8f;
  --border: rgba(36,112,111,0.18); --light: #7fe3de;
  --ease-out: cubic-bezier(.16, 1, .3, 1); --sweep: cubic-bezier(.72, 0, .22, 1);
}
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; scrollbar-color: var(--teal-dark) var(--raised-black); }
body { background: var(--raised-black); color: var(--text); font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6;
  overflow-x: hidden; min-height: 100vh; display: flex; flex-direction: column; }
::selection { background: var(--teal); color: var(--off-white); }
:focus-visible { outline: 2px solid var(--light); outline-offset: 3px; }

/* ─── BACKSTAGE ─── */
.backstage { position: fixed; inset: 0; z-index: -2; pointer-events: none; overflow: hidden; background: #070a0a; }
.backstage img { position: absolute; inset: -4%; width: 108%; height: 108%; object-fit: cover; filter: blur(22px) saturate(1.05) brightness(0.62); transform: scale(1.02); }
.backstage::after { content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4,7,7,0.92) 0%, rgba(4,7,7,0.72) 26%, rgba(4,7,7,0.55) 50%, rgba(4,7,7,0.72) 74%, rgba(4,7,7,0.92) 100%),
    linear-gradient(180deg, rgba(4,7,7,0.35) 0%, rgba(4,7,7,0) 30%, rgba(4,7,7,0.5) 100%); }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.45;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E"); }

/* ─── NAV (as on the home page) ─── */
nav { position: fixed; top: 0; left: 0; right: 0; z-index: 200; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 1.1rem 3.5rem; background: rgba(10,12,12,0.92); border-bottom: 1px solid rgba(36,112,111,0.28); backdrop-filter: blur(24px); }
.nav-logo { display: flex; align-items: center; height: 20px; justify-self: start; }
.nav-logo svg { height: 20px; width: auto; display: block; }
.nav-logo svg path { fill: var(--teal-light); }
.nav-links { display: flex; gap: 2.75rem; }
.nav-links a, .nav-back { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none;
  color: rgba(232,237,237,0.65); transition: color .2s; }
.nav-links a:hover, .nav-back:hover, .nav-links a:focus-visible, .nav-back:focus-visible { color: var(--off-white); }
.nav-back { justify-self: end; display: inline-flex; align-items: center; gap: 0.6rem; }
.nav-back svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--ease-out); }
.nav-back:hover svg { transform: translateX(-3px); }

/* ─── PAGE HEAD ─── */
main { flex: 1; width: 100%; max-width: 1240px; margin: 0 auto; padding: 10rem 3.5rem 7rem; }
.page-head { margin-bottom: 4.5rem; }
.page-title { font-size: clamp(2.9rem, 6vw, 5.4rem); font-weight: 300; line-height: 1.0; letter-spacing: -0.035em; color: var(--off-white);
  text-shadow: 0 1px 2px rgba(0,0,0,0.45), 0 2px 24px rgba(0,0,0,0.6); }
.page-title .ln { display: block; position: relative; padding-bottom: 0.06em; }
.page-title .ln > * { display: inline-block; }
.page-title strong { font-weight: 600; color: var(--teal-light); }
.page-meta { margin-top: 1.6rem; display: flex; align-items: center; gap: 0.75rem; font-size: 0.8rem; letter-spacing: 0.04em; color: var(--text-mid); }
.page-meta::before { content: ''; width: 14px; height: 1px; background: var(--teal-light); }

/* ─── IMPRINT: a definition grid on lit strips ─── */
.imprint { max-width: 880px; }
.imprint-row { position: relative; display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2rem; padding: 2.1rem 0;
  border-top: 1px solid var(--border); }
.imprint-row::before, .legal-block::before { content: ''; position: absolute; left: 0; top: -1px; width: 64px; height: 1px;
  background: linear-gradient(90deg, var(--light), rgba(127,227,222,0)); }
.imprint-row h2 { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--teal-light); padding-top: 0.35rem; }
.imprint-row p { font-size: 1.12rem; font-weight: 300; line-height: 1.7; color: var(--text); }
.imprint-row p + p { margin-top: 0.75rem; }
.imprint-row .note { font-size: 0.88rem; color: var(--text-mid); }

/* desktop: title on the left, the details beside it, so the whole notice fits one screen */
.main-imprint { padding-top: 8.5rem; padding-bottom: 3.5rem; display: flex; align-items: center; }
.imprint-layout { width: 100%; }
@media (min-width: 1081px) {
  .imprint-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 5rem; align-items: start; }
  .imprint-layout .page-head { margin-bottom: 0; position: sticky; top: 8.5rem; }
  .imprint-row { padding: 1.6rem 0; grid-template-columns: minmax(0, 12.5rem) minmax(0, 1fr); }
  .imprint-row p { font-size: 1.08rem; }
}

/* short laptop screens: the notice still fits without scrolling */
@media (min-width: 1081px) and (max-height: 860px) {
  .main-imprint { padding-top: 6.5rem; padding-bottom: 1.5rem; }
  .imprint-layout .page-head { top: 6.5rem; }
  .main-imprint .page-title { font-size: clamp(2.6rem, 5vw, 4.4rem); }
  .imprint-row { padding: 1.15rem 0; }
  .imprint-row p { font-size: 1rem; line-height: 1.6; }
  .imprint-row p + p { margin-top: 0.5rem; }
  body:has(.main-imprint) footer { padding-top: 0.9rem; padding-bottom: 1.1rem; }
}

/* ─── PRIVACY: contents + reading column ─── */
.legal-layout { display: grid; grid-template-columns: minmax(0, 15.5rem) minmax(0, 1fr); gap: 5rem; align-items: start; }
.toc { position: sticky; top: 7.5rem; }
.toc-title { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 1rem; }
.toc ol { list-style: none; }
.toc a { position: relative; display: grid; grid-template-columns: 1.9rem 1fr; padding: 0.42rem 0 0.42rem 0.9rem; font-size: 0.82rem; line-height: 1.4;
  color: var(--text-mid); text-decoration: none; transition: color .3s; }
.toc a::before { content: ''; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--border); transition: background-color .3s; }
.toc a::after { content: ''; position: absolute; left: 0; top: 0.35rem; bottom: 0.35rem; width: 1px; background: var(--light);
  transform: scaleY(0); transform-origin: top; transition: transform .5s var(--sweep); }
.toc a .n { color: var(--text-muted); font-variant-numeric: tabular-nums; transition: color .3s; }
.toc a:hover { color: var(--off-white); }
.toc a.active { color: var(--off-white); }
.toc a.active::after { transform: none; }
.toc a.active .n { color: var(--light); }

.legal-content { max-width: 68ch; }
.legal-block { position: relative; padding: 2.4rem 0 2.6rem; border-top: 1px solid var(--border); }
.legal-block h2 { display: flex; gap: 0.9rem; align-items: baseline; font-size: 1.36rem; font-weight: 500; letter-spacing: -0.012em; color: var(--off-white);
  line-height: 1.3; margin-bottom: 1.1rem; }
.legal-block h2 .n { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; color: var(--teal-light); font-variant-numeric: tabular-nums; min-width: 1.6rem; }
.legal-block p { font-size: 1rem; font-weight: 300; line-height: 1.8; color: #c6d6d6; }
.legal-block p + p, .legal-block ul + p, .legal-block p + ul { margin-top: 0.95rem; }
.legal-block strong { font-weight: 500; color: var(--text); }
.legal-block a, .imprint a { color: var(--light); text-decoration: underline; text-decoration-color: rgba(127,227,222,0.35);
  text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .2s, color .2s; }
.legal-block a:hover, .imprint a:hover { color: #fff; text-decoration-color: var(--light); }
.legal-list { list-style: none; }
.legal-list li { position: relative; padding-left: 1.6rem; font-size: 1rem; font-weight: 300; line-height: 1.8; color: #c6d6d6; }
.legal-list li::before { content: ''; position: absolute; left: 0; top: 0.9em; width: 10px; height: 1px; background: var(--teal-light); }
/* the right to object stands out: a lit panel */
.legal-block.notice { margin: 1rem 0 1.4rem; padding: 2.2rem 2.2rem 2.3rem; border-top: 0; background: linear-gradient(135deg, rgba(36,112,111,0.2), rgba(36,112,111,0.06));
  box-shadow: inset 0 0 0 1px rgba(127,227,222,0.18); }
.legal-block.notice::before { width: 120px; top: 0; }
.legal-block.notice p, .legal-block.notice strong { color: var(--text); font-weight: 400; }
.updated { display: none; }        /* shown in the page head instead */
.divider { display: none; }        /* blocks carry their own lit rule */
.todo { background: #7a5b12; color: #fff3cf; padding: 0.05rem 0.4rem; font-size: max(0.78em, 11px); font-weight: 600; letter-spacing: 0.02em; }

/* ─── FOOTER (as on the home page) ─── */
footer { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 1.4rem 3.5rem 1.6rem; }
footer a { font-size: 0.7rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; color: rgba(232,237,237,0.62);
  text-shadow: 0 1px 2px rgba(0,0,0,0.6); transition: color .2s; }
footer a:hover, footer a:focus-visible, footer a[aria-current="page"] { color: var(--light); }
.footer-links, .footer-social { display: flex; gap: 2.25rem; }

/* ─── ENTRANCE: the title is wiped on by a light bar, the page comes into focus ─── */
@media (prefers-reduced-motion: no-preference) {
  .page-title .ln > * { animation: lg-wipe 1s var(--sweep) both, lg-cool 2s ease-out both; }
  .page-title .ln:nth-child(2) > * { animation-delay: .2s, .2s; }
  .page-title .ln::after { content: ''; position: absolute; top: 0.02em; bottom: 0.08em; left: 0; width: 2px; border-radius: 2px; background: #d9fffc;
    box-shadow: 0 0 10px 1px rgba(110,235,228,0.95), 0 0 34px 6px rgba(45,160,156,0.55); opacity: 0; animation: lg-bar 1s var(--sweep) both; }
  .page-title .ln:nth-child(2)::after { animation-delay: .2s; }
  .page-meta, .imprint, .legal-layout { animation: lg-rise 1.1s var(--ease-out) .55s both; }
}
@keyframes lg-wipe { from { clip-path: inset(-0.3em 100% -0.3em -0.1em); } to { clip-path: inset(-0.3em -0.1em -0.3em -0.1em); } }
@keyframes lg-cool { 0%, 35% { color: #c9fffb; text-shadow: 0 0 22px rgba(120,235,228,0.55); } }
@keyframes lg-bar { 0% { opacity: 0; left: 0; } 12% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; left: var(--w, 60%); } }
@keyframes lg-rise { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } }

/* ─── RESPONSIVE ─── */
@media (max-width: 1080px) {
  .legal-layout { grid-template-columns: 1fr; gap: 0; }
  .toc { display: none; }
}
@media (max-width: 760px) {
  nav { grid-template-columns: 1fr auto; padding: 1rem 1.25rem; }
  .nav-links { display: none; }
  main { padding: 7.5rem 1.25rem 4rem; }
  .page-head { margin-bottom: 3rem; }
  .imprint-row { grid-template-columns: 1fr; gap: 0.8rem; padding: 1.7rem 0; }
  .imprint-row p { font-size: 1.02rem; }
  .legal-block h2 { font-size: 1.18rem; }
  .legal-block.notice { padding: 1.6rem 1.3rem; }
  footer { flex-direction: column; gap: 1rem; padding: 2rem 1.25rem 2.4rem; }
  .footer-links, .footer-social { gap: 1.6rem; }
}