/* Praxoria – Legal pages
   Behutsame Annäherung an die Designsprache von index.html
   Keine textlichen Änderungen: nur Layout/Typografie/Komponenten.
*/

/* Legal hero: single-column when no side card is present */
body.cockpit.legalPage .hero.heroSingle{
  grid-template-columns: 1fr;
}

/* Cards inside legal heroes: slightly calmer and closer to index panels */
body.cockpit.legalPage .hero .card{
  border-radius: calc(var(--radius-lg) + 6px);
  border-color: color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, var(--surface) 92%, transparent);
  box-shadow: var(--shadow-card);
}

/* ===== Legal documents layout refinements (ToC + meta bar) ===== */
body.cockpit.legalPage .legalMeta{
  border-radius: calc(var(--radius-lg) + 6px);
  border-color: color-mix(in oklab, var(--border) 86%, transparent);
  background:
    radial-gradient(420px 220px at 12% 20%, color-mix(in oklab, var(--accent) 10%, transparent), transparent 66%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface) 90%, transparent),
      color-mix(in oklab, var(--surface2) 72%, transparent)
    );
  box-shadow: var(--shadow-card);
}

body.cockpit.legalPage .legalToc{
  border-radius: calc(var(--radius-lg) + 6px);
  border-color: color-mix(in oklab, var(--border) 86%, transparent);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface) 92%, transparent),
      color-mix(in oklab, var(--surface2) 72%, transparent)
    );
}

body.cockpit.legalPage .legalTocList a{
  display:inline-block;
  padding: 5px 7px;
  border-radius: 12px;
}
body.cockpit.legalPage .legalTocList a:hover{
  text-decoration: none;
  background: color-mix(in oklab, var(--surface2) 72%, transparent);
}
body.cockpit.legalPage .legalTocSub{
  border-left-color: color-mix(in oklab, var(--accent) 26%, var(--border));
}

body.cockpit.legalPage .legalContent{
  font-size: 15.5px;
}
body.cockpit.legalPage .legalContent h2:first-child{ margin-top: 0; }
body.cockpit.legalPage .legalContent a{
  text-underline-offset: 3px;
  text-decoration-thickness: from-font;
}
body.cockpit.legalPage .legalContent code{
  font-size: .92em;
  padding: 2px 6px;
  border-radius: 10px;
  border: 1px solid color-mix(in oklab, var(--border) 80%, transparent);
  background: color-mix(in oklab, var(--surface2) 82%, transparent);
}

/* Nested cards inside legal content (e.g. forms) */
body.cockpit.legalPage .legalContent .card{
  border-radius: calc(var(--radius-lg) + 6px);
  border-color: color-mix(in oklab, var(--border) 86%, transparent);
  background: color-mix(in oklab, var(--surface2) 74%, transparent);
  box-shadow: var(--shadow-card);
}

/* ===== Widerruf flow (Vertrag widerrufen) – Stepper an buy.html angeglichen ===== */
body.cockpit.withdrawPage .checkoutStepper{
  position:relative;
  display:flex;
  gap:12px;
  align-items:stretch;
  margin:10px 0 18px;
  padding:2px 0 12px;
  flex-wrap:nowrap;
  --stepper-fill: 0%;
  /* Geometrie an "So starten Sie" (index.html) orientiert */
  --stepper-dot: 30px;
  --stepper-chip-pad-x: 12px;
  --stepper-chip-pad-y: 10px;
  --stepper-pad-top: 2px;
  --stepper-track-inset: calc(var(--stepper-chip-pad-x) + (var(--stepper-dot) / 2));
  --stepper-track-y: calc(var(--stepper-pad-top) + var(--stepper-chip-pad-y) + (var(--stepper-dot) / 2));
}
body.cockpit.withdrawPage .checkoutStepper::before{
  content:"";
  position:absolute;
  left: var(--stepper-track-inset);
  right: var(--stepper-track-inset);
  top: var(--stepper-track-y);
  height:2px;
  border-radius:999px;
  background: color-mix(in oklab, var(--border) 70%, transparent);
  z-index:0;
  pointer-events:none;
}
body.cockpit.withdrawPage .checkoutStepper::after{
  content:"";
  position:absolute;
  left: var(--stepper-track-inset);
  right: var(--stepper-track-inset);
  top: var(--stepper-track-y);
  height:2px;
  border-radius:999px;
  background: linear-gradient(90deg,
    color-mix(in oklab, var(--accent) 70%, transparent),
    color-mix(in oklab, var(--accent2) 55%, transparent)
  );
  background-repeat:no-repeat;
  background-size: var(--stepper-fill) 100%;
  z-index:0;
  pointer-events:none;
}

body.cockpit.withdrawPage .stepChip{
  flex:1 1 0;
  min-width: 190px;
  border:1px solid var(--border);
  /* opak, damit die Linie nicht unter den Chips sichtbar wird */
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface2) 94%, var(--surface) 6%),
      color-mix(in oklab, var(--surface) 98%, var(--surface2) 2%)
    );
  color:var(--text);
  border-radius:18px;
  padding:10px 12px;
  display:flex;
  gap:12px;
  align-items:center;
  text-align:left;
  position:relative;
  z-index:1;
}
body.cockpit.withdrawPage .stepChip .stepDot{
  width:var(--stepper-dot);
  height:var(--stepper-dot);
  border-radius:999px;
  border:1px solid color-mix(in oklab, var(--border-strong) 55%, var(--border));
  /* opak, damit die Linie im Kreisbereich nicht durchscheint */
  background: color-mix(in oklab, var(--surface2) 88%, var(--surface) 12%);
  display:grid;
  place-items:center;
  font-weight:650;
  font-size:13px;
  flex: 0 0 auto;
  position:relative;
}
body.cockpit.withdrawPage .stepChip .stepCopy{display:flex; flex-direction:column; gap:2px; min-width:0;}
body.cockpit.withdrawPage .stepChip .stepTitle{font-size:14px; font-weight:650; line-height:1.2;}

/* Wie buy.html: Titel oberhalb der Linie (Meta-Zeile als Layout-Slot, ohne Text) */
body.cockpit.withdrawPage .stepChip .stepCopy::after{
  content:"";
  display:block;
  height:12px;
}

body.cockpit.withdrawPage .stepChip[aria-current="step"]{
  border-color: color-mix(in oklab, var(--accent) 55%, var(--border));
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--accent) 28%, transparent),
      color-mix(in oklab, var(--accent2) 18%, transparent)
    ),
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface2) 94%, var(--surface) 6%),
      color-mix(in oklab, var(--surface) 98%, var(--surface2) 2%)
    );
  box-shadow: 0 14px 38px color-mix(in oklab, var(--accent) 12%, transparent);
}
body.cockpit.withdrawPage .stepChip[aria-current="step"] .stepDot{
  background: color-mix(in oklab, var(--accent) 14%, var(--surface2) 70%);
  border-color: color-mix(in oklab, var(--accent) 40%, var(--border));
}

body.cockpit.withdrawPage .stepChip.done{
  border-color: color-mix(in oklab, var(--accent) 28%, var(--border));
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 10%, var(--surface2) 90%),
      color-mix(in oklab, var(--surface) 98%, var(--surface2) 2%)
    );
}
body.cockpit.withdrawPage .stepChip.done .stepDot{
  border-color: color-mix(in oklab, var(--accent) 30%, var(--border));
  background: color-mix(in oklab, var(--accent) 12%, var(--surface2) 70%);
}
body.cockpit.withdrawPage .stepChip.done .stepDot .stepNum{opacity:0;}
body.cockpit.withdrawPage .stepChip.done .stepDot::after{content:"✓"; position:absolute; inset:0; display:grid; place-items:center; font-size:14px;}

body.cockpit.withdrawPage .summaryBox{
  padding: 14px;
  border: 1px solid color-mix(in oklab, var(--border) 86%, transparent);
  border-radius: calc(var(--radius-lg) + 6px);
  background:
    linear-gradient(180deg,
      color-mix(in oklab, var(--surface) 90%, transparent),
      color-mix(in oklab, var(--surface2) 72%, transparent)
    );
  box-shadow: var(--shadow-card);
}

@media (max-width: 680px){
  body.cockpit.withdrawPage .checkoutStepper{ flex-wrap:wrap; padding-bottom: 6px; }
  body.cockpit.withdrawPage .checkoutStepper::before,
  body.cockpit.withdrawPage .checkoutStepper::after{ display:none; }
}