/* ============================================================
   Company OS — Legal pages (Impressum / Datenschutz)
   Built on the OCKI Design System.
   ============================================================ */
:root {
  --shell:    120rem;
  --reading:  46rem;
  --gutter:   clamp(1.25rem, 4vw, 4rem);
  --legal-section-y: clamp(4rem, 6vw, 5.5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--ocki-bg); color: var(--ocki-fg);
  font-family: var(--ocki-font-sans);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: var(--ocki-accent); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--ocki-accent-lo); }
:focus-visible { outline: 2px solid var(--ocki-accent); outline-offset: 2px; }

/* ---- header (matches landing) ----------------------------- */
.hdr {
  position: sticky; top: 0; z-index: 50;
  background: rgba(245,245,245,0.85);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--ocki-border);
}
.hdr-inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter); min-height: 3.75rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.hdr-logo { display: flex; align-items: center; text-decoration: none; }
.hdr-logo img { height: 1.375rem; width: auto; display: block; }
.hdr-back {
  font-family: var(--ocki-font-mono); font-size: 0.8125rem; font-weight: 500;
  color: var(--ocki-fg-muted); text-decoration: none;
  display: inline-flex; align-items: center; gap: 0.375rem;
}
.hdr-back:hover { color: var(--ocki-fg); }

/* ---- document body ---------------------------------------- */
.doc {
  width: 100%; max-width: var(--reading); margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--legal-section-y);
}
.doc-eyebrow {
  font-family: var(--ocki-font-mono); font-size: 0.8125rem; font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ocki-fg-muted);
  display: inline-block; margin-bottom: 1rem;
}
.doc-eyebrow .br { color: var(--ocki-accent); }
.doc-eyebrow .br + span { margin: 0 0.5rem; }
.doc h1 {
  font-family: var(--ocki-font-display);
  font-size: clamp(2.25rem, 1rem + 3.5vw, 3.5rem); font-weight: 600;
  line-height: 1.06; letter-spacing: -0.03em; color: var(--ocki-fg);
  margin: 0 0 0.75rem;
}
.doc-source {
  font-family: var(--ocki-font-mono); font-size: 0.8125rem;
  color: var(--ocki-fg-dim); margin: 0 0 2.5rem;
  padding-bottom: 1.75rem; border-bottom: 1px solid var(--ocki-border);
}
.doc-source a { color: var(--ocki-fg-dim); }
.doc h2 {
  font-family: var(--ocki-font-display);
  font-size: clamp(1.375rem, 1rem + 1vw, 1.75rem); font-weight: 600;
  line-height: 1.2; letter-spacing: -0.015em; color: var(--ocki-fg);
  margin: 2.75rem 0 1rem;
}
.doc h2 .n { color: var(--ocki-accent); font-family: var(--ocki-font-mono); font-weight: 500; margin-right: 0.5rem; }
.doc h3 {
  font-family: var(--ocki-font-display);
  font-size: 1.1875rem; font-weight: 600; line-height: 1.25;
  color: var(--ocki-fg); margin: 2rem 0 0.625rem;
}
.doc h4 {
  font-family: var(--ocki-font-sans);
  font-size: 1.0625rem; font-weight: 600; line-height: 1.3;
  color: var(--ocki-fg); margin: 1.5rem 0 0.5rem;
}
.doc p, .doc li {
  font-family: var(--ocki-font-sans); font-size: 1rem; line-height: 1.7;
  color: var(--ocki-fg-muted); margin: 0 0 1rem;
}
.doc ul { margin: 0 0 1.25rem; padding-left: 1.25rem; }
.doc li { margin-bottom: 0.5rem; }
.doc li::marker { color: var(--ocki-fg-faint); }
.doc strong { color: var(--ocki-fg); font-weight: 600; }
.doc hr { border: 0; border-top: 1px solid var(--ocki-border); margin: 2.5rem 0; }

/* contact / address block */
.doc-card {
  background: var(--ocki-bg-elevated); border: 1px solid var(--ocki-border);
  border-radius: var(--ocki-radius-lg); padding: clamp(1.25rem, 2vw, 1.75rem);
  margin: 0 0 1.5rem;
}
.doc-card p { margin: 0 0 0.375rem; line-height: 1.6; }
.doc-card p:last-child { margin-bottom: 0; }
.doc-card .label {
  font-family: var(--ocki-font-mono); font-size: 0.6875rem; color: var(--ocki-fg-dim);
  letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 0.5rem;
}

/* emphasised legal notice block (Widerspruchsrecht caps) */
.doc-notice {
  background: var(--ocki-bg-sunken); border: 1px solid var(--ocki-border);
  border-radius: var(--ocki-radius-lg); padding: clamp(1.25rem, 2vw, 1.625rem);
  margin: 0 0 1.25rem;
}
.doc-notice p { font-size: 0.9375rem; line-height: 1.6; margin: 0 0 0.75rem; color: var(--ocki-fg-muted); }
.doc-notice p:last-child { margin-bottom: 0; }

/* ============================================================
   Impressum — structured fact sheet
   ============================================================ */
.imp {
  width: 100%; max-width: 60rem; margin-inline: auto;
  padding-inline: var(--gutter); padding-block: var(--legal-section-y);
}
.imp-head { margin-bottom: clamp(2rem, 4vw, 3rem); }
.imp-head .doc-eyebrow { margin-bottom: 1rem; }
.imp-head h1 {
  font-family: var(--ocki-font-display);
  font-size: clamp(2.5rem, 1rem + 4vw, 4rem); font-weight: 600;
  line-height: 1.04; letter-spacing: -0.03em; color: var(--ocki-fg); margin: 0 0 0.75rem;
}
.imp-head .imp-sub {
  font-family: var(--ocki-font-sans); font-size: 1.0625rem; line-height: 1.6;
  color: var(--ocki-fg-muted); margin: 0; max-width: 44ch;
}

/* primary provider banner */
.imp-provider {
  background: var(--ocki-bg-elevated); border: 1px solid var(--ocki-border);
  border-top: 2px solid var(--ocki-accent);
  border-radius: var(--ocki-radius-lg);
  box-shadow: var(--ocki-shadow-sm);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem 2rem; margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
.imp-provider .imp-label {
  font-family: var(--ocki-font-mono); font-size: 0.6875rem; color: var(--ocki-accent);
  letter-spacing: 0.06em; text-transform: uppercase; display: block; margin-bottom: 0.75rem;
}
.imp-provider .imp-name {
  font-family: var(--ocki-font-display); font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
  font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--ocki-fg); margin: 0 0 0.5rem;
}
.imp-provider address {
  font-style: normal; font-family: var(--ocki-font-sans); font-size: 1.0625rem;
  line-height: 1.55; color: var(--ocki-fg-muted);
}
.imp-provider .imp-mark {
  font-family: var(--ocki-font-mono); font-size: 0.75rem; color: var(--ocki-fg-dim);
  letter-spacing: 0.04em; line-height: 1.6; text-align: right;
}
.imp-provider .imp-mark .br { color: var(--ocki-accent); }

/* fact grid */
.imp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1rem);
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}
.imp-cell {
  background: var(--ocki-bg-elevated); border: 1px solid var(--ocki-border);
  border-radius: var(--ocki-radius-lg); padding: clamp(1.25rem, 2vw, 1.625rem);
  display: flex; flex-direction: column; gap: 0.875rem;
}
.imp-cell > .imp-label {
  font-family: var(--ocki-font-mono); font-size: 0.6875rem; color: var(--ocki-fg-dim);
  letter-spacing: 0.06em; text-transform: uppercase; display: flex; align-items: center; gap: 0.5rem;
}
.imp-cell > .imp-label::before {
  content: ""; width: 0.375rem; height: 0.375rem; border-radius: 999px;
  background: var(--ocki-border-hi); flex-shrink: 0;
}
/* definition rows inside a cell */
.imp-rows { display: flex; flex-direction: column; gap: 0.625rem; }
.imp-row { display: flex; flex-direction: column; gap: 0.125rem; }
.imp-row dt {
  font-family: var(--ocki-font-mono); font-size: 0.6875rem; color: var(--ocki-fg-faint);
  letter-spacing: 0.03em; text-transform: uppercase;
}
.imp-row dd {
  margin: 0; font-family: var(--ocki-font-sans); font-size: 1.0625rem;
  color: var(--ocki-fg); line-height: 1.4;
}
.imp-row dd a { color: var(--ocki-fg); text-decoration: none; border-bottom: 1px solid var(--ocki-border-hi); }
.imp-row dd a:hover { color: var(--ocki-accent); border-color: var(--ocki-accent); }
/* mono value (IDs) */
.imp-mono {
  font-family: var(--ocki-font-mono); font-size: 1.125rem; font-weight: 500;
  color: var(--ocki-fg); letter-spacing: 0.01em;
}
.imp-cell p {
  margin: 0; font-family: var(--ocki-font-sans); font-size: 1.0625rem;
  line-height: 1.45; color: var(--ocki-fg);
}
.imp-cell .imp-fine {
  font-size: 0.8125rem; color: var(--ocki-fg-dim); line-height: 1.5;
}

/* wide note (Streitbeilegung) */
.imp-note {
  grid-column: 1 / -1;
  background: var(--ocki-bg-sunken); border: 1px solid var(--ocki-border);
  border-radius: var(--ocki-radius-lg); padding: clamp(1.25rem, 2vw, 1.625rem);
  display: flex; flex-direction: column; gap: 0.625rem;
}
.imp-note .imp-label {
  font-family: var(--ocki-font-mono); font-size: 0.6875rem; color: var(--ocki-fg-dim);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.imp-note p { margin: 0; font-family: var(--ocki-font-sans); font-size: 0.9375rem; line-height: 1.6; color: var(--ocki-fg-muted); }
.imp-source {
  font-family: var(--ocki-font-mono); font-size: 0.75rem; color: var(--ocki-fg-dim);
  margin: clamp(1.5rem, 3vw, 2rem) 0 0; text-align: center;
}
.imp-source a { color: var(--ocki-fg-dim); }

@media (max-width: 40rem) {
  .imp-grid { grid-template-columns: 1fr; }
  .imp-provider { flex-direction: column; align-items: flex-start; }
  .imp-provider .imp-mark { text-align: left; }
}

/* ---- footer (matches landing) ----------------------------- */
.ftr { background: var(--ocki-bg-ink); color: var(--ocki-fg-on-deep); padding-block: clamp(1.25rem, 3vw, 1.75rem); }
.ftr-inner {
  width: 100%; max-width: var(--shell); margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1rem;
  font-family: var(--ocki-font-mono); font-size: 0.75rem; letter-spacing: 0.02em;
}
.ftr-left { display: flex; align-items: center; gap: 0.75rem; }
.ftr-left img { height: 1.125rem; width: auto; display: block; filter: invert(1); }
.ftr-nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.ftr .muted { color: rgba(255,255,255,0.55); }
.ftr a { color: rgba(255,255,255,0.78); text-decoration: none; }
.ftr a:hover { color: #fff; }

@media (max-width: 40rem) {
  .ftr-inner { flex-direction: column; align-items: flex-start; }
  .doc h1, .doc h2, .doc h3, .doc h4, .imp-head h1 {
    hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  }
}