/* ==========================================================================
   Onyx legal document pages
   Shared by the eight legal pages (EN + TR). Standalone: does not depend on
   legal-pages.css, which serves the older /terms + /impressum layout.
   ========================================================================== */

:root {
  --ink: #0E1016;
  --body: #3a3d47;
  --muted: #6b6f7b;
  --line: #E7E8EE;
  --line-2: #eff0f4;
  --indigo: #2D2F6E;
  --indigo-2: #4A4CA0;
  --indigo-3: #6C6FB3;
  --tint: #F2F3FB;
  --chip: #E7E8F5;
  --todo-ink: #7A4E00;
  --todo-bg: #FFF6E4;
  --todo-line: #E8CE96;
  --bg: #FFFFFF;
  --soft: #F7F8FC;
  --display: "Instrument Sans", system-ui, sans-serif;
  --sans: "DM Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --r: 16px;
  --r-lg: 24px;
  --sh-sm: 0 1px 2px rgba(16, 18, 30, .04), 0 2px 8px rgba(16, 18, 30, .04);
  --sh-md: 0 12px 30px rgba(20, 22, 50, .10), 0 2px 8px rgba(20, 22, 50, .05);
  --maxw: 1160px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  color: var(--body);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--indigo); }

a.inline {
  color: var(--indigo-2);
  border-bottom: 1px solid var(--line);
  transition: color .18s, border-color .18s;
}
a.inline:hover { color: var(--indigo); border-color: var(--indigo-3); }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

::selection { background: var(--chip); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }

.eyebrow {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--indigo-2);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  border-radius: 999px;
  padding: 13px 24px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn-primary { background: var(--indigo); color: #fff; }
.btn-primary:hover { background: #25264f; transform: translateY(-1px); color: #fff; }

/* ---------- Header ---------- */

header.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255, 255, 255, .82);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid var(--line-2);
}

.nav-in {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 26px;
}

.brand img { height: 96px; width: auto; }

.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a { font-size: 15px; color: #2c2f3a; font-weight: 500; }
.nav-links a:hover, .nav-links a.active { color: var(--indigo); }

.nav-right { margin-left: auto; display: flex; align-items: center; gap: 14px; }

/* Language switch. Each language is its own URL, so the inactive button is a
   link to the counterpart page rather than an in-place text swap. */
.lang {
  display: inline-flex;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
}
.lang a,
.lang span {
  padding: 7px 12px;
  color: var(--muted);
  letter-spacing: .05em;
  transition: background .18s, color .18s;
  line-height: 1.4;
}
.lang a:hover { background: var(--tint); color: var(--indigo); }
.lang .active { background: var(--indigo); color: #fff; }

.nav-contact { font-size: 15px; color: #2c2f3a; font-weight: 500; }
.nav-contact:hover { color: var(--indigo); }

.ft-li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: #2c2f3a;
  transition: color .18s, border-color .18s;
}
.ft-li:hover { color: var(--indigo); border-color: var(--indigo-3); }

.burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 6px;
}
.burger span { width: 22px; height: 2px; background: var(--ink); border-radius: 2px; transition: .2s; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { opacity: 0; }
.burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mnav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: 8px 20px 16px;
  border-bottom: 1px solid var(--line-2);
  background: #fff;
}
.mnav a { padding: 11px 12px; border-radius: 10px; font-weight: 600; color: #2c2f3a; }
.mnav a:hover { background: var(--tint); color: var(--indigo); }
.mnav.open { display: flex; }

/* ---------- Document head ---------- */

.dochead { padding: 72px 0 40px; border-bottom: 1px solid var(--line-2); }
.dochead h1 { margin: 18px 0 0; font-size: clamp(2.1rem, 4vw, 3.1rem); font-weight: 700; }

.dochead .meta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
}

.updated {
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: .04em;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pdflink {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--indigo-2);
  border-bottom: 1px solid var(--chip);
  padding-bottom: 2px;
}
.pdflink:hover { color: var(--indigo); border-color: var(--indigo-3); }

.dochead .intro {
  margin-top: 30px;
  font-size: 1.005rem;
  line-height: 1.75;
  color: var(--body);
  text-wrap: pretty;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}

/* ---------- Placeholder token (pages awaiting copy) ---------- */

.todo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--todo-ink);
  background: var(--todo-bg);
  border: 1px dashed var(--todo-line);
  border-radius: 6px;
  padding: 3px 8px;
  line-height: 1.45;
  white-space: nowrap;
}

.todo-block {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  color: var(--todo-ink);
  background: var(--todo-bg);
  border: 1px dashed var(--todo-line);
  border-radius: 12px;
  padding: 16px 18px;
  line-height: 1.7;
}
.todo-block .hint {
  display: block;
  margin-top: 6px;
  font-size: 11.5px;
  color: #9a7a3c;
  letter-spacing: .04em;
}

/* ---------- Layout ---------- */

.doc {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 56px 0 96px;
}

.toc { position: sticky; top: 92px; }
.toc h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9aa0ad;
  font-weight: 500;
  margin-bottom: 14px;
}
.toc ol { list-style: none; counter-reset: t; }
.toc li { counter-increment: t; }
.toc a {
  display: flex;
  gap: 10px;
  padding: 7px 10px 7px 12px;
  border-left: 2px solid var(--line);
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
  transition: color .18s, border-color .18s, background .18s;
}
.toc a::before {
  content: counter(t, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 11px;
  color: #b3b7c4;
  padding-top: 2px;
}
.toc a:hover { color: var(--ink); background: var(--soft); }
.toc a.current { color: var(--indigo); border-left-color: var(--indigo); font-weight: 600; }
.toc a.current::before { color: var(--indigo-3); }
.toc-toggle { display: none; }

.body { max-width: 700px; }

section.s { padding-top: 8px; margin-bottom: 56px; scroll-margin-top: 96px; }
section.s > .snum { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; color: var(--indigo-3); }
section.s > h2 { margin: 10px 0 6px; font-size: clamp(1.35rem, 2.2vw, 1.72rem); }
section.s h3 { margin: 26px 0 8px; font-size: 1.04rem; }
section.s p { margin-top: 12px; font-size: 1.005rem; line-height: 1.75; text-wrap: pretty; }
section.s p:first-of-type { margin-top: 14px; }

.rule { height: 1px; background: var(--line-2); margin: 0 0 40px; }

ul.dot { margin-top: 14px; list-style: none; display: flex; flex-direction: column; gap: 10px; }
ul.dot li { position: relative; padding-left: 18px; font-size: 1.005rem; line-height: 1.7; }
ul.dot li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--indigo-3);
}

/* ---------- Content components ---------- */

/* Key-value card */
.kv {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: #fff;
  overflow: hidden;
}
.kv .row {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 18px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line-2);
  align-items: center;
}
.kv .row:last-child { border-bottom: 0; }
.kv .k {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo-3);
}

/* Consent statement — the legally operative paragraph */
.consent {
  margin-top: 22px;
  background: var(--soft);
  border-left: 4px solid var(--indigo);
  border-radius: 0 var(--r) var(--r) 0;
  padding: 26px 28px;
}
.consent p { margin-top: 0; font-size: 1.03rem; line-height: 1.8; }
.consent b { font-family: var(--display); font-weight: 700; color: var(--ink); letter-spacing: .01em; }

/* Contact card */
.contactbox {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: #fff;
  padding: 28px;
}
.contactbox .cname {
  font-family: var(--display);
  font-weight: 700;
  color: var(--ink);
  font-size: 1.06rem;
  letter-spacing: -.01em;
  line-height: 1.35;
}
.contactbox .crows { margin-top: 20px; display: grid; }
.contactbox .crow {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 18px;
  align-items: center;
  padding: 14px 0;
  border-top: 1px solid var(--line-2);
}
.contactbox .ck {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--indigo-3);
}

/* Sub-processor table */
.tblwrap {
  margin-top: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
}
table.sub { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.sub th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo-3);
  font-weight: 500;
  padding: 14px 16px;
  background: var(--tint);
  border-bottom: 1px solid var(--line-2);
  white-space: nowrap;
}
table.sub td { padding: 14px 16px; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--muted); }
table.sub tr:last-child td { border-bottom: 0; }
.tcards { display: none; }

/* ---------- Footer ---------- */

footer.ft { border-top: 1px solid var(--line); padding: 64px 0 40px; background: #fff; }
.ft-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.ft-brand img { height: 96px; margin-bottom: 16px; }
.ft-sum { color: var(--muted); font-size: 14px; max-width: 40ch; }
.ft-col h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9aa0ad;
  font-weight: 500;
  margin-bottom: 16px;
}
.ft-col a { display: block; font-size: 15px; color: #2c2f3a; margin-bottom: 11px; }
.ft-col a:hover { color: var(--indigo); }
.ft-bot {
  margin-top: 52px;
  padding-top: 24px;
  border-top: 1px solid var(--line-2);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  font-family: var(--mono);
  font-size: 12.5px;
  color: #9aa0ad;
  letter-spacing: .02em;
}

/* ---------- Responsive ---------- */

@media (max-width: 940px) {
  .nav-links, .nav-contact { display: none; }
  .burger { display: flex; }

  .doc { grid-template-columns: 1fr; gap: 0; padding-top: 32px; }

  .toc {
    position: static;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: #fff;
    margin-bottom: 36px;
    overflow: hidden;
  }
  .toc h4 { display: none; }
  .toc-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    border: 0;
    padding: 16px 18px;
    font: 600 15px var(--sans);
    color: var(--ink);
    cursor: pointer;
  }
  .toc-toggle .chev { font-family: var(--mono); color: var(--indigo-3); transition: transform .2s; }
  .toc.open .toc-toggle .chev { transform: rotate(180deg); }
  .toc ol { display: none; padding: 0 12px 12px; }
  .toc.open ol { display: block; }

  .kv .row { grid-template-columns: 1fr; gap: 6px; }

  .tblwrap { display: none; }
  .tcards { display: grid; gap: 12px; margin-top: 20px; }
  .tcard { border: 1px solid var(--line); border-radius: var(--r); background: #fff; padding: 18px; }
  .tcard .tr {
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 12px;
    padding: 8px 0;
    border-top: 1px solid var(--line-2);
    align-items: center;
  }
  .tcard .tr:first-child { border-top: 0; padding-top: 0; }
  .tcard .tk {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--indigo-3);
  }
}

@media (max-width: 560px) {
  .wrap, .nav-in { padding-left: 20px; padding-right: 20px; }
  .nav-in { gap: 12px; }
  .ft-top { grid-template-columns: 1fr 1fr; }
  .contactbox .crow { grid-template-columns: 1fr; gap: 6px; }
  .tcard .tr { grid-template-columns: 1fr; gap: 4px; }

  /* The brand mark, language switch, demo button, LinkedIn badge and burger
     together overflow a phone-width row. The burger must stay reachable and
     the language switch is the only route to the other language, so the demo
     button and the badge step aside — both reappear in the drawer/footer. */
  .brand img { height: 64px; }
  header.nav .btn-primary,
  header.nav .ft-li { display: none; }
}

/* ---------- Print ---------- */

@media print {
  @page { margin: 16mm 14mm; }

  header.nav, .toc, footer.ft, .pdflink, .lang { display: none !important; }
  body { color: #000; }

  /* The screen layout reserves generous vertical air around the document
     head and a scroll-margin for the sticky nav. Neither applies on paper,
     and leaving them in strands the first page nearly empty. */
  .wrap { padding: 0; max-width: none; }
  .dochead { padding: 0 0 20px; }
  .dochead h1 { margin-top: 10px; font-size: 26pt; }
  .dochead .meta { margin-top: 14px; }
  .dochead .intro { margin-top: 16px; padding-top: 16px; }

  .doc { display: block; padding: 20px 0 0; }
  .body { max-width: none; }

  /* Sections are allowed to split across pages — several run longer than a
     sheet, and `break-inside: avoid` would push them wholesale to the next
     page and strand the remainder of the current one. Headings stay welded
     to the text that follows, and lists keep at least two lines together. */
  section.s { margin-bottom: 24px; scroll-margin-top: 0; }
  section.s > .snum { break-after: avoid; }
  section.s > h2 { font-size: 15pt; break-after: avoid; break-inside: avoid; }
  section.s h3 { break-after: avoid; }
  section.s p, ul.dot li { orphans: 2; widows: 2; }
  ul.dot li, .kv .row, .contactbox .crow, table.sub tr { break-inside: avoid; }
  .rule { margin-bottom: 24px; }

  .kv, .tblwrap, .contactbox { box-shadow: none; }
  .todo, .todo-block { background: #fff; border: 1px dashed #999; color: #000; }
}