/* =====================================================================
   Rechtsseiten: /impressum, /datenschutz, /agb
   Aufbau nach TN-Designsprache Abschnitt 8: Kopf mit Kategorie, H1, Lead, Stand;
   dann Linie und zweispaltig (mitlaufendes Inhaltsverzeichnis links, Text rechts auf ~760 px).
   Drei Abstandsstufen, keine Einzelwerte: --u-abschnitt, --u-block, --u-satz.
   ===================================================================== */

.recht {
  --u-abschnitt: clamp(40px, 4.4vw, 56px);
  --u-block: 28px;
  --u-satz: 14px;
  --leiste: 260px;
}

/* ---------- Kopf ---------- */
.recht-kopf { position: relative; overflow: hidden; padding: var(--u-abschnitt) 0; border-bottom: 1px solid var(--line); }
.recht-kopf .wrap { position: relative; }
.recht-marke { position: absolute; z-index: -1; right: calc(var(--gutter) - 40px); top: 50%; width: 250px; height: 305px; transform: translateY(-50%) rotate(-8deg); opacity: .09; pointer-events: none; --rp-ring: #0a3aa0; }

.recht-krumen ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: var(--u-block); font-size: 14px; color: var(--ink-3); }
.recht-krumen li + li::before { content: "/"; margin-right: 8px; color: var(--line-mid); }
.recht-krumen a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-mid); text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
.recht-krumen a:hover { text-decoration-color: var(--accent-btn); }

/* Kategorie in normaler Schrift, mit dem Recruiting-Partner-Icon als Marker */
.recht-kategorie { display: flex; align-items: center; gap: 10px; margin-bottom: var(--u-satz); font: 600 15px/1.3 var(--text); color: var(--accent-btn); }
.recht-kategorie::before { content: ""; flex: none; width: 15px; height: 18px; background: url("/assets/logos/icon-farbe.svg") center / contain no-repeat; }

.recht-kopf h1 { font-size: clamp(38px, 5.4vw, 64px); max-width: 14em; }
.recht-lead { max-width: 44em; margin-top: var(--u-block); font-size: 17px; line-height: 1.65; }
.recht-stand { display: inline-flex; align-items: center; gap: 10px; margin-top: var(--u-block); padding: 9px 16px 9px 12px; border: 1px solid var(--line-mid); border-radius: 999px; background: var(--paper); font-size: 14px; color: var(--ink-2); }
.recht-stand .ic { width: 17px; height: 17px; color: var(--accent-btn); }
.recht-stand strong { font-weight: 600; }

/* ---------- Zweispaltig ---------- */
.recht-raster { display: grid; grid-template-columns: var(--leiste) minmax(0, 760px); justify-content: space-between; gap: clamp(40px, 6vw, 96px); padding: var(--u-abschnitt) 0 calc(var(--u-abschnitt) * 1.4); }
.recht-leiste { position: relative; }

/* Inhaltsverzeichnis: läuft auf dem Desktop mit */
.recht-toc { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.recht-toc summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: var(--u-satz); font: 600 13px/1.3 var(--text); color: var(--ink); list-style: none; pointer-events: none; }
.recht-toc summary::-webkit-details-marker { display: none; }
.recht-toc-chev { display: none; }
.recht-toc ol { position: relative; display: grid; border-left: 1px solid var(--line); }
.recht-toc a { position: relative; display: flex; gap: 8px; margin-left: -1px; padding: 7px 0 7px 16px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--ink-3); transition: color .2s var(--ease), border-color .2s var(--ease); }
.recht-toc a:hover { color: var(--ink); }
.recht-toc a.ist-aktiv { color: var(--accent-btn); border-left-color: var(--accent-btn); font-weight: 600; }
.recht-toc .recht-nr { flex: none; min-width: 2.2em; font-variant-numeric: tabular-nums; color: inherit; opacity: .75; }

/* ---------- Text ---------- */
.recht-text { min-width: 0; font-size: 16px; line-height: 1.75; color: var(--ink-2); overflow-wrap: break-word; }
.recht-abschnitt { scroll-margin-top: 24px; }
.recht-abschnitt + .recht-abschnitt { margin-top: var(--u-abschnitt); padding-top: var(--u-abschnitt); border-top: 1px solid var(--line); }
.recht-text h2 { font-size: clamp(26px, 2.8vw, 32px); line-height: 1.15; margin-bottom: var(--u-block); }
.recht-text h2 .recht-nr { color: var(--accent); }
.recht-text h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; margin: var(--u-block) 0 var(--u-satz); }
.recht-text h4 { font: 700 16px/1.4 var(--text); letter-spacing: 0; color: var(--ink); margin: var(--u-block) 0 var(--u-satz); }
.recht-text h2 + h3, .recht-text h3 + h4 { margin-top: 0; }
.recht-text p + p, .recht-text p + ul, .recht-text ul + p, .recht-text p + ol { margin-top: var(--u-satz); }
.recht-text a { color: var(--accent-btn); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--accent-btn) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color .2s var(--ease); }
.recht-text a:hover { text-decoration-color: var(--accent-btn); }
.recht-text strong { font-weight: 700; }

/* Angaben als Zeilen (Impressum, verantwortliche Stelle) */
.recht-daten { max-width: 640px; border: 1px solid var(--line-mid); border-radius: var(--r-card); background: var(--paper); overflow: hidden; }
.recht-daten li { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 20px; padding: 14px 20px; }
.recht-daten li + li { border-top: 1px solid var(--line); }
.recht-daten-name { font-size: 14px; color: var(--ink-3); }
.recht-daten-wert { font-weight: 600; color: var(--ink); }
.recht-daten + p, p + .recht-daten { margin-top: var(--u-block); }

/* Nummerierte Absätze der AGB: (1), (2), ... */
.recht-absaetze { counter-reset: absatz; display: grid; gap: var(--u-satz); }
.recht-absaetze li { counter-increment: absatz; position: relative; padding-left: 44px; }
.recht-absaetze li::before { content: "(" counter(absatz) ")"; position: absolute; left: 0; top: 0; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-btn); }

/* Anbieter-Block der AGB: Karte im Aufbau der Startseite */
.recht-anbieter { margin-bottom: var(--u-abschnitt); padding: 24px 26px; border: 1px solid var(--line-mid); border-radius: var(--r-card); background: linear-gradient(160deg, var(--tint-weak) 0%, var(--paper) 70%); line-height: 1.65; }
.recht-anbieter-name { font: 500 22px/1.2 var(--head); letter-spacing: -.02em; color: var(--ink); margin-bottom: 10px; }
.recht-anbieter-adresse { color: var(--ink-2); }
.recht-anbieter-meta { margin-top: var(--u-satz); font-size: 14.5px; color: var(--ink-3); }
.recht-anbieter-zusatz { margin-top: var(--u-satz); padding-top: var(--u-satz); border-top: 1px solid var(--line); font-size: 14.5px; font-style: italic; color: var(--ink-3); }

/* ---------- Tablet und Handy: Verzeichnis als aufklappbare Karte über dem Text ---------- */
@media (max-width: 959px) {
  .recht-raster { grid-template-columns: minmax(0, 1fr); gap: var(--u-block); padding-top: var(--u-block); }
  .recht-toc { position: static; max-height: none; overflow: visible; border: 1px solid var(--line-mid); border-radius: var(--r-card); background: var(--paper); }
  .recht-toc summary { margin: 0; padding: 14px 18px; min-height: 48px; font-size: 15px; pointer-events: auto; cursor: pointer; }
  .recht-toc-chev { display: block; width: 18px; height: 18px; color: var(--ink-3); transition: transform .25s var(--ease); }
  .recht-toc details[open] .recht-toc-chev { transform: rotate(180deg); }
  .recht-toc ol { margin: 0 18px 14px; }
  .recht-toc a { padding: 9px 0 9px 14px; min-height: 44px; align-items: center; }
  .recht-marke { width: 180px; height: 220px; right: -60px; }
}
@media (max-width: 599px) {
  .recht { --u-block: 22px; }
  .recht-kopf h1 { font-size: 34px; }
  .recht-lead { font-size: 16px; }
  .recht-daten li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 12px 16px; }
  .recht-absaetze li { padding-left: 36px; }
  .recht-anbieter { padding: 20px; }
  .recht-marke { opacity: .06; top: 30%; }
}