*{ box-sizing:border-box; margin:0; padding:0; }
  html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; scroll-padding-top:140px; }
  body{ background:#F4F4F6; color:#B6B6BB; font-family:'Archivo',system-ui,sans-serif; line-height:1.7; overflow-x:clip; }
  ::selection{ background:#CA2B2F; color:#fff; }
  a{ color:#E06A6E; text-decoration:none; }
  a:hover{ color:#fff; }

  /* hero */
  .hero{ position:relative; overflow:hidden; padding:150px clamp(20px,5vw,64px) 64px; border-bottom:1px solid rgba(255,255,255,.08); background:#0B0B0D; }
  .hero .shard{ position:absolute; top:-22%; right:-7%; width:min(82vw,900px); aspect-ratio:4800/3330; opacity:.52; z-index:1; pointer-events:none; -webkit-mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); mask-image:radial-gradient(120% 130% at 84% 26%, #000 32%, rgba(0,0,0,0) 72%); }
  .hero .shard img{ width:100%; height:100%; object-fit:contain; object-position:top right; filter:saturate(1.08); }
  .hero-wash{ position:absolute; inset:0; background:linear-gradient(115deg, rgba(202,43,47,.10) 0%, rgba(110,39,51,.22) 52%, rgba(11,11,13,0) 100%); pointer-events:none; }
  .hero-glow{ position:absolute; inset:0; background:radial-gradient(120% 105% at 82% 20%, rgba(202,43,47,.20), rgba(11,11,13,0) 58%); pointer-events:none; }
  .hero-fade{ position:absolute; inset:0; z-index:2; background:linear-gradient(90deg, rgba(11,11,13,.92) 0%, rgba(11,11,13,.58) 40%, rgba(11,11,13,.08) 100%); pointer-events:none; }
  .hero-inner{ position:relative; z-index:3; max-width:1180px; margin:0 auto; }
  .hero-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.22em; color:#E06A6E; text-transform:uppercase; margin-bottom:20px; }
  .hero h1{ font-family:'Ethnocentric','Archivo',sans-serif; font-weight:400; font-size:clamp(40px,8vw,88px); line-height:1.05; letter-spacing:0; color:#fff; text-transform:uppercase; }
  .hero h1.h1-long{ font-size:clamp(30px,5.6vw,64px); }   /* längere Titel (Rechtliches für Geschäftskunden) */
  .hero p{ margin-top:24px; font-size:clamp(16px,2vw,19px); color:#A8A8AC; max-width:620px; line-height:1.6; }

  /* layout */
  .layout{ max-width:1308px; margin:0 auto; padding:clamp(40px,5vw,72px) clamp(20px,5vw,64px) 80px; display:grid; grid-template-columns:200px 1fr; gap:clamp(28px,4vw,72px); align-items:start; }
  .sidenav{ position:sticky; top:140px; display:flex; flex-direction:column; gap:7px; padding-left:30px; }
  .navscroller, .chips{ display:contents; }
  .navlink{ display:flex; align-items:center; gap:13px; padding:13px 16px; border-radius:12px; font-size:14.5px; font-weight:600; color:#C8C8CC; border:1px solid transparent; transition:background .2s, color .2s, border-color .2s; }
  .navlink:hover{ background:rgba(255,255,255,.04); color:#fff; }
  .navlink.active{ background:rgba(202,43,47,.10); border-color:rgba(202,43,47,.32); color:#fff; }
  .navnum{ font-family:'JetBrains Mono',monospace; font-size:11px; color:#CA2B2F; }

  /* Sidenav-Timeline — roter Faden */
  .rail{ position:absolute; left:14px; top:0; bottom:0; width:16px; pointer-events:none; z-index:1; }
  .rail-track{ position:absolute; left:0; width:2px; transform:translateX(-50%); background:rgba(255,255,255,.11); border-radius:2px; }
  .rail-fill{ position:absolute; left:0; width:2px; height:0; transform:translateX(-50%); background:linear-gradient(180deg,#CA2B2F,#E0454A); box-shadow:0 0 8px rgba(202,43,47,.5); border-radius:2px; transition:height .35s cubic-bezier(.22,.61,.36,1); }
  .rail-node{ position:absolute; left:0; width:12px; height:12px; border-radius:50%; transform:translate(-50%,-50%); background:#0B0B0D; border:2px solid rgba(255,255,255,.26); transition:background .3s ease, border-color .3s ease, box-shadow .3s ease; z-index:2; }
  .rail-node.done{ background:#CA2B2F; border-color:#CA2B2F; }
  .rail-node.active{ background:#E0454A; border-color:#E0454A; box-shadow:0 0 0 4px rgba(202,43,47,.14); animation:nodepulse 2s ease-in-out infinite; }
  @keyframes nodepulse{ 0%,100%{ box-shadow:0 0 0 4px rgba(202,43,47,.14), 0 0 8px rgba(224,69,74,.45); } 50%{ box-shadow:0 0 0 7px rgba(202,43,47,.08), 0 0 14px rgba(224,69,74,.75); } }

  .content{ min-width:0; }
  .doc{ padding-bottom:clamp(48px,7vw,80px); margin-bottom:clamp(40px,6vw,64px); border-bottom:1px solid rgba(255,255,255,.08); }
  .doc:last-child{ border-bottom:0; }
  .doc-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.18em; color:#CA2B2F; text-transform:uppercase; margin-bottom:24px; }
  .doc-body{ font-size:15px; color:#AEAEB2; line-height:1.78; overflow-wrap:break-word; word-break:break-word; }
  .doc-body a{ overflow-wrap:break-word; }

  /* Haendlerbund source classes */
  .Haendlerbund_Rechtstext_Titel{ display:block; font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(24px,3vw,30px); line-height:1.12; letter-spacing:-0.01em; color:#fff; margin:0 0 6px; }
  .Haendlerbund_Rechtstext_Untertitel{ display:inline-block; font-weight:700; font-size:16.5px; color:#fff; margin:10px 0 2px; }
  .Haendlerbund_Rechtstext_Paragraph{ display:block; }
  .Haendlerbund_Rechtstext_Absatz{ color:#AEAEB2; }
  .doc-body strong{ color:#EDEDED; font-weight:600; }
  .doc-body h1,.doc-body h2,.doc-body h3{ color:#fff; font-family:'Archivo',sans-serif; line-height:1.2; margin:26px 0 10px; }
  /* Eigene Absätze/Links (business_rechtliches.html: Hinweis, Platzhalter, Verweise) */
  .doc-p{ margin:0 0 16px; }
  .doc-p:last-child{ margin-bottom:0; }
  .doc-links{ display:flex; flex-wrap:wrap; gap:10px; margin-top:22px; }
  .doc-link{ display:inline-flex; align-items:center; gap:12px; padding:13px 18px; border-radius:12px; font-size:14.5px; font-weight:600; color:#C8C8CC; border:1px solid rgba(255,255,255,.14); transition:background .2s, color .2s, border-color .2s; }
  .doc-link:hover{ background:rgba(202,43,47,.10); border-color:rgba(202,43,47,.32); color:#fff; }
  .doc-download{ display:inline-flex; align-items:center; gap:10px; font-weight:600; }
  .doc-download-row{ margin:0 0 26px; }
  /* Vertriebsbedingungen AID-VB (eigenes HTML, gleiche Typografie wie die Händlerbund-Texte) */
  .vb h1{ font-family:'Archivo',sans-serif; font-weight:800; font-size:clamp(24px,3vw,30px); line-height:1.12; letter-spacing:-0.01em; color:#fff; margin:0 0 6px; }
  .vb .sub{ font-weight:700; font-size:16.5px; color:#fff; margin:0 0 6px; }
  .vb .note{ font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:.04em; color:#7A7A7E; margin:0 0 28px; }
  .vb section{ margin-top:26px; }
  .vb h2{ font-size:16.5px; font-weight:700; color:#fff; margin:0 0 12px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1); }
  .vb .red{ color:#CA2B2F; margin-right:6px; }
  .vb p.num{ display:grid; grid-template-columns:28px 1fr; gap:8px; margin:0 0 12px; }
  .vb .n{ font-weight:700; color:#EDEDED; }

  /* footer */

  @media (max-width:820px){
    html{ scroll-padding-top:150px; }
    .hero{ min-height:100svh; padding-top:96px; padding-bottom:44px; display:flex; flex-direction:column; justify-content:center; }
    .layout{ display:block; padding-top:0; padding-bottom:72px; }
    .content{ margin-top:30px; }
    .sidenav{ position:sticky; top:74px; z-index:50; flex-direction:column; gap:0; padding:19px 0 18px; overflow:visible; margin:0 calc(-1*clamp(20px,5vw,64px)); background:rgba(11,11,13,.96); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.08); }
    .navscroller{ display:flex; position:relative; flex-direction:column; gap:9px; overflow-x:auto; overflow-y:hidden; padding:0 clamp(20px,5vw,64px); -webkit-overflow-scrolling:touch; scrollbar-width:none; }
    .navscroller::-webkit-scrollbar{ display:none; }
    .chips{ display:flex; position:relative; flex-direction:row; gap:8px; width:max-content; }
    .navlink{ white-space:nowrap; flex:0 0 auto; padding:8px 13px; }
    .rail{ display:block; position:relative; left:auto; right:auto; top:auto; bottom:auto; width:max-content; min-width:100%; height:14px; margin:0; pointer-events:none; }
    .rail-track{ top:50%; height:2px; transform:translateY(-50%); }
    .rail-fill{ top:50%; height:2px; transform:translateY(-50%); box-shadow:0 0 8px rgba(202,43,47,.5); }
    .rail-node{ top:50%; width:11px; height:11px; }
  }