/* =====================================================================
   OEM Parts Express Inc. — Stylesheet für die Rechtsseiten
   (Impressum, Datenschutz, Cookie-Einstellungen, Code of Conduct)

   Farb- und Typo-Tokens sind an das Design der Hauptseite angelehnt.
   Die Web Fonts (Officina Sans Std, JetBrains Mono, Noto Sans SC) werden
   nicht hier, sondern im gemeinsamen, cachebaren assets/fonts.css
   geladen (siehe <link> im <head> jeder Rechtsseite) — kein Google-
   Fonts-CDN, kein externer Request.
   ===================================================================== */

:root{
  --bg:        #F7F8FA;
  --bg-alt:    #FFFFFF;
  --panel:     #F1F3F5;
  --accent:    #0098c3;
  --accent-rgb: 0,152,195;
  --ink:       #0c1524;
  --ink-rgb:   12,21,36;
  --line:      rgba(12,21,36,0.10);
  --muted:     rgba(12,21,36,0.62);
  --maxw:      1240px;
  --readw:     820px;
  --mono: 'JetBrains Mono',ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --sans: 'Officina Sans Std','Noto Sans SC',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,
          "PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  font-family:var(--sans);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a{ color:var(--accent); text-decoration:none; }
a:hover{ text-decoration:underline; }

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

/* ---------- Kopfzeile ---------- */
.lg-header{
  position:sticky; top:0; z-index:20;
  background:rgba(247,248,250,0.92);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.lg-header__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:0.9rem 1.5rem;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
}
.lg-brand{ display:flex; align-items:baseline; gap:0.4rem; color:var(--ink); }
.lg-brand:hover{ text-decoration:none; }
.lg-brand__mark{
  font-weight:800; font-size:0.98rem; letter-spacing:0.02em;
  color:var(--accent);
}
.lg-brand__inc{
  font-weight:600; font-size:0.72rem; letter-spacing:0.04em;
  color:var(--muted);
}

/* ---------- Sprachumschalter ---------- */
.lg-lang{ display:flex; gap:0.25rem; }
.lg-lang button{
  font-family:var(--mono);
  font-size:0.7rem; font-weight:500; letter-spacing:0.08em;
  padding:0.35rem 0.6rem;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--bg-alt);
  color:var(--muted);
  cursor:pointer;
  transition:all .18s ease;
}
.lg-lang button:hover{ border-color:rgba(var(--accent-rgb),0.55); color:var(--ink); }
.lg-lang button[aria-current="true"]{
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* ---------- Layout ---------- */
.lg-main{
  max-width:var(--readw);
  margin:0 auto;
  padding:3.25rem 1.5rem 4.5rem;
}
.lg-eyebrow{
  font-family:var(--mono);
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 0.75rem;
}
.lg-main h1{
  font-size:clamp(1.8rem,4vw,2.5rem);
  font-weight:700; letter-spacing:-0.022em; line-height:1.1;
  margin:0 0 0.5rem;
}
.lg-updated{
  font-family:var(--mono); font-size:0.75rem;
  color:var(--muted); margin:0 0 2.5rem;
}
.lg-main h2{
  font-size:clamp(1.15rem,2.4vw,1.4rem);
  font-weight:700; letter-spacing:-0.015em;
  margin:2.75rem 0 0.5rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.lg-main h2:first-of-type{ border-top:0; padding-top:0; margin-top:1.5rem; }
.lg-main h3{
  font-size:1rem; font-weight:700;
  margin:1.75rem 0 0.35rem;
}
.lg-main p{ margin:0 0 1rem; }
.lg-main ul,.lg-main ol{ margin:0 0 1rem; padding-left:1.35rem; }
.lg-main li{ margin:0 0 0.4rem; }
.lg-main strong{ font-weight:700; }
.lg-main small{ color:var(--muted); font-size:0.85rem; }

/* Definitionsblöcke (z. B. Anschrift, Registerangaben) */
.lg-dl{
  margin:0 0 1.5rem;
  border:1px solid var(--line);
  border-radius:0.85rem;
  overflow:hidden;
  background:var(--bg-alt);
}
.lg-dl > div{
  display:grid;
  grid-template-columns:minmax(140px,34%) 1fr;
  gap:0;
}
.lg-dl > div + div{ border-top:1px solid var(--line); }
.lg-dl dt{
  font-family:var(--mono);
  font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--muted);
  padding:0.7rem 0.9rem;
  background:var(--panel);
}
.lg-dl dd{ margin:0; padding:0.7rem 0.9rem; font-size:0.92rem; }
@media (max-width:560px){
  .lg-dl > div{ grid-template-columns:1fr; }
  .lg-dl dt{ padding-bottom:0.15rem; }
}

/* Hinweis-/Warnkasten */
.lg-note{
  border:1px solid rgba(var(--accent-rgb),0.35);
  background:rgba(var(--accent-rgb),0.06);
  border-radius:0.75rem;
  padding:0.9rem 1.1rem;
  margin:0 0 1.5rem;
  font-size:0.9rem;
}
.lg-note strong{ color:var(--accent); }

/* Tabellen (Cookie-Übersicht) */
.lg-table-wrap{ overflow-x:auto; margin:0 0 1.5rem; }
.lg-table{
  width:100%; border-collapse:collapse; font-size:0.85rem;
  border:1px solid var(--line); border-radius:0.6rem;
}
.lg-table th,.lg-table td{
  text-align:left; padding:0.6rem 0.75rem;
  border-bottom:1px solid var(--line); vertical-align:top;
}
.lg-table th{
  font-family:var(--mono); font-size:0.7rem; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--muted); background:var(--panel);
}
.lg-table tr:last-child td{ border-bottom:0; }

/* ---------- Cookie-Einstellungen: Steuerelemente ---------- */
.lg-consent-group{
  border:1px solid var(--line);
  border-radius:0.85rem;
  background:var(--bg-alt);
  padding:1.1rem 1.2rem;
  margin:0 0 1rem;
}
.lg-consent-group__head{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
}
.lg-consent-group h3{ margin:0 0 0.25rem; }
.lg-consent-group p{ margin:0.4rem 0 0; font-size:0.88rem; color:var(--muted); }

.lg-switch{ position:relative; flex-shrink:0; width:46px; height:26px; }
.lg-switch input{ position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer; }
.lg-switch span{
  position:absolute; inset:0; border-radius:999px;
  background:rgba(var(--ink-rgb),0.18); transition:background .18s ease;
}
.lg-switch span::after{
  content:""; position:absolute; top:3px; left:3px;
  width:20px; height:20px; border-radius:50%;
  background:#fff; transition:transform .18s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.25);
}
.lg-switch input:checked + span{ background:var(--accent); }
.lg-switch input:checked + span::after{ transform:translateX(20px); }
.lg-switch input:disabled + span{ opacity:0.55; cursor:not-allowed; }

.lg-btnrow{ display:flex; flex-wrap:wrap; gap:0.6rem; margin:1.5rem 0 0; }
.lg-btn{
  font-family:var(--mono); font-size:0.72rem; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  padding:0.7rem 1.15rem; border-radius:999px;
  border:1.5px solid var(--accent); cursor:pointer;
  background:transparent; color:var(--accent);
  transition:all .18s ease;
}
.lg-btn:hover{ background:rgba(var(--accent-rgb),0.08); }
.lg-btn--solid{ background:var(--accent); color:#fff; }
.lg-btn--solid:hover{ background:#0083ab; }

.lg-consent-status{
  font-family:var(--mono); font-size:0.75rem; color:var(--muted);
  margin:1rem 0 0;
}

/* ---------- Fußzeile ---------- */
.lg-footer{
  border-top:1px solid var(--line);
  background:var(--panel);
}
.lg-footer__inner{
  max-width:var(--maxw); margin:0 auto;
  padding:2.5rem 1.5rem;
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
}
.lg-footer nav{ display:flex; flex-wrap:wrap; gap:0.4rem 1.25rem; }
.lg-footer nav a{ color:var(--muted); font-size:0.85rem; }
.lg-footer nav a:hover{ color:var(--ink); }
.lg-footer__copy{ color:var(--muted); font-size:0.78rem; margin:0; }

/* ---------- Sprachsichtbarkeit ---------- */
.lang-block{ display:none; }
.lang-block.is-active{ display:block; }

/* ---------- Cookie-Consent-Box (global, via consent.js) ---------- */
#opex-consent-banner{
  position:fixed; right:1.25rem; bottom:1.25rem; left:auto; z-index:2147483000;
  width:min(360px, calc(100vw - 2rem));
  background:var(--bg-alt);
  border:1px solid var(--line);
  border-radius:1rem;
  box-shadow:0 24px 60px -16px rgba(12,21,36,0.32), 0 6px 20px -6px rgba(12,21,36,0.14);
  padding:1.25rem 1.35rem;
  animation: opex-cc-in .28s cubic-bezier(.2,.8,.2,1);
}
@keyframes opex-cc-in{
  from{ opacity:0; transform:translateY(14px) scale(.98); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
#opex-consent-banner .opex-cc-inner{
  display:flex; flex-direction:column; gap:1rem;
}
#opex-consent-banner p{
  margin:0; font-size:0.83rem; color:var(--ink);
  font-family:var(--sans); line-height:1.55;
}
#opex-consent-banner a{ color:var(--accent); }
#opex-consent-banner .opex-cc-actions{ display:flex; flex-direction:column; gap:0.5rem; }
#opex-consent-banner .opex-cc-secondary{ display:flex; gap:0.5rem; }
#opex-consent-banner button{
  font-family:var(--mono); font-size:0.68rem; font-weight:600;
  letter-spacing:0.08em; text-transform:uppercase;
  padding:0.65rem 1rem; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--accent); background:transparent; color:var(--accent);
  transition:all .18s ease; width:100%;
}
#opex-consent-banner .opex-cc-secondary button{ flex:1 1 0; padding:0.55rem 0.5rem; }
#opex-consent-banner button:hover{ background:rgba(var(--accent-rgb),0.08); }
#opex-consent-banner button.opex-cc-accept{ background:var(--accent); color:#fff; }
#opex-consent-banner button.opex-cc-accept:hover{ background:#0083ab; }
@media (max-width:480px){
  #opex-consent-banner{ right:0.75rem; bottom:0.75rem; width:min(340px, calc(100vw - 1.5rem)); padding:1.1rem; }
}
@media (prefers-reduced-motion: reduce){
  #opex-consent-banner{ animation:none; }
}