/* ==========================================================================
   Fahrzeugöffnung24 — legal.css (Impressum / Datenschutz, prefix leg-)
   Self-contained fallback tokens (legal pages may load before main.css vars);
   also compatible with main.css tokens. Design: fo- graphite + electric blue
   ========================================================================== */
.page-legal{
  --lg-ink:#14161b;--lg-ink2:#2a2f3a;--lg-muted:#5b6474;--lg-line:#e2e5ec;
  --lg-paper:#eef1f6;--lg-card:#ffffff;--lg-dark:#14161b;--lg-accent:#2b57ff;
  --lg-accent-weak:#e7edff;--lg-accent-ink:#12245f;
  --lg-disp:'Archivo','Hanken Grotesk',system-ui,sans-serif;
  --lg-body:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',sans-serif;
  background:var(--lg-paper);font-family:var(--lg-body);color:var(--lg-ink);
}

/* ---------- Hero (dark band) ---------- */
.leg-hero{background:var(--lg-dark);color:#fff;padding:52px 0 42px;position:relative;overflow:hidden}
.leg-hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 85% 0%,rgba(43,87,255,.20),transparent 60%)}
.leg-hero__container{max-width:960px;margin:0 auto;padding:0 28px;position:relative;z-index:1}
.leg-hero__breadcrumb{display:flex;align-items:center;gap:9px;font-size:13.5px;color:#9aa2b1;margin-bottom:18px}
.leg-hero__breadcrumb a{color:#9aa2b1}
.leg-hero__breadcrumb a:hover{color:#fff}
.leg-hero__breadcrumb-sep{opacity:.5}
.leg-hero__title{font-family:var(--lg-disp);font-weight:800;font-stretch:112%;letter-spacing:-.02em;
  font-size:clamp(28px,4.4vw,44px);color:#fff;margin-bottom:10px}
.leg-hero__subtitle{color:#9aa2b1;font-size:16.5px;max-width:680px}

/* ---------- Main ---------- */
.leg-main{padding:56px 0 80px}
.leg-main__container{max-width:960px;margin:0 auto;padding:0 28px}
.leg-content{display:flex;flex-direction:column;gap:40px}
.leg-section__title{font-family:var(--lg-disp);font-weight:800;font-stretch:108%;letter-spacing:-.01em;
  font-size:clamp(21px,2.6vw,28px);color:var(--lg-ink);margin-bottom:18px;padding-bottom:12px;border-bottom:2px solid var(--lg-line)}

.leg-card{background:var(--lg-card);border:1px solid var(--lg-line);border-radius:16px;padding:24px 26px;margin-bottom:16px}
.leg-card:last-child{margin-bottom:0}
.leg-card__title{font-family:var(--lg-disp);font-weight:700;font-stretch:104%;font-size:18px;color:var(--lg-ink);margin-bottom:12px}
.leg-card__body{color:var(--lg-ink2);font-size:15.5px;line-height:1.7}
.leg-card__body p{margin-bottom:12px}
.leg-card__body p:last-child{margin-bottom:0}
.leg-card__body strong{color:var(--lg-ink)}

/* contact rows */
.leg-contact{display:flex;flex-direction:column;gap:12px}
.leg-contact__item{display:flex;gap:10px;flex-wrap:wrap}
.leg-contact__label{font-weight:700;color:var(--lg-ink);min-width:120px}
.leg-contact__value{color:var(--lg-ink2)}
a.leg-contact__value{color:var(--lg-accent)}
a.leg-contact__value:hover{text-decoration:underline}

/* lists */
.leg-list{display:flex;flex-direction:column;gap:9px;margin-top:6px}
.leg-list li{position:relative;padding-left:24px;color:var(--lg-ink2);font-size:15.5px;line-height:1.6}
.leg-list li::before{content:"";position:absolute;left:2px;top:9px;width:8px;height:8px;border-radius:2px;background:var(--lg-accent)}
.leg-list li strong{color:var(--lg-ink)}
.leg-list--check li::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--lg-accent);top:7px}
.leg-list--numbered{counter-reset:lg}
.leg-list--numbered li{padding-left:34px;counter-increment:lg}
.leg-list--numbered li::before{content:counter(lg);width:22px;height:22px;border-radius:6px;background:var(--lg-accent);color:#fff;
  font-family:var(--lg-disp);font-weight:700;font-size:12px;display:grid;place-items:center;top:2px;left:0}
.leg-toc{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 20px}
.leg-toc li{list-style:none}

/* highlight boxes */
.leg-highlight{background:var(--lg-dark);color:#fff;border-radius:16px;padding:24px 26px;margin-bottom:16px}
.leg-highlight__title{font-family:var(--lg-disp);font-weight:800;font-stretch:106%;font-size:18px;color:#fff;margin-bottom:10px}
.leg-highlight p{color:#c7ccd6;font-size:15.5px;line-height:1.7;margin-bottom:8px}
.leg-highlight p:last-child{margin-bottom:0}
.leg-highlight strong{color:#fff}
.leg-highlight a{color:#7ea0ff}
.leg-highlight--info{background:var(--lg-accent-weak);color:var(--lg-accent-ink);border:1px solid #c7d4ff}
.leg-highlight--info .leg-highlight__title{color:var(--lg-accent-ink)}
.leg-highlight--info p{color:#2a3d7a}
.leg-highlight--info strong{color:var(--lg-accent-ink)}

.leg-link{color:var(--lg-accent);font-weight:600}
.leg-link:hover{text-decoration:underline}
.leg-note{margin-top:12px;font-size:13.5px;color:var(--lg-muted);font-style:italic}
.leg-footer-note{margin-top:16px;padding:18px 22px;background:var(--lg-card);border:1px dashed var(--lg-line);border-radius:12px;
  font-size:14px;color:var(--lg-muted)}
.leg-footer-note strong{color:var(--lg-ink)}

/* ---------- Responsive ---------- */
@media (max-width:768px){
  .leg-hero{padding:40px 0 34px}
  .leg-hero__container,.leg-main__container{padding:0 20px}
  .leg-main{padding:44px 0 60px}
  .leg-content{gap:32px}
  .leg-toc{grid-template-columns:1fr}
  .leg-card{padding:20px}
}
@media (max-width:480px){
  .leg-hero__container,.leg-main__container{padding:0 16px}
  .leg-contact__label{min-width:0;width:100%}
}